CSS级联样式表(Web前端入门)

CSS(级联样式表)

CSS概念

Cascading Style Sheets (CSS)是一种样式表语言,定义HTML文件的外观,定义布局.

CSS与HTML的关系

HTML是网页的内容;CSS定义页面的样式.

CSS的三类样式表:

1)行间样式表

概念:在HTMl文档的body标签中.
样板:<标签名称 style=“属性1:属性值1;属性2:属性值2;属性3:属性值3”>

2)内联样式表

概念:在HTML文档的head标签中,用style标签定义.

<!--
    <style> 
		标签名称{
   属性1:属性值1;属性2:属性值2} 
		body {
   background-color:yellow;}
		p {
   color:blue;}
	</style>
-->

3)外部样式表

概念:放在.css为扩展名的文件中,直接用标签定义,后在通过link标签链接到HTML文档中.(使用率最高)

<!--
      标签名称{
   属性1:属性值1;属性2:属性值2} 
	  <link href="" rel="stylesheet">          (rel=relationship)
-->

CSS选择器

概念:将分离后的样式表与网页内容联系,用于实现对HTML的控制.

分类:

1)标签选择器:

可以选择页面中的所有标签.

2)类选择器:

通过标签的class属性值选中标签
.row0{color:red;}

3)id选择器:

​ #top{color:blue;}

4)通配选择器:

​ 优先级最低的 但是高优先级的只能覆盖相同属性,不能覆盖特有的

​ *{ }

选择器的优先级(低到高):

通用选择器（*）<元素(类型)选择器<类选择器<属性选择器<伪类<ID 选择器<内联样式

5)选择器的组合:

​ .row0,.row1{text-align:center}

6)后代选择器:

用于选中指定标签的指定后代标签
语法: 祖先标签 后代标签{}

7)子标签选择器:

用于选中指定父标签的指定子标签
语法: 父标签 > 子标签{}

8)相邻标签选择器:

选中指定标签的相邻标签
语法:选择相邻选择器:标签+相邻标签{}

9)兄弟选择器: