CSS基础(1)
学习目标：
分清HTML、CSS优缺点、局限性；使用选择器设置字体文本样式；熟悉三种引入方式；
学习内容：
一、CSS构造块
1.介绍
HTML的局限性：HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式；操作html属性不方便；HTML里面添加样式带来的是无尽的臃肿和繁琐；
CSS网页的美容师：让我们的网页更加丰富多彩，布局更加灵活自如；让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS。
2.作用
主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式；
CSS以HTML为基础，提供了丰富的功能，如字体、样式、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。
引入CSS样式表
行内式：通过标签的style属性来设置元素的样式；通过标签的style属性来设置元素的样式；多组属性值直接用;隔开；只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
内部样式表：也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义；style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方；只能控制当前的页面，没有彻底分离结构与样式。
外部样式表：也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中；
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
代码风格：
<!-- 紧凑格式 -->
h3 { color: deeppink;font-size: 20px;}
<!-- 展开格式 -->
h3 {
color: deeppink;
font-size: 20px;
}
二、CSS选择器
找到指定的HTML页面元素，选择标签。
1.基础选择器
标签选择器：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式；可以把某一类标签全部选择出来；快速为网页中同类型的标签统一样式；但不能设计差异化样式。
标签名{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}
类选择器：使用"."(英文点号)进行标识，后面紧跟类名。
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<p class="类名"></p>
可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签；长名称或词组可以使用中横线来为选择器命名；不要纯数字、中文等命名， 尽量使用英文字母来表示；多类名选择器：各个类名中间用空格隔开。
id选择器：使用#进行标识，后面紧跟id名；元素的id值是唯一的，只能对应于文档中某一个具体的元素。
#id名 {属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}
<p id="id名"></p>
通配符选择器：通配符选择器用**号表示，* 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素；但会降低页面响应速度，不建议随便使用。
* {
<!-- 定义外边距 -->
margin: 0;
<!-- 定义内边距 -->
padding: 0;
}
2.复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
后代选择器：用来选择元素或元素组的子孙后代；写法就是把外层标签写在前面，内层标签写在后面，中间用「空格」分隔，先写父亲爷爷，再写儿子孙子；子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。
.class h3 {
color: red;
font-size: 26px;
}
子元素选择器：当标签发生嵌套时，内层标签就成为外层标签的后代；写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接；子，指的是亲儿子，不包含孙子、重孙子之类。
.class>h3 {
color: red;
font-size: 26px;
}
交集选择器：其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
并集选择器：如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明；任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分；并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。
链接伪类选择器：用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接
三、CSS字体样式
1.font字体
font-size：用于设置字号(字体大小)；不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。
| 单位 | 说明 |
|---|---|
| em | 相对当前对象内文本的字体尺寸 |
| px | 像素，最常用 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
font-family：用于设置哪一种字体；指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准。
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是px 像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal |
| font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
2.CSS外观属性
color：用于定义文本的颜色（red，green，blue，pink）。
text-align：用于设置文本内容的水平对齐方式，相当于html中的align对齐属性。
line-height：用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
text-indent：用于设置首行文本的缩进；其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。
text-decoration：用于给链接修改装饰效果（none,underline,overline,line-through）。
四、标签显示模式(display)
标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。
块级元素(block-level)：独占一行；高度，宽度，外边距以及内边距都可以控制；宽度默认是容器(父级宽度)的100%；是一个容器及盒子，里面可以放行内或者块级元素。
注意：只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div。同理，还有h1~h6，dt,它们都是文字类块级标签，里面不能放其他块级元素。
行内元素(inline-level)：相邻行内元素在一行上，一行可以显示多个；高度、宽度直接设置是无效的；默认高度就是它本身内容的宽度；行内元素只能容纳文本或其他行内元素。
行内块元素(inline-block)：和相邻行内元素(行内块)在一行上，但是之间会有空白风险。一行可以显示多个；默认宽度就是它本身内容的宽度；高度，行高，外边距以及内边距都可以控制。
五、CSS背景(background)
背景颜色 、背景图片(image)、背景平铺（repeat）、背景位置(position)、背景半透明(CSS3)
1.必须先指定background-image属性
2.position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。
3.如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
4.如果只指定了一个方位名词，另一个值默认居中对齐。
5.如果position 后面是精确坐标， 那么第一个，肯定是 x 第二个一定是y
6.如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
7.如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
案例代码：
<!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>
<style>
body {
font: 16px/28px 'Microsoft YaHei';
}
h1 {
font-weight: 400;
text-align: center;
}
a {
text-decoration: none;
}
.gray {
color: #888888;
font-size: 12px;
text-align: center;
}
.search {
color: #666;
width: 170px;
}
.btn {
font-weight: 700;
}
p {
text-indent: 2em;
}
.pic {
text-align: center;
}
.footer {
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="btn">搜索</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="footer"> 本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>
案例页面：
学习路径即素材出处：黑马程序员pink老师前端入门教程
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
