【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★

2024-03-12 12:48:28 浏览数 (12)

​

一、CSS 引入方式

1、CSS 的 3 种引入方式 ( 内联 | 内嵌 | 外链 )

CSS ( Cascading Style Sheets ) 层叠样式表 有 3 种引入方式 :

  • 内联样式 : 将 标签样式 直接写在 HTML 标签元素 的 内部 , 使用 style 标签属性设置 CSS 样式 , 将 CSS 样式信息 与 特定的 HTML 标签元素 直接关联在一起 ;
    • 缺点 : 只能控制当前 HTML 标签的样式 , 每个标签都要写一遍样式 , 会 造成代码冗余 ; 没有实现 样式 与 结构分离 ;
代码语言：javascript复制
<h3 style="color:red; font-size:20px;">用户注册信息</h3>
  • 内嵌样式 : CSS 样式代码 写在 HTML 文档的 <head> 标签中 的 <style> 标签中 ;
    • 适用场景 : 内嵌样式 引入 CSS 样式 适合 单个网页 的样式定义 ;
    • 缺陷 : 如果一个 网站包含多个页面 , 每个页面都使用内部样式表会导致代码重复和维护困难 ;
代码语言：javascript复制
<head>
	<style type="text/css">
	    标签选择器 { 
	      属性名称1: 属性值1;
	      属性名称2: 属性值2; 
	      属性名称3: 属性值3;
	    }
	</style>
</head>
  • 外链式 : 将 CSS 样式代码 写在一个单独的 .css 文件中 , 然后在 HTML 文档中使用 <link> 标签 或 @import 规则引入 ;
    • 优点 : 提高了代码的 可重用性 , 可维护性 , 网站性能 ;
代码语言：javascript复制
	<head> 
		<link rel="stylesheet" type="text/css" href="style.css" />
		<style>  
		  @import url('styles.css');  
		</style>
    </head>

二、CSS 选择器

1、CSS 基础选择器

CSS 选择器 :

  • 标签选择器 ( 推荐使用 ) : 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ;
    • 优点 : 可以 快速为 HTML 页面的 某个类型的标签统一样式风格 ;
    • 缺点 : 不能进行差异化的样式风格设置 ;
代码语言：javascript复制
HTML标签名 {
	属性名称:属性值; 
} 
h3 { 
  font-size:20px; 
}
  • 类选择器 ( 推荐使用 ) : 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ;
代码语言：txt复制
- 首先 , 在标签中的 class 属性中设置类名 , `<p class="name">标签内容</p>` ;
- 然后 , 在 CSS 中使用 " .类名 " 作为 类选择器 , 选出设置指定类名的标签 , `.name { color: blue; }` ;
代码语言：txt复制
- 首先 , 在 HTML 中 设置 标签的 ID ,  `<p id="name">标签内容</p>`  ;
- 然后 , 在 CSS 样式中使用 ID 选择器 , `#name { color: blue; }` ;

2、CSS 复合选择器

后代选择器

后代选择器 可以选择 子元素 , 孙子元素 , 不限制选择层数深度 ;

后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组 ;

后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ;

代码语言：javascript复制
父选择器 子选择器 {
	属性名称1:属性值1;
	属性名称2:属性值2;
	属性名称3:属性值3;
}
子元素选择器

子元素选择器 只能 选择亲儿子元素 , 不能选择 孙子元素 ;

子元素选择器 可以 选择 某个基础选择器 选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ;

子元素选择器语法 : 父选择器 写在前面 , 子选择器 写在后面 , 两个选择器之间使用 > 大于号隔开 ;

代码语言：javascript复制
父选择器>子选择器 {
	属性名称1:属性值1;
}
交集选择器

交集选择器 由 两个 基础选择器 组成 , 目的是 选择出 同时满足 两个 基础选择器 要求的标签 ;

交集选择器语法 : 两个基础选择器之间没有空格 ;

代码语言：javascript复制
基础选择器1基础选择器2 {
	属性名称1:属性值1;
}
并集选择器

并集选择器 可以 选择 若干 基础选择器 选择出的 并集元素集合 ;

并集选择器语法 : 若干 基础选择器 可以写在一起 , 基础选择器之间使用 , 逗号隔开 ;

代码语言：javascript复制
基础选择器1,基础选择器2,基础选择器3 {
	属性名称1:属性值1;
}
链接伪类选择器

链接伪类选择器 可以 设置 链接文本 的 不同状态的样式 :

  • 未访问链接样式 : 默认的样式 , 界面打开后 , 默认显示该样式 ;
代码语言：javascript复制
a:link {
	属性名称:属性值;
}
  • 已访问链接样式 : 点击过的链接 , 链接变成该样式 ;
代码语言：javascript复制
a:visited {
	属性名称:属性值;
}
  • 鼠标移动到链接样式 : 鼠标移动到 链接 上方 , 链接变成该样式 ;
代码语言：javascript复制
a:hover {
	属性名称:属性值;
}
  • 选定链接样式 : 按下鼠标松开时 , 变成该样式 ;
代码语言：javascript复制
a:active {
	属性名称:属性值;
}

注意 :

  • 顺序必须严格遵守 LVHA 次序 : 使用 链接伪类选择器 时 , 四种选择器必须按照上述顺序 , 如果顺序颠倒会出现错误 ;
  • 实际用法 : 在实际开发时 , 一般只需要设置 a:hover 鼠标经过的样式 , 其它的三种不需要设置 , 不常用 ;
网站 基础 语法 css html

2 人点赞