html-新手入门2------CSS

一.Css选择器

head中：

<style type="text/css">

</style>

1.标签选择器：li{}

2.类选择器:.写法：a{};调用：<li class="a"></li>

3.id选择器:写法：#a ;调用：<li id="a"></li>

优先级:3>2>1

注意：选择器名称：只能由字母数字下划线组成，且开头不能是数字。

4.后代选择器：优先级更高；精确；近者优先；Id 还是比后代class优先级高；

5.子代选择器;

后代和子代同等优先级；

选择器优先级：

1.首先是近者优先！！！最内层选择器永远比外层优先。例如：div ul li >div #ul,

2.当作用在同一层时；Id选择器.>class选择器>标签选择器

如：div #li>div ul .li>div ul li

只要最后一个选择器作用于li,就不管有多少层；

3.当作用于同一层，且最后一层为同等选择器，均为class或id标签。

例如：div ul .li>div .li 越精准越优先

4.同级时，后面的覆盖前面的。

6交集选择器：

1.写法：选择器1选择器2....{}

例如：.li#li{}元素必须同时具备class=“li”并且id="li"才能生效。

/*.li#li{

color: palevioletred;

}*/

 

7 并集选择器：

.li,#li{

1.写法：选择器1，选择器2....{}

例如：.li,#li{}，只要有一个就行。

* */

.li,#li{

color: black;

}

 

8通用选择器:

1.*{}

2.选中页面所有标签;

3.优先级最低；

三种样式表

1.行内样式表（head中的）

（1）将CSS样式与HTML代码完全糅杂在一起。不符合W3C关于内容与表现分离得基本规范，不利于后期维护。

（2）优先级最高。但是不推荐使用。

2.内部样式表：

(1)一定程度的将CSS样式与HTML代码进行了分离，但是分离不够彻底，无法实现样式复用

(2) 优先级低于行内样式表

3.外部样式表：

1.实现了CSS样式与Html代码的彻底分离。

2.优先级低于内部样式表。

3.后续开发推荐使用此种方式。

rel 声明被连接文档与当前文档的关系

type:

 

4.扩展阅读

 

@import url("css00.css");

import不是标准的HTML标签，而link是。

import只能导入CSS，而link可以链接各种形式的文件。

link在网页边加载的时候边连接CSS文件，而import会在HTML文件完全加载完后，再导入CSS。