从零学习CSS2.0层叠样式表

1

前端行业介绍聊聊前端那些事

「仅限付费用户」点击下载“前端行业介绍.pptx”

2

CSS概述CSS是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮。让页面布局更简单。

3

CSS基础选择器选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。选择到需要修改的标签，然后添加对应的样式。​标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

4

CSS字体属性在Word中，我们往往会使用不同的字体，例如宋体、微软雅黑等。在CSS中，我们可以使用font-family属性来定义字体类型。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

5

CSS颜色属性在CSS中，我们可以使用hsl属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

6

CSS文本属性p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个 来实现首行缩进两个字的空格。但是这种方式冗余代码很多。那么有没有更好的解决方法呢？

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

7

组合选择器在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和组合选择器，组合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

8

元素显示模式了解元素显示模式的作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示，比如`<div>`自己占一行，比如一行可以放多个`<span>`。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

9

列表项符号在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

10

表格样式默认情况下，表格标题是在表格的上方。如果想要把表格标题放在表格的下方，应该怎么去实现呢？在CSS中，我们可以使用caption-side属性来定义表格标题的位置。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

11

超链接样式在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

12

CSS背景属性在CSS中，我们可以使用background-color属性来定义元素的背景颜色。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

13

伪类选择器伪类选择器

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

14

CSS边框属性border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

15

CSS 内外边距属性内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

16

CSS盒模型CSS盒模型

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

17

盒子阴影和文字阴影CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

18

浮动属性浮动属性CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 1. 普通流（标准流） 2. 浮动3. 定位

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

19

定位属性以下情况使用标准流或者浮动能实现吗？1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。2. 当我们滚动窗口的时候，盒子是固定在屏幕某个位置的。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”

20

元素显示和隐藏类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。

「仅限付费用户」点击下载“CSS2.0层叠样式表.pdf”