文章目录(PS:觉得不错请点赞收藏支持一下)
一、CSS 初识
1.1 概念
-
说明
- CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表)
-
作用
-
主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式
-
CSS 以 HTML 为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式
-
1.2 引入 CSS 样式表
1.2.1 行内式(内联样式)
-
说明
- 通常称为行内样式、行间样式
- 通过标签的 style 属性来设置元素的样式
- HTML 中任何的标签都拥有 style 属性,用来设置行内式
-
格式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
-
注意
- style 其实就是标签的属性
- 样式属性和值中间是
:
- 多组属性值之间用
:
隔开 - 只能控制当前的标签和以及嵌套在其中的子标签,造成代码冗余
-
缺点
- 没有实现样式和结构相分离
1.2.2 内部样式表(内嵌样式表)
-
说明
- 通常称为 内嵌式
- 是将 CSS 代码集中写在 HTML 文档的 head 头部标签中,并且用 style 标签定义
-
格式
<style type="text/css">
标签选择器 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
-
注意
- style 标签一般位于 head 标签中,理论上它可以放在 HTML 文档的任何地方
- type=“text/css” 在 HTML5 中可以省略
- 只能控制当前的页面
-
缺点
- 没有彻底分离
1.2.3 外部样式表(外链式)
-
说明
- 通常称为 链入式
- 是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中
- 通过 link 标签 将外部样式表文件链接到 HTML 文档中
-
格式
<link rel="stylesheet" type="text/css" href="css文件路径">
-
注意
- link 是个单标签
- link 标签需要放在 head 头部标签中,并且指定 link 标签的三个属性
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,需要指定为 “stylesheet”,表示被链接的文档是一个样式表文件 |
type | 定义所链接文档的类型,需要指定为 “text/css”,表示链接的外部文件为 CSS 样式表,可以省略 |
href | 定义所链接外部样式表文件的 URL,可以是相对路径,也可以是绝对路径 |
1.2.4 三种样式表总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
1.2.5 CSS 样式规则
-
代码风格
- 紧凑格式(Compact)
选择器或标签名 { 属性名: 属性值; 属性名: 属性值;}
- 展开格式(推荐使用)
选择器或标签名 { 属性名: 属性值; 属性名: 属性值; }
-
代码大写
推荐使用: 样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。
总结
- 选择器用于指定 CSS 样式作用的 HTML 标签,花括号内是对该对象设置的具体样式。
- 属性和属性值以 “键值对” 的形式出现。
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
- 属性和属性值之间用英文
:
连接。 - 多个 “键值对” 之间用英文
:
进行区分。
1.2.6 CSS 样式优先级
-
说明
CSS 共分为三种样式,分别为 行内样式、内部样式、外部样式
行内样式写法 <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> 内部样式写法 <style> 标签选择器 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style> 外部样式写法 <link rel="stylesheet" type="text/css" href="css文件路径">
二、 CSS 选择器
2.1 概念
-
说明
- 用来找到特点的 HTML 页面元素
- 通俗的讲,就是把我们想要的标签选择出来
- 分工明确,也就是说选对人,做对事
- 选择器分为基础选择器和复合选择器
2.2 CSS 基础选择器
2.2.1 标签选择器
-
说明
- 标签选择器(元素选择器) 是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
-
语法
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
-
作用
- 标签选择器 可以把某一类标签全部选择出来,比如所有的 div 标签 和所有的 span 标签
-
优点
- 能快速为页面中同类型的标签统一样式
-
缺点
- 不能设计差异化样式
-
口诀
标签选择器,
页面同选起。
直接写标签,
全部不放弃。
2.2.2 类选择器
-
说明
- 类选择器使用 “.” (英文点号) 进行标识,后面紧跟类名
-
语法
类名选择器
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<p class="类名"></p>
-
优点
- 可以为元素对象定义单独或相同的样式,可以选择一个或者多个标签
-
注意
- 类选择器使用 “.” (英文点号) 进行标识,后面紧跟类名(自定义名字)
- 长名称或词组可以使用中横线来为选择器命名
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示
-
口诀
差异化选择
一个或多个
上面点定义
类名别写错
谁用谁调用
class来做
嘿嘿,工作类最多
-
特殊用法—多类名
-
说明: 我们可以给标签指定多个类名,方便更多的的选择
-
注意: 各个类名中间用空格隔开
-
格式
-
<div class="类名1 类名2 类名3"></div>
2.2.3 id 选择器
-
说明
- id 选择器使用
#
进行标识,后面紧跟 id 名 - 元素的 id 值是唯一的,只能对应于文档中某一个具体的元素
- 用法基本和类选择器相同
- id 选择器使用
-
格式
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
-
id 选择器和 类选择器区别
- W3C标准规定,在同一页面上,不允许有相同名字的 id 对象出现,但是允许相同名字的 class
- 类选择器(class) 好比人的名字,是可以多次重复使用的,比如 张伟,刘洋,王伟…等等
- id 选择器 好比人的身份证号码,全中国是唯一的,不得重复,只能使用一次
2.2.4 通配符选择器
-
说明
- 用
*
号表示,意思是选择所有的标签 - 它是所有选择器中作用范围最广的,能匹配页面中所有的元素
- 用
-
格式
* {
属性1: 属性值1
属性2: 属性值2
属性3: 属性值3
}
-
注意
- 会匹配页面所有的元素,降低页面响应速度,不建议随便使用
2.2.5 基础选择器总结
选择器 | 作用 | 缺点 | 使用情况 |
---|---|---|---|
标签选择器 | 选出所有相同的标签 | 不能差异化选择 | 较多 |
类选择器 | 选出 1个 或者 多个标签 | 可以根据需求选择 | 非常多 |
id 选择器 | 一次只能选择 1个 标签 | 只能使用一次 | 不推荐使用 |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 不推荐使用 |
2.3 复合选择器
-
说明:
- 为了可以选择更准确更精细的目标元素标签
- 由两个或多个基础选择器,通过不同的方式组合而成
2.3.1 后代选择器
-
说明
- 通常称为包含选择器
- 写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔
- 当标签发生嵌套时,内层标签成为外层标签的后代
-
作用
- 用来选择元素或元素组的子孙后代
-
格式
父级 子级 {
属性: 属性值1;
属性: 属性值2;
}
2.3.2 子元素选择器
-
说明
- 子元素选择器只能选择作为某元素子元素(亲儿子)的元素
- 写法就是把父级标签写在前面,子级标签写在后面,中间跟一个
>
进行连接
-
格式
父级 > 子级 {
属性: 属性值1;
属性: 属性值2;
}
-
注意
- 这里的子级元素指的是 亲儿子,不包含 重孙子之类
2.3.3 交集选择器
-
说明
- 由两个选择器构成
- 选择的标签必须满足: 既有标签一的特点,也有标签二的特点
- 两个选择器之间不能有空格
- 交集选择器 可以理解为 并且的意思
-
格式
意思是 选择的是 p 标签中类名为 one 的标签
p.one {
属性: 属性值1;
属性: 属性值2;
}
2.3.4 并集选择器(群组选择器)
-
说明
- 也叫群组选择器
- 多个标签需要相同样式的话,可以使用并集选择器,可以让代码更简洁
- 任何形式的选择器都可以作为并集选择器的一部分
- 用逗号隔开,可以理解为 和 的意思
-
格式
意思是 p 标签 和 类名为 one 的标签 和 h1 定义了如下的属性
p,.one,h1 {
属性: 属性值1;
属性: 属性值2;
}
2.3.5 链接伪类选择器
-
说明
- 用
:
表示 - 用于向某些选择器添加特殊的效果
- 用
-
功能
选择器 | 例子 | 描述 |
---|---|---|
:link | a:link | 默认样式 |