CSS

1 CSS的四种引入方式

css对标签进行渲染，对页面的布局

（1）通过选择器找标签

（2）操作标签（属性操作）

CSS语法：

CSS规则由两个主要的部分构成：选择器，以及一条或者多条声明

CSS的四种引入方式

（1）     行内式

（2）嵌入式 缺点：只能用于一个页面

（3）链接式（推荐） 创建一个文件，链接导入

效果如下

 （4）导入式（了解） 缺点：有数量限制

效果如下：

2 CSS选择器

基本选择器

（1）标签选择器---p{}

定义一个p标签时，文体中的标签会根据要求变化

（2）Id选择器---id{}

Id是标签的唯一身份认证，根据id来改变标签的形式

（3）class选择器---- .info(属性)

（4）通配选择器-----*{}

组合选择器

注意:关于嵌套标签

一般，块级标签可以包含内联元素或某些块级标签，但内联元素不能包含块级元素，他只能包含内联元素。

P标签不能包含块级标签

（1）后代元素选择器

匹配所有元素属于祖宗辈后代的所有元素 .祖宗辈 空格 后代

（2）子代元素选择器

 匹配所有祖宗辈元素的子元素 .祖宗辈 大于号 子元素

（3）毗邻元素选择器

匹配所有紧随祖宗辈元素之后的同级元素 .祖宗辈 加号 同级元素

（4）普通兄弟元素选择器

以破折号分隔

（5）多元素选择器

同时匹配所有元素，用逗号隔开

属性选择器

标签是可以自己加属性的

E[att]     匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。

                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }

E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

                td[class~=”name”] { color:#f00; }

E[attr^=val]    匹配属性值以指定值开头的每个元素                   

                div[class^="test"]{background:#ffff00;}

E[attr$=val]  匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}

E[attr*=val]  匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

伪类

（1）     anchor伪类：专用于控制链接的显示效果

 a:link（没有接触过的链接）,用于定义了链接的常规状态。 

 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。      

 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。       

  a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。       

        伪类选择器 : 伪类指的是标签的不同状态:     

                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态       

        a:link {color: #FF0000} /* 未访问的链接 */

        a:visited {color: #00FF00} /* 已访问的链接 */

        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }