黑马程序员CSS知识点干货版(学成在线版·下)

项目目录

        网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。 

study

        images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等 

        uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片 

        css 文件夹：存放 CSS 文件（link 标签引入） 

                base.css：基础公共样式，例如：清除默认样式、设置网页基本样式 

                index.css：首页 CSS 样式 

        index.html：首页 HTML 文件

基础公共样式

清除默认样式

例如内边距、外边距、项目符号等等

/* 去除常见标签默认的 margin 和 padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 去除列表默认样式 */
li {
list-style: none;
}

设置通用样式

例如：文字样式

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 14px/1.5 "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
sans-serif;
color: #333;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}

版心效果

.wrapper {
margin: 0 auto;
width: 1200px;
}

网页制作思路（例学成在线）

1. 布局思路：先整体再局部，从外到内，从上到下，从左到右

2. CSS 实现思路

        1.画盒子，调整盒子范围 → 宽高背景色 

        2.调整盒子位置 → flex 布局、内外边距 

        3.控制图片、文字内容样式

定位

作用：灵活的改变盒子在网页中的位置

实现：

1. 定位模式：position

2. 边偏移：设置盒子的位置

        • left 

        • right 

        • top 

        • bottom

相对定位

position: relative

特点：

• 不脱标，占用自己原来位置

• 显示模式特点保持不变

• 设置边偏移则相对自己原来位置移动

拓展：很少单独使用相对定位，一般是与其他定位方式配合使用

绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

• 脱标，不占位

• 显示模式具备行内块特点

• 设置边偏移则相对最近的已经定位的祖先元素改变位置

• 如果祖先元素都未定位，则相对浏览器可视区改变位置

定位居中

实现步骤：

1. 绝对定位

2. 水平、垂直边偏移为 50%

3. 子级向左、上移动自身尺寸的一半

• 左、上的外边距为 –尺寸的一半

• transform: translate(-50%, -50%)

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

• 脱标，不占位

• 显示模式具备行内块特点

• 设置边偏移相对浏览器窗口改变位置

堆叠层级 z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

CSS精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再

background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

1. 创建盒子，盒子尺寸与小图尺寸相同

2. 设置盒子背景图为精灵图

3. 添加 background-position 属性，改变背景图位置

3.1 使用 PxCook 测量小图片左上角坐标

3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点

• 灵活性：灵活地修改样式，例如：尺寸、颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便：先下载再使用

下载字体

iconfont 图标库：https://www.iconfont.cn/

下载字体

登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至 本地

使用字体

1. 引入字体样式表（iconfont.css）

2. 标签使用字体图标类名

1.

iconfont：字体图标基本样式（字体名，字体大小等等）

2.

icon-xxx：图标对应的类名

上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体

上传步骤

上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

CSS修饰属性

垂直对齐方式 vertical-align

属性名：vertical-align

属性值

过渡 transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性 花费时间 (s)

提示：

• 过渡的属性可以是具体的 CSS 属性

• 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）

• transition 设置给元素本身

img {
width: 200px;
height: 200px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
}

透明度 opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

• 0：完全透明（元素不可见）

• 1：不透明

• 0-1之间小数：半透明

光标类型 cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值

SEO 三大标签

SEO：搜索引擎优化，提升网站百度搜索排名

提升SEO的常见方法：

1.

竞价排名

2.

将网页制作成html后缀

3.

标签语义化（在合适的地方使用合适的标签）

4. ……

网页头部 SEO 标签：

• title：网页标题标签

• description：网页描述

• keywords：网页关键词

Favicon 图标

Favicon 图标：网页图标，出现在浏览器标题栏，增加网站辨识度。

图标：favicon.ico，一般存放到网站的根目录里面

<!-- link:favicon -->

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">