CSS

最新推荐文章于 2024-10-01 23:54:35 发布

静安书以沫

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量202

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/whatname123/article/details/116242507

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS中的核心概念，包括div和CSS的基础，样式引入方式，选择器（标签、ID和类选择器），以及CSS样式冲突解决。重点讨论了边框、背景、盒模型、浮动和定位技术，如浮动布局的实现和清除，以及相对、绝对和固定定位的用法。此外，还涵盖了display属性的作用，如行级、块级和行块级标签的区别。内容适合网页开发者理解和掌握CSS布局基础。

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

DIV+CSS

1、div

DIV是层叠样式表(css)中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。

通俗来说：div在页面布局中，主要作为承载内容的容器！没有任何的默认样式，所有的外观样式都需要我们自己调整！DIV配合CSS使用可以设计出精美的网页

2、css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言(js)动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css就是用来表现HTML样式的计算机语言，为html化妆！

3、css的引入方式

(1) 、行间引入、行内样式

<h1 style="color:red;">应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

弊端：代码的复用性不好，每次只能为一个标签设置样式,代码可读性也比较差！
优势：优先级高、调试代码时比较方便！测试时建议使用
(2) 、内部样式
在head标签内部，使用style标签，配合选择器为标签设置css样式
选择器：css选取标签的一种机制。
选择器的书写格式：
选择器名称 {
css属性名: 值;
css属性名: 值;
…
}
弊端 : css样式与html结构没有实现分离,代码复用性和可维护性还不健全

<style type="text/css">
	p{
		color:red;
	}
	font{
		color: yellow;
	}
</style>

(3) 、外部引入、外联样式
a. 首先我们需要单独创建一个css文件，在文件中使用选择器找到对应的标签,来设置样式
b. 在html文件的head标签内，使用link标签，来导入外界的css文件, 即可让外部css样式在当前html页面生效
注意事项:
在一个html文件内部，可以使用多次link标签，来引入多个外界的css文件！
如果引入的多个文件中，存在重复的样式而且是使用同样的选择器来设置的按照加载顺序后覆盖前！
总结: 实际开发用外部引入，调试用行间引入、教学用内部引入

<link rel="stylesheet" type="text/css" href="css/myCss.css"/>
<link rel="stylesheet" type="text/css" href="css/myCss2.css"/>

4、选择器

什么是选择器？
css选择器是选取html标签的一种机制，不同的选择器选择标签的方式是不一样的，通过选择器匹配到指定的一个或者多个标签后，为标签设置css样式

常用的选择器有三个：标签选择器、id选择器、类class选择器

标签选择器：
标签选择器指通过HTML的标签名称，如div、html、body、input等, 选取出相同标签名的html元素, 所有符合HTML规范的标记都可以作为标签选择器。

语法格式：标签名 {css样式}
选取原则：为这一类标签设置样式

<style type="text/css">
	p{
		color:red;
	}
	font{
		color: yellow;
	}
</style>

id选择器：
每一个标签都有id属性, 为id属性设置一个指定的属性值
语法格式：#id名称 {css样式集合}
选取原则：为添加了此id的标签设置样式，可以选择唯一的一个标签！
注意事项：
(1) 、在一个html文件中，标签的id名称是不能重复的，是唯一的！
(2) 、为标签设置id值，需要在标签行间使用id行间属性来赋值
(3) 、id名称切勿随意命名，遵循变量名的命名规范即可！最好见名知意！

<head>
	<style type="text/css">
		#redDiv{
			color:green;
		}
		#blueDiv{
			color:yellow;
			background-color: red;
		}
		#redP{
			color:green;
		}
	</style>
</head>
<body>
	<div id="redDiv">
		hello
	</div>
	<div id="blueDiv">
		world
	</div>
	<p id="redP">我是段落</p>
</body>

类class选择器：
每一个标签都有class属性, 为class属性设置一个指定的属性值
语法格式：.类名 {css样式集合}
选取原则：为添加了此类名的标签设置样式，可以同时为多个标签设置样式！
注意事项：
(1) 、类名的命名规范与id名称的命名规范一致！
(2) 、一个标签可以添加多个类名，多个类名在class标签属性中以空格隔开
(3) 、一个类也可以添加给多个标签

<head>		
	<style type="text/css">
		.cl{
		background-color: yellow;
		}
	</style>
</head>
<body>
	<h1 class="cl">我是标题一</h1>
	<font class="cl">我是文本</font>
	<div class="cl">我是块区域</div>
<body>

5、css样式冲突问题

样式覆盖产生的原因有两种：

相同类型的选择器选择到了同一个标签，设置了同样的样式，按照文档加载顺序后覆盖前！
不同类型的选择器选择到了同一个标签，设置了同样的样式,此时与加载顺序无关，只与选择器优先级相关！

选择器优先级排列:
style行间引入 > id选择器 > class类 > 标签选择器

常见的css样式

1、文本样式

字体样式 :
font-size：字体大小
font-weight：字体加粗效果
bold值，可以实现字体加粗效果
font-style：字体样式
italic值，可以实现字体倾斜
font-family：字体，想要呈现不同的字体，首先你得保证浏览器内能有识别的字体库！
文本样式
color：字体颜色
英文单词、十六进制代码、rgb(0_255，0255, 0~255)
text-decoration：文本修饰
underline下划线、overline上划线、line-througn删除线、none无修饰
text-align：文本横向的对齐方式
默认值left左对齐、center居中对齐、right右对齐
line-height: 行高
单行文本行高与容器高度一致，可以实现垂直居中
多行文本行高的设置会影响行与行之间的距离，为了确保行间距产生，那么行高的值要大于字体大小

2、超链接伪类样式

a超链接总共有四种状态：未被访问、鼠标悬停、正在访问、访问过后
a:link{} 未被访问时点击之前且没悬停
a:visited{}访问过后点击并松开以后
a:hover{}鼠标悬浮时悬停
a:active{}正在访问鼠标点了没松开
link visited hover active

如果想要让a标签的四个伪类样式都起作用，那么必须按照lvha的顺序来设置！一旦顺序改变，则不起作用！

如果超链接的样式没有生效, 检查

访问的顺序是否写错
清除浏览器中的历史缓存记录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a标签伪类样式</title>
		<style type="text/css">
			/*没有访问时 : 绿色*/
			a:link{
				color:green;
			}
			/*访问过后: 红色*/
			a:visited{
				color:red;
			}
			/*鼠标悬停在超链接上 : 黄色*/
			a:hover{
				color:yellow;
			}
			/*正在点击超链接 : 蓝色*/
			a:active{
				color : blue;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百度</a>
	</body>
</html>

3、边框及边框圆角样式

边框的方位有几个？上下左右
边框的组成有几部分？宽度、颜色、样式！
边框宽度：border-width 表示4个边框宽度
border-left-width
border-top-width
border-right-width
border-bottom-width
边框颜色：border-color 表示4个边框颜色

复合属性: border-width border-color border-style;
举例 : border: 3px red solid;

复合属性 : 针对于某一条边框
举例 : border-left:3px red solid;

边框风格：border-style 表示4个边框样式
border-left : 表示左边边框
border-right: 表示右边边框
border-top:表示上边边框
border-bottom : 表示下边边框
值：
在这里插入图片描述
边框圆角的设置
border-radius设置边框的圆角样式，取值可以是百分比也可以是具体的像素单位，从边框外侧开始往两边去找指定的距离点，然后连接画弧，呈现圆角样式！

border-radius的设置方法：
一个值代表四个角都是一样的圆角弧度
两个值代表左上右下、右上左下
三个值代表左上、右上左下、右下
四个值代表左上、右上、右下、左下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:300px;
				height: 300px;
				/*border-color表示4个边框颜色一致*/
				/*border-color:red;*/
				/*border-width表示4个边框宽度一致*/
				/*border-width: 5px;*/
				/*border-style表示4个边框样式一致*/
				/*border-style:solid;*/
				/*border边框复合属性: 简写形式
				 *   border: border-width border-color border-style;
				 */
				/*border:5px blue dotted;*/
				
				/*让4个边框都有不同样式效果*/
				/*border-left-color: red;
				border-left-width: 10px;
				border-left-style: solid;*/
				
				border-top-color:blue;
				border-top-width: 10px;
				border-top-style:dashed;
				
				border-right-color:pink;
				border-right-width: 10px;
				border-right-style:dotted;
				
				border-bottom-color:purple;
				border-bottom-width: 10px;
				border-bottom-style:double;
				
				/*复合属性: 单独设置左边边框
				  border-left: border-left-width border-left-color border-left-style;*/
				border-left: 10px red solid;
				
				border-radius: 10% 20% 30% 50%;

			}
		</style>
	</head>
	<body>
		<div>
			哈哈哈
		</div>
	</body>
</html>

4、背景样式

背景样式的常用属性：
background-color：背景颜色
background-image：背景图片
background-image: url(图片路径);
background-size：背景图片的尺寸
background-repeat：背景图片重复效果
no-repeat 不重复
repeat-x 水平方向重复
repeat-y 垂直方向重复
background-position：背景图片的位置

5、盒模型

盒模型，也称为盒子模型，内容包含了：外边距margin、边框border、内边距padding、内容content！
在这里插入图片描述
一个元素的显示范围不仅仅是我们对其设置的width宽度以及height高度！
横向宽度：内容宽度 + 左侧、右侧边框宽度 + 左侧、右侧内填充(padding)的距离
纵向高度：内容高度 + 上侧、下侧边框宽度 + 上侧、下侧内填充(padding)的距离
一个元素的作用范围是：
横向宽度：内容宽度 + 左侧、右侧边框宽度 + 左侧、右侧内填充(padding)的距离 + 左侧、右侧外边距(margin)的距离
纵向高度：内容高度 + 上侧、下侧边框宽度 + 上侧、下侧内填充(padding)的距离 + 上侧、下侧外边距(margin)的距离

外边距margin：
(1) 、四个方向，分别是margin-left、margin-right、margin-top、margin-bottom
(2) 、一个复合属性margin
一个值上下左右
两个值上下左右
三个值上左右下
四个值上右下左
(3) 、在给定的外边距区域内，不能存在任何内容，所以会让元素本身发生偏移！
(4) 、外边距的距离问题：
如果是同级，则为边框外的侧到边框外侧距离
如果是父子级，是子级边框外侧到父级边框内侧的距离
内边距：
一个元素设置内边距，代表其内侧区域不能存在任何内容，所以也可以实现子级元素的位置偏移，但是要注意，一个元素设置了内填充，它的范围会变大，所以我们应当在width及height上减去内填充的距离，以保持原样！

6、浮动

div本身的显示是独占一行的，不可能出现一行多个的排版。那么针对这个问题，我们就可以使用浮动来解决！

浮动的知识点：
(1) 、float的值可以是left或者right，表示从父级的左侧、右侧开始横向排列，如果空间不够了，自动换行，这就是浮动带来的布局效果！
(2) 、浮动元素会脱离标准的文档流，不再占据空间，所以如果不对其进行处理，会对没有浮动效果的正常布局产生影响，所以我们要清浮动！
清浮动的解决方案：
在浮动元素同级以下，设置一个空的div，并为这个div设置一个clear属性。
both左右浮动都清除、left只清除左浮动、right只清除右浮动！
清浮动就是将浮动元素，按下去，回到标准的文档流中！保证页面的显示效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css中的漂浮技术</title>
		<style type="text/css">
			#div1{
				width:100px;
				height:100px;
				background-color: yellow;
				/*float属性 让可以让元素脱离文档流
				  让div1元素, 向左漂浮*/
				float:left;
			}
			#div2{
				width:100px;
				height:100px;
				background-color: red;
				/*height:200px;*/
				float:left;
				margin-left:50px;
			}
			#div3{
				width:100px;
				height:100px;
				background-color: blue;
				float:left;
				margin-left:50px;
			}
			#div4{
				width:100px;
				height:100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div style="clear:both"></div>
		<div id="div4">
			
		</div>
	</body>
</html>

7、定位

HTML默认的布局方式是不会出现重复的元素的，就是说在一个位置上不可能出现重复的元素。但是在某些情况下需要改变元素的位置和显示效果，此时我们就需要用到定位技术！

定位的css属性为position：
static：默认值，表示是普通的流式布局，完全在文档中按照从上往下、从左往右显示
定位之后，是要做位置的偏移的！只有设置了定位属性之后，才能使用left、right、top、bottom让一个元素发生位置的改变！

**relative：相对定位。**偏移参照物为该元素原有的位置，而且发生偏移后，元素原先的位置依旧存在，不会影响其他元素的布局！
left正值往右、right正值往左、top正值往下、bottom正值往上！

absolute：绝对定位。偏移参照物为离其最近的一个设置了定位属性的父级元素！如果都没有设置定位属性，则以body元素为参照进行偏移！而且元素会完全脱离文档流，原有的空间也不复存在了！
left正值，从参照元素的左侧边框往右偏移
right正值，从参照元素的右侧边框往左偏移
top正值，从参照元素的上边框往下偏移
bottom正值，从参照元素的下边框往上偏移

**fixed：固定定位。**元素的偏移参照物为浏览器的可视化窗口，并且不会随着文档的滚动而发生位置的改变！
left正值，从浏览器的可视化窗口的左侧边框往右偏移
right正值，从浏览器的可视化窗口的右侧边框往左偏移
top正值，从浏览器的可视化窗口的上边框往下偏移
bottom正值，从浏览器的可视化窗口的下边框往上偏移

8、display

这个样式称为标签的显示属性！常用的值有：

inline：行级标签
一行显示多个
不能手动设置宽度及高度！默认由内容撑开！
block：块级标签
独占一行
可以手动设置宽度及高度！
不设置宽度默认继承父级宽度、不设置高度默认由内容撑开！
inline-block：行块级标签
即可以一行显示多个，又可以设置宽度与高度！
none：隐藏，位置也不在了！

inline-block和浮动完成同意效果的区别？
1、float元素默认没有间隙，而inline-block默认会存在间隙
2、浮动元素默认是顶部对齐，元素之间的内容组成或者结构组成不一致，也不会出现错乱。但是inline-block想要实现同一行的对齐，默认必须保证内容与结构一致，因为是内容的底部对齐
3、浮动元素会脱离文档，而inline-block不会脱离文档。所以如果想要在不影响布局效果的情况下，还是建议使用inline-block

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css标签显示案例</title>
		<style type="text/css">
			li{
				display: inline-block;
				border:1px yellow solid;
				width:50px;
				height: 30px;
				background-color: orange;
				color: white;
				border-radius: 20px;
				text-align: center;
				line-height: 30px;
			}
			p{
				display: none;
			}
		</style>
	</head>
	<body style="background-color: black;">
		<ul>
			<li>首页</li>
			<li>服装</li>
			<li>电器</li>
		</ul>
		<p>我是段落</p>
		<font>我是文字</font>
	</body>
</html>

css样式总结

font-size：字体大小
font-weight：字体粗细 bold加粗或整百数字
font-style：字体样式 italic值斜体

font-family：字体，浏览器要能识别
text-decoration：underline下划线、overline上划线、line-througn删除线、none无修饰
text-align：文本横向的对齐方式
默认值left左对齐、center居中对齐、right右对齐
line-height: 行高

a:link{} 未被访问时点击之前且没悬停
a:visited{}访问过后点击并松开以后
a:hover{}鼠标悬浮时悬停
a:active{}正在访问鼠标点了没松开

border-width 边框宽度
border-color 边框颜色
border: 3px red solid 复合
border-style 边框风格
border-radius 设置边框的圆角样式值为百分比或像素

background-color：背景颜色
background-image：背景图片
background-image: url(图片路径);
background-size：背景图片的尺寸
background-repeat：重复效果 no-repeat 不重复 repeat-x x方向重复 repeat-y background-position：背景图片的位置

margin 外边距
border 边框
padding 边框
content 内容

float 浮动

position 位置 relative相对定位 absolute绝对定位 fixed固定定位

display
inline：行级标签
block：块级标签
inline-block：行块级标签