前面我们整理了HTML一些知识，这章我们进行CSS知识的整理，CSS的好处就是可以将我们的样式统一起来，这是一种分层设计的思想，CSS将颜色、大小位置等信息剥离出来，HTML只用关心提供什么样的内容就可以了。
目录
CSS语法
selector{property:value}即选择器{属性:值}，也可以在标签上直接写内联样式，但是内联样式只能作用于当前标签，一般我们要在某个标签上实现特定样式的时候，可以使用内联样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
</body>
</html>
效果：
CSS选择器
基础选择器主要分为3种，元素选择器、id选择器、类选择器，有时候为了实现更准确的选择我们会组合选择器。
1.元素选择器
元素选择器通过标签名选择元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>p元素</p>
<p>p元素</p>
<p>p元素</p>
</body>
</html>
效果：
2.id选择器
一个元素的id应该是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
p {
color: red;
}
#p1 {
color: blue;
}
#p2 {
color: green;
}
</style>
</head>
<body>
<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>
</body>
</html>
效果：
3.类选择器
当需要多个元素，都使用同样的CSS的时候，就会使用类选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.pre {
color: blue;
}
.after {
color: green;
}
</style>
</head>
<body>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>
</body>
</html>
效果：
4.组合选择器
有时候我们需要在特定标签上加特定的样式，可以使用组合选择器指定特定标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组合选择器</title>
<style>
p.blue {
color: blue;
}
</style>
</head>
<body>
<p class="blue">class=blue的p</p>
<span class="blue">class=blue的span</span>
</body>
</html>
效果：
- CSS尺寸
属性width代表宽，height代表高，值可以是百分比或者像素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>尺寸</title>
<style>
#percentage {
width: 50%;
height: 50%;
background-color: pink;
}
#pix {
width: 180px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<p id="percentage">按比例设置尺寸50%宽50%高</p>
<p id="pix">按像素设置尺寸180px宽50px高</p>
</body>
</html>
效果：
CSS背景
1.背景颜色
属性名background-color
颜色的值可以采用3种方式
预定义的颜色名字，比如red、gray、white、black、pink，可以参考颜色速查手册；rgb格式分别代表红绿蓝的比例rgb(250,0,255)即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色；16进制的表示#00ff00等同于rgb(0,255,0)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景颜色</title>
<style>
.gray {
background-color: gray;
}
h1 {
background-color: transparent;
}
h2 {
background-color: rgb(250, 0, 255);
}
h3 {
background-color: #00ff00;
}
</style>
</head>
<body>
<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>
</body>
</html>
效果：
2.图片做背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
#test {
background-image: url(/Users/liuzhenyu/Downloads/20200921185414818.jpeg);
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="test">
这是一个有背景图的DIV
</div>
</body>
</html>
效果：
3.背景重复
background-repeat属性值可以选，repeat：水平垂直方向都重复，repeat-x：只有水平方向重复，repeat-y：只有垂直方向重复，no-repeat：无重复。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景重复</title>
<style>
#no-repeat {
background-image: url(/Users/liuzhenyu/Downloads/20200921185414818.jpeg);
width: 100%;
height: 25%;
background-repeat: no-repeat;
}
#repeat {
background-image: url(/Users/liuzhenyu/Downloads/20200921185414818.jpeg);
width: 100%;
height: 25%;
background-repeat: repeat;
}
#repeat-x {
background-image: url(/Users/liuzhenyu/Downloads/20200921185414818.jpeg);
width: 100%;
height: 25%;
background-repeat: repeat-x;
}
#repeat-y {
background-image: url(/Users/liuzhenyu/Downloads/20200921185414818.jpeg);
width: 100%;
height: 25%;
background-repeat: repeat-y;
}
</style>
</head>
<body style="height:1200px;">
<div id="no-repeat">
背景不重复
</div>
<div id="repeat">
水平垂直方向都重复
</div>
<div id="repeat-x">
水平方向重复
</div>
<div id="repeat-y">
垂直方向重复
</div>
</body>
</html>
效果：
4.背景平铺
属性background-size值为contain
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景平铺</title>
<style>
#contain {
background-image: url(/Users/liuzhenyu/Downloads/20200921185414818.jpeg);
width: 100%;
height: 25%;
background-size: contain;
}
</style>
</head>
<body>
<div id="contain">
背景平铺，通过拉伸实现，会有失真
</div>
</body>
</html>
效果：
CSS文本
color文字颜色，text-align对齐，text-decoration文本修饰，line-height行间距，letter-spacing字符间距，word-spacing单词间距，text-indent首行缩进，text-transform大小写，white-space空白格。
1.属性名color，颜色的值可以采用3种方式，预定义的颜色名字比如red,gray,white,black,pink；rgb格式，分别代表红绿蓝的比例rgb(250,0,255)即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色；16进制的表示，#00ff00等同于rgb(0,255,0)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字颜色</title>
<style>
#colorful {
color: pink;
}
</style>
</head>
<body>
<div id="colorful">
粉红色
</div>
</body>
</html>
效果：
2.对齐
属性:text-align值:left、right、center，div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。但是，span却看不出右对齐效果，为什么呢？因为span是内联元素其默认宽度就是其文本内容的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字对齐</title>
<style>
div,
span {
border: 1px gray solid;
margin: 10px;
}
div#left {
text-align: left;
}
div#center {
text-align: center;
}
div#right {
text-align: right;
}
span#right {
text-align: right;
}
</style>
</head>
<body>
<div id="left">
左对齐
</div>
<div id="right">
右对齐
</div>
<div id="center">
居中
</div>
<span id="right">
span看不出右对齐效果
</span>
</body>
</html>
效果：
3.文本修饰
属性:text-decoration值:overline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本修饰</title>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: blink;
}
.a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="https://how2j.cn/p/6773">默认的超链接</a>
<a class="a" href="https://how2j.cn/p/6773">去掉了下划线的超链接</a>
</body>
</html>
效果：
4.行间距
属性:line-height值:数字或者百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行间距</title>
<style>
p {
width: 200px;
}
.p {
line-height: 200%;
}
</style>
</head>
<body>
<p>
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
</p>
<p class="p">
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
</p>
</body>
</html>
效果：
5.字符间距
属性:letter-spacing值:数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符间距</title>
<style>
p {
width: 200px;
}
.p {
letter-spacing: 2px;
}
</style>
</head>
<body>
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
</body>
</html>
效果：
6.单词间距
属性:word-spacing值:数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单词间距</title>
<style>
p {
width: 200px;
}
.p {
word-spacing: 10px;
}
</style>
</head>
<body>
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
</body>
</html>
效果：
7.首行缩进
属性:text-indent值:数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首行缩进</title>
<style>
p {
width: 200px;
}
.p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>
没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字
</p>
<p class="p">
有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段
文字
</p>
</body>
</html>
效果：
8.大小写
属性:text-transform值:uppercase全部大写，capitalize首字母大写，lowercase全部小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大小写</title>
<style>
p.u {
text-transform: uppercase;
}
p.c {
text-transform: capitalize;
}
p.l {
text-transform: lowercase;
}
</style>
</head>
<body>
<p class="u">
abcD
</p>
<p class="c">
abcD
</p>
<p class="l">
abcD
</p>
</body>
</html>
效果：
9.空白格
属性:white-space值:normal默认，多个空白格或者换行符会被合并成一个空白格；pre有多少空白格，显示多少空白格，相当于pre标签，如果长度超出父容器也不会换行。pre-wrap有多少空格，显示多少空白格，相当于pre标签，如果长度超出父容器，会换行。nowrap一直不换行，直到使用br。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空白格</title>
<style>
p.n {
white-space: normal
}
p.p {
white-space: pre
}
p.pw {
white-space: pre-wrap
}
p.nw {
white-space: nowrap
}
</style>
</head>
<body>
<p class="n">
在默认情况下，多个 空白格或者
换行符
会被 合并成一个空白格
</p>
<p class="p">
保留所有的 空白格
以及换行符
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>
<p class="pw">
保留所有的 空白格
以及换行符
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>
<p class="nw">
不会换行
不会换行
不会换行
不会换行
不会换行
不会换行
直到br<br />才换行
</p>
</body>
</html>
效果：
CSS字体
和字体相关的属性:font-size尺寸，font-style风格，font-weight粗细，font-family字库，font声明在一起。
1.尺寸
属性:font-size值:数字或者百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>尺寸</title>
<style>
p.big {
font-size: 30px;
}
p.small {
font-size: 50%;
}
p.small2 {
font-size: 0.5em;
}
</style>
</head>
<body>
<p>正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em等同于50%比例的文字</p>
</body>
</html>
效果：
2.风格
font-size:normal标准字体，italic斜体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>风格</title>
<style>
p.n {
font-style: normal;
}
p.i {
font-style: italic;
}
</style>
</head>
<body>
<p>标准字体</p>
<p class="n">标准字体</p>
<p class="i">斜体</p>
</body>
</html>
效果：
3.粗细
属性font-weight:normal标准粗细，bold粗一点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粗细</title>
<style>
p.n {
font-weight: normal;
}
p.b {
font-weight: bold;
}
</style>
</head>
<body>
<p>标准字体</p>
<p class="n">标准字体</p>
<p class="b">粗一点</p>
</body>
</html>
效果：
4.字库
属性font-family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字库</title>
<style>
p.f1 {
font-family: "Times New Roman";
}
p.f2 {
font-family: Arial;
}
p.f3 {
font-family: 宋体;
}
p.f4 {
font-family: 黑体;
}
p.f5 {
font-family: 楷体;
}
p.f6 {
font-family: 微软雅黑;
}
</style>
</head>
<body>
<p>默认字库 font family:default</p>
<p class="f1">设置字库 font-family:Times New Roman</p>
<p class="f2">设置字库 font-family:Arial</p>
<p class="f3">设置字库 font-family:宋体，这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family:黑体</p>
<P class="f5">设置字库 font-family:楷体</P>
<p class="f6">设置字库 font-family:微软雅黑，这种字体是火狐默认字体</p>
</body>
</html>
效果：
5.声明在一起
把大小、风格、粗细、字库都写在一行里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>声明在一起</title>
<style>
p.all {
font: italic bold 30px "Times New Roman";
}
</style>
</head>
<body>
<p>默认字体</p>
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman"</p>
</body>
</html>
效果：
CSS鼠标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标样式</title>
</head>
<body>
<p style="cursor: default;">鼠标移动上来看效果(cursor:default)</p>
<p style="cursor: auto;">鼠标移动上来看效果(cursor:auto)</p>
<p style="cursor: crosshair;">鼠标移动上来看效果(cursor:crosshair)</p>
<p style="cursor: pointer;">鼠标移动上来看效果(cursor:pointer)</p>
<p style="cursor: e-resize;">鼠标移动上来看效果(cursor:e-resize)</p>
<p style="cursor: ne-resize;">鼠标移动上来看效果(cursor:ne-resize)</p>
<p style="cursor: nw-resize;">鼠标移动上来看效果(cursor:nw-resize)</p>
<p style="cursor: n-resize;">鼠标移动上来看效果(cursor:n-resize)</p>
<p style="cursor: se-resize;">鼠标移动上来看效果(cursor:se-resize)</p>
<p style="cursor: sw-resize;">鼠标移动上来看效果(cursor:sw-resize)</p>
<p style="cursor: w-resize;">鼠标移动上来看效果(cursor:w-resize)</p>
<p style="cursor: text;">鼠标移动上来看效果(cursor:text)</p>
<p style="cursor: wait;">鼠标移动上来看效果(cursor:wait)</p>
<p style="cursor: help;">鼠标移动上来看效果(cursor:help)</p>
<p style="cursor: not-allowed;">鼠标移动上来看效果(cursor:not-allowed)</p>
</body>
</html>
效果：
CSS表格
1.表格布局
属性:table-layout值为automatic:单元格的大小由td的内容宽度决定；值为fixed:单元格的大小由td上设置的宽度决定。
注：只对连续的英文字母起作用，如果使用中文就看不到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格布局</title>
<style>
table.t1 {
table-layout: auto;
}
table.t2 {
table-layout: fixed;
}
</style>
</head>
<body>
<table class="t1" border="1" width="100%">
<tr>
<td width="10%">abcdefghijklmnopqrstuvwxyz</td>
<td width="90%">abc</td>
</tr>
</table>
<table class="t2" border="1" width="100%">
<tr>
<td width="50px">abcdefghijklmnopqrstuvwxyz</td>
<td>abc</td>
</tr>
</table>
<table class="t1" border="1" width="100%">
<tr>
<td width="10%">我们看看中文的效果</td>
<td width="90%">abc</td>
</tr>
</table>
</body>
</html>
效果：
2.表格边框
属性：border-collapse值为separate:边框分隔，值为collapse:边框合并。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格边框</title>
<style>
table.t1 {
border-collapse: separate;
}
table.t2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="t1" border="1" width="200px">
<tr>
<td width="50%">边框分离</td>
<td width="50%">边框分离</td>
</tr>
</table>
<br>
<br>
<table class="t2" border="1" width="200px">
<tr>
<td width="50%">边框合并</td>
<td width="50%">边框合并</td>
</tr>
</table>
</body>
</html>
效果：
CSS边框
1.边框风格
属性：border-style值为solid:实现，值为dotted:点状，值为dashed:虚线，值为double:双线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框样式</title>
<style>
.solid {
border-style: solid;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.double {
border-style: double;
}
</style>
</head>
<body>
<div>默认无边框div</div>
<div class="solid">实线边框</div><br>
<div class="dotted">点状边框</div><br>
<div class="dashed">虚线边框</div><br>
<div class="double">双线边框</div>
</body>
</html>
效果：
2.边框颜色
属性：border-color值为red,#ff0000,rgb(255,0,0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框颜色</title>
<style>
.red {
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<div>默认无边框div</div>
<div class="red">实线红色边框</div><br>
</body>
</html>
效果：
3.边框宽度
属性：border-width值为数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框宽度</title>
<style>
.red {
border-style: solid;
border-color: red;
border-width: 1px;
}
.default {
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<div>默认无边框div</div>
<div class="red">实线红色边框</div><br>
<div class="default">实线红色默认宽度边框</div><br>
</body>
</html>
效果：
4.都放在一起
属性：border值为:颜色、风格、宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>都放在一起</title>
<style>
.red {
border: 1px dotted lightskyblue;
}
</style>
</head>
<body>
<div>默认无边框div</div><br>
<div class="red">点状天蓝色细边框</div>
</body>
</html>
效果：
5.只有一个方向有边框
通过制定位置，可以只给一个方向设置边框风格，颜色和宽度
border-top-style:solid;border-top-color:red;border-top-width:50px;
top,bottom,left,right分别对应上下左右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>只有一个方向有边框</title>
<style>
div {
width: 150px;
height: 150px;
border-top-style: solid;
border-top-color: red;
border-top-width: 50px;
background-color: lightgray;
}
</style>
</head>
<body>
<div>
只有上面有边框
</div>
</body>
</html>
效果：
6.有交界的边都有边框
比如上和左就是有交界的，而上和下就没有交界，当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有交界的边都有边框</title>
<style>
.lefttop {
width: 150px;
height: 150px;
border-top-style: solid;
border-top-color: red;
border-top-width: 50px;
border-left-style: solid;
border-left-color: blue;
border-left-width: 50px;
background-color: lightgray;
}
.alldirection {
width: 150px;
height: 150px;
border-top-style: solid;
border-top-color: red;
border-top-width: 50px;
border-left-style: solid;
border-left-color: blue;
border-left-width: 50px;
border-bottom-style: solid;
border-bottom-color: green;
border-bottom-width: 50px;
border-right-style: solid;
border-right-color: yellow;
border-right-width: 50px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框
</div>
</body>
</html>
效果：
7.块级元素和内联元素的边框区别
可以看到，块级元素div默认是占用100%的宽度，常见的块级元素有div h1 p等，而内联元素span的宽度由其内容的宽度决定，常见的内联元素有a b strong i input等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素和内联元素的边框区别</title>
<style>
.red {
border: 1px solid red;
}
</style>
</head>
<body>
<div>默认无边框div</div><br>
<div class="red">实线红色细边框</div><br>
<spanc class="red">实线红色细边框</span>
</body>
</html>
效果：
8.小练习-表格斑马线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格斑马线</title>
<style>
table {
border-collapse: collapse;
width: 90%;
}
tr.odd {
background-color: #f8f8f8;
}
tr.head {
border-bottom-width: 2px;
}
tr {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height: 35px;
}
td {
width: 25%;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr class="head">
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr class="odd">
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr class="even">
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr class="odd">
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr class="even">
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
</body>
</html>
效果：
9.小练习-美人尖
借助边框，实线美人尖效果，也就是倒三角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美人尖</title>
<style>
div {
width: 0px;
height: 0px;
border-top-style: solid;
border-top-color: red;
border-top-width: 10px;
border-left-style: solid;
border-left-color: white;
border-left-width: 10px;
border-bottom-style: solid;
border-bottom-color: white;
border-bottom-width: 10px;
border-right-style: solid;
border-right-color: white;
border-right-width: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
10.小练习-断线下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>断线下划线</title>
<style>
table {
width: 100%;
}
table td {
text-align: center;
}
table tr.rowborder td {
background-color: #b2d1ff;
border-right: 2px solid #fff;
height: 3px;
}
</style>
</head>
<body>
<table>
<tr>
<td>商品</td>
<td>数量</td>
<td>价格</td>
<td>小记</td>
</tr>
<tr class="rowborder">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
效果：
CSS内边距
元素内边距，指的元素里的内容与边框之间的距离，属性：padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距padding上右下左
1.左内边距
属性:padding-left值:数字，指的是元素中的内容与边框之间的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左内边距</title>
<style>
.red {
border: 5px solid red;
background-color: green;
}
.pad-left {
border: 5px solid red;
background-color: green;
padding-left: 50px;
}
</style>
</head>
<body>
<span class="red">无内边距的span</span><br><br>
<span class="pad-left">左边距为50的span</span>
</body>
</html>
效果：
2.内边距，写1个和写4个的区别
属性：padding，如果只写一个值，即四个方向的值，如果写四个，即四个方向的值，上右下左，顺时针方向依次赋值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距</title>
<style>
div {
width: 50%;
}
.pad-left-one {
border: 5px solid red;
background-color: green;
padding: 20px;
}
.pad-left-four {
border: 5px solid red;
background-color: green;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="pad-left-one">padding:20的div</div><br>
<div class="pad-left-four">padding: 10 20 30 40 的div</div>
</body>
</html>
效果：
3.当内边距的值少于4个
如果缺少左内边距的值，则使用右内边距的值
如果缺少下内边距的值，则使用上内边距的值
如果缺少右内边距的值，则使用上内边距的值
举例说明，首先记住如果完整4个值，则是按顺时针上右下左。
完整4个值，顺时针赋值
padding: 10px(上) 20px(右) 40px(下) 80px(左)
如果只有3个，那么left取right
padding: 10px(上) 20px(右) 40px(下) 左取右=20px
如果只有两个，那么bottom取top，left取right
padding: 10px(上) 20px(右) 下取上=10px 左取右=20px
如果只有一个，那么right取top，bottom取top，left取top
padding: 10px(上) 右取上=10px 下取上=10px 左取上=10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距少于4个</title>
<style>
div {
border: solid 2px red;
width: 32px;
}
.pad-four {
padding: 10px 20px 40px 80px;
}
.pad-three {
padding: 10px 20px 40px;
}
.pad-two {
padding: 10px 20px;
}
.pad-one {
padding: 10px;
}
</style>
</head>
<body>
<div class="pad-four">四个</div><br>
<div class="pad-three">三个</div><br>
<div class="pad-two">两个</div><br>
<div class="pad-one">一个</div>
</body>
</html>
效果：
CSS外边距
CSS外边距是围绕在元素边框的空白区域，设置外边距会在元素外创建额外的空白，设置外边距最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。
margin和padding一样，赋值顺序也是上右下左，或者单独赋值一遍，属性有margin-left:左外边距margin-right:右外边距margin-top:上外边距margin-bottom:下外边距
1.左外边距
属性:margin-left,值:数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左外边距</title>
<style>
.red {
border: 1px solid red;
background: green;
}
.margin-left {
border: 1px solid red;
background-color: green;
margin-left: 10px;
}
</style>
</head>
<body>
<span class="red">无外边距的span</span>
<span class="margin-left">有左外边距的span</span>
</body>
</html>
效果：
2.margin四个值三个值两个值一个值的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>四个值</title>
<style>
.red {
border: 1px solid red;
background: green;
}
.margin-four {
border: 1px solid red;
background-color: green;
margin: 10px 20px 40px 80px;
}
</style>
</head>
<body>
<div class="red">无外边距的div</div>
<div class="margin-four">四个值</div>
<div class="red">无外边距的div</div>
</body>
</html>
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三个值</title>
<style>
.red {
border: 1px solid red;
background: green;
}
.margin-four {
border: 1px solid red;
background-color: green;
margin: 10px 20px 40px;
}
</style>
</head>
<body>
<div class="red">无外边距的div</div>
<div class="margin-four">三个值,左取右</div>
<div class="red">无外边距的div</div>
</body>
</html>
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两个值</title>
<style>
.red {
border: 1px solid red;
background: green;
}
.margin-four {
border: 1px solid red;
background-color: green;
margin: 10px 20px;
}
</style>
</head>
<body>
<div class="red">无外边距的div</div>
<div class="margin-four">两个值,下取上,左取右</div>
<div class="red">无外边距的div</div>
</body>
</html>
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一个值</title>
<style>
.red {
border: 1px solid red;
background: green;
}
.margin-four {
border: 1px solid red;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<div class="red">无外边距的div</div>
<div class="margin-four">一个值,右下左都取上</div>
<div class="red">无外边距的div</div>
</body>
</html>
效果：
CSS边框模型
真正决定一个元素的表现形式，是由其边框模型决定的，整个元素的宽高应该是有内容本身宽高及内外边距的长度一起决定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框模型</title>
<style>
.box {
width: 70px;
padding: 5px;
margin: 10px;
}
div {
border: 1px solid gray;
font-size: 70%;
}
</style>
</head>
<body>
<div>其他元素</div>
<div class="box">
内容宽度70px<br><br>
内边距：5px<br><br>
外边距：10px<br>
</div>
<div>其他元素</div>
</body>
</html>
效果：
CSS超链状态
1.超链接状态有4种，link初始状态，从未被访问过；visited已访问过；hover鼠标悬停于超链接的上方；active鼠标左键点击下去，但是尚未弹起的时候。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链状态</title>
<style>
a:link {
color: #5ee2a4;
}
a:visited {
color: #ebe0e7;
}
a:hover {
color: #ca55a7;
}
a:active {
color: #555dca;
}
</style>
</head>
<body>
<a href="https://how2j.cn/p/6773">超链的不同状态</a>
</body>
</html>
效果：
2.去除超链的下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>去除超链的下划线</title>
<style>
.no_underline {
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://how2j.cn/p/6773">默认的超链</a><br>
<a class="no_underline" href="https://how2j.cn/p/6773">去除下划线的超链</a>
</body>
</html>
效果：
3.小练习-下拉菜单风格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单风格</title>
<style>
a {
font-size: 14px;
color: cornflowerblue;
text-decoration: none;
}
.menu {
width: 80px;
border: 1px solid lightgray;
margin-top: 15px;
position: absolute;
left: 80px;
top: 20px;
}
.menu a {
display: block;
font-size: 14px;
font-family: 宋体;
color: #888;
text-decoration: none;
padding: 10px 0px 10px 15px;
}
.menu a:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="menu">
<a href="#nowhere">盖伦</a>
<a href="#nowhere">提莫</a>
<a href="#nowhere">安妮</a>
<a href="#nowhere">死哥</a>
</div>
</body>
</html>
效果：
CSS隐藏
隐藏元素有两种方式display:none和visibility:hidden;
使用display:none;隐藏一个元素，这个元素将不再占有原空间
使用visibility:hidden;隐藏一个元素，这个元素继续占有原空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隐藏</title>
<style>
.d {
display: none;
}
.v {
visibility: hidden;
}
</style>
</head>
<body>
<div>可见的div1</div>
<div class="d">隐藏的div2，使用display:none隐藏</div>
<div>可见的div3</div>
<div class="v">隐藏的div4，使用visibility:hidden隐藏</div>
<div>可见的div5</div>
</body>
</html>
效果：
CSS文件
如果把所有的CSS都写在html文件里面，一旦样式比较多的时候，就会显得不易维护，这个时候就会选择把所有的CSS内放在一个独立文件里，然后在html中引用该文件，通常这个文件会被命名为style.css。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入CSS文件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="p1">红色</p>
<span class="span1">蓝色</span>
</body>
</html>
效果：
CSS优先级
样式位置的优先级：内联样式(就是我们直接写在标签上的样式)>内部样式(就是我们在当前页面写在style标签中的样式)>外部样式(就是我们引入的外部的样式文件)
如果有两个或者多个选择器都指向同一个标签，那么我们需要通过计算标签的权重值来判断优先级，权重值如下：
!important Infinity 正无穷
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重计算优先级</title>
<style>
div {
width: 50%;
}
#idDiv p {
background-color: red;
}
.classDiv .classP {
background-color: green;
}
</style>
</head>
<body>
<div id="idDiv" class="classDiv">
<p class="classP">看看到底显示什么颜色呢</p>
</div>
</body>
</html>
效果：
优先级是这样的，如果指向标签的多个样式中有相同的样式，则会采用优先级高的样式，如上图显示#idDiv p和.classDiv .classP都指向p标签，但是最终显示为红色，就是因为前者权重和比后者权重和大，利用之前的列的值我们计算一下100(#idDiv) + 1§ = 101 > 10(.classDiv) + 10(.classP) = 20。
结尾
OK，至此我们将CSS的一些基本内容整理完成，接下来该整理CSS布局相关内容了，所有代码我都列出来了，大家如果没有开发工具，可以直接拷贝在文本中改后缀名为HTML就可以拖到浏览器看到效果了，如果有哪里不全面或者不对的地方，大家也可以指出来。
