table of Contents
CSS Styles
1. Height Width
width:200px; # 宽度。50% 按父级标签的宽度百分比来算
height:200px; # 高度
块级标签才能设置宽度，内联标签的宽度由内容来决定。2. font properties
Font-family text font
font-family can put multiple font names as a "fallback" to save the system. If your browser does not support the first font, it tries the next one. The browser uses the first value it recognizes.
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}Font-size text size
Default 16px.
p {
font-size: 14px;
}Text Word weight (thickness) font-weight
font-weight is used to set the font of the word weight (thickness).
| value | description |
|---|---|
| normal | The default value, standard thickness |
| bold | Bold face |
| bolder | Thicker |
| lighter | thinner |
| 100~900 | Set specific thickness, 400 is equivalent to the normal, bold and is equivalent to 700 |
| inherit | Inherit the parent element font weight values |
font color
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
Text-align text alignment
text-align: center;
text-align: right;
text-align: left;| value | description |
|---|---|
| left | The default value is left-aligned |
| right | Align Right |
| center | Align |
| justify | Justify |
line-height: 200px # vertical center line high px = 200px (px height is set, i.e., the height of the container)
Text Decoration text-decoration
| value | description |
|---|---|
| none | default. Text defined criteria. |
| underline | The next line of text is defined. |
| overline | A text line definition. |
| line-through | Define a line passing through the text. |
| inherit | Text-decoration property inherited value of the parent element. |
Commonly used to remove a label from the default scribe:
a {
text-decoration: none;
}First line indent text-indent
The first line of a paragraph indent 32 pixels:
p {
text-indent: 32px; #首行缩进两个字符，一个字在页面上的默认大小为16px
}
text-indent: 2em; # em是一个相对单位，相对当前字体大小Exercise:
<!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. FIG background 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; # 设置固定Browser location coordinates:
| 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:背景 图片 方式 位置;Exercise:
<!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
Attributes:
border-style: # 样式
border-color: # 颜色
border-width: # 宽度Border-style style:
| value | description |
|---|---|
| none | Rimless. |
| dotted | Dot dashed border. |
| dashed | Rectangular dotted border. |
| solid | Solid border. |
# 简写
border: 10px dotted red;
宽度 样式 颜色# 左边框：
border-left:10px dotted red;
# 右边框：
border-right:10px solid red;Set fillet:
border-radius: 5%; # 设置圆角，50%是圆
width:200px;
hegith:200px; #可修改高、宽度，变椭圆。Debugging play: document.body.contentEditable = true
Exercise:
<!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 properties
Setting controls display HTML elements.
The block-level inline into inline, inline into block-level block.
| value | significance |
|---|---|
| display:none | HTML document element exists, but is not displayed in the browser (hidden). General combining JavaScript code uses. |
| display:block | Default occupies the entire width of the page, if you specify the width of the set, with the margin remaining part will be filled. |
| display:inline | Press display inline elements, then re-set the element's width, height, margin-top, margin-bottom and float property will not be affected. |
| display:inline-block | At the same time that the element has the characteristics of inline elements and block-level elements. Row block. |
display: none and visibility: hidden differences:
visibility: hidden: hide an element, but hidden element still occupies the same space previously not hidden. In other words, although the element is hidden, but still affects layout.
display: none: You can hide an element, and the hidden element will not take up any space. In other words, this element is not only hidden, and the space occupied by the original element will disappear from the page layout.
Exercise:
<!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. box model
In CSS, each tag can be called a box model.
1.margin: 外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
2.padding: 内边距：用于控制内容与边框之间的距离；
3.Border(边框): 围绕在内边距和内容外的边框。
4.Content(内容): 盒子的内容，显示文本和图像。
Space: content + padding + border
margin Margin
In chorme debugging browser window, you will find chorme body tag browser automatically added 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 padding
.test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
简写：顺序 上右下左
.test {
padding: 5px 10px 15px 20px;
}
补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边。
Exercise:
<!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 floating
Generally used for page layout. It will float out of the normal document flow.
After setting the float, the label is not exclusive line, the width can be set high.
float:rigth;
float:left;
Floating tag will cause the collapse of the parent
解决方式1：父级标签设置高度。
解决方式2：在下面的其他标签加： clear:both/left/rigth ; # 清除浮动
Workaround 3: pseudo-element mode, remove yourself float
.clearfix:after{
content:'';
display:block;
clear:both;
}
<div class='c1 clearfix'></div>
clear attributes specify which element prevents the other side floating elements.
| value | description |
|---|---|
| left | Not allowed to float on the 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>