文章目录
一、CSS 引入方式
CSS 引入方式相关博客 :
- 【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
- 【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )
- 【CSS】CSS 层叠样式表 ③ ( CSS 引入方式 - 外链式 | CSS 样式规则 )
1、CSS 的 3 种引入方式 ( 内联 | 内嵌 | 外链 )
CSS ( Cascading Style Sheets ) 层叠样式表 有 3 种引入方式 :
- 内联样式 : 将 标签样式 直接写在 HTML 标签元素 的 内部 , 使用 style 标签属性设置 CSS 样式 , 将 CSS 样式信息 与 特定的 HTML 标签元素 直接关联在一起 ;
- 缺点 : 只能控制当前 HTML 标签的样式 , 每个标签都要写一遍样式 , 会 造成代码冗余 ; 没有实现 样式 与 结构分离 ;
<h3 style="color:red; font-size:20px;">用户注册信息</h3>
- 内嵌样式 : CSS 样式代码 写在 HTML 文档的 <head> 标签中 的 <style> 标签中 ;
- 适用场景 : 内嵌样式 引入 CSS 样式 适合 单个网页 的样式定义 ;
- 缺陷 : 如果一个 网站包含多个页面 , 每个页面都使用内部样式表会导致代码重复和维护困难 ;
<head>
<style type="text/css">
标签选择器 {
属性名称1: 属性值1;
属性名称2: 属性值2;
属性名称3: 属性值3;
}
</style>
</head>
- 外链式 : 将 CSS 样式代码 写在一个单独的 .css 文件中 , 然后在 HTML 文档中使用 <link> 标签 或 @import 规则引入 ;
- 优点 : 提高了代码的 可重用性 , 可维护性 , 网站性能 ;
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
@import url('styles.css');
</style>
</head>
二、CSS 选择器
CSS 选择器 相关博客 :
- 【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )
- 【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )
- 【CSS】CSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )
- 【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )
- 【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )
1、CSS 基础选择器
CSS 选择器 :
- 标签选择器 ( 推荐使用 ) : 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ;
- 优点 : 可以 快速为 HTML 页面的 某个类型的标签统一样式风格 ;
- 缺点 : 不能进行差异化的样式风格设置 ;
HTML标签名 {
属性名称:属性值;
}
h3 {
font-size:20px;
}
-
类选择器 ( 推荐使用 ) : 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ;
- 首先 , 在标签中的 class 属性中设置类名 ,
<p class="name">标签内容</p>; - 然后 , 在 CSS 中使用 " .类名 " 作为 类选择器 , 选出设置指定类名的标签 ,
.name { color: blue; };
- 首先 , 在标签中的 class 属性中设置类名 ,
-
id 选择器 ( 不推荐使用 ) : 使用 " #id " 选择 指定的 某一个 标签 ;
- 首先 , 在 HTML 中 设置 标签的 ID ,
<p id="name">标签内容</p>; - 然后 , 在 CSS 样式中使用 ID 选择器 ,
#name { color: blue; };
- 首先 , 在 HTML 中 设置 标签的 ID ,
-
通配符选择器 ( 不推荐使用 ) : 使用 通配符 * 可以 选择所有标签 ,
* { color: blue; }; 使用该 选择器 会降低 页面的 打开速度 , 如果没有特殊情况 , 不推荐使用 ;
2、CSS 复合选择器
后代选择器
后代选择器 可以选择 子元素 , 孙子元素 , 不限制选择层数深度 ;
后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组 ;
后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ;
父选择器 子选择器 {
属性名称1:属性值1;
属性名称2:属性值2;
属性名称3:属性值3;
}
子元素选择器
子元素选择器 只能 选择亲儿子元素 , 不能选择 孙子元素 ;
子元素选择器 可以 选择 某个基础选择器 选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ;
子元素选择器语法 : 父选择器 写在前面 , 子选择器 写在后面 , 两个选择器之间使用 > 大于号隔开 ;
父选择器>子选择器 {
属性名称1:属性值1;
}
交集选择器
交集选择器 由 两个 基础选择器 组成 , 目的是 选择出 同时满足 两个 基础选择器 要求的标签 ;
交集选择器语法 : 两个基础选择器之间没有空格 ;
基础选择器1基础选择器2 {
属性名称1:属性值1;
}
并集选择器
并集选择器 可以 选择 若干 基础选择器 选择出的 并集元素集合 ;
并集选择器语法 : 若干 基础选择器 可以写在一起 , 基础选择器之间使用 , 逗号隔开 ;
基础选择器1,基础选择器2,基础选择器3 {
属性名称1:属性值1;
}
链接伪类选择器
链接伪类选择器 可以 设置 链接文本 的 不同状态的样式 :
- 未访问链接样式 : 默认的样式 , 界面打开后 , 默认显示该样式 ;
a:link {
属性名称:属性值;
}
- 已访问链接样式 : 点击过的链接 , 链接变成该样式 ;
a:visited {
属性名称:属性值;
}
- 鼠标移动到链接样式 : 鼠标移动到 链接 上方 , 链接变成该样式 ;
a:hover {
属性名称:属性值;
}
- 选定链接样式 : 按下鼠标松开时 , 变成该样式 ;
a:active {
属性名称:属性值;
}
注意 :
- 顺序必须严格遵守 LVHA 次序 : 使用 链接伪类选择器 时 , 四种选择器必须按照上述顺序 , 如果顺序颠倒会出现错误 ;
- 实际用法 : 在实际开发时 , 一般只需要设置
a:hover鼠标经过的样式 , 其它的三种不需要设置 , 不常用 ;