标签：绘制 级联 字节 全局 repeat tips man mil 区域
CSS
简介
入门
插入CSS
可以在HTML的中添加
<link rel = "stylesheet" href = "css的文件名.css">
也可以在添加
选择器
基本选择器
层次选择器
属性选择器
标签[属性名=属性值（属性）]{}
结构伪类选择器
:first-child{}
:last -child{}
:nth-child(){} 例如 p:nth-child(1) 是其父元素的第一个子元素。还要是p元素。
:nth-of-type(){} 例如 p:nth-of-type(2) 规定属于其父元素的第2个 p 元素的每个 p：
:hover
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="笔记3.css" rel="stylesheet">
</head>
<body>
<p>000</p>
<p class="omg">s1</p>
<p>s2</p>
<p>s3</p>
<ul>
<li class="game">
<p>p1</p>
</li>
<li class="life">
<p>p2</p>
</li>
<li class="game">
<p>p3</p>
</li>
<li class="life">
<p>p4</p>
</li>
<li id="fuck">
<p>p5</p>
</li>
</ul>
</body>
</html>
body>p{
color: blue;
}
.omg+p{
color: blanchedalmond;
}
.omg~p{
font-size: x-large;
}
ul{
background: aqua;
}
ul li{
color: gold;
}
ul [class="game"]{
text-align: center;
}
.game{
background: brown;
}
.life{
background: cornflowerblue;
}
#fuck{
background: forestgreen;
}
#fuck:hover{
font-size: xx-large;
}
美化
(span起到重点强调作用)
字体
（CSS字体属性定义字体，加粗，大小，文字样式）
tips ：font ： 字体 大小 行高 字体风格
文本
超链接
tips：:hover 必须被置于 :link 和 :visited 之后，才是有效的。
:active 必须被置于 :hover 之后，才是有效的
列表
tips:list-style : type position image
背景
background-image : 一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者
background-size: 指定背景图像的大小(关键词：contain cover 数值px)
background-origin：指定背景图像的位置
background-clip 指定背景的绘制区域
tips：background: image position repeat
盒子模型
border
边框 (围绕在内边距和内容外的边框)
`name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
tips： border: width style color
margin
外边距 (清除边框外的区域，外边距是透明的)
tips: margin: top right bottom left/ top right&left bottom/top&bottom right&left
padding
内边距 (清除内容周围的区域，内边距是透明的)
基本和margin一致
边框up
浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响
float 浮动
left right none inherit
display 显示
none inline block
clear 清理浮动
left right none inherit both
overflow 下拉框
visible hidden scroll auto inherit
定位
position
重叠元素
z-index (number auto inherit)
标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。
定位高于浮动，浮动高于标准流。（高低和占不占位置无关）
用法：
1、必须有定位。（除去static之外）。
2、给定 z-index 的值为层级的值。（不给默认为0）
标签：绘制 级联 字节 全局 repeat tips man mil 区域
原文地址：https://www.cnblogs.com/canmeng196/p/14728521.html
