第三次前端培训（CSS的基本使用和选择器）-CSDN博客

本文链接：https://blog.csdn.net/qq_59332194/article/details/122788387

一. CSS的基础

1. 主要内容

在这里插入图片描述

2. CSS概述

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
注：CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。

3. CSS的基本使用

3.1 CSS的基本语法

CSS的定义
选择器名{
属性名:属性值;
属性名:属性值;
属性名:属性值;
···
}
注意点：
1.声明需要使用{}括起来，每个声明以分号;结尾
2.一行建议一个声明
3.如果样式的属性值由多个单词组成，则用引号引起来

h2{
	color: red;
	font-family: "agency black";
   }

3.2 注释

多行注释

/*  这里面就是注释  */

3.3 CSS的使用

3.3.1 行内式

直接写在标签上的样式，在标签上通过style属性定义的样式。以行内式写的CSS耦合度较高，只适用于当前元素，在设定某个元素的样式时比较常用。

<h2 style="color: red;font-family: 楷体;">Hello World</h2>

3.3.2 嵌入式

嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在head标签中嵌套style标签，在style中通过选择器的方式调用指定的元素并设置相关css。

<head>
		<meta charset="utf-8" />
		<title>CSS的基本使用</title>
		
		<style>
			/*设置所有的h2标签的文本为红色*/
			h2{
				color: red;
				font-family: "agency black";
			}
		</style>
	</head>

3.3.3 引入外联样式文件

在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。

style.css

h2{
	color: red;
	font-family: "agency black";
}

test.html

<link rel="stylesheet" type="text/css" href="style.css ">

rel:rel属性规定当前文档与被链接文档之间的关系。
stylesheet:文档的外部样式表。
很多时候，大量的HTML页面使用了同一个CSS。那么就可以将这些cSS样式保存在一个单独的.css文件中，然后通过link元素去引入它。
注意：当有多重样式时，记住前提规则，越精确越优先。

二. CSS选择器

1. 基础选择器

1.1 通用选择器

选择所有 *

*{
	属性名:属性值;
	···
}

1.2 元素选择器

选择指定标签

元素名称{
	属性名:属性值;
	···
}

1.3 ID选择器

选择设置过指定id属性值的元素 #

#id属性值{
	属性名:属性值;
	···
}

1.4 类选择器

选择设置过指定class属性值的元素

.class属性值{
	属性名:属性值;
	···
}

1.5 分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

选择器1,选择器2,选择器3...{
	属性名:属性值;
	···
}

注：

css样式的优先级，是根据选择器的精确度/权重来决定，常见的权重如下，权重越大，优先级越高
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000

2. 组合选择器

2.1 后代选择器（派生选择器）

选择指定元素的所有指定后代元素，以空格隔开

选择器 指定元素 {
					属性名:属性值;
					...
				}

2.2 子元素选择器

选择指定元素的第一代子元素，以>隔开

选择器 > 指定元素 {
					属性名:属性值;
					...
				}

2.3 相邻兄弟选择器

选择指定元素的下一个指定元素(只会找一个)，两者有相同的父元素，以加号+隔开

选择器 + 指定元素 {
					属性名:属性值;
					...
				}

2.4 普通兄弟选择器

选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号~隔开

选择器 ~ 指定元素 {
					属性名:属性值;
					...
				}