web前端基础-04 CSS样式_前端框代码是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/shandy_liunian/article/details/101228950

本文介绍了CSS的基本概念，包括外联式、内嵌式和行内样式三种引入方式，并详细讲解了常用的文本样式、列表样式、背景图片样式和浮动样式，帮助初学者掌握CSS基本用法。

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

一、CSS概念

CSS是指层叠样式表(Cascading Style Sheets)，它的功能就是定义HTML各个标签在网页中的展示样式，让网页更美观。

二、CSS的引入方法

2.1 外联式引入CSS

1.新建一个XXX.css文件，该文件的内容为各个标签的样式
2.在需要使用该样式的html文件的头部输入一下代码

     <link rel="stylesheet" href="">

3.在href中写入XXX.css的相对路径
实际开发中常用

2.2 内嵌式引入CSS

在html文件的头部输入以下代码，可以定义div的样式

<style>
	 div{
		border: 1px;
		height: 300px;
		width: 500px;
	}
</style>
通常用在首页

2.3 行内样式

<body>
       <div style="background-color: red;height: 300px;width: 500px;"></div>
</body>

行内样式一般只用于开发人员进行测试

三、常用的CSS样式

3.1 常用文本样式

1.color 字体颜色
2.font-size 字体大小默认16px
3.font-family 字体类型
4.font-style 是否倾斜 (italic 倾斜 normal 正常)
5.font-weight 是否加粗（bold 加粗 normal 正常）
6.line-height 行高（第二行底部到第一行底部的高度）
7.text-decoration 文本修饰（underline下划线=<ins> overline上划线 linethrough 删除线=<del> none 默认无线）
8.text-indent 首行缩进，字体大小*缩进个数=缩进值

颜色表示法：
英文单词表示，red表示红色
rgb表示，例如 rgb(255,0,0)表示红色
16进制表示法，例如 #ff0000 表示红色

3.2 常用列表样式

1.list-style-type 列表展示类型（disc 实心圆、circle 空心圆、square 正方形 none 无）
2.list-style-image:url(相对路径); 修改ul下的li标签的展示图片（由实心圆–>小图标）
3.list-style-position li标签的小图片的位置，是在li标签内（inside）还是li标签外（outside）

3.3 常用背景图片样式

·1.background-color 背景图片颜色

2.background-imge:url(相对路径); 背景图片内容
当背景图片大小>标签大小时，仅显示标签大小的图片
当背景图片大小=标签大小时，完整显示背景图片
当背景图片大小<标签大小时，平铺显示背景图片（xy轴重复显示）

3.background-repeat 背景图片的重复设置（x轴重复显示 repeat-x;y轴重复显示repeat-y；不重复显示no-repeat;xy轴重复显示repeat）

4.background-position 背景图片的位置（水平（left/center/right），垂直（top/center/bottom））

上述四个属性可以缩写为一个属性

5.background: red url() repeat left center;

3.4 常用浮动样式

1.浮动属性是为了消除文档流（垂直排列）。通俗来说，利用浮动属性可以将原先垂直排列的div块元素更改为水平排列。

2.浮动属性语法

			      <style>
			    	div{
			    		  float: left（或者right）;
			    	}
			    </style>

3.浮动元素的特点:
a.使块元素失去“块状”换行显示特征，变为行内元素
b.紧贴上一个浮动元素（同方向）或者父级元素的边框，宽度不够将换行显示
c.占据行内元素的（文字段落）空间，导致行内元素围绕其进行显示

4.浮动塌陷
若父级元素的高度是由子集元素高度撑起来的（父级元素不定义高，只有子集元素定义宽高度），当子集元素浮动起来时，由于父级元素没有高度，将塌陷为一条直线，无法再包裹子集元素。

解决浮动塌陷的方法：
第一种
给父级元素定义高度。缺点（若子元素高度改变，需要更改父元素的高度，灵活性差）

第二种
溢出隐藏 overflow：hidden；(粗浅理解：overflow会将浮动起来的子元素高度也考虑进去，再决定隐藏超过父级元素的部分[如有不对，欢迎指正])

第三种
增加一个空的div，并设置空div的样式如下：

  .box4{
			clear: both;
		}

clear清除了浮动元素的影响，也即对空的div来说，他认为前面的div并没有浮动，因此他会按照块元素的性质垂直在前面div的后面排列，从而将父元素撑开。

    <!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	    <style>
	    	 /*方法一：设置父级元素宽高 */
	    	/* .box1{
	    		边框属性：边框粗细为1px,边框颜色：黑色，边框类型：实线
	    		border: 1px black solid; 
	    		height: 500px;
	    		width: 700px; 
	    	} */
	    	.box1{
	    		/*边框属性：边框粗细为1px,边框颜色：黑色，边框类型：实线*/
	    		border: 1px black solid; 
	    		width: 500px; 
	    		/*方法二：父级元素增加overflow属性
	    		overflow: hidden;*/
	    	}
	    	.box2{
	    		border: 1px black solid; 
	    		height: 100px;
	    		width: 100px; 
	    		background-color: red;
	    		float: left;
	    	}
	    	.box3{
	            border: 1px black solid; 
	    		height: 200px;
	    		width: 200px; 
	    		background-color: blue;
	    		float: left;
	    	}
	    	/*方法三 增加空div盒子*/
			 .box4{
				clear: both;
			} 
	    </style>	
	</head>
	<body>
	     <div class="box1">
	     	<div class="box2"></div>
	     	<div class="box3"></div>
	     	<div class="box4"></div>
	     </div>
	</body>
	</html>