CSS系统学习之CSS简介

最新推荐文章于 2024-09-18 21:38:12 发布

我会努力变强的

最新推荐文章于 2024-09-18 21:38:12 发布

阅读量479

点赞数

分类专栏： JavaScript 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_40837310/article/details/120885579

版权

JavaScript 专栏收录该内容

38 篇文章 8 订阅

订阅专栏

网页的构成

一个网页构成有三要素：结构、样式、行为，而结构用HTML控制，行为用JavaScript控制，样式用CSS控制。

CSS简介

CSS，层叠样式表，网页实际上是一个多层结构，通过CSS可以分别为网页的每一层来设计样式，而我们最终能看到的只是网页的最上面一层，总之就是CSS是用于设置网页中元素的样式。

CSS编写的位置

CSS编写的地方分为三个，内联样式、内部样式表，外部样式表。
内联样式：
内联样式又称行内样式，就是写在元素里面的样式，语法是使用元素的style属性来设置，样式的key和value使用冒号分隔，多个样式使用分号分隔。

<!doctype html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		
		<title>CSS学习</title>
	</head>
	
	<body>
		<p style="color:red;">CSS学习</p>
		<p style="color:red;">CSS学习</p>
		<p style="color:red;">CSS学习</p>
		<p style="color:red;">CSS学习</p>
	</body>
</html>

效果：
在这里插入图片描述
内联样式的缺点：不能复用，每个样式的设置只对当前标签有效，如果多个标签都需要这样的样式就要在每一个标签都设置，如上面实例代码，并且如果样式一修改，例如上面代码希望把颜色改为绿色，就需要一个个标签都改。所以在实际开发中，尽量不用内联样式，如果日常学习测试图方便可以用用。

内部样式表：
将样式编写在head标签里面的style标签中，然后通过CSS选择器来选中元素并设置样式，可以同时为多个标签设置样式，并且修改只需修改一处即可，内部样式表在一定程度内对样式进行了复用。

语法：
注释使用 /* 里面编写注释 */
基本语法是：
选择器 { 里面写多个样式，样式的key和value用冒号分隔，多个样式间用分号分隔 }


<!doctype html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		
		<title>CSS学习</title>
		<style>
			<!-- 选择器，直接就标签选中文档中所有的p标签，然后设置样式-->
			p{
				color:red;
			}
		</style>
	</head>
	
	<body>
		<p>CSS学习</p>
		<p>CSS学习</p>
		<p>CSS学习</p>
		<p>CSS学习</p>
	</body>
</html>

效果跟上面的一模一样，只是使用内部样式表，如果要修改为绿色，只需修改一处即可，但是这种内部样式表只能对单个页面有效，不能夸页面使用，所以虽然进行了一定程度的复用，但是还不够，需要外部样式表。

外部样式表：
将CSS样式单独编写在一个CSS文件中，然后网页进行引入。


<!doctype html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		
		<title>CSS学习</title>
		<!-- 通过link标签引入外部的css文件 -->
		<link rel="stylesheet" href="css.css">
	</head>
	
	<body>
		<p>CSS学习</p>
		<p>CSS学习</p>
		<p>CSS学习</p>
		<p>CSS学习</p>
	</body>
</html>