第三次网络前端培训（CSS）

2023-12-04 16:34:59

CSS：层叠样式表，用来优化页面。

1、CSS基本使用

1.1、CSS基本语法

css样式由选择器和一条或多条以“；”隔开的样式声明组成。每条样式声明都包含一个css属性及值。

h1{color：yellow；background-color：red；} h1为选择器（要修改的标签），color为属性“：”后面的yellow为值。

注意：声明用{}包裹且每个样式声明以“；”结束；一般一条样式声明写一行（美观）；当值为多个单词时，用“”包裹住。

css三种使用方式：

行内样式：直接在标签上的样式，在style中，在<>内。

内部样式：定义在style标签内，style在head内，前面有选择器。

外部样式：定义在css文件中，通过link引用（在head中引用）。

rel=“stylesheet”表示这是一个层叠样式表，type=“text/css”表示这是css样式，后面href表示css文件地址。

注意：当有多重样式时（如行内样式与内部样式都设置同一个标签的同一个属性时），越精确越优先，行内最精确（可以记成就近原则）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			h2{
				color:aqua;
			}
		</style> <!-- 内部样式 -->
		<link rel="stylesheet" type="text/css" href="css/style.css" /><!-- 外部样式 -->
	</head>
	<body>
		<h2>我们</h2>
		<h2 style="font-family: 楷体;">我们</h2> <!-- 行内样式 -->
	</body>
</html>

楷体是行内样式，颜色是内部样式，字体这么大是外部样式，在css文件中定义的。

1.2、css选择器（基本选择器）

1.2.1、通用选择器

用*表示，表示定义body中所有的*的样式，如*{color：red；} 其中*是选择器，后面所有的内容颜色属性都定义为red。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: bisque;
			}
		</style>
	</head>
	<body>
		<div>这是一个div</div>
		<div>这是一个div</div>
		<p>这是一个p</p>
		<span>这是一个span</span>
		<br />
		<font>这是一个font</font>
	</body>
</html>

1.2.2、元素选择器（优先级比通用选择器高）

元素名称（标签名）{}。可对所有标签修改样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: red;
			}
			div{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div>这是一个div</div>
		<div>这是一个div</div>
		<p>这是一个p</p>
		<span>这是一个span</span>
		<br />
		<font>这是一个font</font>
	</body>
</html>

1.2.3、ID选择器（优先级比元素选择器高）

以#区分，#ID{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: red;
			}
			div{
				color: yellow;
			}
			#div1{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="div1">这是一个div1</div>
		<div>这是一个div</div>
		<p>这是一个p</p>
		<span>这是一个span</span>
		<br />
		<font>这是一个font</font>
	</body>
</html>

1.2.4、类选择器（优先级比元素选择器高）

以.开头，后面跟定义的类名，.class{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: red;
			}
			div{
				color: yellow;
			}
			#div1{
				color: blue;
			}
			.class1{
				font-family: 楷体;
				color: aquamarine
			}
		</style>
	</head>
	<body>
		<div id="div1" class="class1">这是一个div1</div>
		<div id="div1">这是一个div</div>
		<div>这是一个div</div>
		<p>这是一个p</p>
		<span>这是一个span</span>
		<br />
		<font>这是一个font</font>
	</body>
</html>

1.2.5、分组选择器

将多个选择器写在一起。中间英文逗号。

选择器1,选择器2,选择器3...{}满足一个选择器就可以修改样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: red;
			}
			div{
				color: yellow;
			}
			#div1{
				color: blue;
			}
			.class1{
				font-family: 楷体;
				color: aquamarine
			}
			div,p{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="class1">这是一个div1</div>
		<div id="div1">这是一个div</div>
		<div>这是一个div</div>
		<p>这是一个p</p>
		<span>这是一个span</span>
		<br />
		<font>这是一个font</font>
	</body>
</html>

只要满足div或者p就有中划线样式。

注意：各选择器优先权重：元素选择器1，类选择器10，id选择器100，内联选择器1000（行内样式）。

1.3、css选择器（组合选择器）

说明两个选择器直接的关系

1.3.1、后代选择器（派生选择器）

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

选择器指定元素{

属性名：属性值；

。。。。。。

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style type="text/css">
			.food li{
				border:#5555ff solid/* 实心线 */ 1px ;
			}
		 </style>
	</head>
	<body>
		<ul class="food">
			<li>水果
				<ul>
					<li>苹果</li>
					<li>梨</li>
					<li>香蕉</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>芹菜</li>
					<li>萝卜</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

1.3.2、子代选择器

选择指定元素的第一代元素，用>隔开。

选择器 > 指定元素{

属性名：属性值；

。。。。。。

}

.food > li{
				border:#5555ff solid/* 实心线 */ 1px ;
			}

1.3.3、相邻兄弟选择器（相邻弟弟选择器，因为程序自上而下）

选择指定元素的下一个指定元素(只找一个），两者有相同父元素，中间加号分开。

选择器 + 指定元素{

属性名：属性值；

。。。。。。

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#s1 + div{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div>这是一个div1</div>
		<div id="s1">这是一个div2</div>
		<div>这是一个div3</div>
		<div>这是一个div4</div>
	</body>
</html>

注意：只有当要找到元素与前面的选择器相邻时才会执行，如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#s1 + div{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div>这是一个div1</div>
		<div id="s1">这是一个div2</div>
		<p>111</p>
		<div>这是一个div3</div>
		<div>这是一个div4</div>
	</body>
</html>

1.3.4、普通弟弟选择器

选择指定元素后面所有指定元素，用~分隔，如下图所有红色字。

选择器 ~ 指定元素{

属性名：属性值；

。。。。。。

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#s1 + div{
				color: #0000FF;
			}
			#s3 ~ div{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div>这是一个div1</div>
		<div id="s1">这是一个div2</div>
		<div>这是一个div3</div>
		<div>这是一个div4</div>
		<hr />
		<div>这是一个div4</div>
		<div>这是一个div4</div>
		<div id="s3">这是一个div4</div>
		<div>这是一个div4</div>
		<div>这是一个div4</div>
	</body>
</html>

码农公寓

1、CSS基本使用

1.1、CSS基本语法

1.2、css选择器（基本选择器）

1.2.1、通用选择器

1.2.2、元素选择器（优先级比通用选择器高）

1.2.3、ID选择器（优先级比元素选择器高）

1.2.4、类选择器（优先级比元素选择器高）

1.2.5、分组选择器

1.3、css选择器（组合选择器）

1.3.1、后代选择器（派生选择器）

1.3.2、子代选择器

1.3.3、相邻兄弟选择器（相邻弟弟选择器，因为程序自上而下）

1.3.4、普通弟弟选择器

相关文章