前端三剑客——CSS样式

幽淆 · 2025-10-25 01:30:13

CSS样式： 进行美化页面即html标签中的style
大纲：
1.CSS样式应用方式
2.CSS样式的选择器
3.CSS样式的大致内容

CSS样式应用方式：即CSS样式写在哪
1.应用在html标签上

<img src="https://www.cnblogs.com/..." />
你好

复制代码

2应用.在head里面

<head>
<meta charset="UTF-8">
<title>大米</title>
</head>

复制代码

3.应用在文件里：使用情况：布局多个页面时避免重复写style

在head里面导入文件
<link rel="stylesheet" href="放css样式的文件.css（基于falsk框架写的网站css文件写在static目录下）">

复制代码

CSS样式选择器：即如何去调用写好的CSS样式
1.类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
你好
</body>
</html>

复制代码

2.后代选择：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
<li>你好</li>
<li>你好</li>
</body>
</html>

复制代码

3.标签选择器：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
你好
</body>
</html> [size=6]你好[/size]

复制代码

4.id选择器：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
你好
</body>
</html>

复制代码

5.属性选择器：

6.补充：多个选择器和覆盖

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
你好
</body>
</html>

复制代码

CSS样式大致内容
1.高度和宽度设置

.c1{
color: red;
height: 40px;
width: 50%;
}

复制代码

注意事项：1.宽度支持百分比 2.行内标签设置高度和宽度支撑不起来，得用display：block改变 3.虽然块级标签使用宽度限制其在此行所占位置，但此行剩余部分依然不可以被使用，得用display: inline-block改变

2.块级，行内标签转换设置：用display进行改变: 块级->行内和行内->块级或既具有行内又有块级的特性

#块级变行内 display:inline
.c1{
color: red;
height: 40px;
width: 50%;
display: inline;
}
你好 #此时块级标签变成行内标签所以c1里面的宽度对其无效

复制代码

#行内变块级
.c1{
color: red;
height: 40px;
width: 50%;
display: block;
}
你好 #变成块级标签后可以进行设置宽度此行后面剩余部分则不可被其他标签占用

复制代码

#即具有块级和行内的特性
.c1{
color: red;
height: 40px;
width: 50%;
display: inline-block;
}
你好或你好
你好

复制代码

3.字体设置：颜色大小加粗字体格式

.c1{
color: red; #字体颜色
font-size: 20px; #字体大小
font-weight: 600; #字体粗细
font-family: Arial; #字体格式
}
你好

复制代码

4.文字对齐方式：水平居中（text-align : center) 垂直居中(line-height : 设置的（height)）

.c1{
color: red;
height: 80px;
width: 150px;
text-align: center; #水平对齐
line-height: 80px; #垂直对齐
border: 1px solid red; #加边框（可视化）
display: inline-block;
}
你好

复制代码

5.内边距： padding 为自己原有位置扩展领域（在块级区域中保持自己高宽（150，80）不变，向外扩张padding的值，则扩张后的区域也是属于这个块级区域的）

.c1{
height: 80px;
width: 150px;
border: 1px solid red;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px; #简写：padding：10px 20px 30px 20px 上右下左图3
}
你好呀！
你好

复制代码

6.外边距： margin

.c1{
height: 80px;
width: 150px;
border: 1px solid red;
display: inline-block;
}
.c2{
height: 80px;
width: 150px;
border: 1px solid red;
margin-left: 10px;
display: inline-block;
}
你好呀！
你好

复制代码

遇到的问题：第一个div中CSS样式有添加内边距时第二个div标签不在顶端，如图：解决办法：浮动并排

7.浮动并排 float
困惑点：既然可以把块级标签通过display：inline-block使其不在霸道，让此行剩余部分让别人进行占用，为什么要有浮动并排
困惑点可视化：6中遇见的问题
原因

简单说：两个元素并排时，默认是按“文字基线”对齐的（就像写字母时，字母底部对齐那条线）。第一个元素加了内边距（padding），把自己撑高了，它的“基线”位置也跟着变低了。
第二个元素没加内边距，就跟着这个变低的基线对齐，所以看起来它的顶部没对齐，好像往下挪了一点。
解决办法：
1.给第二个元素加一句 `vertical-align: top;`，强制让它们顶部对齐，就顶格了。
2.把两个元素都改成块级元素，再用浮动并排
先去掉 display: inline-block，然后给两个元素都加 float: left。

复制代码

6中问题解决

body{
margin: 0;
}
.c1{
height: 80px;
width: 150px;
border: 1px solid red;
padding: 10px;
float: left;
}
.c2{
height: 80px;
width: 150px;
border: 1px solid red;
margin-left: 10px;
float: left;
}
你好呀！
你好

复制代码

浮动并排:
查看代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
#父级
你好呀！
你好
#给父元素加 “清除浮动”，避免父元素高度坍塌（避免父级元素被覆盖）
</body>
</html>

复制代码

注意点：父级如果没有高度或者宽度，孩子若有高度或者宽度则会把父级支撑起来
如果父级中存在孩子浮动则要加避免坍塌的语句

8.body：body标签默认有边距造成页面四周有间隙

解决办法:
body{
margin: 0;
}

复制代码

9.内容居中：文本居中区域居中
1.文本居中： text-align:center line-height:height

body{
margin: 0;
}
.a1{
background-color: black;
}
.a1 .c1{
color: white;
height: 60px;
border: 1px solid red;
text-align: center;
line-height: 60px;
float: left;
}
.a1 .c2{
height: 40px;
border: 1px solid red;
margin-left: 10px;
float: left;
}
你好呀！
你好

复制代码

2.区域居中：自己得有宽度+margin-left：auto margin-right：auto

.a1{
height: 100000px;
width: 100px;
background-color: pink;
margin: 0 auto; #上0 右平均下0 左平均
}

复制代码

10.背景色和边框：

背景色：background-color: pink;
边框：border: 1px solid red; transparent透明色

复制代码

11. hover伪装：不仅可以改变自己还可以改变自己内部的标签的元素
改变自己：

.a1 .c1 a{
height: 60px;
text-align: center;
line-height: 60px;
float: left;
text-decoration:none;
}
.a1 .c1 a:hover{
color: red;
}
点击跳转

复制代码

鼠标放上前：

鼠标放上后：

改变自己内部标签的元素

.a1{
height: 100000px;
width: 65%;
margin: 0 auto;
border: 1px solid red;
}
.a1 .c2{
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
margin-left: 10px;
float: left;
color: -webkit-link;
}
.a1 .c2 .b1{
display:none;
}
.a1 .c2:hover .b1{
display:block;
}
作者微信
<img src="https://www.cnblogs.com/./images/微信图片_20251024215623_91_2.jpg" alt="作者微信">
CSS 中鼠标悬停的伪类是 :hover（冒号开头），必须紧跟在要触发 hover 的元素选择器后面（比如 .c2:hover），表示 “当鼠标悬停在 .c2 上时”，再去控制它内部的 .b1 元素。
修改后，当鼠标放到 “作者微信” 所在的 .c2 区域时，图片就会显示出来了。

复制代码

鼠标放上前

鼠标放上后

12.after伪装： .clearfix:after

.clearfix:after{
content: "";
display: block;
clear: both;
}

复制代码

13.opacity：透明度（0-1）

.fix{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:black;
opacity:0.5;
}
position: fixed 定位的元素无法通过 margin 来调整基于浏览器视口的位置，原因和它的定位机制有关：
当元素设置 position: fixed 时，它的定位参考是浏览器的视口（整个窗口），并且会完全脱离正常文档流。此时 margin 的作用逻辑发生了变化：
正常文档流中，margin 是用来控制元素与其他元素的间距；
但 fixed 定位的元素已经 “悬浮” 在视口上，margin 无法让它相对于视口产生偏移，只能影响它内部内容的排版（比如如果它里面有子元素，margin 可以控制子元素和它的间距）。

复制代码

14.position ： fixed relative absolute 后两者进行搭配使用

1.position：fixed：固定方式相对于浏览器
脱离文档流，不影响去他元素布局定位参考：浏览器视口用于悬浮固定的场景

.fix{
position:fixed;
bottom:10px;
right:10px;
height:40px;
width:40px;
border:1px solid red;
}

复制代码

.bb{
position:fixed;
width:400px;
height:400px;
left:0;
right:0;
margin:0 auto;
background-color:black;
}

复制代码

2.relative absolute

.aa{
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
border: 1px solid red;
}
.aa .bb{
position: absolute;
height: 50px;
width: 50px;
background-color: red;
}

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

坏级尹 · 2025-11-1 09:25:56

感谢分享，学习下。

蓬庄静 · 2025-11-4 04:17:15

不错，里面软件多更新就更好了

窟聿湎 · 2026-1-18 19:48:03

感谢发布原创作品，程序园因你更精彩

庾芷秋 · 2026-1-19 02:00:18

谢谢分享，辛苦了

吉芷雁 · 2026-1-22 14:17:29

这个有用。

缑莺韵 · 2026-1-23 08:55:51

鼓励转贴优秀软件安全工具和文档！

蛟当罟 · 2026-1-25 09:22:19

谢谢分享，辛苦了

讲怔 · 2026-1-26 11:20:37

感谢分享，学习下。

沦嘻亟 · 2026-2-2 03:31:45

谢谢分享，辛苦了

姚梨素 · 2026-2-3 06:26:42

喜欢鼓捣这些软件，现在用得少，谢谢分享！

港髁 · 2026-2-4 05:29:13

前排留名，哈哈哈

辅箱肇 · 2026-2-4 11:07:17

感谢分享，学习下。

齐娅晶 · 2026-2-5 06:44:56

感谢，下载保存了

这帜 · 2026-2-8 03:24:31

新版吗？好像是停更了吧。

姜删懔 · 2026-2-8 04:33:41

很好很强大我过来先占个楼待编辑

汪玉珂 · 2026-2-8 19:20:53

喜欢鼓捣这些软件，现在用得少，谢谢分享！

赖秀竹 · 2026-2-10 13:24:55

分享、互助让互联网精神温暖你我

娄静曼 · 2026-2-10 22:31:36

yyds。多谢分享

凉砧掌 · 2026-2-12 16:39:57

谢谢楼主提供！

账号		自动登录	找回密码
密码			立即注册

前端三剑客——CSS样式

相关帖子

回复

浏览过的版块

签约作者

前端三剑客——CSS样式

相关帖子

相关推荐

回复

浏览过的版块

签约作者