前言：
1.HTML的局限性
----它只关注内容的语义，可以做简单的样式，但较为繁琐
2.CSS---层叠样式表
----一种标记语言，用于设置HTML页面中的文本内容，图片的外形以及版面的布局和外观显示样式。
1. CSS语法规范
---选择器+一条或多条声明
eg：
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>
<style>
p {
color: red;
/* font - 字体 size - 大小 px - 像素 */
font-size: 24px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>2. CSS选择器
选择器：用于选择标签。
选择器分为基础选择器和复合选择器。
基础选择器：是由单个选择器组成的。包括标签选择器、类选择器、id选择器和通配符选择器。
1）标签选择器
---是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
---语法：
标签名 {
属性1: 属性值1
属性2: 属性值2
...
}
作用：可以把某一类标签全部选择出来。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
2）类选择器
---可以差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。
语法：
.类名{
属性1: 属性值1;
...
}
// 类名前必须加"."，类名自己定义，不要使用纯数字、中文等命名，尽量使用英文字母来表示，长单词和词组可以用中横线，命名规范见Web前端开发规范手册。
需要用class属性，示例如下：
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>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="blue">工藤新一</li>
<li>毛利兰</li>
<li>松田阵平</li>
<li>服部平次</li>
<li>黑羽快斗</li>
</ul>
</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>---CSS---</title>
<style>
.blue {
color: blue;
}
.font24 {
font-size: 24px;
}
</style>
</head>
<body>
<div class="blue font24">工藤新一</div>
</body>
</html>3）id选择器
与类选择器区别：id只能使用一次，类可以多次使用
---以"#"来定义。
语法：
#id {
属性1: 属性值1;
...
}
// id自己命名，样式#定义，结构id调用，只能调用一次
代码示例：
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>
<style>
.blue {
color: blue;
}
.font24 {
font-size: 24px;
}
#blue {
color: blue;
}
</style>
</head>
<body>
<!-- <div class="blue font24">工藤新一</div> -->
<div id="blue">毛利兰</div>
</body>
</html>4）通配符选择器
---使用"*"定义，表示选取页面中所有元素（标签）。
语法：
* {
属性1：属性值1；
...
}
注意：通配符选择器不需要调用，自动就给所有的元素使用样式
以下是清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}
5）总结：
3. CSS字体属性
1)font-faimly 字体系列
h2 { font-family: '微软雅黑'; }
p { font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; }
各种字体之间用英文逗号隔开，如果有空格隔开的多个单词组成的字体加引号。尽量使用系统默认自带字体。
最常见的几个字体：'Microsoft YaHei' 、tahoma'、arial 、'Hiragino Sans GB'
2）font-size 字体大小
如果定义body，那么注意对标题标签是无效的，需要单独指定字体大小。
谷歌浏览器默认字体大小16px。px（像素）是我们网页的最常用的单位。不同浏览器默认显示的字号大小可能不一致。
3）font-weight 字体粗细
css
.bold {
font-weight: 700;
}
4）font-style 文字样式
css
p {
font-style: italic;
}
5）复合属性
注：不能改顺序，以空格隔开，不需要设置的属性可以省略，但必须报了font-size和font-family属性，否则font属性无效。
css
body {
font: font-style font-weight font-size/line-height font-family;
}eg：
css
body {
font: italic 700 16px 'Microsoft yahei';
}6）字体属性总结
4.CSS文本属性
---定义文本的外观，如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。
1）文本颜色
eg（开发中常用16进制）:
css
div {
/* color: blue; */
/* color: #ff0000; */
/* color:rgb(255,0,0); */
}2）对齐文本
---text-align属性用于设置元素内文本内容的水平对齐方式
3）装饰文本
---text-decoration属性可以给文本添加下划线、删除线、上划线。
4）文本缩进
---text-indent属性将指定文本的第一行缩进，可以给负值。
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果没有设置大小，则按照父元素的1个文字大小。
5）行间距
---line-height属性
行间距由上间距、文本高度和下间距组成。
6）文本属性总结
5.CSS三种引入方式
行内样式表：<标签 style="属性:属性值;"></标签>
内部样式表：选择器{属性:属性值;属性:属性值;}
外部样式表：在HTML页面中，使用<link>标签引入文件
css
<link rel="stylesheet" href="css文件路径">
6.综合案例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
body {
font: 16px/28px 'Microsoft YaHei';
}
h1 {
font-weight: 400;
text-align: center;
}
.gray {
text-align: center;
color: #888888;
font-size: 12px;
}
a {
text-decoration: none;
}
.search {
color: #666;
width: 170px;
}
.but {
font-weight: 700;
}
p {
text-indent: 2em;
}
.pic {
text-align: center;
}
.last {
color: #888888;
font-size: 12px;
}
</style>
</head>
<body>
<h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<div class="gray">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>
<input type="text" value="请输入查询条件" class="search"> <button class="but">搜索</button>
</div>
<hr>
<p>中国天气网讯
今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
</p>
<h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日。</h4>
<p class="pic"><img src="images/pic.jpeg" alt=""></p>
<p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
<p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
</p>
<h4>明日热度再升级！京津冀携手冲击38℃+</h4>
<p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。
明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
<p class="last">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>7.使用调试工具
---Ctrl+滚轮可以放大开发者工具代码大小。
---左边是HTML元素结构，右边是CSS样式。
---右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色。
---Ctrl+0复原浏览器大小。
---如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
---如果有样式，但样式前面有黄色叹号提示，则是样式属性书写错误。