第三次网页前端培训笔记（CSS)

冰潔

已于 2022-02-08 12:25:55 修改

阅读量314

点赞数

文章标签：前端 css

于 2022-02-05 18:05:20 首次发布

本文链接：https://blog.csdn.net/prtinf48_9/article/details/122790608

版权

学习地址：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

一. CSS的基本使用

CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性值。

选择器名：{

属性：属性值；

·········

}

注：

CSS要以分号结束，声明以{}括起来；
最好一行书写一个属性
若值为若干单词，则要给值加引号，如：font-family："agency fb"；

三种使用方式：

1. 行内样式：直接写在标签上（在标签上通过style属性定义的样式）；

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

2. 内部样式：定义在style标签中的一种样式，style标签一般设置在head标签中；

<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		/*设置所有的h3标签为红色*/
		h3 {
			color: red;
		}
	</style>
</head>
<body>
	<h3>Hello World</h3>
	<h3>Hello World</h3>
</body>

3. 外部样式：定义在外部的CSS文件中，通过link引入

<link rel="stylesheet" type="text/css" href="css/文件的路径"/>

CSS中：

h4{
	font-size:2.5rem;
}

HTML中：

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<h4>Hello World</h4>
		<h4>Hello World</h4>
	</body>

注：当有多重样式时，越精准越优先（就近原则）；

二. CSS选择器

1. 通用选择器：*

*{

属性名：属性值；

······

}

<head>
	<meta charset="utf-8">
	<title>基本选择器</title>
	<style type="text/css">
		* {
			color: #FF0000;
		}
	</style>
</head>

（改变所有字体颜色）

2. 元素选择器：

元素名/标签名{

属性名：属性值；

······

}

<head>
	<meta charset="utf-8">
	<title>基本选择器</title>
	<style type="text/css">
		div{
			font-size: 1.875rem;
		}
	</style>
</head>
<body>
	<div>这是一个div1</div>
	<div>这是一个div2</div>
	<p>这是一个p</p>
</body>

3. ID选择器：#

# id属性值{

属性名：属性值；

······

}

<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<style type="text/css">
			#p1{
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>

		<p id="p1">这是一个p</p>
		<span>这是一个span</span>
		<font>这是一个font</font>
	</body>
</html>

（只有id为p1的元素背景颜色改变）

4. 类选择器：

.class属性值{

属性名：属性值；

······

}

<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<style type="text/css">
			.cls1{
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
		<div class="cls1">这是一个div1</div>
		<div class="cls1">这是一个div2</div>
		<p id="p1">这是一个p</p>
	</body>
</html>

（只有class属性被定义为cls1的元素字体变成楷体）

5. 分组选择器：#

选择器1，选择器2，选择器3···{

属性名：属性值；

······

}

<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<style type="text/css">
		#p1,.cls1,font{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div class="cls1">这是一个div1</div>
		<div class="cls1">这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span>这是一个span</span>
		<font>这是一个font</font>
	</body>
</html>

（部分带上中划线）

样式的优先级是根据选择器的精确度/权重来决定的，权重越大，优先级越高

常见的权重如下：

元素选择器	1
类选择器	10
id选择器	100
内联样式	1000

三. CSS组合选择器

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

选择器指定元素{

属性名：属性值；

······

}


<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		    /*后代选择器*/
			.food li{
				border: blueviolet solid 1px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</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>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨</li>
		</ul>
	</body>
</html>

（选择food中的梨元素添加边框）

2. 子代选择器：选择指定元素的第一代子元素，以加号+隔开

选择器 > 指定元素{

属性名：属性值；

······

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*子代选择器*/
            .food2 > li{
				border: rosybrown dotted 1px;
			}
	</head>
	<body>
		<ul class="food2">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>卷心菜</li>
					<li>菠菜</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

（选中的class为food2的元素的第一代li加上虚框）

3. 相邻兄弟选择器：选择指定元素的下一个指定元素，两者有相同的父元素，以加号+隔开

选择器 + 指定元素{

属性名：属性值；

······

}


<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*兄弟选择器*/
			#mydiv + div{
				background-color: burlywood;
			}
		</style>
	</head>
	<body>

		<div>相邻兄弟选择器1</div>
		<div id="mydiv">相邻兄弟选择器2</div>
		<div>相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
	</body>
</html>

（选中指定id为mydiv的元素相邻的下一个元素改变）

但是如果想要找的元素身边并没有同类元素，则指令不会生效：


<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*兄弟选择器*/
			#mydiv + div{
				background-color: burlywood;
			}
		</style>
	</head>
	<body>

		<div>相邻兄弟选择器1</div>
		<div id="mydiv">相邻兄弟选择器2</div>
        <p>这是一个p元素</p>
		<div>相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
	</body>
</html>

4. 普通兄弟选择器：选择指定元素后面的所有指定元素，两者有相同的父元素，以 ~ 隔开

选择器 ~ 指定元素{

属性名：属性值；

······

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*普通兄弟选择器*/
			#mydiv2 ~ div{
				background-color: chartreuse;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div>普通兄弟选择器4</div>
		<div id="mydiv2">普通兄弟选择器5</div>
		<div>普通兄弟选择器6</div>
		<div>普通兄弟选择器7</div>
	</body>
</html>

（指定元素之后的所有兄弟元素全部执行命令）

冰潔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三次网页前端培训笔记（CSS)

学习地址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili一. CSS的基本使用CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性值。选择器名：{ 属性：属性值； ·········}注： CSS要以分号结束，声明以{}括起来；最好一行书写一个属性若值为若干单词，则要...
复制链接

扫一扫