CSS简介与选择器

1.CSS

1.1CSS简介

CSS (Cascading Style Sheets) 层叠样式表，是⼀个⽤于修饰⽂档 （可以是标记语⾔HTML， 也可以是 XML 或者 SVN ）的语⾔，可以将⽂档以更优雅的形式呈现给⽤户。

1.2CSS的引入方式

1.2.1内联样式

缺点：样式与结构冗余

优点：优先级较⾼ 内联样式表就是把 css 代码直接写在现有的 HTML 标签中，具体的使⽤⽅法

如下⾯所示： <div style = "color:red" > 设置⽂字的颜⾊为红⾊ </div>

1.2.2内部样式表

缺点：样式的复⽤率较低

优点：样式与结构分离

将样式表编写到 head 中的 style 标签中

<style type = "text/css" >

p {

color : red ;

background-color : yellow ;

}

</style>

1.2.3外部样式表

优点：样式与结构分离，解耦；样式的复⽤率⾼， 共⽤定义好的css ⽂件可以应⽤到多个⻚⾯中。

引用方式：

1.将样式表编写到外部的 CSS ⽂件中，然后通过 link 标签将外部⽂件引⼊：

<link rel = "stylesheet" type = "text/css" href = " ⽂件的路径 " />

2.@import url() ，还可通过 import ⽅式导⼊ CSS ⽂件：

< style >

/* 要写在 style 标签的最前⾯，否则不会⽣效 或者直接在外部 css ⽂件中直接使

⽤ */

@import url ( './style.css' );

</ style >

1.3引入方式的优先级

⾏内样式 > 内部样式 / 外部引⼊

就近原则：哪⼀种设置⽅式距离元素最近，谁的优先级更⾼；

2.选择器

2.1标签选择器

根据指定的标签名称 , 在当前界⾯中找到所有该名称的标签 , 然后设置属性。

格式：

标签名称 {

属性 : 值 ;

}

2.2id选择器

根据指定的 id 名称找到对应的标签 , 然后设置属性。

格式：

#id 名称 {

属性 : 值 ;

}

2.3类选择器

根据指定的类名称找到对应的标签 , 然后设置属性。

格式：

. 类名 {

属性 : 值 ;

}

2.4后代选择器

找到指定标签的所有特定的后代标签 , 设置属性。

格式：

标签名称 1 标签名称 2{

属性 : 值 ;

}

2.5子元素选择器

找到指定标签中所有特定的直接⼦元素 , 然后设置属性

格式 :

标签名称 1> 标签名称 2{

属性 : 值 ;

}

2.6交集选择器

给所有选择器选中的标签中 , 相交的那部分标签设置属性

格式 :

选择器 1 选择器 2{

属性 : 值 ;

}

2.7并集选择器

给所有选择器选中的标签设置属性

格式 :

选择器 1, 选择器 2{

属性 : 值 ;

}

2.8兄弟选择器

2.8.1相邻兄弟选择器 CSS2

给指定选择器后⾯紧跟的那个选择器选中的标签设置属性

格式 :

选择器 1+ 选择器 2{

属性 : 值 ;

}

2.8.2通⽤兄弟选择器 CSS3

作⽤ : 给指定选择器后⾯的所有选择器选中的所有标签设置属性

格式:

选择器 1~ 选择器 2{

属性 : 值 ; }

2.9属性选择器

根据指定的属性名称找到对应的标签 , 然后设置属性

格式 :

[attribute]

[attribute=value]

2.10通配符选择器

给当前界⾯上所有的标签设置属性

格式 :

*{

属性 : 值 ;

}

在这众多选择器中，我们不仅可以选择单个合适的选择器进行使用，也可以 多个选择器组合使⽤。