一、颜色属性
color属性定义文本的颜色
color：green
color：#ff6600
color：#f60 简写式
color：rgb（255，255，255） 红（R）、绿（G）、蓝（B）每个的取值范围0~255
color：rgba（255，255，255，1） a表示色彩的透明度，范围0~1
二、字体属性
1.font-size字体大小
px：设置一个固定的值
%：父元素的百分比
smaller：比父元素更小
larger：比父元素更大
inherit：继承父元素的
2.font-family定义字体
font-family：微软雅黑，宋体 从前到后显示存在的
可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个
3.font-weight字体加粗
normal（默认值），bold（粗），bolder（更粗），lighter（更细）
400 = normal，而700 = bold 取值范围100~900的整百数
4.font-style字体样式
normal 标准
italic 斜体
oblique 倾斜
inherit 继承
5.font-variant小型大写字母显示文本
normal 标准
small-caps 小型大写字母显示文本
inherit 继承
三、背景属性
1.背景颜色background-color
2.背景图片background-image
background-image:url(图片路径)
background-image:none
3.背景重复background-repeat
repeat 重复平铺满
repeat-x 向x轴重复
repeat-y 向y轴重复
no-repeat 不重复
4.背景位置background-position
横向（left，center，right）
纵向（top，center，bottom）
用数值表示
5.简写方式
background:背景颜色 url(图像) 重复 位置
background:#f60 url(image/bg.jpg) no-repeat top center
四、文本属性
1.横向排列 text-align
left，center，right
2.文本行高 line-height
%基于字体大小的百分比行高
数值 来设置固定值
3.首行缩进 text-indent
%父元素的百分比
px固定值，默认为0
inherit 继承
4.字符间距 letter-spacing
normal 默认
length 设置具体的数值（可以设置负数）
inherit 继承
5.单词间距 word-spacing
normal 默认
px固定值
inherit 继承
6.文本方向 direction
ltr 从左到右，默认
rtl 从右到左
inherit 继承
7.文本大小写 text-transform
capitalize 每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义无大写字母，仅有小写字母
inherit 规定应该从父元素继承text-transform属性的值
五、边框属性
1.边框风格 border-style
单独定义某一方向的边框样式
border-bottom-style 下边边框样式
border-top-style 上边边框样式
border-left-style 左边边框样式
border-right-style 右边边框样式
边框风格样式的属性值
none 无边框
solid 直线边框
dashed 虚线边框
dotted 点状边框
double 双线边框
groove 凸槽边框
ridge 垄状边框
inset inset边框
outset outset边框
inherit 继承
2.边框宽度 border-width
单独风格
border-top-width 上边边框宽度
border-bottom-width 下边边框宽度
border-left-width 左边边框宽度
border-right-width 右边边框宽度
边框宽度的属性值
thin 细边框
medium 中等边框
thick 粗边框
px 固定值的边框
inherit 继承
3.边框颜色 border-color
单独风格
border-top-color 上边边框颜色
border-bottom-color 下边边框颜色
border-left-color 左边边框颜色
border-right-color 右边边框颜色
属性值
red、green 颜色值的名称
rgb(255,255,0) RGB
rgba(255,255,0,1) RGBA
#ff0 十六进制
inherit 继承
属性值的四种情况
一个值：border-color:（上下左右）
两个值：border-color:（上下）（左右）
三个值：border-color:（上）（左右）（下）
四个值：border-color:（上）（右）（下）（左）
4.简写方式
border:solid 2px #f60
六、列表属性
1.标记的类型 list-style-type
none 无标记
disc 默认，实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 标记是数字
decimal-leading-zero 0开头的数字标记，01，02，03
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
lower-greek 小写希腊字母
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式
cjk-ideographic 简单的表意数字
2.标记的位置 list-style-position
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside 默认值，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inherit 继承
3.设置图像列表标记 list-style-image
URL 图像的路径
none 默认，无图形被显示
inherit 规定应该从父元素继承list-style-image属性的值
4.简写方式 list-style
list-style:square inside url('/i/arrow.jpg');
没有图片则用square替代
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS练习</title> <style type="text/css"> h1 { color:red; font-size:20%; } div { color:green; font-size:80px; border-color:rgba(255,120,234,0.7) yellow; } p { color:black; font-size:30px } .abc { color:blue; font-size:35px } #aaa { color:yellow; font-size:40px font-weight:100; } .h3 { color:#f92; font-size:smaller; font-family:"宋体"; font-weight:lighter; font-style:italic; } h4,.bbb { color:rgba(182,22,206,0.5); font-size:30%; } a:link { color:red; } a:hover { color:green; } a:active { color:yellow; } a:visited { color:blue; } body { background-image:url(timg.jpg); background-repeat:repeat-x; background-position:center 20px; } .wb,.wc { text-align:left; font-size:20px; line-height:30px; text-indent:10%; letter-spacing:20px; word-spacing:20px } .wa { direction:rtl; } .wd { text-transform:capitalize; } .we { text-transform:uppercase; } .wf { text-transform:lowercase; } .div1 { border-top-style:solid; border-width:thin; } .div2 { border-bottom-style:dashed; border-bottom-width:thick; } .div3 { border-left-style:dotted; border-width:10px; } .div4 { border-left-style:dotted; border-right-style:double; } </style> </head> <body> <a href="http://www.baidu.com" target="_blank">百度</a> <br> <br> <div> <h1>h1 CSS的使用方式</h1> <h2>h2 CSS的使用方式</h2> <h3 class="h3">h3 CSS的使用方式</h3> <h4>h4 CSS的使用方式</h4> </div> <br> <p>CSS的使用方式</p> <p class="abc">CSS的使用方式</p> <p id="aaa">aaa CSS的使用方式</p> <p class="bbb">CSS的使用方式</p> <p class="wb">文本文本文本文本文本文本文本文本文本</p> <p class="wc">Hello World good</p> <p class="wd">Hello World good</p> <p class="we">Hello World good</p> <p class="wf">Hello World good</p> <p class="wa">文本</p> <div class="div1">solid</div> <div class="div2">dashed</div> <div class="div3">dotted</div> <div class="div4">double</div> </body> </html>