CSS引入方式及常用选择器

CSS引入方式及常用选择器：

CSS功能：给HTML标签添加修饰

1.三种方式：

1.1.行内样式：在标签内指定style属性，书写样式

style="css样式属性1：css样式属性值1；css样式属性2：css样式属性值2"

弊端：

1.一次只能控制一个标签
2.样式代码和HTML代码混合使用，不利于后期管理

1.2.内部（内联）样式：

在head标签体中指定style标签

格式：

选择器{
    css样式属性1：值1；
    css样式属性2：值2；
    css样式属性3：值3；
    ······
}

特点：

1.比行内样式优越，但也和html代码混合使用，不利于后期管理

1.3.外部（外联）样式：——前端开发中常用

1.创建外部的css文件
2.引入外部css文件

在head中指定link标签:
href属性：连接css文件
rel属性：固定格式stylesheet(关联层叠样式表)

CSS选择器(优先级由低到高)：

优先级：id选择器>class选择器>标签选择器

2.1 标签（element）选择器

格式：

标签名称{
    书写样式；
}

2.2 class选择器

在标签中指定class属性
特点：在同一个html页面下，多个标签可以指定同名class属性
格式：

.class属性值{
    书写样式；
}

2.3 id选择器

在标签中指定id属性
特点：id属性值在同一个html页面必须唯一
格式：

#id属性值{
    书写样式；
}

2.4 其他选择器：

2.4.1 并集选择器：

格式：

选择器1，选择器2，...{
    书写样式；
}

2.4.2 交集选择器（子元素选择器）：

格式：

选择器1  选择器2  ...{
    书写样式；
}

区别：并集选择器多个选择器间以“，”分隔，交集选择器多个选择器间以空格分隔

2.4 3 通配符选择器：

格式：

*{
    书写样式；
}

2.4.4 伪类（锚伪类）选择器：

表示当前标签的一种状态：

• link状态：鼠标没有访问过的状态
• hover状态：鼠标经过的状态
• active状态：鼠标激活状态，点击了，但是鼠标没有松开的状态
• active状态：鼠标已经访问过的状态，点击了，而且松开了的状态

格式：

标签名称：状态{
    css代码；
}

注意:

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
• 伪类名称对大小写不敏感。