CSS

最新推荐文章于 2020-07-17 20:12:08 发布

without_scruple

最新推荐文章于 2020-07-17 20:12:08 发布

阅读量302

点赞数

分类专栏： Web前端开发文章标签： html css

本文链接：https://blog.csdn.net/without_scruple/article/details/75093019

版权

Web前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天学习了一些css的知识，总结一下所学知识，如果有什么错误还请诸位大神指出来

1、css简介

（1）css：层叠样式表

层叠：它是一层一层的

（2）css的优点：它可以使页面显示的效果更好；可以解决html样式代码的重复问题，提高了后期样式代码的可维护性，

并增强了网页的显示效果功能

2、css和html的四种结合方式

（1）在HTML标签中添加style属性，将html和css结合起来，例如：

	<p style="color:red">aaaaaaa</p>

（2）在HTML的head块中运用css代码，将html和css结合起来，例如：

<!DOCTYPE HTML>
<html>
	<head>
		<title>Document</title>
		<!--css代码块：-->
		<style type="text/css">			
			div{
				background:yellow;
				color:red;
			}	/*这块代码定义了全部的div块样式*/
		</style>
	</head>
	<body>
		<div>bbbbbbbbbbb</div>	<!--在网页上显示bbbbbbbbbb-->
	</body>
</html>

（3）使用@import url(css代码地址)的方式将html和css结合起来，例如：

先创建一个css文件，此文件的后缀名为.css，一下为css代码：

div{
	background-color:yellow;
	color:red;
}

调用css代码：

<!DOCTYPE HTML>
<html>
	<head>
		<title>html与css的结合方式三</title>
		<style type="text/css">
			@import url(css/div.css);
		</style>
	</head>
	<body>
		<div>aaaaaaa</div>
	</body>
</html>

（4）使用link标签将html和css结合起来，

与（3）相似，需要先建立css文件，然后调用css代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<title>html与css的结合方式四</title>
		<link rel="stylesheet" type="text/css" href="css/div.css">
	</head>
	<body>
		<div>aaaaaaa</div>
	</body>
</html>

注意：第三种结合方式，在某些浏览器中不起作用，一般使用第四种结合方式

优先级（一般情况）

从上到下，从外到内，优先级由低到高

3、css的基本选择器（三种）

（1）标签选择器

HTML标签中的每一个标签都可以是css的一个基本选择器

	div{
		background:gray;
		color:red;
	}		<!--这段代码即是一种div选择器-->

（2）class选择器：其中class指的是HTML标签的class属性

<!DOCTYPE HTML>
<html>
	<head>
		<title>css的class选择器</title>
		<style type="text/css">
			.haha{
				background:yellow;
				color:red;
			}		/*当选择器为class时，class值前加“.”*/

			p.haha{
				background:blue;
				color:red;
			}		/*以上两种方式均可以使用，读者可自行尝试*/
		</style>
	</head>
	<body>
		<div class="haha">aaaaaaa</div>
		<hr/>
		<p class="haha">bbbbbbbbb</div>
	</body>
</html>

（3）id选择器：其中id指的是HTML标签的id属性，且id号唯一

<!DOCTYPE HTML>
<html>
	<head>
		<title>css的class选择器</title>
		<style type="text/css">
			#xixi{
				background:yellow;
				color:red;
			}		/*当选择器为id时，class值前加“#”*/

			p#xixi{
				background:blue;
				color:red;
			}		/*以上两种方式均可以使用，读者可自行尝试*/
		</style>
	</head>
	<body>
		<div id="xixi">aaaaaaa</div>
		<hr/>
		<p id="xixi">bbbbbbbbb</div>
	</body>
</html>

选择器的优先级：style > id选择器 > class选择器 > 标签选择器

4、css的盒子模型

（1）border：边界 border-top：上 border-bottom：下 border-left：左 border-right：右

（2）padding：内边距 padding-top：上 padding-bottom：下 padding-left：左 padding-right：右

（3）margin：外边距 margin-top：上 margin-bottom：下 margin-left：左 margin-right：右

<!DOCTYPE HTML>
<html>
	<head>
		<title>css布局的漂浮</title>
		<style type="text/css">
			div{
				width:200px;
				height:100px;

				margin:50px;
				padding:20px;

				border:2px solid red;
				border-top:5px dashed blue;
			}
		</style>
	</head>
	<body>
		<div>aaaaaaaaa</div>
		<div>bbbbbbbbb</div>
		<div>ccccccccc</div>
	</body>
</html>