1. CSS初体验

1.1. CSS定义

层叠样式表 (Cascading Style Sheets，缩写为 CSS）

用来描述 HTML 文档的呈现（美化内容）

1.2. CSS引入方式

内部样式表：学习使用

- CSS 代码写在head里面的 style标签里面

外部样式表：开发使用

- CSS 代码写在单独的 CSS 文件中（.css）
- 在 HTML的head中，使用 link标签引入，link + tab键

行内样式：配合 JavaScript 使用

- CSS 写在标签的 style 属性值里

1.3. 布局标签 div 和 span

div：换行显示
span：一行显示

<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>

1.4. 认识几个通用css样式设置：

宽度：width
高度：height
背景颜色：background-color
文字大小：font-size
文字颜色：color

1.5. 综合练习

搭建页面骨架（宽、高、背景色、文字大小、颜色）：

头部
内容
底部

2. 基础选择器

2.1. 选择器认知

作用：查找标签，设置样式。

基础选择器分类：

标签选择器：直接根据标签控制
类选择器：标签需要有 class 属性
id 选择器
通配符选择器

2.2. 标签选择器

标签选择器：使用标签名作为选择器→ 选中同名标签设置相同的样式。

例如：p, h1, div, a, img......

注意：标签选择器无法差异化同名标签的显示效果。

2.3. 类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器 → .类名
使用类选择器 → 标签添加 class="类名"

注意：

类名自定义，不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开

小练习：编写结构，通过选择器，实现效果

2.4. id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id= "id名"

规则：

同一个 id 选择器在一个页面只能使用一次

2.5. 通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

3. 文字属性相关

3.1. 字体大小

属性名：font-size

属性值：文字尺寸，PC 端网页最常用的单位 px，（浏览器默认字号 16px）

3.2. 字体粗细

属性名：font-weight

属性值：数字（100-900的整百数）或关键字

3.3. 字体样式

作用：设置文字倾斜效果

属性名：font-style

属性值：

正常（不倾斜）：normal
倾斜：italic

3.4. 行高

作用：设置多行文本的间距

属性名：line-height

属性值

数字 + px
数字（当前标签font-size属性值的倍数）

3.5. 行高居中（单行垂直居中）

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

3.6. 文本缩进

属性名：text-indent

属性值：

数字 + px
数字 + em（推荐：1em = 当前标签的字号大小）

3.7. 水平对齐方式

作用：控制内容水平对齐方式

属性名：text-align

属性值：

小技巧：利用 text-align 也可以控制图片、行内标签（span、strong、b...）等内容水平居中

案例：卡片居中 d d d

3.8. 文本修饰线

属性名：text-decoration

属性值：

3.9. 文字颜色 color

属性名：color

属性值：

提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。

4. 元素显示模式

4.1. 基本认知

1 块级元素 div h系列 ul li

独占一行
宽度默认是父级的100%
添加宽高属性生效

2 行内元素 span strong a

一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开

3 行内块元素 img input

一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开

4.2. 转换显示模式

属性名：display

属性值：

5. 调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

打开调试工具

- 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
- F12

使用调试工具

6. 作业综合：

6.1. 作业1：

《自然》评选改变科学的10个计算机代码项目

2077年01月28日14:58 新浪科技 收藏本文

2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。

这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”

如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。

最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。

6.2. 作业2：

在希望的田野上 | 湖北秋收开镰各地多举措保增产增收

来源：央视网 | 2222年12月12日 12:12:12

央视网消息：眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。

中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。

王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。

此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。

6.3. 作业3：

CSS（层叠样式表）
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。
CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。
CSS 参考 针对资深 Web 开发者的 详细参考手册 ，描述了 CSS 的各个属性与概念。