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文档
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <article> 10 <p>demo in article!</p> 11 </article> 12 <aside> 13 <p>demo in aside!</p> 14 </aside> 15 <p>This text is very important!</p> 16 <P style="font-size: 20px;color: green;">This is a demo!</P> 17 </body> 18 19 20 </html>
如果只使用
p{color: red;}
两个段落都会变成红色
而通过上下文选择符就可以实现基于“位置”的不同的样式
article p{color: red;} aside p{color: green;}
效果
特殊的上下文选择符
① 子选择符 >
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <section> 2 <p> 3 This is a demo p in section 4 </p> 5 </section> 6 <article> 7 <p> 8 This is a demo p in article 9 </p> 10 </article>
section p{color: red} article p{color: green}
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <article> 2 <h1>An H1 title</h1> 3 <p> 4 This is a demo p in article 5 </p> 6 <h2>An H2 title</h2> 7 <p>text is a demo</p> 8 </article>
h1+p{color: green}
这段代码运行后,只有h1后面的p会被选中,而h2后面的p不会被选中
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <article> 2 <h1>An H1 title</h1> 3 <p> 4 This is a demo p in article 5 </p> 6 <h2>An H2 title</h2> 7 <p>text is a demo</p> 8 </article>
h1~p{color: green}
运行这段代码后 h1和h2后面的p都会被选中
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <article> 2 <h1>An H1 title</h1> 3 <p> 4 This is a demo p in article 5 </p> 6 <h2>An H2 title</h2> 7 <p>text is a demo</p> 8 </article>
h1~*{color: green}
运行这段代码后h1后面的所有元素都会被选中
下面是上下文选择符总结结构图
class和id选择符
CSS上下文选择符为我们提供了基于位置的定位,而class和id选择符则为了提供了另一套选择元素的方法,使用class和id选择符,不用再考虑文档的层次结构,只需要给HTML元素添加class或id属性即可(可以给id和class属性设置任何值,但不能以数字或特殊字符开头)
class属性
基本上每个HTML元素都有class属性,可以按如下方法给HTML元素添加class属性
1 <body> 2 <article> 3 <h1 class="specialtext">this is a Special text!!</h1> 4 <p>demo in article!</p> 5 </article> 6 <aside> 7 <p class="specialtext">demo in aside!</p> 8 </aside> 9 </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属性“ # ”即
属性选择符
属性选择符用于选中任何带有指定属性的标签
标签名 [属性名]
带有这个属性的标签被选中
属性值选选择符
带有指定属性并且赋值的标签才会被选中