【5.0】前端基础之CSS进阶
【5.0】前端基础之CSS进阶
【一】分组与嵌套
【1】分组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: red;
}
p {
color red;
}
span {
color: red;
}
</style>
</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>
上述方法，重复代码造成了代码的冗余
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 逗号表示并列关系 */
div,span,p {
color: red;
}
</style>
</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>
【2】嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 嵌套 */
#div, .c1,span {
color: red;
}
</style>
</head>
<body>
<div class="c1">这是div标签</div>
<p class="c1">这是p标签</p>
<span class="c1">这是span标签</span>
</body>
</html>
【二】伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: red; /* 常态 */
}
a:hover {
color: green; /* 鼠标悬浮态 */
}
a:active {
color: blue; /* 鼠标点击不松开 激活态 */
}
a:visited {
color: burlywood; /* 访问之后的状态 */
}
input:focus {
background-color: red; /* input输入框获取焦点(input被选中) */
}
</style>
</head>
<body>
<a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a>
<input type="text">
</body>
</html>
【三】伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter { /* 第一个文字加效果 */
font-size: 48px;
color: red;
}
p:before { /* 在文本开头添加内容并且带有装饰，无法被选中! */
content: "这是一句话";
color: burlywood;
}
p:after {/* 在文本结尾添加内容并且带有装饰，无法被选中! */
content: "?";
color: blue;
}
</style>
</head>
<body>
<p>
这是一个p标签
</p>
</body>
</html>
- befor 和 after 通常都是用来清除浮动带来的影响
- 即父标签塌陷的问题
【四】选择器优先级
- id选择器
- 类选择器
- 标签选择器
- 行内选择器
1.选择器相同 书写顺序不同
就近原则：谁离得近，就使用谁的样式
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高，优先级越高
【五】CSS属性相关
【1】长度和宽度
/* 块级标签无法设置长度和宽度，就算写了也不会生效 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
height: 200px;
width: 100px;
}
/* 块级标签无法设置长度和宽度，就算写了也不会生效 */
span {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<p>这是一个P标签</p>
<span>这是一个SPAN标签</span>
</body>
</html>
【2】字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family: "JetBrains Mono ExtraLight"; /* 可以跟多个，第一个不生效会依次判断 */
font-size: 24px; /* 字体大小 */
font-weight: inherit; /* 子重 (inherit : 继承父元素的粗细值) */
/*color: blue; !* 字体颜色，颜色英文 *!*/
/*color: #dddddd; !* 字体颜色，颜色编号 *!*/
/*color: rgb(122, 69, 36); !* 字体颜色，rgb(0~255) *!*/
color: rgb(122, 69, 36, 0.8); /* 第四个参数是透明度(0~1) */
/* 当你想用一些颜色的时候，可以使用相关的工具
1.pycharm自带取色器
2.微信/QQ截图，取色器
*/
}
</style>
</head>
<body>
<p>这是一个P标签</p>
</body>
</html>
【3】文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*text-align: center; !* 文字居中 *!*/
/*text-align: left; !* 左居中 *!*/
text-align: justify; /* 两端对齐 */
/*text-decoration: underline; !* 下划线 *!*/
text-decoration: line-through; /* 删除线 */
/*text-decoration: overline; !* 删除线 *!*/
/* 在html中，很多标签的样式效果是一样的 */
font-size:16px; /* 先知道文字的具体长度 */
text-indent: 32px; /* 缩进32px */
}
a {
text-decoration: none; /* 取出a标签自带的下划线 */
}
</style>
</head>
<body>
<p>我是一个P标签</p>
<a href=""></a>
</body>
</html>
【4】背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
/*height: 400px;*/
/*width: 400px;*/
/*background-color: red;*/
/* 设置背景图片 */
/*background-image: url("url链接"); !* 默认全部铺满 *!*/
/*background-repeat: no-repeat; !* 不铺满 *!*/
/* 其实浏览器不是一个平幔，而是一个三维立体结构
Z 轴指向用户 ， Z 越大，离用户越近
*/
/*background-position:center center; !* 图片居中(第一个参数控制左边的距离，第二个参数是上距离) *!*/
/* 简写 */
/* 只需要填上想要加的参数即可，位置没有关系，参数对应就可以 */
background: red url("url") no-repeat center center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
【5】边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
border-width: 20px;
border-style: solid;
border-color: green;
}
div {
/*border-left-width: 5px;*/
/*border-left-color: green;*/
/*border-left-style: solid;*/
/*border-top-width: 5px;*/
/*border-top-color: green;*/
/*border-top-style: solid;*/
/*border-right-width: 5px;*/
/*border-right-color: green;*/
/*border-right-style: solid;*/
/*border-buttom-width: 5px;*/
/*border-buttom-color: green;*/
/*border-buttom-style: solid;*/
/* 支持简写 */
border: 3px solid red; /* 默认四个边一样，不区分三者的位置 */
}
/* 如何画圆 */
#d1 {
height: 600px;
width: 600px;
border-radius: 50% /* 正方形只写50%即可是园，两边不一致是椭圆 */
}
</style>
</head>
<body>
<dic>安得猛士兮走四方
<p>
大风起兮云飞扬
</p>
</dic>
<div id="d1"></div>
</body>
</html>
【6】display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
/*display: none; !* 隐藏标签，不展示到前端页面且原来的位置也不再占有了，但是存在于文档上 *!*/
display: inline; /* 将标签设置成行内标签的特点 */
}
#d2 {
display: inline;
}
#s1 {
display: block; /* 将标签设置成块级标签的特点 */
}
#s2 {
display: block;
}
#d3 {
display: inline-block; /* 标签既在一行显示又是块级标签 */
}
#d4 {
display: inline-block;
}
</style>
</head>
<body>
<div id="d1"> 001</div>
<div id="d2"> 002</div>
<span id="s1">003</span>
<span id="s2">004</span>
<div id="d3">005</div>
<div id="d4">004</div>
<div id="d5" style="display: none">这是display ， 隐藏且不占位置</div>
<div id="d6" style="visibility: hidden">这是visibility ， 隐藏但是占位置</div>"
</body>
</html>
【六】盒子模型
【1】什么是盒子模型
- 盒子模型（Box Model）是指在网页设计中，用于描述和布局元素的一种模型。
- 它将每个元素看作是一个具有四个边界的矩形盒子，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。
每个盒子模型都由这四个部分组成：
-
内容区域（Content）：
- 盒子的实际内容，如文本、图像等。
-
内边距（Padding）：
- 内容区域与边框之间的空间，用于控制内容与边框之间的距离。
-
边框（Border）：
- 围绕内容区域和内边距的线条，用于给元素添加外观和样式。
-
外边距（Margin）：
- 边框与其他元素之间的空间，用于控制元素与周围元素之间的距离。
【2】快递盒
-
以快递盒为例
- 快递盒与快递盒之间的距离(标签与标签的距离,margin外边距)
- 盒子的厚度(标签的边框,border)
- 盒子里面的物体到盒子的距离(内容到边框的距离,padding内边距)
- 物体的大小(内容,content)
-
如果想调整标签与标签之间的距离，可以调整margin外边距
-
浏览器会自带 8px 的margin
- 一般我们在学也写页面的时候会先将 body 的margin去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/*margin:0; !* 上下左右全是0 *!*/
/*margin: 12px 10px; !* 第一个参数是上下，第二个参数是左右 *!*/
/*margin: 10px 20px 30px; !* 上 左右 下 *!*/
margin: 10px 20px 30px 60px; /* 上下左右 */
}
#p1 {
border: 1px solid red;
padding: 10px 20px 30px 40px; /* 设置内容距边框距离，规律和margin一样 */
}
</style>
</head>
<body>
<p>这是一个P标签</p>
<p id="p1">这是一个P标签1</p>
</body>
</html>
【七】浮动
- 脱离页面，浮动在页面之上
- 没有块级一说，本身多大，浮起来之后就只能占多大。
- 只要涉及到页面的布局，一般都是用浮动提前规划好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /* 向左浮动 */
}
#d2 {
height: 200px;
width: 200px;
background-color: blue;
float: right; /* 向右浮动 */
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 20%;
height: 100px;
background: green;
float: left;
}
#d2 {
height: 100px;
width: 20%;
background-color: yellow;
float: right;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/17526406.html
