css的基础-优快云博客

本文链接：https://blog.youkuaiyun.com/diskindom/article/details/132560987

本文介绍了CSS的基础概念，包括其作用、版本更新、基本使用（语法、选择器优先级）、常用属性（如背景、文本、字体、对齐、浮动、盒子模型）以及CSS3的特性。详细讲解了CSS的选择器、优先级和布局控制方法。

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

CSS

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Epg0wbiR-1693290966954)(C:\Users\dis\Desktop\笔记\CSS\lib\Snipaste_2023-08-21_15-45-01.png)]

CSS概念：CSS（英文全称：Cascading Style Sheets），层叠样式表（样式可以叠加）

CSS作用：

虽然HTML的标签的某些属性可以设置样式效果，可是细节处理不够好。
HTML实现样式效果会出现大量重复代码，维护成本高。

CSS最新版本是CSS3.能够做到网页和内容分离，对网页中的元素的位置排版等效果进行像素级的精准控制。

CSS用来美化网页，需要依赖HTML.

一.CSS的基本使用

1.CSS基本语法

CSS 样式由选择器和⼀条或多条以分号隔开的样式声明组成。每条声明的样式包含着⼀个 CSS属性和属性值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHyp2Hiv-1693290966956)(C:\Users\dis\Desktop\笔记\CSS\lib\Snipaste_2023-08-21_15-44-28.png)]

选择器名 {
属性 : 属性值;
......
}
div {
background-color : red;
}

注意：

css声明要以分号;结束，声明以{}括起来
建议⼀⾏书写⼀个属性
若值为若⼲单词，则要给值加引号，如 font-family: “agency fb”;

<!-- 样式设置在style标签中 -->
		<style type="text/css">
			
			body {
				background-color: antiquewhite; /* 背景颜色*/
				color: red; /* 字体颜色 */
				font-family: "arial black";
			}
			
		</style>

注释：/* 注释内容 */

2.css的使用

行内样式

将样式定义在html标签上的style属性中；

以行内压样式写的CSS耦合度较高。
```
<p style="color: aqua;" >这是一段文本</p>
```

内部样式

定义在head标签中的sty标签中

<style type="text/css">
			/* p标签 */
			p {
				color: blue;
				font-family: 楷体;
			}
			
		</style>

外部样式

通过link标签引入外部的css文件

rel：当前文件与引入的文件之间的关系

type：类型，css类型

href：引入的资源的路径
```
<link rel="stylesheet" type="text/css" href="css/style.css"/>
```
```
p {
	color: red;
	font-family: 楷体;
}
```

CSS的优先级：就近原则

二.基本选择器

通用选择器  * 
					选择所有元素
					* {
						属性名:属性值
					}
					* {
				/* 字体颜色 */
				color: #0000FF;
				background-color: aqua;
			}


元素选择器/标签选择器
					选择指定元素
					标签名 {
						属性名:属性值
					}
			div {
				width: 100px; /* div的宽度*/
				height: 100px; /* div的高度*/
				background-color: gray; /* 背景颜色 */
			}


id选择器
					选择指定id属性值的元素 #
					#id属性值 {
						属性名:属性值
					}
					id值最好保持唯一
					id定义规则：以字母、数字、下划线、中划线组成，不要以数字开头

	#div1 {
				color: #FF0000;
				/* background-color: thistle; */
			}



class类选择器 .
					选择设置指定class属性值的元素
					.class属性值 {
						属性名:属性值
					}
	.cls1 {
				font-weight: bold; /* 字体粗细 */
				/* border: yellowgreen; */
			}
			

分组选择器
					选择指定选择器选中的元素
					选择器1,选择器2,选择器3,...{
						属性名:属性值
					}
#div1,.cls1, p{
				/* 边框  边框的粗细   边框的风格  边框的颜色 */
				/* border: 1px solid #0000FF; */
			}

选择器的优先级：（权重值）

id选择器 100 > 类选择器10 > 元素选择器1 > 通用选择器

行内样式 style属性中权重是1000

三.CSS常用属性

1.背景

/* 通过元素选择器获取body元素 */
			body {
				/* 设置元素的背景颜色 */
				background-color: #DA70D6;
				/* 设置元素的背景图片，默认背景重复显示 */
				background-image: url(img/img2.jpeg);
				/* 设置背景图片是否重复  no-repeat：表示不重复；repeat-x：横向重复；repeat-y：纵向重复；repeat：横向横向重复*/
				background-repeat: repeat;
				/* 设置背景图片的大小 */
				background-size: 200px 200px;
			}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yunyu5HS-1693290966957)(C:\Users\dis\Desktop\笔记\CSS\lib\Snipaste_2023-08-21_16-16-40.png)]

2.⽂本

1.color

body {
color:blue;
}
h1 {css
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}

2.text-align

设置⽂本对⻬⽅式，center（居中），left（左对⻬），right（右对⻬）

body {
text-align:center;
}
h1 {
text-align:right;
}
h2 {
text-align:right;
}

3.text-decoration

规定添加到⽂本的修饰，属性值：none、underline、overline、line-through

1）underline

对⽂本添加下划线，与HTML的u元素相同。

2）overline

对⽂本添加上划线。

3）line-through

对⽂本添加中划线，与HTML中的s和 strike 元素相同。

4）none

关闭原本应⽤到元素上的所有装饰。

h3 {
text-decoration:underline;
}

4.text-indent

设置⽂本⾸⾏缩进

p.ident2 {
text-indent: 2em;
}

em⼀个相对值，例如⻚⾯的⽂本⼤⼩为17px,则2em就为17px*2

3.字体

设置字体

font-family

1. 当font-family的属性值包含空格或特殊字符时，需要将font-family属性值用引号括起来
2. font-family有"后备"机制，可以为元素设置多种字体，当浏览器不识别第一种字体时，会尝试找下一种字体。
3. 当font-family的属性值有多个时，使用逗号隔开。

font-size

设置字体大小

font-style

设置字体风格
normal正常体
italic斜体
oblique斜体（强制倾斜）

font-weight

设置字体的粗细
bold 粗体
100~900，值越大字体越粗
400 正常字体
700 粗体

	div {
				/* 设置字体 */
				/* font-family: 楷体;
				font-family: "agency fb"; */
				font-family: "agency fb",楷体,宋体;
				/* 设置字体大小 */
				font-size: 30px;
				/* 设置字体风格 */
				font-style: italic;
				/* 设置字体粗细 */
				font-weight: 700;
				
			}

4.对齐方式

对齐方式
设置元素中字体水平方向的对齐方式
text-align
left 默认
right
center
justify

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bCuA63I4-1693290966958)(C:\Users\dis\Desktop\笔记\CSS\lib\Snipaste_2023-08-21_16-25-03.png)]

5.display属性

块级元素：

可以设置元素的宽高和边距，元素会自动换行
行内元素：

不可以设置元素的宽高和边距，元素不会自动换行
行内块级元素：

可以设置元素的宽高和边距，元素不会自动换行

display属性

规定元素生成框的类型

block 元素会被显示，且元素会变成块级元素，元素前后会有换行符

none 元素会被隐藏

inline 元素会显示为行内元素，元素前后没有换行符

inline-block 行内块级元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IYrBoA0c-1693290966958)(C:\Users\dis\Desktop\笔记\CSS\lib\Snipaste_2023-08-21_16-27-30.png)]

6.浮动

float的属性值有none、left、right。

只有横向浮动，并没有纵向浮动。
会将元素的display属性变更为block。
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

三.盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOKdZtat-1693290966960)(C:\Users\dis\Desktop\笔记\CSS\lib\Snipaste_2023-08-21_16-36-18.png)]

1.边框border

设置元素边框的宽度、颜色、类型
单独设置边框的颜色、宽度、类型
border-color
border-width
border-style
设置属性值的顺序：上右下左
设置一个属性，表示边框四边效果一致
设置两个属性，表示上下一致，左右一致
设置三个属性，表示上、右、下不一致，左右一致
border-collapse
设置是否将表格边框折叠为单一边框。
属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mgNIoek-1693290966960)(C:\Users\dis\Desktop\笔记\CSS\lib\Snipaste_2023-08-21_16-39-02.png)]

2.padding内边距

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
如果在表的内容中控制⽂本到边框的内边距，使⽤td和th元素的填充属性：

td {
padding:15px;
}

设置内边距
设置一个值，表示四个方式相同

设置两个值，表示上下一致，左右一致

设置三个值，表示上、右、下不一致，左右一致
设置四个值，表示上、右、下、左都不一致
单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

	td {
				/* 设置一个值，表示四个方式相同 */
				/* padding: 10px; */
				/* 设置两个值，表示上下一致，左右一致 */
				/* padding: 10px 20px; */
				/* 设置三个值，表示上、右、下不一致，左右一致 */
				/* padding: 10px 20px 30px; */
				/* 设置四个值，表示上、右、下、左都不一致 */
				/* padding: 10px 20px 30px 40px; */
				/* 设置左边距 */
				padding-left: 10px;
			}