009 认识CSS 定义，引入方式，选择器

目录

1、CSS定义

css标记性语言，只能被游览器执行，渲染html的标签使用的。

2、css的引入方式

2.1、行内引用

行内引入 style，不常用，仅用在不更改网站的图标或者文字上

​ image-20230213160244127

2.2、head标签内 添加

标签选择器定义在大括号内设置该标签的样式，一般在测试时使用
image-20230213160904643

2.3、链接式

css代码独立存放到文件，使用时link到html文件内。
新建一个css文件，在html的head内 link css文件，渲染标签展示

image-20230213162000626

3 、css的选择器

选择器就是找到标签的索引方式，从点 ，线， 面，相邻等不同的纬度空间寻找到标签的方式。标签选择器 在style中直接定义页面中所有的相同的标签用样式，范围控制

3.1 id选择器

  id选择器 ，在style中直接定义指定id的样式，精准控制，在style中，可以指定多个id控制样式，#c1,#c2{}
id选择器精准灵活，过于麻烦。
单一id选择器
image-20230213164307969
多id选择器

image-20230213164528957

3.2 class选择器

class选择器，在style内  

.属性值指定样式

class使用属性归类的方式，自定义性强，可大可小的优点。
单class选择器

image-20230213164906047

多class选择器
image-20230213170405459

3.4 标签选择器

  
  标签选择器常用标签太少，控制面太大，

image-20230213164827174

多标签选择器
image-20230213170736965

3.5、 全局选择器

定义全局的标签的基本样式
一般不常用
image-20230213194126848

4、选择器的特性

4.1 选择器的控制维度

4.1.1 全局选择器 * ，定义窗口全部标签的样式，组合使用。
4.1.2 标签选择器，定义窗口内一类标签的样式，不常用
4.1.3 class选择器，使用属性归类的方式，自定义性强，可大可小的优点。
4.1.4 id选择器 ，定义单一，精准灵活，过于麻烦。

4.2 选择器的优先级

1.标签样式的继承关系 整个html文件是一个家族的关系，嵌套和关联了N个父子关系和兄弟关系，html标签是始祖标签，在任何的层级下，style作用到的标签及其子孙标签（未被指定样式）都将继承该样式，有个别样式是不具备继承的。

2.属性选择器的优先级关系
 相同的选择器可以进行分数的比较，不同属性间，不能进行分数比较，只能进行属性比较，id 大于 11个class  大于 101个标签选择器。
 单层结构html： id选择器 100分值 > class 10分值  > 标签名 1分值
 多层结构html： 根据选择器所处的分值之和，决定样式是否能够作用到标签上。
 当选择器的分值相等时，看选择器所处的位置，谁最后加载就选择谁，也就是 谁在文件的下方选择谁。 
 css 行内引入的样式 分值1000 一般不使用
 测试的时候使用 color:yellow!important 强制加载样式。
posted @ 2022-03-13 22:04  mmszxc  阅读(344)  评论(0)    收藏  举报