一.CSS工作原理

CSS全称层叠样式表，它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。是能够真正做到网页表现与内容分离的一种样式设计语言，能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS规则

CSS规则实际上就是一条完整的CSS指令，规则声明了要修改的元素和应用给该元素的样式

为HTML文档添加CSS规则

有三种方法为HTML文档添加CSS规则：行内样式、嵌入样式、链接样式表

①行内样式：写在HTML元素的标签里，比如：

<P style="font-size: 20px;color: green;">This is a demo!</P>

②嵌入样式：写在<style>标签里，一般嵌入在<head>元素内

    <style type="text/css">

        P{color: blue;font-size: 30px;}

    </style>

③链接样式表：写在以.css结尾的单独样式表文件中,使用<link>标签进行链接

<link href="*.css" rel="stylesheet" type="text/css">

三种方法的应用范围

行内样式：只能影响它所在的标签，并且总是覆盖嵌入样式和链接样式的

嵌入样式：能影响当前的页面，但总是覆盖链接样式，并总被行内样式覆盖

链接样式：能影响到整个网站，只需使用<link>标签指定样式表即可，但链接样式总会被行内样式和嵌入样式覆盖

PS：我们还可以使用@import指令，在样式表中引用其他样式表

CSS文档由一系列CSS规则组成，一条CSS规则实际上就是一条CSS指令，这条指令先选择HTML元素，然后设定选择元素的样式

下面是一条简单的CSS规则，它把段落背景色设置为绿色

p{background-color: green}

CSS基本规则

一条CSS规则由选择符+声明两部分组成

选择符：指出要选择的元素

声明：由属性和值组成，属性指出影响元素哪方面样式，值其实就是属性的一种状态

在上面的例子中可以看出一条规则从左到右依次是：选择符、左花括号、属性、冒号、值、右花括号

对基本规则扩展1：多个声明包含在一条规则中

p{color: green;font-size: 45px;font-weight: bold}

每个声明后加一个分号，以示分隔

对基本规则扩展2：多个选择符组合在一起

h1,h3,p{color: green;font-size: 45px;font-weight: bold}

选择符之间用逗号分隔

对基本规则扩展3：多条规则应用于同一选择符

h1,h3,p{color: green;font-size: 45px;font-weight: bold}

现在我们想让p段落的背景色为蓝色，可以继续添加一条规则

p{background-color: blue}

CSS选择符分类

所有用于选择特定元素的选择符分为三种：上下文选择符、ID和Class选择符、属性选择符

上下文选择符

上下文选择符是一种考虑HTML文档结构的选择符，上下文选择符也叫后代组合式选择符，是以空格分隔标签名的，其格式为：

标签1 标签2 ｛声明｝

只有当标签1作为祖先元素存在时，标签2才会被选中

上下文选择符的最大好处就是可以方便的实现基于位置为HTML元素添加样式，在默认情况样式是应用到页面中的所有元素的，但有时需要给不同“位置”的元素应用不同的样式，比如想给位于article和aside标签中的p标签，分别设置不同的样式（不同颜色）

下面是要演示的HTML文档

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 <link href="style.css" rel="stylesheet" type="text/css">

 </head>

 <body>

 <article>

     <p>demo in article!</p>

 </article>

 <aside>

     <p>demo in aside!</p>

 </aside>

 <p>This text is very important!</p>

 <P style="font-size: 20px;color: green;">This is a demo!</P>

 </body>

 </html>

HTML文档

如果只使用

p{color: red;}

两个段落都会变成红色

而通过上下文选择符就可以实现基于“位置”的不同的样式

article p{color: red;}

aside p{color: green;}

效果

特殊的上下文选择符

① 子选择符 >

标签1 > 标签2

标签2必须是标签1的直接子元素，不能有其他父元素

 <section>

     <p>

         This is a demo p in section

     </p>

 </section>

 <article>

     <p>

         This is a demo p in article

     </p>

 </article>

HTML示例代码

section p{color: red}

article p{color: green}

② 紧邻同胞选择符 +

标签1 + 标签2

标签2必须紧跟在同胞标签1的后面

 <article>

     <h1>An H1 title</h1>

     <p>

         This is a demo p in article

     </p>

     <h2>An H2 title</h2>

     <p>text is a demo</p>

 </article>

HTML示例代码

h1+p{color: green}

这段代码运行后，只有h1后面的p会被选中，而h2后面的p不会被选中

③ 一般同胞选择符 ~

标签2跟着同胞标签1的后面，不必紧跟

 <article>

     <h1>An H1 title</h1>

     <p>

         This is a demo p in article

     </p>

     <h2>An H2 title</h2>

     <p>text is a demo</p>

 </article>

HTML示例代码

h1~p{color: green}

运行这段代码后 h1和h2后面的p都会被选中

④ 通用选择符*

*一个通配符，匹配任何元素，它有一个非常有用的用法，那就是构成非子选择符

 <article>

     <h1>An H1 title</h1>

     <p>

         This is a demo p in article

     </p>

     <h2>An H2 title</h2>

     <p>text is a demo</p>

 </article>

HTML示例代码

h1~*{color: green}

运行这段代码后h1后面的所有元素都会被选中

下面是上下文选择符总结结构图

class和id选择符

CSS上下文选择符为我们提供了基于位置的定位，而class和id选择符则为了提供了另一套选择元素的方法，使用class和id选择符，不用再考虑文档的层次结构，只需要给HTML元素添加class或id属性即可(可以给id和class属性设置任何值，但不能以数字或特殊字符开头)

class属性

基本上每个HTML元素都有class属性，可以按如下方法给HTML元素添加class属性

 <body>

 <article>

     <h1 class="specialtext">this is a Special text!!</h1>

     <p>demo in article!</p>

 </article>

 <aside>

     <p class="specialtext">demo in aside!</p>

 </aside>

 </body>

使用class选择符很简单，格式如下

.类名

为特定的类添加样式、

p{color: red;}

.specialtext{font-size: 30px;color: blue;}

输出如下

标签带类的选择符

还可以这样写

p.specialtext{font-size: 30px;color: blue;}

上面代码只会选中带有specialtext类的段落，至于标题则不会被选中

多类选择符

可以给class属性设置多个值，构成多类选择符，用于特选

.specialtext{font-size: 30px;color: blue;}

这段代码会同时选中article中的h1和aside中的p段落，利用多类可以单独选中其他的某个元素

.specialtext.hidetext{font-size: 20px;color: green;}

以上代码只会选中h1而不会选中p元素，需要注意的是，多类名之间没有空格

下面是类选择符用法总结

id属性

id选择符格式是

#属性名{css样式}

除了前面的" . "变成了" # " 其他id属性用法与class属性用法相同

class和id的区别

class用于标示一组具有相同特征的元素；id用于在页面中唯一标示一个元素

1.id可以完成同一页面内的导航

2.同一个页面内的id值是唯一的，而class值可以有多个，比如多类选择符

3.用class标示一组具有相同特征的元素，比如下面把boy设置成蓝色，girl设置成红色

部分示例如下

<nav>

    <ul>

        <li class="boy"><a href="#">Tom</a></li>

        <li class="girl"><a href="#">Angela</a></li>

        <li class="boy"><a href="#">Jack</a></li>

        <li class="girl"><a href="#">Anne</a></li>

        <li class="boy"><a href="#">Justin</a></li>

    </ul>

</nav>

CSS样式

.boy a{color: blue;}

.girl a{color: red;}

运行效果

用id实现同一页面导航

<a href="#playvedio">视频</a>

<article>

    <h1 class="specialtext hidetext">this is a Special text!!</h1>

    <p>demo in article!</p>

</article>

<aside>

    <p class="specialtext">demo in aside!</p>

</aside>

<video id="playvedio" src="movie.ogg" controls="controls">

    您的浏览器不支持 video 标签。

</video>

当点击【视频】链接时候，会自动跳转到视频播放界面

如果想返回页面的顶部，只需给id属性“ # ”即

属性选择符

属性选择符用于选中任何带有指定属性的标签

标签名 [属性名]　　

带有这个属性的标签被选中

属性值选选择符

带有指定属性并且赋值的标签才会被选中