CSS样式
目录
CSS样式
1. 高度宽度
width:200px; # 宽度。50% 按父级标签的宽度百分比来算
height:200px; # 高度
块级标签才能设置宽度，内联标签的宽度由内容来决定。
2. 字体属性
文字字体 font-family
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
文字大小 font-size
默认16px。
p {
font-size: 14px;
}
文字字重(粗细) font-weight
font-weight用来设置字体的字重（粗细）。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
字体颜色
https://htmlcolorcodes.com/zh/yanse-ming/
rgb表示法：
rgb:red green blue
color:rgb(255,255,255); 白色
color:rgb(0,0,0); 黑色
16进制：F最高，0最低
color:#000000-#FFFFFF;
单词表示：
color:red green;
rgba()表示：
# a表示透明度 0-1，0是完全透明
3. 文本
文本对齐 text-align
text-align: center;
text-align: right;
text-align: left;
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
line-height:200px # 垂直居中 ，行高的px=200px（是height设置的px，即容器高度）
文字装饰 text-decoration
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
首行缩进 text-indent
将段落的第一行缩进 32像素：
p {
text-indent: 32px; #首行缩进两个字符，一个字在页面上的默认大小为16px
}
text-indent: 2em; # em是一个相对单位，相对当前字体大小
练习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文字</title>
<style>
p{
background-color: yellow;
height: 200px;
width: 200px;
font-family: '楷体','仿宋';
font-size:24px;
font-weight: 600;
/*color: red;*/
color:RGB(255,0,0);
text-align: center;
/*text-align: right;*/
text-decoration: line-through;
line-height: 200px;
}
a{
text-decoration: none;
}
div{
text-indent: 2em;
}
div:first-letter{
font-size: 32px;
color: red;
}
span{
background-color: pink;
height: 200px;
width: 200px;
font-family: '微軟正黑體';
}
</style>
</head>
<body>
<p>
唧唧复唧唧
</p>
<a href="http://baidu.com">百度</a>
<div>
做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。
</div>
<span>
木兰
</span>
</body>
</html>
4. 背景图 background
*背景颜色*/background-color: red;
/*背景图片*/
background-image: url('1.jpg'); #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了
background-repeat: no-repeat;
/* 背景重复 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*/
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离，以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片。
background-attachment:fixed; # 设置固定
浏览器位置坐标：
| left top | center top | right top |
|---|---|---|
| left center | center center | right center |
| left bottom | center bottom | right bottom |
# 简写：
background:yellow url('1.jpg') no-repeat center center;
background:背景 图片 方式 位置;
练习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 600px;
height: 600px;
background-color: pink;
background-image: url("https://cn.bing.com/th?id=OIP.TJf26WLC_G6tlx7f3jl3UAAAAA&pid=Api&rs=1");
background-repeat: no-repeat; /*不铺满*/
/*background-repeat: repeat-x; !*x铺满*!*/
/*background-repeat: repeat-y; !*y铺满*!*/
background-position:center center;
/*background-position: 100px 100px;*/
}
.c3{
width: 600px;
height: 600px;
background: #b2fffd
url("https://tse1-mm.cn.bing.net/th?id=OIP.7O5T9faA_Ywbd7EIKzQtdQHaHa&w=209&h=209&c=8&rs=1&qlt=90&dpr=1.25&pid=3.1&rm=2")
no-repeat 100px 100px;
background-attachment:fixed ;
}
.c2{
width: 600px;
height:600px;
background: yellow url("https://www.bing.com/th?id=OGC.3543af710332ffad155374652914b951&pid=1.7&rurl=https%3a%2f%2fws1.sinaimg.cn%2flarge%2f9150e4e5gw1faey3cbk9gg204x04xmx8.gif&ehk=36QSjWAOIuPGuWFVzq9JgA")
no-repeat center center;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c3"></div>
<div class="c2"></div>
</body>
</html>
5. 边框 border
属性：
border-style: # 样式
border-color: # 颜色
border-width: # 宽度
边框样式style：
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
# 简写
border: 10px dotted red;
宽度 样式 颜色
# 左边框：
border-left:10px dotted red;
# 右边框：
border-right:10px solid red;
设置圆角：
border-radius: 5%; # 设置圆角，50%是圆
width:200px;
hegith:200px; #可修改高、宽度，变椭圆。
调试玩法：document.body.contentEditable=true
练习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
/*border-width: 1px;*/
/*border-style: solid;*/
/*border-color: red;*/
/*border-radius: 5%;*/
text-align: center;
/*border:10px dotted red ; !*简写*!*/
border-left:10px dotted red;
}
</style>
</head>
<body>
<div class="c1">
唧唧复唧唧
</div>
</body>
</html>
6. display属性
设置控制HTML元素的显示效果。
将块级变成内联inline， 将内联变成块级block.
| 值 | 意义 |
|---|---|
| display:none | HTML文档中元素存在，但是在浏览器中不显示(隐藏)。一般配合JavaScript代码使用。 |
| display:block | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:inline | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:inline-block | 使元素同时具有行内元素和块级元素的特点。行内块。 |
display:none与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
练习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height:200px;
width:200px;
border:1px solid red;
/*display: inline;*/
/*display: inline-block;*/
display: none; /*隐藏*/
/*visibility:hidden;*/
}
span{
height:200px;
width:200px;
border: 1px solid green;
display: block;
}
p{
height:200px;
width:200px;
border: 1px solid blue;
display: inline;
}
</style>
</head>
<body>
<div>div1</div>
<span>span1</span>
<p>p1</p>
</body>
</html>
7. 盒子模型
在CSS中，每个标签都可以称为一个盒子模型。
1.margin: 外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
2.padding: 内边距：用于控制内容与边框之间的距离；
3.Border(边框): 围绕在内边距和内容外的边框。
4.Content(内容): 盒子的内容，显示文本和图像。
占用空间：content+padding+border
margin外边距
在chorme浏览器调试窗口中，会发现chorme浏览器body标签自动加了8px。
.test{
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
简写：顺序 上右下左
.test{margin:5px 10px 15px 20px}
body{margin:0;} # body的上下左右的margin都设置为0.
.test{margin:0 auto;} #上下0像素，左右自适应，居中的效果
如果你写的是三个：margin: 10px 20px 10px;意思是上为10，左右为20，下为10
如果将上下标签都设置了margin，会按照最大的来间隔两者，并不是相加。
padding内边距
.test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
简写：顺序 上右下左
.test {
padding: 5px 10px 15px 20px;
}
补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边。
练习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
width: 200px;
height: 200px;
border:2px solid red;
padding: 20px 15px 10px 5px;
margin: 5px 10px 15px 20px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
8. float 浮动
一般用来进行页面布局。浮动会脱离正常文档流。
设置浮动后，标签不独占一行,可以设置高宽度。
float:rigth;
float:left;
浮动会造成父级标签塌陷
解决方式1：父级标签设置高度。
解决方式2：在下面的其他标签加： clear:both/left/rigth ; # 清除浮动
解决方式3：伪元素方式，自己清除浮动
.clearfix:after{
content:'';
display:block;
clear:both;
}
<div class='c1 clearfix'></div>
clear属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
练习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
text-align: center;
background-color: red;
float:right
}
.c2{
width: 200px;
height: 200px;
text-align: center;
background-color: pink;
float:left
}
.c3{
height: 200px;
text-align: center;
background-color: green;
}
.clearfix:after {
content: '';
display: block;
clear: both
}
</style>
</head>
<body>
<div class="clearfix">
<div class="c1">111</div>
<div class="c2">222</div>
</div>
<div class="c3">333</div>
</body>
</html>
9. overflow 溢出属性
overflow :scroll;
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容·修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| ·· | ·· |
| 11qDFUJKP | 规定应该从父元素继承 overflow 属性的值。 |
练习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height:200px;
text-indent: 2em;
border:1px solid red;
/*overflow: visible;*/
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
</style>
</head>
<body>
<div>
做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。
</div>
</body>
</html>
10. 定位 position
position: relative/absolute/fixed;
top/right/bottom/left:100px; # 0的时候不用加px
static默认没有定位。
relative相对定位：相对自己原来的位置移动，移动后原来的空间还占着
absolute绝对定位：不占空间
如果没有父级盒子或者有父级，但父级没有设置position定位，那么绝对定位是相对于整个html页面的边界定位；优先级提高；
如果有父级盒子且设置了position，那么绝对定位是相对于父级盒子的的边界定位。（父相子绝）
不占用自己原来的位置，移动时如果父级标签以及祖先辈都没有设置相对定位，就会按照整个html文档进行移动。优先级会提高。
如果父级标签以及祖先辈设置了相对定位，会按照父级标签移动。
fixed固定定位：相对于整个窗口。
z-index 层级
z-index:正整数；
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
opacity 标签透明度
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
opacity:给整个标签设置透明度.
rgba() :是给属性（如背景）设置透明度.
圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
border-radius: 50%;
border:1px solid red;
overflow: hidden;
}
div img{
width: 100%;
}
</style>
</head>
<body>
<div class="c1">
<img src="2.jpg" alt="">
</div>
</body>
</html>
