css导入html中的方式6,css基础语法一（选择器与css导入方式）(示例代码)

页面中，所有的CSS代码，需要写入到标签中。style标签的type属性应该选择text/css，但是type属性可以省略。

CSS修改页面中的所有标签，必须借助选择器选中。选择器中，可以写多对CSS属性，用{}包裹： 每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。

选择器{

属性1:属性值1;

属性2:属性值2;

}

【CSS常用选择器】

1、标签选择器

写法： HTML标签名{}

作用： 可以选中页面中，所有与选择器同名的HTML标签。

2、 类选择器(class选择器)

写法： .class名{}

调用： 在需要调用选择器样式的标签上，使用class="class名"调用选择器

优先级： >标签选择器

3、ID 选择器

写法： #ID名{}

调用： 需要调用样式的标签，起一个id="ID名"

优先级： ID选择器>class选择器

注意： 一个页面中，不能出现同名ID

【Class选择器与ID选择器的区别】

1、 写法不同:class选择器用.声明，ID选择器用#声明；

2、 优先级不同： ID选择器>class选择器

3、 作用范围不同： class选择器可以多次调用，ID选择器只能使用一次。

【选择器的命名规范】

1、只能有字母、数字、下划线、减号组成；

2、 开头不能是数字。也不能是只有一个减号。

一般，起名要求有语义，使用英文单词与数字的组合。

4、通用选择器

写法： *{}

作用： 可以选中页面中所有的HTML标签。

优先级： 最低！！！

5、并集选择器

写法： 选择器1,选择器2,……,选择器n{}

生效规则： 多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。

6、交集选择器

写法： 选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔

生效规则： 多个选择器取交集，则必须满足所有选择器的要求，才能生效

7、后代选择器

写法： 选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔

生效规则： 只要满足，后一选择器是前一个选择器的后代，即可成效。(后代包括子代、孙代、重孙代。。。)

通俗的讲：只要后一个选择器，在前一个选择器里面即可。

8、子代选择器

写法： 选择器1>选择器2>……>选择器n{} 选择器之间用>分隔

生效规则： 必须满足，后一个选择器是前一个选择器的直接子代，才能生效。(中间不能间隔任何标签)

【优先级的权重问题】

1、CSS生效的第一原则是“近者优先”！即，哪个选择器作用于最里层标签，则这个选择器生效；

2、当选择器作用于同一层时，可以根据优先级权重，进行累加计算：

ID选择器*100 > class选择器*10 > 标签选择器*1

注意： 并集选择器，相当于多个选择器拆开写，所以，并集选择器的优先级不能累加。

3、 当选择器作用于同一层，且优先级权重相等时。则，写在最后的选择器生效。

【引入CSS的三种方式】

1、 行内样式表：直接在HTML标签中，使用style=""的方式引用；

优点： 使用灵活，优先级权重最高？

缺点：不符合W3C关于“内容与表现分离”的要求；不利于样式复用；

2、 内部样式表： 在

标签中，使用