什么是CSS？
- Cascading Style Sheets层叠样式表，样式定义如何显示HTML元素
- 样式通常存储于样式表中，外部样式表通常存储在CSS文件中
- 多个样式定义可层叠为1，样式对网页中元素位置的排版进行像素级精确控制
对于同一个HTML元素，样式级别升序如下所示：
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于head标签内部)
- 内联样式(在HTML元素内部，优先级最高）
CSS语法：
css语法构成：
- 选择器，通常是需要改变样式的HTML元素
- 一条或者多条声明，每条声明由一个属性和一个值组成，属性之间以冒号分隔
- 声明以分号结束，声明组以大括号括起来
CSS选择器：
id选择器：在HTML起始标签中以id属性设置元素，在CSS中以"#"定义
class选择器：在HTML中以class属性表示，在CSS中类似选择器以"."表示
选择器优先级顺序(升序)：
- 通用选择器
- 元素(类型）选择器
- 类选择器
- 属性选择器
- 伪类
- id选择器
- 内联样式
- !important规则除外(了解)
优先级法则：
- 选择器都有一个权值，此权值与优先级成正比
- 权值相等时，后出现的样式表设置要优先于先出现的样式表设置
- 创作者规则高于浏览者，网页编写者规则优先于浏览器设置
- 继承的CSS样式不如后来指定的CSS样式
- 在同一组属性设置中标有"!important"规则的优先级最大
CSS背景：
用于定义HTML元素的背景效果
- background-color：元素的背景颜色
- background-image：元素的背景图片
- background-repeat：背景图像的水平或者垂直平铺,水平为x轴方向，垂直为y
- background-position：图像在背景中的位置,如background-position:right top;
- background-attachment：图像是否固定或者随页面滚动
- 背景简写属性：body{ background:#ffffff url('img_tree.png') no-repeat right top }
CSS Text:
改变页面中文本的颜色、字符差距、对齐文本、装饰文本、对文本缩进等等。
Text Color：设置文字颜色
常用css指定：
- 十六进制值 "FF0000"
- 一个RGB值 RGB(255,0,0)
- 颜色的名称 如"red"
Text-align:文本对齐方式
- text-align:center 居中
- text-align:right 右对齐
- text-align:justify 每行宽度相等，左右外边距对齐(如杂志和报纸)
Text-decoration:设置或者删除文本的装饰，主要用来去除下划线
- {text-decoration:none; decoration：装饰
文本转换：指定文本字母的大小写，或者每个单词首字母大写
- text-transform:uppercase;
- text-lowercase:lowercase;
- text-transform:capitalize; 首字母大写
文本缩进：用来指定文本的第一行的缩进
- text-indent:50px; indent:缩进
文本间隔：改变单词之间的基本间隔，其默认值normal与设置值为0效果等同
- word-spacing: 30px; 设置文本间隔为30px;
CSS Fonts:字体
CSS定义了5种通用字体：
- Serif
- Scans-serif
- Monospace
- Cursive
- Fantasy
设置字体属性：font-family
- font-family:"Times New Roman", Times, serif;
字体样式：font-style
- 正常 font-style:normal
- 斜体 font-style:italic
- 倾斜的文字 font-style:oblique
字体大小： font-size
- 常见单位是px,em,百分比
CSS链接：
CSS可以针对不同的链接状态设置链接样式。
- a:link 正常，未访问过的链接
- a:visited 用户已访问过的链接
- a:hover 当用户鼠标放在链接上时
- a:active 链接被点击的那一刻
- 顺序规则：hover必须在link和visited后面，active必须跟在hover后面
- text-decoration: underline 删除链接中的下划线
- background-color:#FF704D 修饰指定链接背景色
CSS列表样式：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
在HTML中有两种类型的列表：
- 无序列表：列表项标记用特殊图形
- 有序列表：列表项标记有数字或者字母
- 使用CSS可以列出进一步的样式，还可以用图像作为列表项标记
list-style-type常见属性：
- none：不使用项目符号
- disc：实心圆
- circle：空心圆
- square：实心方块
- decimal：阿拉伯数字
- lower-alpha：小写英文字母
- upper-alpha：大写英文字母
- lower-roman：小写罗马数字
- upper-roman：大写罗马数字
list-style-image使用图像作为列表项标记：
- list-style-image: url('sqpurple.gif')
- background-image: url(sqpurple.gif)
- background-repeat: no-repeat ： 无重复
- background-position: 0px 5px ： 定位图像位置
- padding-left: 14px ： 盒子模型内部，文本列表的左间距
CSS表格：
vertical-align:bottom： 设置单元格或者行内元素的垂直对齐方式
border-collapse ： 设置表格的边框是否被折叠成一个单一的边框或者隔开
padding: 表格填充