CSS样式的分组与嵌套
CSS样式分组
/*使用逗号表示并列关系*/
<style>
body {
margin: 0;
}
div,
span { /*div和span统一设置为深红色*/
color: deeppink;
}
div span, p { /*div的后代span,p统一设置为蓝色*/
color: blue;
}
#d1, h1, .c1 { /*id为d1,类为c1,h1统一设置为橘黄色*/
color: orange;
}
</style>
css样式表嵌套
/*
设置d2内部的所有p标签为蓝色
设置c2的子代span标签为红色
*/
#d2 p {
color: blue;
}
.c2 > span {
color: red;
}
伪类选择器
<style>
body {
margin: 0;
}
#a1:link { /*链接访问之前的状态*/
color: blue;
}
#a1:hover { /*鼠标悬浮此链接之上的状态*/
color: red;
}
#a1:active { /*鼠标点击此链接的状态，激活*/
color: green;
}
#a1:visited { /*链接访问之后的状态*/
color: darkgray;
}
</style>
</head>
<body>
<a href="http://www.mzitu.com" target="_blank" id="a1">福利网址1</a>
</body>
eg:
/*一个注册小例子*/
<style>
span {
background-color: red;
color: white;
font-size: 38px;
}
hr {
color: greenyellow;
}
.c1 {
background: blue;
color: white;
font-size: 18px;
}
.c2 {
background-color: deeppink;
color: white;
font-size: 18px;
}
.c3 {
background-color: greenyellow;
color: white;
font-size: 18px;
}
.c4:link { /*鼠标点击之前的状态*/
font-size: 14px;
}
.c4:hover { /*鼠标悬浮此处的状态*/
background-color: pink;
color: white;
font-size: 14px;
}
.c4:focus { /*鼠标点击后的状态*/
background-color: dodgerblue;
color: white;
font-size: 14px;
}
</style>
注册页面
<body>
<span>简单注册页面</span>
<hr>
<form action="http://182.92.59.34:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="username" class="c1">username: </label>
<input type="text" id="username" name="username" placeholder="请输入用户名~"/>
</p>
<p>
<label for="password" class="c1">password: </label>
<input type="password" id="password" name="password" placeholder="请输入密码~"/>
</p>
<p>
<label class="c2">gender: </label>
<label><input type="radio" name="gender" value="male" checked/>男</label>
<label><input type="radio" name="gender" value="female">女</label>
</p>
<p>
<label class="c2">hobby: </label>
<label><input type="checkbox" name="hobby" value="read" checked/>阅读</label>
<label><input type="checkbox" name="hobby" value="write" checked/>写作</label>
<label><input type="checkbox" name="hobby" value="cook"/>厨艺</label>
<label><input type="checkbox" name="hobby" value="sleep"/>睡觉</label>
</p>
<p>
<label for="birthday" class="c2">birthday: </label>
<input type="date" id="birthday" name="birthday"/>
</p>
<p>
<label for="city" class="c3">city: </label>
<select name="city" id="city">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="hangzhou" selected>杭州</option>
<option value="nanjing">南京</option>
</select>
</p>
<p>
<label for="file" class="c3">upload file: </label>
<input type="file" id="file" name="file"/>
</p>
<p>
<label for="introduce" class="c3">introduce: </label>
<textarea name="introduce" id="introduce" cols="30" rows="10" placeholder="这个人很懒，什么都没有留下~"></textarea>
</p>
<p>
<input type="submit" class="c4" value="提交"/>
<input type="reset" class="c4" value="重置"/>
</p>
</form>
</body>
伪元素选择器
first_letter
/*首字母设置特殊样式*/
<style>
p:first-letter{
font-size: 48px;
color: orange;
}
</style>
<body>
<p>这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！</p>
</body>
before&after
p:before {
content: "egon_dsb";
color: blue;
font-size: 28px;
}
p:after {
content: "tank_dsb";
color: orange;
font-size: 22px;
}
/*
before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题
*/
选择器的优先级
css继承
# 继承是CSS的一个主要特征，它是依赖于祖先-后代关系的。但是CSS继承性的权重是非常低的，比普通元素的权重还低。
# CSS的继承也是有限制的，有一些属性不能被继承，如：border, margin, padding, background等
选择器的优先级
选择器的优先级遵循以下的原则：
"""
1.选择器相同，书写顺序不同
就近原则：离标签近的覆盖前面的
2.选择器不同
精确度高原则：精确度高的覆盖精确度低的
内联（行内）>id选择器>类选择器>标签（元素）选择器
"""
（1） 选择器相同
<style>
p {
color: blue;
}
</style>
<link rel="stylesheet" href="test.css">
<body>
<p>放眼看世界</p>
</body>
css文件
/*test.css*/
p{
color: red;
}
上述运行结果的字体为红色；若将style和link的顺序互换，则为蓝色。
（2）不同选择器
#d1{
color: pink;
}
.c1{
color: orange;
}
span{
color: greenyellow;
}
<body>
<span id="d1" class="c1" style="color: aqua">我的世界</span>
</body>
/*
优先级排序：行内>d1>c1>span
*/
CSS相关属性
宽和高（width和height）
/*
1.只有块级标签才能设置width和height
2.行内标签的宽度取决于内存
*/
<style>
div {
background-color: blue;
color: white;
140px;
height: 100px;
}
span{
color: red;
40px;
height: 30px;
}
</style>
<body>
<div>
<span>前人种树，后人乘凉</span>
<i>(^o^)/</i>
</div>
<span>出来混总要还的</span>
</body>
字体属性
文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
span {
/*设置字体，可以写多个用逗号分隔，字体不生效就自动使用后面设置的备用字体*/
font-family: "Times New Roman","Arial Black";
font-size: 24px; #字体大小
font-weight: inherit; #inherit继承父元素的粗细值
color: red; #字体颜色
}
字重的设置
font-weight用来设置字体的字重（粗细）
详细如下表：
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100-900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
字体颜色的设置
# 方式1
color: red; #英文
# 方式2
color: ee762e; #颜色编号（16进制值）
# 方式3
color: rgb(128,23,45); #三基色，数值为0~255之间
# 方式4
color: rgba(23, 128, 91, 0.9); #第四个参数是颜色的透明度，数值在0~1之间
文字属性
文字对齐
text-align属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左对齐，默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
action:常用"text-decoration: none;"去除a标签的下划线
p {
text-align: center; # 设置p标签元素文本居中对齐
font-size: 28px; # 设置p标签元素文本大小为28像素
}
a {
text-decoration: none; # 去除a标签自带的下划线
color: red;
}
<body>
<p>
<a href="http://www.mzitu.com" target="_blank">福利网址</a>
</p>
</body>
首行缩进
将一个段落首行缩进2个字符
<style>
p {
font-size: 16px;
text-indent: 32px;
}
</style>
<body>
<p>苍茫的天涯是我的爱</p>
</body>
背景属性
/*
背景颜色 background-color: red;
背景图片 backgroud-image: url('1.jpg');
*/
/*
背景图片平铺方式
repeat(默认)：背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
backgroud-repeat: no-repeat;
*/
/*
背景位置
backgroud-position: left top;
backgroud-position: 200px 200px;
*/
/*
支持简写
backgroud: red url('22.jpeg') 200px 200px;
*/
一个有趣的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>滚动背景图片示例</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
css文件
* {
margin: 0;
}
.c1 {
height: 500px;
background-color: tomato;
}
.c2 {
100%;
height: 500px;
background: url("https://p.ssl.qhimg.com/dmfd/260_200_100/t01964e99f039ab4f04.jpg") fixed center center;
/*
background-image: url("xx.jpg");设置背景图片
background-attachment: fixed;设置固定的背景图片
background-position: center center;使得背景图像水平垂直居中
*/
}
.c2 {
background-attachment: fixed;
}
.c3 {
height: 500px;
background-color: steelblue;
}
.c4 {
height: 500px;
background-color: mediumaquamarine;
}
扩展
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
| 属性 | 描述 |
|---|---|
| scroll | 默认值。背景图片会随着页面其余部分的滚动而滚动。 |
| fixed | 当页面其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
参考网址：https://www.w3school.com.cn/cssref/pr_background-attachment.asp
边框属性
border-width # 定义边框的宽度
border-style # 定义边框的样式
border-color # 定义边框的颜色
定义边框宽度
border- 30px; /*定义边框宽度为30px*/
| 属性 | 描述 |
|---|---|
| thin | 定义细边框 |
| medium | 默认。定义中等的边框 |
| thick | 定义粗边框 |
| length | 自定义边框的宽度，如30px |
| inherit | 规定应该从父元素继承边框宽度 |
exp:
border-thin medium thick 10px;
/*
上为细边框thin
右为中等边框medium
下为粗边框thick
左为宽度为10px的边框
*/
定义边框的样式
border-style: solid; #定义实线边框
| 属性 | 描述 |
|---|---|
| none | 定义无边框 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
eg:
border-style:dotted solid double dashed;
/*
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
*/
exp:
<style>
div{
background: pink ;
100px;
height: 120px;
border: blue 10px solid; # 设置边框蓝色,宽度10px,实线
}
</style>
设置圆形边框
#d1 {
background-color: deeppink;
text-align: center ;
400px;
height: 400px;
border-radius: 50%; /*设置边框圆角，设置为50%时等宽高情况下为圆，否则为椭圆*/
}
<body>
<div id="d1"></div>
</body>
display属性
div {
display:none; /*隐藏标签，标签仍存在，原来的位置不再占有*/
visibility: hidden; /*隐藏标签，原来的位置仍然存在，只是单纯的隐藏*/
display:inline; /*将标签变成行内标签的特点*/
display:block; /*将标签变成块级标签的特点*/
display:inline-block; /*将标签变成行内块元素(既可以同行又能够设置宽高)*/
}
exp:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
.c1 {
background-color: deeppink;
color: white;
80px;
height: 80px;
border: blue;
border-radius: 50%;
}
.c2 {
display: none; /*隐藏标签，标签仍存在，原来的位置不再占有*/
}
#d1 {
visibility: hidden; /*隐藏标签，原来的位置仍然存在，只是单纯的隐藏*/
}
#d2 {
background-color: deeppink;
color: white;
80px;
height: 80px;
border: blue;
border-radius: 50%;
}
#d3{
display: block; /*将标签变成块级标签的特点*/
background-color: aqua;
40px;
height: 80px;
}
#d4{
display: inline; /*将标签变成行内标签的特点*/
}
#d5{
display: inline-block; /*将标签变成行内块元素(既可以同行又能够设置宽高)*/
background-color: pink;
40px;
height: 60px;
}
</style>
</head>
<body>
<div class="c1">div1标签</div>
<div id="d1">div2标签</div>
<div class="c2">div3标签</div>
<div id="d2">div4标签</div>
<span id="d3">我是行内标签span</span>
<div id="d4">我是块级标签div5</div>
<span id="d5">我是span2</span>
</body>
</html>
盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
"""
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0; /*上下左右全是0
/*margin: 10px 20px; !* 第一个上下 第二个左右*!*/
/*margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*!*/
/*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/
}
/*p {*/
/* margin-left: 0;*/
/* margin-top: 0;*/
/* margin-right: 0;*/
/* margin-bottom: 0;*/
/*}*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px; /*不叠加 只取大的*/
}
#dd {
margin: 0 auto; /*只能做到标签的水平居中*/
}
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!-- <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px; 400px">-->
<!-- <div id='dd' style="border: 1px solid orange;height: 50px; 50px;background-color: blue;"></div>-->
<!--</div>-->
<p>ppp</p>
</body>
</html>
float浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
200px;
background-color: red;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
200px;
background-color: greenyellow;
float: right; /*浮动 浮到空中往右飘*/
}
</style>