1.层叠样式表
网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层
总之一句话，CSS 用来设置网页中元素的样式
使用 CSS 来修改元素样式的方式大致可以分为 3 种
css选择器
eg：p{}(标签选择器)，.class{}（类选择器） ,*{}（通配符选择器）,#id{}（id选择器）
2.css字体属性：
字体复合属性如何写?里面有什么注意细节?
如果让加粗的文字不加粗显示，如何让倾斜的文字不倾斜显示?
1，font复合属性写法顺序为：font：font-style，font-weight，font-size/line-height，font-family
顺序不能颠倒，必须有font-size和font-style
2，font-size=“400”，font-style=“normal”
css文本属性：
文本颜色：color：
文本对齐：text-align
text-align
文本装饰
text-decoration
下划线 中划线 上划线 没有装饰线（通常使用在超链接上）
文本缩进
em是个相对单位，是对于本字段的font-size的大小而定的。两个文字大小就是2em。
行间距：line-height
总结css属性：
css引入方式：
1，内嵌样式表（内部样式表）：把css放在html的内部
style标签可以放在html的任何一个地方但是一般内部样式表放在head标签中
一般在练习时使用内嵌式引入css
虽然代码结构清晰但是，并没有做到css与html分离
2，行内样式表：
更方便修改小的样式：
3，外部样式表（外链式）：单独写一个css样式文件，适用于css样式代码比较多的时候，也是最常用的css引入方式。
用link连接html与css。
3.新闻案例（结合运用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/新闻案例.css"> </head> <body> <h1>北方高温明日达鼎盛京津冀多地地表温度将超60C </h1> <div> <span class="gray">2987-29831-123-01 16:23：@3 来源：</span> <a href="">中国天气网</a> <input type="text" placeholder="请输入查询内容"> <button class="btn">搜索</button></div> <hr> <p> C。预报显示，今后三天(3-5日)，这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计 北京、天津、石家庄、济南等地明天的最高气温有望突破38C，其中北京和石家庄的最高气温还有望创今年以来 的新高。</p> <h4>气温41. 4C!地温66.5!北京强势迎七月首个高温日</h4> <p class="pic"> <img src="imagesss/梦想的草原.jpg" alt="dog's day"> </p> <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、 山东西部、河南北部最高气温已普遍超过35C。大城市中，北京、天津、郑州均迎来高温日。售 在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50°C以上，部分地区地 表温度甚至超过60°C。其中，河北衡水地表温度高达68.3°C， 天津站和北京站附近的地表温度分别高达66.6°C和 66.5°C。</p> <h4>明日热度再升级!京津冀携手冲击38C+</h4> <p>中国天气网气象分析师王伟跃介绍，明天(4日)，华北、黄淮地区35°C以上的高温天气还将继续升级，并进入 鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部 山西南部局地、 河南北部、东北部分地区 的最高气温都将达到或超过35°C。 </p> <p class="foot"> 本文来源：昂克赛拉大家覅哦i会计法 </p> </body> </html>
css代码块：
body{ font: 16px/28px "微软雅黑"; } h1{ text-align: center; font-weight: 400px; } .gray{ color: gray; text-align: center; font-size: 12px; } a{ text-decoration: none; color: goldenrod; } .btn{ font-weight: 700; } p{ text-indent: 2em; } .pic{ text-align: center; } .foot{ text-align: center; color: #888888; }
