1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

什么是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:　表格填充