前端day2：	CSS（一）选择器+样式表

深入CSS

CSS由来

英文全名：cascading style sheets(百度百科) === cascading style sheet
CSS（层叠样式表）是一种用于描述网页上元素如何呈现的语言。它可以控制网页的布局、字体、颜色、背景、边框等各种样式。通过将CSS样式应用于HTML标记，可以改变网页的外观和样式。
CSS由选择器和声明组成。选择器用于选择要应用样式的HTML元素，而声明则定义了这些元素应该具有的样式。声明包含属性和属性值，属性描述了要改变的样式属性（如颜色、字体大小等），而属性值指定了要为属性设置的值。
CSS中还有一些特殊的选择器，如类选择器、ID选择器和伪类选择器，它们可以更精确地选择元素并应用样式。此外，CSS还支持继承、优先级和层叠等概念，使得样式的应用更加灵活和可控。

CSS语法

1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
5）在书写样式过程中，空格、换行等操作不影响属性显示。

CSS写法

选择器(选择符) { 属性：属性值；属性：属性值；}

CSS三种样式表

1、内部样式表
2、行内样式表（内联式）
3、外部样式表（外链式）

1.内部样式表

内嵌式：将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：内嵌式：将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

 <head>
    <style type="text/CSS">
        选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
    </style>
 </head>
 
 例：
 <head>
    <style>
        p {
             color: blue;
             font-size: 16px;
          }
    </style>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

2、行内式（内联样式）

内联样式： 又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

例：
<p style="color: blue; font-size: 16px;">这是一个段落</p>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

3、外部样式表（外链式）

链入式： 将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
      <link href="CSS文件的路径"  rel="stylesheet" />
</head>

例：
<head> 
      <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
      <p>这是一个段落</p> 
</body>

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下： href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

扩展知识点：link和import之间的区别？

差别1： 本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2： 加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
差别3: 兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别,而link标签无此问题。

样式表的优先级

!important>行内>内部>外部

选择器

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制。

元素选择符/类型选择符(element选择器）

 例：div{
          width:100px;height:100px;background:red;
   }

语法： 元素名称（属性：属性值；）
如：div,p,h1,img,a,span等
说明：
1) 元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。
例如body、div、p,img,em,strong,span.…等。
2) 所有的页面元素都可以作为选择符。
用法：
1) 如果想改变某个元素得默认样式时，可以使用类型选择符。(如：改变一个div、p、h1样式)
2) 当统一文档某个元素的显示效果时，可以使用类型选择符。(如：改变文档所有p段落样式)

class选择器/类选择器

语法： .class名{属性：属性值；}
说明：
1）当我们使用class选择符时，应先为每个元素定义一个class名称
2） class选择符的语法格式是：
如：

 .top{
        width:200px; height:100px; background:green;
 } 

<div class="top"></div>

用法： class选择符更适合定义一类样式。

id选择器

语法： #id名{属性：属性值；}
说明：
1）当我们使用id选择符时，应该为每个元素定义一个id属性。如：

<div id="box"></div>

2） id选择符的语法格式是“#”加上自定义的id名。如：

#box{
        width:300px;height:300px;
}

3）起名时要取英文名，不能用关键字;（所有的标记和属性都是关键字)。如：head标记
4）一个id名称只能对应文档中一个具体的元素对象。（唯一性）

通配符/通配选择器

语法： $*$ {属性：属性值；}
说明： 通配选择符的写法是“*”，其含义就是所有元素。
$*$ {margin:0;padding:0;} 代表清除所有元素的默认边距值和填充值；

群组选择器

语法： 选择符1，选择符2，选择符3.….…（属性：属性值；}
例： #top1,#nav1,h1{width:960px;)
说明： 当有多个选择符应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组。
扩展： margin:0 auto;实现盒子的水平居中
例：
div{background-color: yellow;}
p{background-color: yellow;}
h1{background-color: yellow;}
===>
div,p,h1{ background-color: yellow;}
注：群组选择器：提出公共代码，节约代码量

包含选择器/后代选择器

语法： 选择符1选择符2{属性：属性值；}
说明： 含义就是选择符1中包含的所有选择符2；
用法： 当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如：
结构：

<ul class="list">  
      <li></li>
</ul>

样式：

    list li{background:red;}

伪类选择器

语法:
a:link {属性：属性值；}超链接的初始状态。
a:visited {属性：属性值；}超链接被访问后的状态。
a:hover {属性：属性值；}鼠标悬停，即鼠标划过超链接时的状态。
a:active {属性：属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态。

link--visited-hover-active

说明：
1) 当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a:link,a:visited,a:hover,a:active, 错误的顺序有时会使超链接的样式失效。
2) 为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中。
例：
a{color:red;}a:hover(color:green;}
表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

a{color:red;}
a:link   {color:yellow; }初始状态
a:visited{color:red;    }访问之后
a:hover  {color:orange; }鼠标以上
a:active {color:green;  }点击激活

选择器的权重

1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。
2：相同权重的选择符，样式遵循就近原则，哪个选择符最后定义，就采用哪个选择符样式。
3.
1) 内联样式的权重为(1,0,0,0)。
2) ID选择器的权重为(0,1,0,0)。
3) 类选择器、属性选择器和伪类选择器的权重为(0,0,1,0)。
4) 元素选择器和伪元素选择器的权重为(0,0,0,1)。
5) 通配符(*)、子选择器(>)、相邻选择器(+)等组合符号并不会增加权重。

前端day2：CSS（一）选择器+样式表 | 青训营