网页的样式介绍

最新推荐文章于 2024-07-19 22:26:16 发布

sur_haha

最新推荐文章于 2024-07-19 22:26:16 发布

阅读量574

点赞数 19

文章标签：笔记 html 前端

本文链接：https://blog.csdn.net/sur_haha/article/details/135653084

版权

css样式的引入

内联样式（行为样式）：

就是在html标签里面的样式，方式就是style

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="background-color: red;"><!--这个样式为背景颜色是红色-->	
	</body>
</html>

内部样式：

写在head标签中，语法：选择符{样式}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: cadetblue;
			}//内容里面的背景颜色
			h1{
				text-align: center;
			}//使h1标签居中
			span{
				color: cornflowerblue;
			}//span标签里的颜色
		</style>
	</head>
	<body>
		<h1>今天天气很好</h1>
		<span>今天又是开心的一天</span>
	</body>
</html>

引入外部样式：

创建一个新的css文件，在head里面用link标签，用link表签引入css

css中所写的内容与内部样式几乎一致

选择器的分类：

所有html语言中的标签样式，都是通过不同的css选择器进行控制的

包括：标签选择器、通用选择器、类选择器和ID选择器

1.标签选择器：如

body{
	background-color: cadetblue;
}
h1{
	text-align: center;
}
span{
	color: cornflowerblue;
}

2.通用选择器：用*{样式}，它会用在所有的标签上

3.类选择器：也叫class选择器，在css中用.代表一个类选择器

例如：.{background-color: cadetblue;}
4.id选择器：即在body中给一个标签定位，用id定位，在css中写样式时，在它的前面加上#即可

5.后代选择器（我们老师没有细讲，具体的我也没有搞明白呢，只知道有这个选择器）

sur_haha

关注

19
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
网页的样式介绍

5.后代选择器（我们老师没有细讲，具体的我也没有搞明白呢，只知道有这个选择器）4.id选择器：即在body中给一个标签定位，用id定位，在css中写样式时，在它的前面加上#即可。创建一个新的css文件，在head里面用link标签，用link表签引入css。所有html语言中的标签样式，都是通过不同的css选择器进行控制的。包括：标签选择器、通用选择器、类选择器和ID选择器。2.通用选择器：用*{样式}，它会用在所有的标签上。写在head标签中，语法：选择符{样式}css中所写的内容与内部样式几乎一致。
复制链接

扫一扫