CSS层叠样式表
简介
HTML标签能够定义网页元素，它还会自带一些属性来控制样式，这个时候觉得这样设置不好，所以CSS的出现是为了解决内容与表现分离的问题。
基础语法
选择器 {
声明1;
声明2;
...
}
比如：
p {
color: red;
text-align: center;
}
CSS页面定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- css页面定位 -->
<!-- <button style="position: relative;">按钮1</button> -->
<!-- 默认采用相对定位 -->
<button style="position: absolute; top: 0px; left: 0px">按钮1</button>
<!-- 绝对定位，参考原点位置 -->
<!-- 绝对定位，top，left，bottom，right -->
<button style="position: absolute; top: 0px; left: 50px;">按钮2</button>
<button style="position: absolute; top: 0px; left: 100px;">按钮3</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 行内标签 -->
<!-- 在页面中默认采用相对定位的方式 position:relative -->
<!-- 对margin-left有效，对margin-top无效 -->
<span style="margin-left: 50px; margin-top: 50px;">简朴过每一天，人们彼此真心一片。</span>
<!-- 块标签 -->
<!-- 对margin-left有效，对margin-top有效 -->
<!-- margin：外边距 -->
<h4 style="margin-left: 50px; margin-top: 50px;">标题四</h4>
<!-- 行内块标签 -->
<!-- 三个button在同一行中，margin-top由最大者决定，其他的button跟随 -->
<button style="margin-left: 100px; margin-top: 50px;">按钮1</button>
<button style="margin-left: 100px; margin-top: 100px;">按钮2</button>
<button style="margin-left: 100px; margin-top: 150px;">按钮3</button>
</body>
</html>
块标签、行内标签、行内块标签的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 行标签转为块标签 -->
<span style="display: block; margin-top: 50px;">心跟着独特节奏跳</span>
<!-- 行内标签的margin-top无效，变为block块标签后，有效 -->
<!-- 块标签转为行标签 -->
<h4 style="display: inline;">标题四</h4>
<h3 style="display: inline;">标题三</h3>
<!-- 块标签h转换为行内标签，可以放在一行 -->
<br>
<!-- 行标签转为行内块标签 -->
<span style="display: inline-block; margin-top: 30px;">块1</span>
<span style="display: inline-block; margin-top: 50px;">块2</span>
<!-- 行标签的margin-top无效，转换为行内标签inline-block，既可以放在一行，margin-top也可以有效 -->
<br>
<!-- 隐藏标签 -->
<span style="display: none">王牌飞行员</span>
<!-- 改为none后，span所占的位置不在，其他元素会占用span的位置 -->
<span>申请出战</span>
<br>
<!-- <h1 style="visibility: visible;">标题一</h1> -->
<!-- 默认visible展示 -->
<h1 style="visibility: hidden; display: inline;">标题一(1)</h1>
<!-- 设置块标签为行内标签 -->
<!-- 设置hidden隐藏，但是原先的位置还在 -->
<h1 style="display: inline;">标题一(2)</h1>
<!-- 标题一(2)不会占用 -->
</body>
</html>
HTML中的表格
默认无边框的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表格 -->
<table style="width: 250px; height: 100px; ">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>城市</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<td>上海</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td>北京</td>
</tr>
</table>
</body>
</html>
添加边框的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
tr {
text-align: center;
color: blueviolet;
font-size: 18px;
font-family: "黑体";
font-style: normal;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 表格 -->
<!-- 快速生成表格：table>tr*3>td*4 -->
<table style="width: 300px; height: 150px;" cellspacing="0px" border="1px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>城市</th>
</tr>
<tr style="background-color: yellow;">
<td>张三</td>
<td>23</td>
<td>男</td>
<td>上海</td>
</tr>
<tr style="background-color: #09c709;">
<td>李四</td>
<td>24</td>
<td>男</td>
<td>北京</td>
</tr>
</table>
</body>
</html>
引入CSS样式的方式
- 内联样式/行内样式
将CSS样式写在HTML标签的内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 内联样式 -->
<!-- 每个标签都有一个style属性，CSS样式写在style属性中 -->
<!-- 各个声明之间使用";"隔开 -->
<p style="color: blueviolet; font-size: 18px; font-family: 黑体; font-style: italic; font-weight: bold; text-align: center;">
传说在伊甸，原始的爱没有欺骗。
</p>
<!-- color：设置字体颜色 -->
<!-- text-align：设置元素水平对齐规则，center，水平居中对齐 -->
<!-- font-family：设置字体名称，font-size：设置字体大小，font-style：设置字体风格，斜体，font-weight：设置字体粗细-->
</body>
</html>
缺点：一次只能控制一个标签的样式。
- 内部样式表
将CSS代码写在<head>标签内部的<style>标签。
- 外部样式表
将CSS代码写在项目的css文件夹中的文件里，然后在HTML中使用<link>标签引入外部的css文件。
span {
/* CSS代码的注解 */
/* 标签选择器 */
color: red;
font-size: 20px;
font-family: "楷体";
font-style: italic;
font-weight: bolder;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/mycss.css" type="text/css">
</head>
<body>
<span>引入CSS样式的第三种方式，外部样式表，在HTML中使用link标签引入外部.css文件。</span>
</body>
</html>
