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

韩曙亮

发布于 2024-03-12 12:48:28

63500

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、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 选择器

1、CSS 基础选择器

CSS 选择器 :

标签选择器 ( 推荐使用 ) : 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用标签选择器的 CSS 样式 , 那么该 HTML 中的所有的指定标签 , 都使用该 CSS 样式 ;
- 优点 : 可以快速为 HTML 页面的某个类型的标签统一样式风格 ;
- 缺点 : 不能进行差异化的样式风格设置 ;

HTML标签名 {
	属性名称:属性值; 
} 
h3 { 
  font-size:20px; 
}

类选择器 ( 推荐使用 ) : 将页面中的某几个标签选择出来 , 使用 " .类名 " 识别标签 ;

- 首先 , 在标签中的 class 属性中设置类名 , `<p class="name">标签内容</p>` ;
- 然后 , 在 CSS 中使用 " .类名 " 作为 类选择器 , 选出设置指定类名的标签 , `.name { color: blue; }` ;

- 首先 , 在 HTML 中 设置 标签的 ID ,  `<p id="name">标签内容</p>`  ;
- 然后 , 在 CSS 样式中使用 ID 选择器 , `#name { 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 鼠标经过的样式 , 其它的三种不需要设置 , 不常用 ;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-12，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度