CSS基础知识总结(后端)

最新推荐文章于 2024-03-30 11:26:15 发布

小陌白

最新推荐文章于 2024-03-30 11:26:15 发布

阅读量293

点赞数 1

分类专栏： Java后端的学习文章标签： html css 前端后端

本文链接：https://blog.csdn.net/weixin_48842132/article/details/119516690

版权

Java后端的学习专栏收录该内容

21 篇文章 1 订阅

订阅专栏

CSS

1. 什么是CSS，有什么作用？

CSS(Cascading Style Sheet)：层叠样式表语言。
作用：修饰HTML页面，设置HTML页面中某些元素的样式，让HTML页面更好看。

2. 在HTML中嵌套使用CSS的三种方式

在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。

语法格式：
```
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
```
在head标签中使用style块，这种方式被称为样式块方式。

语法格式：

<head>
				<style type="text/css">
					选择器 {
						样式名 : 样式值;
						样式名 : 样式值;
						.....
					}
					选择器 {
						样式名 : 样式值;
						样式名 : 样式值;
						.....
					}
				</style>
			</head>

链入外部样式表文件(最常用)
- 将样式写入到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了，可以供多个html使用，且易维护。
- 语法格式：
```
<link type="text/css" rel="stylesheet" href="css文件的路径" />
```

小例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的不同编写位置</title>
		<!-- 		引入外部样式文件 -->
		<link rel="stylesheet" href="001myCss.css"/>
		<!-- 页面嵌套样式 根据解析顺序 页面嵌套样式覆盖了外部样式文件中重复的样式内容 -->
		<style>
			#myDiv{
				font-size: 200px;
			}
		</style>
	</head>
	<body>
		<!-- 内联样式 -->
		<div id="myDiv" style="font-size: 960px; color: blue;">
				CSS测试文本
		</div>
	</body>
</html>

001myCss.css
#myDiv{
	font-size: 50px;
	color: red;
}

3. 选择器

作用：根据特殊的语法获取HTML页面中的元素对象然后修改他们的样式效果。

常用选择器：

id选择器

语法格式：

#id值{
	css属性名:属性值;
	css属性名:属性值;
	...
	css属性名:属性值;
}

class选择器

语法格式：
```
.class值{
	css属性名:属性值;
	css属性名:属性值;
	...
	css属性名:属性值;
}
```
根据HTML页面中HTML元素的class属性值获取多个元素对象。每个HTML元素可以拥有多个class值，每个class值用空格分割例如class=“class1 class2…”

4. 设置DIV边框样式

border-style：默认为none，此时border-width无论怎么设置也不生效。

小栗子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.myDiv{
				border-style: outset;
				border-color: antiquewhite;
				border-width: 50px;
			}
		</style>
	</head>
	<body>
		<div class="myDiv">
			CSS测试文本
		</div>
		<br/>
		<br/>
		<div style="border-style: groove; border-color: aqua; border-width: 5px; width:500px;height: 300px;">
			<img src="../html/img/Five.jpg" width="100%" height="100%">
		</div>
	</body>
</html>

5. 伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

语法：

选择器:伪类 {
  属性名: 属性值;
}

实例：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

6. 元素的隐藏和显示

display属性值设置为none即可让元素隐藏，块元素默认值是block。

7. 盒子模型

在这里插入图片描述

所有的HTML元素可以看作盒子，一个元素完整大小的计算要算上以上属性。
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。

注：图片和部分说明来自：菜鸟教程