第三章: CSS快速上手

一. CSS简介
1 CSS的基本概念
1) 什么是CSS
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表
2) CSS的作用
CSS的作用就是用来规定每个HTML元素表现的样子, 比如
●字体的大小
●颜色
●摆放位置...

CSS也被称为网页的化妆师

再比如, 如果说HTML是毛坯房的话, 加上CSS就是精装修房

3) CSS的书写位置
●外联
●内嵌
●行内

在目前的学习阶段, 为了调试方便, 我们将CSS写在html文件的<style>标签中

4) CSS的基础语法

语法

主要由 选择器+声明块 组成

示例

将h1的字体改成红色

二. 选择器

1 什么是选择器

选择器的主要作用就是从一堆元素中选出特定的符合要求的元素

更多的选择器, 参考css选择器手册

比如, 上图中有一堆小黄人, 现在需要统一改变单眼小黄人的颜色为红色, 该如何操作呢?

• 第一步: 选出所有的单眼小黄人

• 第二步: 修改颜色为红色

CSS的思想也是类似的

• 第一步: 通过选择器, 找出符合要求的HTML元素(选元素)

• 第二步: 修改找出来的元素的属性(改属性)

常见的选择器包括

• 元素选择器

• 类选择器

• id选择器

2 基本选择器

1) 元素选择器

作用

根据标签名, 将同一种标签元素选择出来

语法

示例

修改所有p标签的颜色为红色

2) 类选择器

作用

选择某一类元素, 该元素通过class属性指定

语法

示例

多类名使用空格隔开

3) id选择器

作用

选择某一个元素, 该元素通过id属性指定

语法

示例

练习

实现'Google'图标

提示

• 使用span让多个元素在同一行排列

• 使用class类选择器

• 使用color定义颜色

• 使用font-size:100px指定大小

答案

方法

更多选择器的用法, 查手册CSS手册

3 复合选择器

1) 后代选择器

作用

选择某一个元素的子孙后代, 使用 空格

语法

示例

2) 并集选择器

作用

同时选择多个选择器, 使用 逗号

语法

3) 交集选择器

作用

同时满足条件

语法

现在有这样一个需求

h1和p都是应用的同一个类表示强调, 但是我们希望h1的强调是红色, p的强调是蓝色

示例

4) a元素的伪类选择器

作用

选择同一元素的不同状态

语法

• a:link / 未访问的链接 /

• a:visited / 已访问的链接 /

• a:hover / 鼠标移动到链接上 /

• a:active / 选定的链接 /

书写顺序: lvha, 爱恨法则, love & hate

示例

练习

在不修改以上结构代码的前提下，完成以下任务：

1. 链接 登录 的颜色 为 红色

2. 鼠标经过 登录 时颜色 为 蓝色

3. 主导航栏里面的所有的链接改为橙色

三. 文本相关属性

1 font相关

1) 大小font-size

作用

设置字体大小

示例

2) 字体font-family

作用

设置字体

示例

• san-serif : 非衬线字体(文字的笔画粗细是一样的, 如黑体)

• serif: 衬线字体(文字的笔画有尖角, 如宋体)

会依次查找电脑上的字体, 如果都没有, 就使用一种非衬线字体

3) 粗细font-weight

作用

设置文本的粗细

示例

4) 风格font-style

作用

设置文本的倾斜

5) 常用连写

font是可以连写的, 通常连写也是很常见的

示例

2 外观

1) color

作用

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

R: red红色, #00~#FF(0~255), 前两位

G: green绿色, #00~#FF(0~255), 中间两位

B: blue蓝色,#00~#FF(0~255), 后两位

2) 文本对齐

text-align

作用

设置文本内容的水平对齐方式

3) 行高

line-height

作用

属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高

设置单行文本垂直居中

4) 装饰线

text-decoration 通常我们用于给链接修改装饰效果

四. 背景相关属性

什么是叫背景

背景的概念最早提出是在摄影和图像处理领域,

主要目的是为了突出主体, 通常会用一个背景来衬托. 比如证件照

网页一开始主要也是来处理文字和图片, 就借鉴了背景这个概念

背景可以纯色的, 也可以是一张图片

1 背景颜色(color)

语法

如果要设置背景, 元素必须有宽高!

2 背景图片(image)

语法

3 背景平铺(repeat)

默认情况下背景图片是铺满整个容器的, 就好比贴地板, 这样做的好处是可以减小整个图片的体积, 加快网站的访问速度

语法

示例

4 背景位置(position)

语法

5 背景简写

建议

background: 背景颜色 背景图片地址 背景平铺 背景位置

示例

五. 盒子模型

1 盒子分类

每个元素都有默认的显示方式, 包括

• 块盒: 独占一行, 可以设置宽高

• 行盒: 不独占一行, 不能设置宽高(不生效)高度由字体大小撑开

显示方式是由display属性控制的

display常见的值:

• block: 块盒

• inline: 行盒

• inline-block: 行内块

2 盒子模型

现实中的盒子有

●边框(厚度): border

●填充泡沫: padding

●内容: content

盒子与盒子之间的距离就是外边距

代码中的盒子模型, 打开浏览器, 通过调试窗口, 可以看到

示例

1) 边框border

语法

边框的样式包括:

• none：没有边框即忽略所有边框的宽度（默认值）

• solid：边框为单实线(最为常用的)

• dashed：边框为虚线

• dotted：边框为点线

示例

圆角边框

在新的设计语言里, 圆角边框也是非常常见的表现形式

在CSS3中新增了border-radius

比如:

示例

通过调整border-radius的值改变弧度, 当值为height的一半时, 就是表现为一个半圆形

也可以通过border-radius: 50%画一个圆

2) 内边距padding

内边距也叫内填充, 是内容和边框border之间的距离

简写

按顺时针的方向: 上右下左

示例

一般, 写两个值的情况比较常见

分别表示: 上下和左右

示例

实战案例

新浪导航栏的核心就是因为里面的字数不一样多，所以我们不方便给具体的宽度

这个时候, 我们就可以通过设置padding的方式撑开盒子

答案

3) 外边距margin

外边距通常用来设置两个盒子之间的距离, 可以用来确定盒子之间的相对位置关系

块盒水平居中

• 盒子必须指定了宽度（width）

• 左右的外边距都设置为auto

示例

清除默认内外边距

由于浏览器会有一个默认的样式, 为了使我们的网页在所有的浏览器中看起来是一样的效果, 通常我们会先清除一些默认样式, 这个过程叫reset

示例

六. 浮动

1 为什么需要浮动

首先, 思考一下下面的问题:

1. 如何让多个块盒(div)水平排列成一行？

2. 如何实现块盒的左右对齐?

2 什么是浮动

概念

设置了浮动属性的元素会

1. 脱离标准流(整个HTML文档的元素, 从上而下, 从左到右排列)

2. 移动到指定位置

浮动最早的出现, 是为了实现图文混排的, 但是随后, 大家发现可以通过浮动来实现布局

3 语法

让一个元素向左或向右浮动

4 特性

1) 脱标

设置了浮动的元素会脱离标准流, 不再占用原来的位置, 后面的盒子会向上跑

2) 改变display

float属性会改变元素display属性。

任何元素都可以浮动。浮动元素会生成一个块盒，而不论它本身是何种元素。

生成的块盒和我们前面的行内块极其相似

• 同在一行显示

• 可以设置宽高

5 应用

我们知道，浮动是脱标的，会影响下面的标准流元素

因此, 我们需要给浮动的元素添加一个标准流的父元素，这样可以最大化的减小了对其他标准流的影响

1) 实现头部布局

• 左边是一个logo

• 右边是导航

2) 实现内容布局

6 清除浮动

1) 为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子

2) 如何清除浮动

目前使用最多的方式, 使用:after伪元素

示例

八. 定位

1 为什么需要定位

如果想实现下面的效果, 只靠浮动是没有办法实现的

像上面这种, 让一个盒子固定在某个位置的情况, 需要使用定位来实现

2 什么是定位

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

定位模式包括:

• 绝对定位: posistion: absolute

• 相对定位: position: relative

• 固定定位: position: fixed

边偏移包括

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

3 定位模式详解

1) 相对定位

相对定位参考自己在标准流中的位置偏移

效果图

特点

1相对于自己原来在标准流中位置来移动的

2原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

效果图

2) 绝对定位

绝对定位参考最近的带有定位的父级元素偏移

• 如果父级没有定位, 就参考浏览器的左上角偏移

• 如果父元素有定位, 参考父元素的左上角偏移

示例

规律

如果给一个元素设置绝对定位, 一定要记得给其父元素设置相对定位, 否则会出现意料之外的情况

简记: 子绝父相 —— 子级是绝对定位，父级要用相对定位

3) 固定定位

固定定位参考浏览器可视窗口偏移

示例

微信公众号底部布局

4 z-index

在使用定位布局时，可能会出现盒子重叠的情况

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序

如果文章对你有帮助的话，也请你帮我2个忙吧 (*╹▽╹*)

给这篇文章一键三连吧，对我很重要啦~

关注一下我 @新中地职业培训学校，听说现在关注的，以后都是尊贵的老粉啦！

获取更多GIS开发相关课程资源V：gis2210