第四章 初识CSS
1.什么是CSS：
CSS全称（Cascading Style Sheet）风格样式表(Style Sheet)它是用来进行网页风格设计的。
2.CSS的优势：
（1）内容与表现分离，也就是使用前面学习的HTML语言制作网页，使用CSS设置网页的样式风格，并且CSS单独存放一个文件中。
（2）表现的统一，可以使网页的表现非常统一并且容易修改。
（3）丰富的样式，使得页面更加灵活。
（4）减少网页的代码量，增加网页的浏览速度，节省网络宽带。
（5）运用独立于页面的CSS，还有利于网页被搜索引擎收录。
3.CSS的基本语法：
CSS规则由两部分构成：选择器和声名。声名必须放在大括号{}中，
并且声名是一条或者多条，每一条声名由一个属性和值组成，属性和值
用冒号分开，每条语句以英文分号结尾。
4.<style>标签：在HTML中通过使用<style>标签引入CSS样式。<style>标签用于为HTML文档定义样式信息。<style>标签位于<head>标签中，它规定浏览器中如何呈现HTML文档。<style>标签中type属性是必须的，它用来定义style元素内容，唯一的值是“text/css”。
5.CSS选择器：
|
选择器的种类 |
例 |
|
1.标签选择器 |
P{font-size:16px;} |
|
2.类选择器 |
.class{font-size:16px;} |
|
3.ID选择器 |
#id{font-size:16px;} |
6.id选择器与类选择器的不同之处：ID选择器只能在HTML中使用一次，因此它的针对性很强。
选择器优先级：ID选择 器：>类选择器>标签选择器
7.引入CSS样式:
|
引入样式 |
定义 |
例 |
利与弊 |
|
行内样式表就是在html中直接使用style属性设置CSS样式 |
<pstyle=”font-size:14px; color:green;”> |
这种使用style属性的设置CSS样式仅对当前的HTML标签起作用，并且是写在HTML标签中的，因此这种方式不能使内容和表现相分离，本质上没有体现出css的优势。 |
|
2.内部样式 |
内部样式就是把css样式代码写在<head>的<style>标签中，与HTML内容位于同一个HTML文件中。 |
<head> <style> .green{ font-size:20px; color:red; } </style> </head> |
这种样式方便在同一页面中修改样式，但不利于在多页面间共享复用代码及维护，对内容与样式分离也不够彻底。 |
|
3.外部样式 |
外部术样式表就是把CSS代码保存为一个单独的样式表文件，文件扩展名为.CSS在页面中引用外部样式表。
|
①链接外部样式表： <head> <link href=”style.css”rel=”stylesheet” type=”text/css”/> </head> |
外部样式实现了样式和结构的彻底的分离，一个外部样式表文件可应用于多个页面。当改变这个样式文件时，所有页面的样式都会随之改变。这在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，利于保持网站的统一样式和网站维护，同时用户在浏览网页时也减少了重复下载代码，提高了网站的速度。 |
|
②导入外部样式表: <head> <style type=”text/css” <!— @import url(“style.csss”) --> </head>
|
样式优先级：行内样式>内部样式>外部样式。
8.CSS复合选择器:
|
复合选择器的种类 |
定义 |
|
1.后代选择器 |
在HTML中经常有标签的嵌套使用，那么在CSS选择器中，就可以通过嵌套的方式，对特殊位置的HTML标签进行声名。 例：p . txt{ color:blue; font-size:36px;} |
|
2.交集选择器 |
交集选择器是由两个直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标签选择器，第二个必须是类选择器域者ID选择器。这两个选择器之间不能有空格，必须连续书写。 例：p.txt{color:blue; line-height:28px} |
|
3.并集选择器 |
同时选中各个基本选择器所选择的范围。任何形式的选择器（包括标签选择器，类选择器，ID选择器材等）都可以作为并集选择器的一部分。 例：H3, .first, #end{ font-size:16px; color:green;} |
9.css继承特性：
继承的概念：在CSS语言中继承就是将各个HTML标签看作一个容器，其中被包含的小容器会继承包含它的大容器的风格样式，也称包含与被包含的标签为父子关系。
继承的应用：
Css继承指的是子标签的所有样式风格，可以在父标签样式风格的基础上再加以修改，产生新的样式，而子标签的样式风格完全不会影响父标签。
例：<style type=”text/css>
Li{
Color:blue;
font-size:12px;
}
ul li ul li ul li{ color:red;}
ul li ol li{color:green;}
</style>