OmniStack Lab

1.CSS基础

1.1 CSS简介

CSS(Cascading Style Sheets)层叠样式表的简称,有时候我们也会称之为CSS样式表或级联样式表。
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
CSS让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS可以美化HTML,让HTML更漂亮,让页面布局更加简单。
CSS最大价值就是HTML专注去做结构呈现,样式交给CSS,即结构HTML与样式CSS相分离

1.2 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>
    <style>
        p {
            color: rgb(251, 255, 0);
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html

注意事项:

选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
属性和属性值以"键值对"的形式出现
属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
属性和属性值之间用英文:分开
多个"键值对"之间用英文;分开

1.3 CSS代码风格

样式格式书写更推荐第二种方式

html

<!-- 紧凑格式 -->
p {color:deeppink;font-size:20px;}

<!-- 展开格式 -->
p {
    color:deeppink;
    font-size:20px;
}

样式大小写风格强烈推荐样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外。

html

<!-- 小写格式 -->
p {
    color:deeppink;
    font-size:20px;
}

<!-- 大写格式 -->
P {
COLOR:DEEPPINK;
FONT-SIZE:20PX;
}

样式空格风格属性值前面,冒号后面,保留一个空格选择器（标签）和大括号中间保留空格

html

h3 {
    color: pink;    
}

1.4 CSS选择器的作用

选择器就是根据不同需求把不同的标签选出来这就是选择器的作用。

html

h1 {
    color: red;
    font-size: 50px;
}

示例代码的h1的选择器作用是:

找到所有的h1标签
设置这些标签的样式,比如颜色为红色,字体大小50px

2.CSS基础选择器

基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器

2.1 标签选择器

标签选择器是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 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>
    <style>
        span {
            color: rgb(251, 255, 0);
            font-size: 50px;
        }
        div {
            color: rgb(0, 255, 234);
            font-size: 30px;
        }
    </style>
</head>
<body>
    <span>男</span>
    <span>男</span>
    <span>男</span>
    <div>女</div>
    <div>女</div>
    <div>女</div>
</body>
</html>

2.2 类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。

.类名 {
属性1: 属性值1;
...
}

使用方式:

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>
        .red {
            color: red;
            font-size: 50px;
        }
        .yellow {
            color: yellow;
            font-size: 30px;
        }
        .yellowgreen {
            color: yellowgreen;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <span class="red">男</span>
    <span class="red">男</span>
    <span class="yellow">男</span>
    <div class="yellow">女</div>
    <div class="yellowgreen">女</div>
    <div class="yellowgreen">女</div>
</body>
</html>

注意事项:

如果想要差异化选择不同的标签,单独选择一个或某几个标签,可以使用类选择器。
类选择器在HTML中以class属性表示,在CSS中,类选择器以一个.号来显示。
类选择器使用.(英文点号)进行标识,后面紧跟类名(自定义命名)。
可以理解为给这个标签起了一个名字来表示。
长名称或词组可以用中间横线来为选择器命名
不要使用纯数字、中文等命名,尽量使用英文字母来表示。
命名要有意义,尽量使用别人一眼就知道这个类名的目的。
常用命名规范示例

中文名称	英文名称
头	header
内容	content/container
尾	footer
导航	nav
侧栏	sidebar
栏目	column
页面外围控制整体布局宽度	wrapper
左右中	left right center
登录条	loginbar
标志	logo
广告	banner
页面主体	main
热点	hot
新闻	news
下载	download
子导航	subnav
菜单	menu
子菜单	submenu
搜索	search
友情链接	friendlink
页脚	footer
版权	copyright
滚动	scroll
内容	content
标签页	tab
文章列表	list
提示信息	msg
小技巧	tips
栏目标题	title
加入	joinus
指南	guild
服务	service
注册	regsiter
状态	status
投票	vote
合作伙伴	partner

2.3 类选择器使用案例

使用类选择器在浏览器上展示如下效果

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>
        .red {
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .green {
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>

2.4 多类名选择器

我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。

多类名的具体使用:

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>
        .box {
            height: 100px;
            width: 100px;
            font-size: 20px;
        }
        .red {
            
            background-color: red;
        }
        .green {
            
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box red">红色</div>
</body>
</html>

注意事项:
在标签class属性中写多个类名时,中间必须用空格分开,这样这个标签就可以分别具有这些类名的样式。

2.5 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以#来定义。

语法:
#id名 {
属性1: 属性值1;
...
}

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>
        #red {
            background-color: aqua;
        }
        .box {
            height: 100px;
            width: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="red" class="box">aaaa</div>
</body>
</html>

2.6 id选择器和类选择器的区别

id属性只能在每个 HTML 文档中出现一次也就是id选择器只能使用一个,不能重复。
类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
id 选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。

2.7 通配符选择器

通配符选择器不需要调用,自动就给所有的元素使用样式,特殊情况才使用。
语法:
* {
属性1: 属性值1;
...
}

html

* {
    margin: 0;
    padding: 0;
}

2.8 基础选择器总结

选择器	作用	特点	使用情况	语法格式
标签选择器	选择所有相同HTML标签	不能差异化选择	较多	`p { color: red;}`
类选择器	选择特定class的标签	可多选、可复用	非常多	`.red { color: red;}`
id选择器	选择特定id的标签	唯一性、不可复用	一般配合JS使用	`#nav { color: red;}`
通配符选择器	选择所有标签	影响范围广、效率低	特殊情况	`* { margin: 0; }`

3.字体属性

3.1 字体系列

CSS使用font-family属性定义文本的字体系列

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>
        h1 {
            font-family: '微软雅黑';
        }
        h2 {
            font-family: '宋体';
        }
        h3 {
            font-family: '华文隶书';
        }
        h4 {
            font-family: '方正姚体';
        }
    </style>
</head>
<body>
    <h1>字体展示示例</h1>
    <h2>字体展示示例</h2>
    <h3>字体展示示例</h3>
    <h4>字体展示示例</h4>
</body>
</html>

注意事项:

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

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>
        h1 {
            font-size: 10px;
        }
        h2 {
            font-size: 20px;
        }
        h3 {
            font-size: 30px;
        }
        h4 {
            font-size: 40px;
    </style>
</head>
<body>
    <h1>字体展示示例</h1>
    <h2>字体展示示例</h2>
    <h3>字体展示示例</h3>
    <h4>字体展示示例</h4>
</body>
</html>

注意事项:

px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致,我们给一个明确值大小,不要使用默认大小
可以用body指定整个页面文字的大小

3.3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

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>
        .m1 {
            font-weight: bold;
        }
        .m2 {
            font-weight: normal;
        }
        .m3 {
            font-weight: 100;
        }
        .m4 {
            font-weight: 500;
        }
        .m5 {
            font-weight: 1000;
        }
    </style>

</head>
<body>
    <p class="m1">字体粗细展示</p>
    <p class="m2">字体粗细展示</p>
    <p class="m3">字体粗细展示</p>
    <p class="m4">字体粗细展示</p>
    <p class="m5">字体粗细展示</p>
    
</body>
</html>

属性值:

属性值	描述
normal	默认值,标准粗细
bold	粗体
bolder	更粗
lighter	更细
100-900	400相当于normal,700相当于bold

3.4 文字样式

CSS 使用 font-style 属性设置文本的风格。

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>
        p {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>倾斜字体</p>
    <em>正常字体</em>
</body>
</html>

属性值:

属性值	描述
normal	默认值,标准字体样式
italic	斜体显示文本
oblique	倾斜文本（类似斜体但不同）

3.4 字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码

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>
        div {
            /* body {   font: font-style  font-weight  font-size/line-height  font-family;} */
            font: italic 700 50px/50px '微软雅黑';
        }
    </style>
</head>

<body>
    <div>复合属性示例</div>
</body>
</html>

注意事项:

使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值)但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用

3.5 字体总结

属性	表示	注意点
font-family	字体系列	多个字体用逗号分隔,空格字体加引号,尽量使用系统默认字体
font-size	字体大小	常用px单位,谷歌默认16px,不同浏览器默认值可能不同
font-weight	字体粗细	400=normal,700=bold,100-900数值
font-style	字体样式	italic斜体,normal正常
font	复合属性	顺序必须为：style weight size/line-height family,size和family不能省略

4.文本属性

4.1 文本颜色

color 属性用于定义文本的颜色。

语法:
div {
color: red;
}

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>
        p {
            color: brown;
        }
    </style>
</head>
<body>
    <p>文字颜色示例</p>
</body>
</html>

颜色表示方式:
开发中最常用的是十六进制

表示方式	示例	描述
颜色名称	`red`, `blue`, `green`	使用预定义的颜色名称
十六进制值	`#FF0000`, `#00FF00`	使用#开头加6位十六进制数表示颜色
RGB值	`rgb(255, 0, 0)`	使用红绿蓝三原色的数值组合
RGBA值	`rgba(255, 0, 0, 0.5)`	RGB值加透明度(0-1)
HSL值	`hsl(120, 100%, 50%)`	色相、饱和度、亮度表示法
HSLA值	`hsla(120, 100%, 50%, 0.3)`	HSL值加透明度(0-1)

4.2 文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式。

语法:
div {
text-align: center;
}

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>
        .a1 {
            text-align: center;
        }
        .a2 {
            text-align: right;
        }
    </style>
</head>
<body>
    <h1 >文本对齐方式</h1>
    <h1 class="a1">文本对齐方式</h1>
    <h1 class="a2">文本对齐方式</h1>
</body>
</html>

文本对齐属性值:

属性值	描述
left	左对齐（默认）
right	右对齐
center	居中对齐

4.3 修饰文本

用来给文本添加下划线、删除线和上划线。一般用来去掉<a>标签的下划线用

语法:
div {
text-decoration：underline;
}

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>
        .p1 {
            text-decoration: underline;
        }
        .p2 {
            text-decoration: overline;
        }
        .p3 {
            text-decoration: line-through;
        }
        .p4 {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="p1">修饰文本示例</p>
    <p class="p2">修饰文本示例</p>
    <p class="p3">修饰文本示例</p>
    <a href="#" class="p4">修饰文本示例</a>
</body>
</html>

修饰文本属性值:

属性值	描述
none	默认,无装饰线
underline	下划线
overline	上划线
line-through	删除线

4.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。

语法:
div {
text-indent：20px;
}
div {
text-indent：2em;
}

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>
        .p1 {
            text-indent: 20px;
        }
        .p2 {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p class="p1">计算机可以在各种存储介质（诸如磁盘、磁带和光盘）上存储信息。为了方便使用计算机系统,操作系统提供了信息存储的统一逻辑视图。操作系统对存储设备的物理属性加以抽象,从而定义逻辑存储单位,即文件（file）。文件由操作系统映射到物理设备上。这些存储设备通常是非易失性的,因此在系统重新启动之间内容可以持久。</p>
    <p class="p1">通常,文件表示程序（源形式和目标形式）和数据。数据文件可以是数字的、字符的、字符数字的或二进制的。文件可以是自由形式的,例如文本文件,或者可以是具有严格格式的。通常,文件为位、字节、行或记录的序列,其含义由文件的创建者和用户定义。因此,文件概念非常通用。</p>
    <p class="p1">文件被命名以方便用户,并且通过名称可以引用。名称通常为字符串,例如 example.c。有的系统区分名称内的大小写字符,而其他系统则不区分。当文件被命名后,它就独立于进程、用户,甚至创建它的系统。</p>
    <p class="p2">调用 open() 也会接受访问模式信息,如创建、只读、读写、只附加等。根据文件权限,检查这种模式。如果允许请求模式,则会为进程打开文件。系统调用 open() 通常返回一个指针,以指向打开文件表的对应条目。这个指针,而不是实际的文件名,会用于所有 I/O 操作,以避免任何进一步搜索,并简化系统调用接口。</p>
    <p class="p1">对于多个进程可以同时打开文件的环境,操作 open() 和 close() 的实现更加复杂。在多个不同的应用程序同时打开同一个文件的系统中,这可能发生。通常,操作系统采用两级的内部表：每个进程表和整个系统表。每个进程表跟踪它打开的所有文件。该表所存的是进程对文件的使用信息。例如,每个文件的当前文件指针就存在这里,文件访问权限和记账信息也存在这里。</p>
</body>
</html>

注意事项:

em 是一个相对单位,就是当前元素（font-size) 1 个文字的大小,如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。
可以设置负值,负值就是向前缩进

4.5 行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
行高的文本分为上间距文本高度下间距 = 行间距。

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>
        .p1 {
            text-indent: 20px;
            line-height: 26px;
        }
        .p2 {
            text-indent: 2em;
            line-height: 26px;
        }
    </style>
</head>
<body>
    <p class="p1">计算机可以在各种存储介质（诸如磁盘、磁带和光盘）上存储信息。为了方便使用计算机系统,操作系统提供了信息存储的统一逻辑视图。操作系统对存储设备的物理属性加以抽象,从而定义逻辑存储单位,即文件（file）。文件由操作系统映射到物理设备上。这些存储设备通常是非易失性的,因此在系统重新启动之间内容可以持久。</p>
    <p class="p1">通常,文件表示程序（源形式和目标形式）和数据。数据文件可以是数字的、字符的、字符数字的或二进制的。文件可以是自由形式的,例如文本文件,或者可以是具有严格格式的。通常,文件为位、字节、行或记录的序列,其含义由文件的创建者和用户定义。因此,文件概念非常通用。</p>
    <p class="p1">文件被命名以方便用户,并且通过名称可以引用。名称通常为字符串,例如 example.c。有的系统区分名称内的大小写字符,而其他系统则不区分。当文件被命名后,它就独立于进程、用户,甚至创建它的系统。</p>
    <p class="p2">调用 open() 也会接受访问模式信息,如创建、只读、读写、只附加等。根据文件权限,检查这种模式。如果允许请求模式,则会为进程打开文件。系统调用 open() 通常返回一个指针,以指向打开文件表的对应条目。这个指针,而不是实际的文件名,会用于所有 I/O 操作,以避免任何进一步搜索,并简化系统调用接口。</p>
    <p class="p1">对于多个进程可以同时打开文件的环境,操作 open() 和 close() 的实现更加复杂。在多个不同的应用程序同时打开同一个文件的系统中,这可能发生。通常,操作系统采用两级的内部表：每个进程表和整个系统表。每个进程表跟踪它打开的所有文件。该表所存的是进程对文件的使用信息。例如,每个文件的当前文件指针就存在这里,文件访问权限和记账信息也存在这里。</p>
</body>
</html>

4.6 文本属性总结

属性	表示	注意点
color	文本颜色	可使用颜色名称、十六进制、RGB/RGBA、HSL/HSLA等多种表示方式
text-align	文本对齐	可选left(默认)、right、center三种对齐方式
text-decoration	文本修饰	可设置underline(下划线)、overline(上划线)、line-through(删除线)、none
text-indent	文本缩进	常用单位px或em,em是相对单位,可设置负值
line-height	行高	控制行间距,包括上间距、文本高度和下间距

5.CSS样式表

按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类: 内部样式表(嵌入式)、行内样式表(行内式)、外部样式表(链接式)

5.1 内部样式表(嵌入式)

内部样式表(内嵌样式表)是写到html页面内部。是将所有的 CSS 代码抽取出来,单独放到一个 <style> 标签中

语法:

html

<style>
    div {
    color: red;
    font-size: 12px;
    }
</style>

注意事项:

<style> 标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的<head>标签中
通过此种方式,可以方便控制当前整个页面中的元素样式设置
代码结构清晰,但是并没有实现结构与样式完全分离
使用内部样式表设定 CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式

5.2 行内样式表(行内式)

行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

语法:

html

<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>

注意事项:

style其实就是标签的属性,在双引号中间,写法要符合 CSS 规范
可以控制当前的标签设置样式
由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
使用行内样式表设定CSS,通常也被称为行内式引入

5.3 外部样式表(链接式)

实际开发都是外部样式表,适合于样式比较多的情况。核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML 页面中使用。

引入外部样式表分为两步:

新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。

html

div {
    color: pink;
}

在HTML页面中,使用<link>标签引入这个文件。

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>
    <link rel="stylesheet" href="样式.css"></link>
</head>
<body>
    <div>css外部样式表示例</div>
</body>
</html>

5.4 CSS样式表总结

样式表类型	引入方式	优点	缺点	使用场景
内部样式表	`<style>`标签内写入	结构清晰,便于单个页面样式管理	未完全分离,不利于多页面复用	小型项目或练习使用
行内样式表	标签的`style`属性中定义	优先级高,快速修改单个元素样式	代码冗余,难以维护	临时样式调整或简单修改
外部样式表	`<link>`引入外部.css文件	样式复用,便于维护,结构分离	需要额外HTTP请求	中大型项目首选

6.综合案例

使用本章所学知识完成一个新闻网页

样例演示:

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>
       body {
           font: 16px/28px 'Microsoft YaHei';
       }
       h1 {
        /* 文字不加粗 */
           font-weight: 400; 
           /* 让h1里面的文字水平居中对齐 */
           text-align: center;
       }
       a {
           text-decoration: none;
       }
       .gray {
           color: #888888;
           font-size: 12px;
           text-align: center;
       }
       .search {
           color: #666;
           /* #666666     #666
           #ff00ff    #f0f */
           width: 170px;
       }
       .btn {
           font-weight: 700;
       }
       p {
           /* 首行缩进2个字的距离 */
           text-indent: 2em;
       }
       .pic {
           /* 想要图片居中对齐,则是让它的父亲 p标签添加 水平居中的代码 */
           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>

案例演示

7.Chrome调试工具

在浏览器界面按f12就可以进入调试工具界面

注意事项:

Ctrl+滚轮可以放大开发者工具代码大小。
左边是 HTML 元素结构,右边是 CSS 样式。
右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色。
Ctrl + 0 复原浏览器大小。
如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。

1.CSS基础 ​

1.1 CSS简介 ​

1.2 CSS语法规范 ​

1.3 CSS代码风格 ​

1.4 CSS选择器的作用 ​

2.CSS基础选择器 ​

2.1 标签选择器 ​

2.2 类选择器 ​

2.3 类选择器使用案例 ​

2.4 多类名选择器 ​

2.5 id选择器 ​

2.6 id选择器和类选择器的区别 ​

2.7 通配符选择器 ​

2.8 基础选择器总结 ​

3.字体属性 ​

3.1 字体系列 ​

3.2 字体大小 ​

3.3 字体粗细 ​

3.4 文字样式 ​

3.4 字体复合属性 ​

3.5 字体总结 ​

4.文本属性 ​

4.1 文本颜色 ​

4.2 文本对齐 ​

4.3 修饰文本 ​

4.4 文本缩进 ​

4.5 行间距 ​

4.6 文本属性总结 ​

5.CSS样式表 ​

5.1 内部样式表(嵌入式) ​

5.2 行内样式表(行内式) ​

5.3 外部样式表(链接式) ​

5.4 CSS样式表总结 ​

6.综合案例 ​

7.Chrome调试工具 ​

1.CSS基础

1.1 CSS简介

1.2 CSS语法规范

1.3 CSS代码风格

1.4 CSS选择器的作用

2.CSS基础选择器

2.1 标签选择器

2.2 类选择器

2.3 类选择器使用案例

2.4 多类名选择器

2.5 id选择器

2.6 id选择器和类选择器的区别

2.7 通配符选择器

2.8 基础选择器总结

3.字体属性

3.1 字体系列

3.2 字体大小

3.3 字体粗细

3.4 文字样式

3.4 字体复合属性

3.5 字体总结

4.文本属性

4.1 文本颜色

4.2 文本对齐

4.3 修饰文本

4.4 文本缩进

4.5 行间距

4.6 文本属性总结

5.CSS样式表

5.1 内部样式表(嵌入式)

5.2 行内样式表(行内式)

5.3 外部样式表(链接式)

5.4 CSS样式表总结

6.综合案例

7.Chrome调试工具