1、CSS 概述
CSS是层叠式样式表。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记语言。直白一点就是用来美化页面的。
语法规则：
选择器：浏览器根据"选择器"决定CSS样式影响的HTML元素(标签)。
属性(property)：是你要改变的样式名，并且每一个属性都有一个值。属性和值被冒号分开，并由花括号包裹，这样就组成了一个完整的样式声明(declaration)，如 p{color:blue}
多个声明：如果定义不止一个声明，则需要用分号将每个声明分开。然后最后一条声明的末尾可以不加分号。如 p{color:blue;font-size:30px}
CSS注释：
/*注释内容*/
2、引入CSS样式表
内嵌式样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签之间，并且用style标签定义。
语法格式如下：
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
【示例 2-1】内联式应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*
边框的宽度为1像素
边框的样式为实线
边框的颜色为红色
*/
border: 1px solid red;
}
span{
/*
字体大小为40像素
字体名称为华文彩云
*/
font: 40px "华文彩云";
/* 字体颜色为蓝色 */
color: blue;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
执行结果如下：
行内式样式表
行内式是通过标签的style属性来设置元素的样式。
语法格式如下：
<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;"
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
【示例 2-2】行内式的应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>CSS行内式样式表</title>
</head>
<body>
<P style="color: orangered;font-family: '仿宋';font-size: 30px;">段落标签</P>
<P style="color: blue;font-family: '仿宋';font-size: 20px;">段落标签</P>
<P style="color: green;font-family: '仿宋';font-size: 35px;">段落标签</P>
</body>
</html>
执行结果如下：
链入式样式表
链入式是将所有的样式放在一个或多个以 " .CSS" 为扩展名的外部样式表文件中，通过link标签将CSS文件连接到HTML文档中。
语法格式如下：
<head>
<link href="CSS文件路径" type="text/CSS" rel="stylesheet"/>
</head>
link是单标签，具体描述如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为"text/CSS"，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式
【示例 2-3】链入式的应用
a.css
p{
font: 30px '仿宋';
margin: 0 auto;
}
#a{color: red;}
#b{color: green;}
#c{color: blue;}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS链入式</title>
<link href="../style/a.css" type="text/CSS" rel="stylesheet"/>
</head>
<body>
<p id="a">你好</p>
<p id="b">你好</p>
<p id="c">你好</p>
</body>
</html>
执行结果如下：
三种样式表总结：
3、CSS 选择器
标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法格式如下：
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3
}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
【示例 3-1】标签选择器的应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标签选择器的应用</title>
<style type="text/CSS">
p { font: 20px '宋体';
/*text-align:center 居中对齐 */
text-align:center
}
div {
/*边框以 1像素 虚线 蓝色 实现 */
border: 1px dashed blue;
}
</style>
</head>
<body>
<div>
<p>登鹳雀楼</p>
</div>
<div>
<p>王之涣</p>
</div>
<div>
<p>白日依山尽，</p>
</div>
<div>
<p>黄河入海流。</p>
</div>
<div>
<p>欲穷千里目，</p>
</div>
<div>
<p>更上一层楼。</p>
</div>
</body>
</html>
执行结果如下：
id 选择器
id选择器使用 "#" 进行标识，后面紧跟id名，其基本语法格式如下：
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3
}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
【示例 3-2】id选择器的应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>id选择器的应用</title>
<style type="text/CSS">
p { font: 20px '宋体';
/*text-align:center 居中对齐 */
text-align:center
}
div {
/*边框以 1像素 虚线 蓝色 实现 */
border: 5px dashed;
}
#div1{border-color: red;}
#div2{border-color: yellow;}
#div3{border-color: blue;}
#div4{border-color: green;}
#div5{border-color: orange;}
#div6{border-color: purple;}
</style>
</head>
<body>
<div id="div1">
<p>登鹳雀楼</p>
</div>
<div id="div2">
<p>王之涣</p>
</div>
<div id="div3">
<p>白日依山尽，</p>
</div>
<div id="div4">
<p>黄河入海流。</p>
</div>
<div id="div5">
<p>欲穷千里目，</p>
</div>
<div id="div6">
<p>更上一层楼。</p>
</div>
</body>
</html>
执行结果如下：
类选择器
语法格式如下：
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3
}
该语法中，类名即为HTML元素的class属性值。
id选择器和类选择器区别：
- W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
- 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜。
- id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
- id选择器和类选择器最大的不同在于 使用次数上。
通配符选择器
通配符选择器用 "* "号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
语法格式如下：
*{
属性1:属性值1;
属性2:属性值2
}
【示例 3-3】清除所有HTML标记的默认边距
*{
margin:0; /*定义外边距*/
padding:0;/*定义内边距*/
}
组合选择器
语法格式如下：
选择器1,选择器2,选择器n{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3
}
组合选择器可以让多个选择器共用一个css样式代码。
【示例 3-4】组合选择器的应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>组合选择器的应用</title>
<style type="text/css">
.class01,#id01{
color: blue;
font-size: 20px;
border:1px solid yellow;
}
</style>
</head>
<body>
<div class="class01">div标签1</div><br/>
<span id="id01">span标签1</span><br/>
<div>div标签2</div><br/>
<div class="class01">div标签3</div><br/>
<span>span标签2</span><br/>
</body>
</html>
执行结果如下：
4、常用样式
a、颜色：
-
颜色可以写颜色名：如 black、blue、red、green等。
-
颜色也可以写rgb值和十六进制表示值：如rgb(255,0,0)，#0368E5，如果写十六进制值必须加#号。
b、宽度（width）：
-
宽度可以写像素值：19px。
-
也可以写百分百比值：20%
c、高度（height）:
-
高度可以写像素值：19px。
-
也可以写百分百比值：20%
d、背景颜色：
- background-color：#0F2D4C;
e、字体样式：
- color：#FF0000；字体颜色为红色。
- font-size：20px； 字体大小。
- font-family：‘宋体’、‘楷体’、‘黑体’；字体名称。
- font-weight：normal/bold； 字体粗细 ，normal：正常，bold：加粗。
- font-style：normal/italic/oblique；字体风格，italic：斜体，oblique：倾斜。
f、红色1像素实现边框：
- border：1px solid #FF0000;
g、div居中：
- margin-left：auto；margin-right：auto;
- 简写 margin：0 auto；
h、文本居中：
- text-align：center；
i、超链接去下划线：
- text-decoration: none;
j、表格细线：
table {
/* 设置边框 */
border: 1px solid red;
/* 将边框合并 */
border-collapse: collapse;
}
td,th {
/* 设置边框 */
border: 1px solid red;
}
k、列表去除修饰：
ul {
list-style:none;
}
【示例 3-1】常用样式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 常用样式</title>
<style type="text/css">
div {
/* 字体颜色 */
color: red;
/* 盒子边框 */
border: 1px solid purple;
/* 盒子宽度 */
300px;
/* 盒子高度 */
height: 300px;
/* 盒子的背景颜色 */
background-color: green;
/* 字体大小 */
font-size: 30px;
/* 盒子居中 */
margin-left: auto;
margin-right: auto;
/* 文本居中 */
text-align: center;
}
a {
/* 去下划线 */
text-decoration: none;
}
table {
/* 设置边框 */
border: 1px solid red;
/* 将边框合并 */
border-collapse: collapse;
}
td,th {
/* 设置边框 */
border: 1px solid red;
}
ul {
/* 无序列表去除修饰 */
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>好好学习!</li>
<li>天天向上!</li>
</ul>
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>职位</th>
</tr>
<tr>
<td>001</td>
<td>白豆五</td>
<td>算法工程师</td>
</tr>
<tr>
<td>002</td>
<td>手可摘棉花</td>
<td>产品经理</td>
</tr>
</table>
<a href="http://www.baidu.com">百度一下</a>
<div>我是div标签</div>
</body>
</html>
执行结果如下：
