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

最新推荐文章于 2024-03-21 20:51:06 发布

桃桃薄荷瑶

最新推荐文章于 2024-03-21 20:51:06 发布

阅读量95

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_62854583/article/details/122800883

版权

1.何为CSS

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示HTML元素，通常储存在样式表中。样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

2.CSS实例

由两部分组成：选择器{属性：值；属性：值；}选择器是需要改变的HTML元素，每条声明由一个属性和一个值组成，其中属性和值被冒号分开。声明总是以；结束，且以大括号{}括起来。

例：h1 {color:red;font-size:12px}。

3.CSS注释

/*注释格式*/

4.选择器

4.1.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。（写在head内的<style>中）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试一试</title>
		<style>
		#p1{
			color: #66CCFF;
		}
		</style>
	</head>
	<body>
		<p id="p1">段落一</p>
		<p id="p2">段落二</p>
	</body>
</html>

4.2.class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试一试</title>
		<style>
		.zzz{
			color: cadetblue;
			text-align: center;
		}
		</style>
	</head>
	<body>
		<p id="p1">段落一</p>
		<p id="p2">段落二</p>
		<h1 class="zzz">特大号字体</h1>
		<h6 class="zzz">最小号字体</h6>
	</body>
</html>

4.3. 标签选择器

顾名思义就是直接选择HTML中的标签名称，如<h1>~<h6>、<p>、<img>等。对其进行声明。（见5.2图）

4.4.通用选择器

选择所有

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试一试</title>
		<style>
		*{
			color: orange;
		}
		</style>
	</head>
	<body>
		<p id="p1">段落一</p>
		<p id="p2">段落二</p>
		<h1 class="zzz">特大号字体</h1>
		<h6 class="zzz">最小号字体</h6>
	</body>
</html>

4.5.分组选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试一试</title>
		<style>
		#p1,font,.zzz{
			color: blueviolet;
		}
		</style>
	</head>
	<body>
		<p id="p1">段落一</p>
		<p id="p2">段落二</p>
		<font size="1" color="white">你好</font>
		<h1 class="zzz">特大号字体</h1>
		<h6 class="zzz">最小号字体</h6>
	</body>
</html>

4.6.组合选择器

CSS组合选择器说明了两个选择器直接的关系。CSS选择器包括简单选择符的组合方式。

4.6.1.后代选择器

用于选择指定标签元素下的所有后辈元素，以空格分隔。

选择器1 选择器2{
    ......
}

4.6.2.子代选择器

选择指定元素的第一代子元素，以大于号分隔。

选择器1>选择器2{
    ......
}

4.6.3.相邻兄弟选择器

选择指定元素的下一个元素（仅仅一个），两者有相同的父元素，以+隔开。

选择器1+选择器2{
    ......
}

4.6.4.普通兄弟选择器

选择该元素以及该元素的下一个元素，两者有相同的父元素，以~隔开。

选择器1~选择器2{
    ......
}

5.样式表

5.1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。

5.2.内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>试一试</title>
		<style>
		p {color: #4CD964;}
		h1 {text-align: center;}
		h6 {color: red;}
		</style>
	</head>
	<body>
		<p id="p1">段落一</p>
		<p id="p2">段落二</p>
		<h1 class="zzz">特大号字体</h1>
		<h6 class="zzz">最小号字体</h6>
	</body>
</html>

5.3.样式优先级

记住优先级是遵循 “就近原则” 哪种样式离修饰的标签近，就继承哪种。行内样式一定优先于内部样式表、外部样式表，因为行内样式就写在标签里。而内部、外部样式表就看谁离标签近就继承谁。

桃桃薄荷瑶

关注

0
点赞
踩
0

收藏

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

1.何为CSSCSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示HTML元素，通常储存在样式表中。样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。2.CSS实例由两部分组成：选择器{属性：值；属性：值；}选择器是需要改变的HTML元素，每条声明由一个属性和一个值组成，其中属性和值被冒号分开。声明总是以；结束，
复制链接

扫一扫