css样式代码大全 css样式大全(整理版)
大家好,今天来为大家分享css样式代码大全的一些知识点,和css样式大全(整理版)的问题解析,大家要是都明白,那么可以忽略,如果不太清楚的话可以看看本篇文章,相信很大概率可以解决您的问题,接下来我们就一起来看看吧!
CSS语言大全
CSS语言大全,如下:
字体属性:(font)
大小{font-size: x-large;}(特大) xx-small;(极小)一般中文用不到,只要用数值就可以,单位:PX、PD
样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高{line-height: normal;}(正常)单位:PX、PD、EM
粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体{font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体:(font-family)
"Courier New", Courier, monospace,"Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性:(background)
色彩{background-color:#FFFFFF;}
图片{background-image: url();}
重复{background-repeat: no-repeat;}
滚动{background-attachment: fixed;}(固定) scroll;(滚动)
位置{background-position: left;}(水平) top(垂直);
简写方法{background:#000 url(..) repeat fixed left top;}/*简写·这个在阅读代码中经常出现,要认真的研究*/
区块属性:(Block)/*这个属性第一次认识,要多多研究*/
字间距{letter-spacing: normal;}数值/*这个属性似乎有用,多实践下*/
对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进{text-indent:数值px;}
垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal;数值
空格white-space: pre;(保留) nowrap;(不换行)
显示{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)/*display属性的了解很模糊*/
方框属性:(Box)
width:; height:; float:; clear:both; margin:; padding:;顺序:上右下左
边框属性:(Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:;边框宽度
border-color:#;
简写方法border:width style color;/*简写*/
列表属性:(List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性:(Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto)(裁切)
css属性代码大全
一 CSS文字属性:
color:#999999;/*文字颜色*/
font-family:宋体,sans-serif;/*文字字体*/
font-size: 9pt;/*文字大小*/
font-style:itelic;/*文字斜体*/
font-variant:small-caps;/*小字体*/
letter-spacing: 1pt;/*字间距离*/
line-height: 200%;/*设置行高*/
font-weight:bold;/*文字粗体*/
vertical-align:sub;/*下标字*/
vertical-align:super;/*上标字*/
text-decoration:line-through;/*加删除线*/
text-decoration: overline;/*加顶线*/
text-decoration:underline;/*加下划线*/
text-decoration:none;/*删除链接下划线*/
text-transform: capitalize;/*首字大写*/
text-transform: uppercase;/*英文大写*/
text-transform: lowercase;/*英文小写*/
text-align:right;/*文字右对齐*/
text-align:left;/*文字左对齐*/
text-align:center;/*文字居中对齐*/
text-align:justify;/*文字分散对齐*/
vertical-align属性
vertical-align:top;/*垂直向上对齐*/
vertical-align:bottom;/*垂直向下对齐*/
vertical-align:middle;/*垂直居中对齐*/
vertical-align:text-top;/*文字垂直向上对齐*/
vertical-align:text-bottom;/*文字垂直向下对齐*/
二、CSS边框空白
padding-top:10px;/*上边框留空白*/
padding-right:10px;/*右边框留空白*/
padding-bottom:10px;/*下边框留空白*/
padding-left:10px;/*左边框留空白
三、CSS符号属性:
list-style-type:none;/*不编号*/
list-style-type:decimal;/*阿拉伯数字*/
list-style-type:lower-roman;/*小写罗马数字*/
list-style-type:upper-roman;/*大写罗马数字*/
list-style-type:lower-alpha;/*小写英文字母*/
list-style-type:upper-alpha;/*大写英文字母*/
list-style-type:disc;/*实心圆形符号*/
list-style-type:circle;/*空心圆形符号*/
list-style-type:square;/*实心方形符号*/
list-style-image:url(/dot.gif);/*图片式符号*/
list-style-position: outside;/*凸排*/
list-style-position:inside;/*缩进*/
四、CSS背景样式:
background-color:#F5E2EC;/*背景颜色*/
background:transparent;/*透视背景*/
background-image: url(/image/bg.gif);/*背景图片*/
background-attachment: fixed;/*浮水印固定背景*/
background-repeat: repeat;/*重复排列-网页默认*/
background-repeat: no-repeat;/*不重复排列*/
background-repeat: repeat-x;/*在x轴重复排列*/
background-repeat: repeat-y;/*在y轴重复排列*/
指定背景位置
background-position: 90% 90%;/*背景图片x与y轴的位置*/
background-position: top;/*向上对齐*/
background-position: buttom;/*向下对齐*/
background-position: left;/*向左对齐*/
background-position: right;/*向右对齐*/
background-position: center;/*居中对齐*/
五、CSS连接属性:
a/*所有超链接*/
a:link/*超链接文字格式*/
a:visited/*浏览过的链接文字格式*/
a:active/*按下链接的格式*/
a:hover/*鼠标转到链接*/
鼠标光标样式:
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p{cursor:url("光标文件名.cur"),text;}
六、CSS框线一览表:
border-top: 1px solid#6699cc;/*上框线*/
border-bottom: 1px solid#6699cc;/*下框线*/
border-left: 1px solid#6699cc;/*左框线*/
border-right: 1px solid#6699cc;/*右框线*/
以上是建议书写方式,但也可以使用常规的方式如下:
border-top-color:#369/*设置上框线top颜色*/
border-top-width:1px/*设置上框线top宽度*/
border-top-style: solid/*设置上框线top样式*/
其他框线样式
solid/*实线框*/
dotted/*虚线框*/
double/*双线框*/
groove/*立体内凸框*/
ridge/*立体浮雕框*/
inset/*凹框*/
outset/*凸框*/
七、CSS表单运用:
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单选项1选项2
八、CSS边界样式:
margin-top:10px;/*上边界*/
margin-right:10px;/*右边界值*/
margin-bottom:10px;/*下边界值*/
margin-left:10px;/*左边界值*/
CSS属性:字体样式(Font Style)
序号中文说明标记语法
1字体样式{font:font-style font-variant font-weight font-size font-family}
2字体类型{font-family:"字体1","字体2","字体3",...}
3字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4字体风格{font-style:inherit|italic|normal|oblique}
5字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}
6字体颜色{color:数值;}
7阴影颜色{text-shadow:16位色值}
8字体行高{line-height:数值|inherit|normal;}
9字间距{letter-spacing:数值|inherit|normal}
10单词间距{word-spacing:数值|inherit|normal}
11字体变形{font-variant:inherit|normal|small-cps}
12英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}
13字体变形{font-size-adjust:inherit|none}
14字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(Text Style)
序号中文说明标记语法
1行间距{line-height:数值|inherit|normal;}
2文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}
3段首空格{text-indent:数值|inherit}
4水平对齐{text-align:left|right|center|justify}
5垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6书写方式{writing-mode:lr-tb|tb-rl}
背景样式
序号中文说明标记语法
1背景颜色{background-color:数值}
2背景图片{background-image: url(URL)|none}
3背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4背景固定{background-attachment:fixed|scroll}
5背景定位{background-position:数值|top|bottom|left|right|center}
6背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Style)
序号中文说明标记语法
1边界留白{margin:margin-top margin-right margin-bottom margin-left}
2补白{padding:padding-top padding-right padding-bottom padding-left}
3边框宽度{border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值: thin|medium|thick|数值
4边框颜色{border-color:数值数值数值数值}数值:分别代表top、right、bottom、left颜色值
5边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6边框{border:border-width border-style color}
上边框{border-top:border-top-width border-style color}
右边框{border-right:border-right-width border-style color}
下边框{border-bottom:border-bottom-width border-style color}
左边框{border-left:border-left-width border-style color}
7宽度{width:长度|百分比| auto}
8高度{height:数值|auto}
9漂浮{float:left|right|none}
10清除{clear:none|left|right|both}
分类列表
序号中文说明标记语法
1控制显示{display:none|block|inline|list-item}
2控制空白{white-space:normal|pre|nowarp}
3符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4图形列表{list-style-image:URL}
5位置列表{list-style-position:inside|outside}
6目录列表{list-style:目录样式类型|目录样式位置|url}
7鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
CSS颜色代码大全视图参照表
CSS颜色代码大全视图参照表
以下是一个详细的CSS颜色代码参照表,包含了各种常见颜色的十六进制(Hex)代码以及对应的颜色名称:
白色与灰色系
#FFFFFF:白色(White)#DDDDDD:浅灰色(Light Gray)#AAAAAA:中灰色(Medium Gray)#888888:深灰色(Dark Gray)#666666:更深灰色#444444:非常深灰色#000000:黑色(Black)粉色系
#FFB7DD:浅粉红(Light Pink)#FF88C2:热粉红(Hot Pink)#FF44AA:亮粉红(Bright Pink)#FF0088:粉红(Pink)#C10066:深粉红(Deep Pink)#A20055:暗粉红(Dark Pink)#8C0044:非常暗粉红红色系
#FFCCCC:浅红色(Light Red)#FF8888:珊瑚色(Coral)#FF3333:番茄色(Tomato)#FF0000:红色(Red)#CC0000:暗红色(Dark Red)#AA0000:非常暗红色#880000:深红色(Maroon)橙色系
#FFC8B4:浅橙色(Light Salmon)#FFA488:橙色(Orange)#FF7744:亮橙色(Bright Orange)#FF5511:暗橙色(Dark Orange)#E63F00:非常暗橙色#C63300:深橙色#A42D00:非常深橙色黄色与金色系
#FFDDAA:浅黄色(Light Yellow)
#FFBB66:金色(Gold)
#FFAA33:亮黄色(Bright Yellow)
#FF8800:黄色(Yellow)
#EE7700:暗黄色(Dark Yellow)
#CC6600:非常暗黄色
#BB5500:深黄色
#FFCC22:金色(另一种表示)
#FFEE99:浅金色(Light Gold)
#FFDD55:亮金色(Bright Gold)
#FFB3FF:浅金色带粉(Pinkish Gold)
#FFB886:金色(另一种表示,接近#FFBB66)
#B8860B:暗金色(Dark Gold)
#DAA520:金色(Goldenrod)
绿色系
#FFEE99:浅黄绿色(Light Yellow Green)
#FFDD55:亮黄绿色(Bright Yellow Green)
#FFCC22:黄绿色(Yellow Green)
#90EE90:亮绿色(Light Green)
#98F898:浅绿色(Pale Green)
#7CFC00:草坪绿(Lawn Green)
#32CD32:菜绿(Lime Green)
#00FF00:绿色(Green)
#00FF7F:春绿(Spring Green)
#00FA9A:中春绿(Medium Spring Green)
#7FFF00:查特绿(Chartreuse)
#ADFF2F:黄绿色(Yellow Green,另一种表示)
#228B22:森林绿(Forest Green)
#2E8B57:海绿(Sea Green)
#008080:蓝绿色(Teal)
#3CB371:中海绿(Medium Sea Green)
#8FBC8F:海绿(另一种表示,接近#2E8B57但更深)
#20B2AA:浅海绿(Light Sea Green)
#66CDAA:水绿(Medium Aquamarine)
#48D1CC:中海蓝绿(Medium Turquoise)
#00CED1:蓝绿(Turquoise)
蓝色系
#87CEEB:天蓝(Sky Blue)
#87CEFA:浅天蓝(Light Sky Blue)
#ADD8E6:亮蓝(Light Blue)
#B0C4DE:钢蓝(Steel Blue)
#4682B4:钢蓝(另一种表示,更深)
#1E90FF:道奇蓝(Dodger Blue)
#6495ED:矢车菊蓝(Cornflower Blue)
#00BFFF:深天蓝(Deep Sky Blue)
#0000FF:蓝色(Blue)
#0000CD:中蓝(Medium Blue)
#4169E1:皇家蓝(Royal Blue)
#191970:午夜蓝(Midnight Blue)
#00008B:深蓝(Dark Blue)
#000080:海军蓝(Navy)
#483D8B:暗石板蓝(Dark Slate Blue)
#5F9EA0:军蓝(Cadet Blue)
#008B8B:暗青色(Dark Cyan)
#B0E0E6:粉蓝(Powder Blue)
#AFEEEE:浅粉蓝(Pale Turquoise)
#E0FFFF:浅青色(Light Cyan)
#F0FFFF:青色(Cyan/Aqua)
紫色系
#800080:紫色(Purple)
#9370DB:中紫色(Medium Purple)
#BA55D3:中兰花紫(Medium Orchid)
#EE82EE:紫罗兰(Violet)
#DA70D6:兰花紫(Orchid)
#D8BFD8:蓟色(Thistle)
#E6E6FA:薰衣草紫(Lavender Blush)
#800000:栗色(Maroon,与#800080的紫色相近但偏红)
#8B008B:暗洋红(Dark Magenta)
#9400D3:暗紫罗兰(Dark Violet)
#4B0082:靛蓝(Indigo)
#8A2BE2:蓝紫罗兰(Blue Violet)
#7B68EE:中石板蓝(Medium Slate Blue)
#6A5ACD:石板蓝(Slate Blue)
其他颜色
#DEB887:浅棕色(Burlywood)
#F5DEB3:小麦色(Wheat)
#FFE4B5:浅黄褐色(Moccasin)
#FFDEAD:桃色(Navajo White)
#FFDAB9:浅桃色(Peachpuff)
#FFE4C4:浅黄褐色(Bisque)
#FAEBD7:古董白(Antique White)
#FFEFD5:番木瓜色(Papaya Whip)
#FFF8DC:玉米丝色(Cornsilk)
#FDF5E6:老花色(Old Lace)
#FAF0E6:亚麻色(Linen)
#FFF5EE:贝壳色(Seashell)
#FFFAFA:雪花色(Snow)
#FFFAF0:花白色(Floral White)
#FFFFF0:象牙白(Ivory)
#F0FFF0:淡绿色(Honeydew)
#F0F8FF:爱丽丝蓝(Alice Blue)
#F5F5DC:米色(Beige)
#FFFACD:柠檬绸色(Lemon Chiffon)
#FAFAD2:浅金黄色(Light Goldenrodyellow)
#D2B48C:棕色(Tan)
#A9A9A9:深灰色(Dark Gray,另一种表示)
#C0C0C0:银色(Silver)
#D3D3D3:浅
css 添加板块背景图片
跟我一起玩百度空间CSS教程+090+(从"零"开始学玩百度空间)
谭诚工作室:
1.让你看懂css各个参数
2.百度空间CSS使用说明
3.怎样编写CSS的!
4.CSS代码解密
5.一个CSS的漏洞
6.增加自定义模块功能
7.更换主体及文章的背景
8.透明flash代码
9.百度空间十大宝藏
10.制作个性化的标题栏
11.看到更多的百度空间
12.百度空间的8个优缺点
13.专栏分割线的代码修改
14.添加自己的LOGO图片
15.宣传百度空间的方法
16.添加多首背景音乐
17.设置透明背景图
18.更改空间的鼠标样式
19.在空间里加入滚动条
20.透明的背景音乐的播放器
21.透明个性化滚动条
22.给链接添加背景色效果代码
23.显示"点击给你发消息"怎么在空间做!
24.去掉文章题目下划线
25.常用插入图片位置的代码
26.如何隐藏播放器而不影响音乐播放
27.如何有字体阴影
28.自制闪字空间名称
29.解决回车换两行的问题
30.调整一下行距
31.让空间拥有精美flash背景
32.让空间自动弹出对话框!
33.修改blog显示的文字颜色大小
34.如何让你的浏览器滚动条变色
35.为评论和链接加上图片
36.如何在"其它"下面加上图片
37.百度空间的名称如何用艺术字?
38.百度空间文字发光的方法
39.文字快速插链接
40.空间模块巧移动
41.个性化你的IP显示,自定义颜色
42.全透明
43.空间背景半透明
44.如何在百度空间的文章标题周围加花边图案?
45.关于百度空间照片大小限制的问题!!!
46.如何在百度空间发表文章时插入FLESH动画?
47.怎样换百度空间的背景
48.做分割线的方法
49.在百度空间里面添加自己的特效
50.在文章中快速插入图片
51.添加计数器的两种方法
52.如何在空间顶部加入图片
53.发表评论框的图片
54.改变空间主页名称和简介的字体大小
55.给超链接添加按钮效果
56.如何给评论框添加背景
57.Iframe用法的详细讲解
58.背景图片素材01
59.图片素材20060929
60.我的自定义设计
61.CSS鼠标样式大全
62.跟我一起玩百度空间的音乐和视频+
63.为<好友列表>增加一个滚动条
64.空间模块巧移动+文字快速插链接
65.怎么去掉百度空间里模块的框框!
66.基本颜色代码+
67.在你的空间中加入幽默元素..
68.百度空间吧[精品]贴+
69.如何在博客上---中--下加入图片(时钟)
72.教你10个你未必知道的CSS技巧!
73.用CSS进行百度空间样式设计!
74.百度空间自动友情链接
75.一起玩百度空间帮助
76.一起玩百度空间榜单
77.点对点宣传百度空间
78.百度空间常见27+问题
79.怎样让百度、Google搜到你的博客
80.如何加上一个个性时间网页上?
81.教你怎样让背景自动更新,包括头背景
82.在 CSS中关于字体处理效果的思考
83.如何置顶文章及美化自定意模块!
84.如何美化页眉部分
85.更换背景及滚动轴颜色和空间半透代码
86.如何设置标题.简介及文章字体为光晕字
87.用CSS来控制网页背景
88.CSS产生的特殊效果
89.用Css控制IE5.5浏览器中滚动条
90.css语法(百度空间)
好了,文章到这里就结束啦,如果本次分享的css样式代码大全和css样式大全(整理版)问题对您有所帮助,还望关注下本站哦!