样式{font-style: oblique;}(斜体) 斜体；(斜体) 正常；(正常)
线高{line-height: normal;}（正常）单位：PX、PD、EM
粗细{font-weight: 粗体；}（粗体）较轻； （薄）正常； （普通的）
变体{font-variant:小型大写字母；}（小写大写字母）正常； （普通的）
{text-transform: Capitalize;}（首字母大写）大写；（大写）小写；（小写）无；（无）
修改{text-decoration: underline;}（下划线）上划线； （上划线）直通； （删除线）眨眼； （闪烁）
常用字体：（font-family）
“Courier New”、Courier、等宽字体、“Times New Roman”、Times、衬线体、Arial、Helvetica、无衬线体、Verdana
背景属性：（背景）
颜色{background-color: #FFFFFF;}
图片{background-image: url();}
重复{background-repeat: no-repeat;}
滚动{background-attachment: 固定；}（固定）滚动；（滚动）
位置{background-position: left;}（水平）顶部（垂直）;
缩写方法{background:#000 url(.)repeatfixed left top;} /*缩写·阅读代码时经常出现，仔细研究一下*/
方块属性：(Block) /*这个属性还是第一次知道，还需要多学习*/
字母间距{letter-spacing: normal;} value /*这个属性看起来很有用，请多练习*/
对齐方式{text-align: justify;}（两端对齐）左；（左对齐）右；（右对齐）居中；（居中）
缩进{text-indent:值px;}
垂直对齐{vertical-align:基线；}（基线）sub;（下标）super;（下标）top;文本顶部；中间；底部；文本底部；
字间距word-spacing:正常；价值
空格空白-space: pre; （保留）nowrap； （没有换行）
显示{display:block;}（块）内联；（嵌入）列表项；（列表项）run-in；（附加部分）紧凑；（紧凑）标记；（标记）表格；内联表；表-原始-组；表头组；表页脚组；表原始；表列组；表列；表格单元格；表格标题； (表标题) /*对显示属性的理解很模糊*/
盒子属性：（盒子）
宽度：高度：浮动：清除：两者；边距：填充：顺序：上、右、下、左
边框属性：（边框）
border-style: dotted;（虚线）dashed;（虚线）solid;双；(双线)凹槽；(凹槽线)脊；(脊形)插入；(凹痕)出口；
边框宽度：边框宽度
边框颜色：#；
缩写方法border：宽度样式颜色； /*缩写*/
列表属性：（列表样式）
类型list-style-type:盘； （点）圆； （圆形）方形； （平方）小数； （数字）小写罗马字母； （十进制罗马代码数字）大写罗马；较低的阿尔法；上阿尔法；
位置列表样式-position: 外部； （外部）内部；
图像列表样式-image: url(.);
定位属性：（Position）
绝对位置：相对的；静止的；
可见性：继承；可见的；隐；
溢出：可见；隐；滚动；汽车；
Clip: 矩形（12px，自动，12px，自动）（裁剪）
css属性代码集合
1.CSS文本属性：
颜色： #999999; /*文字颜色*/两个连续相同的数字可以写成颜色： #999
font-family : 宋代，无衬线； /*文本字体*/
字体大小： 9pt； /*文字大小*/
字体样式：itelic； /*文本斜体*/
字体变体：小型大写字母； /*小字体*/
字母间距： 1pt； /*字母之间有空格*/
行高： 200%； /*设置行高*/
字体粗细：粗体； /*粗体文字*/
垂直对齐：sub； /*下标*/
垂直对齐：super； /*上标*/
文本装饰：line-through； /*添加删除线*/
文字装饰： 上划线； /*添加顶行*/
文本装饰：下划线； /*强调*/
文本装饰：无； /*去掉链接下划线*/
文本转换： 大写； /*第一个单词大写*/
文本转换： 大写； /*英文大写*/
文本转换： 小写； /*英文小写*/
文本对齐：右； /*文本右对齐*/
文本对齐：左； /*文本左对齐*/
文本对齐：居中； /*文本居中对齐*/
文本对齐：对齐； /*文本对齐*/
垂直对齐属性
垂直对齐：顶部； /*垂直向上对齐*/
垂直对齐：底部； /*垂直向下对齐*/
垂直对齐：中间； /*垂直居中对齐*/
垂直对齐：文本顶部； /*文本垂直向上对齐*/
垂直对齐：文本底部； /*文本垂直向下对齐*/
2.CSS边框留空
填充顶部：10px； /*将上边框留空*/
填充右：10px； /*右边框留空*/
填充底部：10px； /*下边框留空*/
填充左：10px； /*左边框留空
3.CSS符号属性：
列表样式类型：无； /*没有数字*/
列表样式类型：十进制； /*阿拉伯数字*/
列表样式类型：下罗马； /*小写罗马数字*/
列表样式类型：上部罗马； /*大写罗马数字*/
列表样式类型：lower-alpha； /*小写英文字母*/
列表样式类型：upper-alpha； /*大写英文字母*/
列表样式类型：disc； /*实心圆符号*/
列表样式类型：圆； /*空心圆符号*/
列表样式类型：square； /*实心方形符号*/
列表样式-image:url(/dot.gif); /*图片风格符号*/
列表样式位置： 外部； /*凸行*/
列表样式位置：内； /*缩进*/
4.CSS背景样式：
背景颜色：#F5E2EC; /*背景颜色*/
背景：透明； /*透视背景*/
背景图像： url(/image/bg.gif); /*背景图片*/
背景附件： 已修复； /*水印固定背景*/
背景重复： 重复； /*重复排列-网页默认*/
背景重复： 无重复； /*不重复排列*/
背景重复： 重复x; /*在x轴上重复排列*/
背景重复： 重复-y; /*在y轴上重复*/
指定背景位置
背景位置： 90% 90%； /*背景图片x、y轴的位置*/
背景位置： 顶部； /*向上对齐*/
背景位置： 按钮； /*向下对齐*/
背景位置： 左； /*左对齐*/
背景位置： 右； /*右对齐*/
背景位置： 中心； /*居中对齐*/
5.CSS连接属性：
a /*所有超链接*/
a:link /*超链接文本格式*/
a:visited /*访问过的链接文本格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标链接*/
鼠标光标样式：
链接手指CURSOR:手
十字准线光标：crosshair
向下箭头光标：s-调整大小
十字箭头光标：移动
向右箭头光标：移动
添加问号光标：help
箭头指向左光标：w-调整大小
向上箭头光标：n-调整大小
箭头指向右侧光标：ne-resize
向上箭头和向左光标：nw-resize
文本我输入cursor:text
右下箭头对角光标：se-resize
左下箭头对角光标：sw-resize
漏斗光标：等待
光标模式(IE6) p {cursor:url("光标文件名.cur"),text;}
6.CSS框架列表：
顶部边框： 1px 实心#6699cc； /*上边框*/
边框底部： 1px 实心#6699cc； /*下边框*/
左边框： 1px 实心#6699cc； /*左边框*/
右边框： 1px 实心#6699cc； /*右边框*/
以上是推荐的写法，但也可以使用如下常规方法：
border-top-color : #369 /*设置上边框的顶部颜色*/
border-top-width :1px /*设置上边框的顶部宽度*/
border-top-style : Solid/*设置上边框的顶部样式*/
其他边框样式
solid /*实线框*/
虚线/*虚线框*/
double /*双线框*/
groove /*三维内凸框*/
脊/*三维浮雕框架*/
inset /*凹框*/
一开始/*凸框*/
7.CSS表单的使用：
文本方块
按钮
复选框
选择按钮
多行文本框
下拉菜单选项1 选项2
8.CSS边框样式：
边距顶部：10px； /*上边框*/
边距-right:10px； /*右边距值*/
边距底部：10px； /*下边界值*/
边距-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:值|继承|中|大|更大| x-大| xx-大|小|更小| x-小| xx-小}
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: value|inherit|normal;}
9个字母间距{letter-spacing:值|继承|正常}
10字间距{word-spacing:值|继承|正常}
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|半压缩|半膨胀|超压缩|超膨胀|更宽}
文字样式
序列号中文描述标记语法
1行距{line-height:值|继承|正常；}
2 文本装饰{text-decoration:inherit|none|underline|overline|line-through|blink}
3 段落开头有空格{text-indent: value|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: value|top|bottom|left|right|center}
6 后台样式{background:背景颜色|背景图片|背景重复|背景附件|背景位置}
盒式
序列号中文描述标记语法
1 边距margin {margin:margin-上边距-右边距-下边距-左}
2 填充{padding:padding-顶部填充-右侧填充-底部填充-左侧}
3 边框宽度{border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值：薄|中|厚|数值
4 边框颜色{border-color: value value value} value：分别代表上、右、下、左颜色值
5 边框样式{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边框{border:border-width 边框样式颜色}
顶部边框{border-top:border-top-width 边框样式颜色}
右边框{border-right:border-right-width 边框样式颜色}
底部边框{border-bottom:border-bottom-width 边框样式颜色}
左边框{border-left:border-left-width 边框样式颜色}
7 宽度{width: 长度|百分比|自动}
8 高度{height: 值|自动}
9 浮点数{float:left|right|none}
10 清除{clear:none|左|右|两者}
类别列表
序列号中文描述标记语法
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}
【全面CSS样式指南：从基础到高级技巧解析】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
终于找到了一个全面的CSS教程！
有18位网友表示赞同！
想要学好前端，CSS绝对是必修课！
有9位网友表示赞同！
我一直在找一款可以一次性掌握所有CSS样式的资源。
有19位网友表示赞同！
这会帮我解决很多网页布局的问题吧？
有17位网友表示赞同！
看起来这个“大全”包含很多实用的CSS代码示例。
有18位网友表示赞同！
期待能学到一些最新的CSS技巧！
有8位网友表示赞同！
我已经开始学习前端开发，这应该是个很好的辅助工具。
有5位网友表示赞同！
终于不用一个个去查资料了，有了这款工具太方便了！
有11位网友表示赞同！
感觉这个教程很全面，涵盖了从基础到进阶的CSS知识点。
有7位网友表示赞同！
我想用CSS打造一个更漂亮的网站，这个资源肯定能帮上忙！
有10位网友表示赞同！
之前学过一些基本的CSS语法，希望能在这里扩展学习。
有12位网友表示赞同！
我是一个网页设计师，经常使用到CSS，这个大全很适合我!
有14位网友表示赞同！
不知道这个教程的讲解是否详细易懂？
有14位网友表示赞同！
想要快速成为前端大师，这应该是必备的工具之一吧！
有5位网友表示赞同！
这份CSS样式大全一定会让我在网页设计方面更上一层楼。
有15位网友表示赞同！
收藏起来！以后学习CSS的时候拿来参考。
有10位网友表示赞同！
期待在这个“大全”中找到解决我网站布局问题的解决方案！
有14位网友表示赞同！
这款工具是不是只有中文版本？
有13位网友表示赞同！
分享给我的朋友，他也正在学习前端开发。
有18位网友表示赞同！
这个CSS教程的更新频率怎么样？会不会落后于最新技术？
有6位网友表示赞同！