02前端第二章css

最新推荐文章于 2024-10-02 15:35:50 发布

褚哲希

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量632

点赞数

分类专栏：前端笔记文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_51996043/article/details/123085638

版权

本文详细介绍了CSS的基础知识，包括CSS概述、基本语法、选择器的使用，如标签选择器、类选择器和ID选择器。此外，文章还深入探讨了文本样式、背景设置、列表样式、透明度控制以及块级、行级和行级块标签的差异。特别强调了盒子模型，涵盖内容区、内边距、边框和外边距。最后，文章阐述了浮动、清除浮动、相对定位和绝对定位的概念及其在文档流中的作用。

摘要由CSDN通过智能技术生成

CSS概述

CSS是Cascading Style Sheets（级联样式表）。

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

CSS与HTML的关系：

HTML是网页内容
CSS定义页面的样式

		<!-- 
		html主要讲标签，是网页的内容（骨架），不漂亮
		html早期是提供了标签对内容进行修饰的，但是用起来很麻烦，嵌套过多
		 -->
 		<b>
			<font color="darkcyan">
				<big>百度</big>
			</font>
		</b>

基本语法

基本语法：

行内样式表
内嵌样式表
外部样式表

行内样式表

<!-- 
css是一种样式表语言（修饰网页外观），可将页面的内容与表现形式分离，可以达到样式重复利用。
style=""是css语法   属性名：值；属性名：值
 -->
<p style="color: darkred; font-size: 20px;">
    用于为html文档控制外观，定义布局。
</p>
<p style="color: darkred; font-size: 20px;">
    用于为html文档控制外观，定义布局。
</p>

内嵌样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 
		用来写css样式的标签
		 -->
		<style type="text/css">
			p{
     
				color: lightblue;
				font-size: 20px;
			}
		</style> 
	</head>
	<body>
		<p>
			用于为html文档控制外观，定义布局。
		</p>
		<p style="color: darkred; font-size: 20px;">
			用于为html文档控制外观，定义布局。
		</p>
	</body>
</html>

外部样式表

<!-- css文件中 -->
p{
   
		color: brown;
		font-size: 20px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表 -->
		<link href="css/out.css" rel="stylesheet"/>
	</head>
	<body>
		<p>
			用于为html文档控制外观，定义布局。
		</p>
		<p>
			用于为html文档控制外观，定义布局。
		</p>
	</body>
</html>

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。

常用的选择器

标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器   css注释*/
			p{
     
				color: #aa557f;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>用于为html文档控制外观，定义布局。</p>
		<p>用于为html文档控制外观，定义布局。</p>
        <p>用于为html文档控制外观，定义布局。</p>
		<p>用于为html文档控制外观，定义布局。</p>
		<h3>三级标题标签</h3>
	</body>
</html>

类选择器：通过标签的class属性值选中一组标签

语法：

.class属性值{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 类选择器  万能选择器 使用最多*/
			.p1{
     
				color: cadetblue;
			}
			.p2{
     
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<p class="p1">用于为html文档控制外观，定义布局。</p>
		<p class="p2">用于为html文档控制外观，定义布局。</p>
		<p class="p1">用于为html文档控制外观，定义布局。</p>
		<p class="p2">用于为html文档控制外观，定义布局。</p>
		<h3>三级标题标签</h3>
	</body>
</html>

id 选择器：通过标签的id属性值选中唯一的一个标签

语法：

#id属性值 {}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">		
			/* id选择器 */
			#pID{
     
				color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<p id="pID">用于为html文档控制外观，定义布局。</p>
	</body>
</html>

通配选择器:可以用来选中页面中的所有的标签

语法：*{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器   css注释*/
			p{
     
				color: black;
				font-size: 20px;
			}
			
			/* 类选择器  万能选择器 使用最多*/
			.p1{
     
				color: cadetblue;
			}
			.p2{
     
				color: skyblue;
			}
			
			/* id选择器 */
			#pID{
     
				color: yellowgreen;
			}
			
			/* 通配选择器 */
			*{
     
				color: gray;
			}
			
			/*
			 选择器优先级问题：由高到低
			 id>类选择器>标签选择器>通配选择器
			 */
		</style>
	</head>
	<body>
		<p id="pID" class="p1">用于为html文档控制外观，定义布局。</p>
		<p class="p2">用于为html文档控制外观，定义布局。</p>
		<p class="p1">用于为html文档控制外观，定义布局。</p>
		<p class="p2">用于为html文档控制外观，定义布局。</p>
		<p