HTML第四章

第四章初识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>	外部样式实现了样式和结构的彻底的分离，一个外部样式表文件可应用于多个页面。当改变这个样式文件时，所有页面的样式都会随之改变。这在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，利于保持网站的统一样式和网站维护，同时用户在浏览网页时也减少了重复下载代码，提高了网站的速度。
3.外部样式	外部术样式表就是把CSS代码保存为一个单独的样式表文件，文件扩展名为.CSS在页面中引用外部样式表。	②导入外部样式表: <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;}