CSS 一、使用CSS样式的方式
CSS 二、定义样式表
CSS 三、常见属性
CSS 四、DIV+CSS布局## 三、常见属性
1.颜色属性
color属性定义文本的颜色
- color：green
- color：#ff6600
- color：#f60 简写式
- color：rgb（255,255,255） 红(R)、绿(G)、蓝(B) 每个的取值范围0~255
- color：rgba（255,255,255,1）
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度
2.字体属性
1) font-size 字体大小
a. px：设置一个固定的值
b. %：父元素的百分比
c. smaller：比父元素更小
d. larger：比父元素更大
e. inherit：继承父元素
2) font-family 定义字体
font-family：微软雅黑，serif；
可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个
3) font-weight 字体加粗
normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
100、200、300~900
400 = normal，而 700 = bold
4) font-style 字体样式
- normal 正常（标准）
- italic 斜体
- oblique 倾斜
- inherit 继承
5) font-variant 小型大写字母显示文本
- normal 标准
- small-caps 小型大写字母显示文本
- inherit 继承
3.背景属性
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）
用数值来表示位置：background-position：20px 20px;
background-position：X轴 Y轴;
*left center 左居中
简写方式
background:背景颜色 url(图像) 重复 位置
background:#f60 url(images/bg,jpg) no-repeat top center
4.文本属性
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 属性的值
5.边框属性
1) 边框风格 border-style
a. 统一风格（简写风格）
border-style
b. 单独定义某一方向的边框样式
- border-bottom-style 下边边框样式
- border-top-style 上边边框样式
- border-left-style 左边边框样式
- border-right-style 右边边框样式
c. 边框风格样式的属性值
- none 无边框
- solid 直线边框
- dashed 虚线边框
- dotted 点状边框
- double 双线边框
- groove 凸槽边框
- ridge 垄状边框
- inset inset边框
- outset outset边框
- inherit继承
依托border-color的属性值
2) 边框宽度 border-width
a. 统一风格
border-width：
b. 单独风格
- border-top-width 上边边框宽度
- border-bottom-width 下边边框宽度
- border-left-width 左边边框宽度
- border-right-width 右边边框宽度
c. 边框宽度的属性值：
- thin 细边框
- medium 中等边框
- thick 粗边框
- px 固定值的边框
- inherit继承
3) 边框颜色 border-color
a. 统一风格
border-color
b. 单独风格
- border-top-color 上边边框颜色
- border-bottom-color 下边边框颜色
- border-left-color 左边边框颜色
- border-right-color 右边边框颜色
c. 属性值
- 颜色值的名称 red、green、blue
- RGB rgb(255,255,0)
- RGBA rgba(255,255,0,0.1)
- 十六位进制 #ff0、#ff0000
- 继承inherit
d. 属性值的四种情况
- 一个值：border-color：（上、下、左、右）；
- 两个值：border-color：（上下） （左右）；
- 三个值：border-color:（上） （左、右） （下）;
- 四个值：border-color：（上）（右）（下）（左）;
简写方式
border：solid 2px #f60
6.列表属性
1.标记的类型
list-style-type
- none 无标记
- disc 默认 标记是实心圆
- circle 标记是空心圆
- square 标记是实心方块
- decimal 标记是数字
- decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等)
- lower-roman 小写罗马数字(i, ii, iii, iv, v, 等)
- upper-roman 大写罗马数字(I, II, III, IV, V, 等)
- lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等)
- upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等)
- lower-greek 小写希腊字母(alpha, beta, gamma, 等)
- lower-latin 小写拉丁字母(a, b, c, d, e, 等)
- upper-latin 大写拉丁字母(A, B, C, D, E, 等)
- hebrew 传统的希伯来编号方式
- armenian 传统的亚美尼亚编号方式
- georgian 传统的乔治亚编号方式(an, ban, gan, 等)
- cjk-ideographic 简单的表意数字
- hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
- katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
- hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
- katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
2.标记的位置
list-style-position
- inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
- outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
- inherit 规定应该从父元素继承 list-style-position 属性的值。
3.设置图像列表标记
list-style-image
- URL 图像的路径
- none 默认。无图形被显示
- inherit 规定应该从父元素继承 list-style-image 属性的值
4.简写方式
list-style:类型 位置 图像
list-style:square inside url('/i/arrow.jpg');
