web前段-CSS学习总结_大学web css总结-CSDN博客

本文链接：https://blog.csdn.net/JHSHUN/article/details/108429544

本文详细介绍了CSS的基础知识，包括CSS的选择器、引入方式、浮动、优先级等，并深入讲解了盒子模型、绝对定位等高级特性，帮助读者掌握网页样式设计的核心技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS-网站首页的优化

1.1 块标签

div标签默认占一行,自动换行可嵌套
span标签内容显示在同一行可嵌套

1.2 什么是CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

下面开始介绍CSS的一些功能

1.3 CSS选择器<style></style>

一般形式：

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

style标签必须写在head标签中

下面介绍几种常见的选择器

元素选择器

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

如：

<style>
	span{
		color:blue;
	}
</style>

ID选择器

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

如：

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#div1{
			color: red;
		}
	</style>
</head>
<body>
	<!--将JAVAEE颜色改成红色-->
	<div id="div1">JAVAEE</div>
	<div>IOS</div>
</body>

类选择器

以 . 开头 
.类的名称{
   属性名称:属性的值;
  	属性名称:属性的值;
}

如：

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.shuiguo{
			color: yellow;
		}
		.shucai{
			color: green;
		}
	</style>
</head>
<body>
	<div class="shuiguo">香蕉</div>
	<div class="shucai">黄瓜</div>
	<div class="shuiguo">苹果</div>
	<div class="shucai">茄子</div>
	<div class="shuiguo">橘子</div>
</body>

1.4 CSS引入方式

内部样式：直接在一个html文件中，通过style标签编写CSS代码。
外部样式：使用时，在html文件外创建一个CSS文件，之后再在需要改动的html文件中通过link标签引入这个CSS文件，这样就可以同时更改多个html文件，在批量操作时非常方便。
行内样式：直接在需要修改的标签中，添加一个style属性，编写CSS样式。

1.5 CSS的浮动

float属性：元素浮动
left：左侧浮动
right：右侧浮动

clear属性：清除浮动。使用时，创建一个空的的div，然后设置clear属性
both：两边都不允许浮动元素
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素

浮动的元素会脱离正常的文档流，在正常的文档流里不占空间。简单地说，浮动的元素和正常的文档都从浏览器的左上角开始布局，浮动的元素和正常文档会同时占用一个空间。
流式布局

1.6 CSS的优先级

①按照选择器搜索精确度来编写：行内样式 > ID选择器 > 类选择器 > 元素选择器
②就近原则: 哪个离得近,就选用哪个的样式
如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.first{  color: green;  }
			.second{  color: blue;  }
			/*就近原则*/
		</style>
	</head>
	<body>
		<div class="second first ">要显示的内容</div>
	</body>
</html>

运行结果：
在这里插入图片描述

1.7 CSS中的其它选择器

选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

属性选择器:

a[title]  /*寻找有title属性的标签*/
a[titile='aaa']  /*寻找值为aaa的title*/
a[href][title]  /*寻找既有href属性又有title属性的标签*/
a[href][title='aaa']  /*寻找既有href属性又有title属性且title值为aaa的标签*/

后代选择器: 又称为包含选择器

h1 em {color:red;}
/*上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中*/

子元素选择器: 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，可以使用子元素选择器。

/*选择只作为 h1 元素子元素的 strong 元素，可以这样写*/
h1 > strong {color:red;}

伪类选择器: 通常都是用在a标签上。用于设置超链接的颜色。

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		a:link {color: red}		/* 未访问的链接 */
		a:visited {color: #00FF00}	/* 已访问的链接 */
		a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
		a:active {color: #0000FF}	/* 选定的链接 */	
	</style>
</head>
<body>
	<a href="#">链接</a>
</body>

2.CSS-网站注册页面的优化

2.1 CSS的盒子模型

我们可以使用 div + css 的方法来优化上一篇博客的注册页面
在这里插入图片描述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
背景应用于由内容和内边距、边框组成的区域。

盒子内边距设置:

padding-top:上
padding-right:右
padding-bottom:下
padding-left:左
也可以直接设置padding的值，赋值顺序为上右下左，如：

padding: 10px;   上下左右都是10px
padding: 10px 20px;   上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

盒子外边距设置:

margin-top:上
margin-right:右
margin-bottom:下
margin-left: 左
同样也可以直接设置margin的值，规则同padding。

2.2 CSS绝对定位：

绝对定位使元素的位置与文档流无关，因此不占据空间
使用绝对定位时，首先设置属性position: absolute; 然后设置 top:（控制距离顶部的位置）和 left:（控制距离左边的位置）
如：

	<div style="position: absolute;top: 200px;left: 200px;">内容</div>