Web前端系列技术之CSS基础（从入门开始）⑥

发布于：2023-02-02 ⋅ 阅读:(713) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

整体项目开发基础认知

很少有项目是完全可以交给一个人去独立完成开发的，所以在整个项目开发过程中，团队之间的合作的默契是至关重要的，而对于这份 “默契” 不仅仅需要的是技术支持，更是项目开发过程中从准备工作到收尾工作的一整套行云流水的开发流程。

而今天介绍的主要内容是：
二十一、CSS样式补充
二十二、项目前置认知
二十三、项目结构搭建

文章目录

二十一、CSS样式补充

主要补充知识点是：

1. 精灵图 2. 背景图片大小 3. 文字阴影 4. 盒子阴影 5. 过渡

1. 精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图 ；

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

例如：
需要在网页中展示8张小图片 ：

• 8张小图片分别发送 → 发送8次 
• 合成一张精灵图发送 → 发送1次

在这里插入图片描述
使用步骤：

  1. 创建一个盒子；
  2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子；
  3. 将精灵图设置为盒子的背景图片；
  4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y；

注意点：
精灵图不能用img标签，常用行内标签：span，b 、i；

2. 背景图片大小

作用：设置背景图片的大小；
语法：background-size：宽度 高度；

取值：

取值 场景
数字+px 方便简单，常用
百分比 相当于当前盒子自身的宽高百分比
contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白（但是图片可能显示不完整）

连写模式：

background :  color  image repeat  position / size;

注意点：
• background-size和background连写同时设置时，需要注意覆盖问题；

解决：

  1. 要么单独的样式写连写的下面 ；
  2. 要么单独的样式写在连写的里面；

3. 文字阴影

作用：给文字添加阴影效果，吸引用户注意；
属性名：text-shadow；
取值：

参数 作用
h-shadow 必须，水平偏移量，允许负值
v-shadow 必须，垂直偏移量，允许负值
blur 可选，模糊度
color 可选，阴影颜色 
拓展： 阴影可以叠加设置，每组阴影取值之间以逗号隔开；

4. 盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow；
取值：

参数 作用
h-shadow 必须，水平偏移量，允许负值
v-shadow 必须，垂直偏移量，允许负值
blur 可选，模糊度
spread 可选，阴影扩大
color 可选，阴影颜色
inset 可选，将阴影改为内部阴影

5. 过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：

参数 取值
过渡的属性 all：所有能过渡的属性都过渡、具体属性名如：width：只有width有过渡
过渡的时长 数字+s（秒）

注意点：

  1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果 ；
  2. transition属性给需要过渡的元素本身加 ；
  3. transition属性设置在不同状态中，效果不同的 ：
    ① 给默认状态设置，鼠标移入移出都有过渡效果 ；
    ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果；

二十二、项目前置认知

1. 网页与网站的关系

网页：网站中的每一“页”，相当于是每页纸；

网站：提供特定服务的一组网页集合，相当于一本书籍 • 用户翻阅的时候，看的是每页纸上的内容 • 由多页纸整合在一起，就是完整的一本书籍了；

简单来说：多个同主题网页整合在一起，就称之为网站

2. 骨架结构标签

<!DOCTYPE html>

文档类型声明，告诉浏览器该网页的 HTML版本；

注意点：
DOCTYPE需要写在页面的第一行，不属于HTML标签；
Xhtml：表示严格型html，”x“代表严格

<html lang="en">

识别网页使用的语言
作用：搜索引擎归类 + 浏览器翻译；

常见语言：zh-CN 简体中文 / en 英文

<meta charset="UTF-8">

识别网页使用的字符编码；
作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码
常见字符编码：

  1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字；
  2. GB2312：6000+ 汉字；
  3. GBK：20000+ 汉字；

注意点：开发中 统一使用 UTF-8 字符编码；

<meta http-equiv="X-UA-Compatible" content="IE=edge">

浏览器兼容，毕竟IE浏览器(兼容性差)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设置网页的宽度 = 设备宽度；
主要是为了实现在移动端网页的时候要用；

3. SEO三大标签

SEO（Search Engine Optimization）：搜索引擎优化；
作用：让网站在搜索引擎上的排名靠前；
前端网页开发提升SEO的常见方法：

  1. 竞价排名
  2. 将网页制作成html后缀
  3. 标签语义化（在合适的地方使用合适的标签）
  4. ……

3.1 title：网页标题标签

<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>

3.2. description：网页描述标签

<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">

3.3. keywords：网页关键词标签

<meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">

具体效果：
在这里插入图片描述
在这里插入图片描述

4. ico图标设置

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

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

效果如图：
在这里插入图片描述

5. 版心

场景：把页面的主体内容约束在网页中间；
作用：让不同大小的屏幕都能看到页面的主体内容；
代码：

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

注意点：
• 版心类名常用：container、wrapper、w 等

6. CSS书写顺序（拓展）

衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性）；

不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯；
在这里插入图片描述
注意点：
• 开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个；

7. 有语义的布局标签（拓展）

场景：在HTML5新版本中，推出了一些有语义的布局标签，可以增强网页的语义化；

标签：

标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页块区
article 网页文章

注意点：
• 以上标签显示特点和div一致，但是比div多了不同的语义；

二十三、项目结构搭建

1. 文件和目录准备

① 新建项目文件夹 项目名称-pc-client，在VScode中打开：

  • pc：电脑端、client：客户端 ；
  • 在实际开发中，项目文件夹不建议使用中文；
  • 所有项目相关文件都保存在 项目名称-pc-client 目录中；

② 复制 favicon.ico 到 项目名称-pc-client 目录：

  • 一般习惯将ico图标放在项目根目录；

③ 复制 images 和 uploads 目录到 项目名称-pc-client 目录中：

  • images ：存放网站 固定使用 的图片素材，如：logo、样式修饰图片… 等；
  • uploads：存放网站 非固定使用 的图片素材，如：商品图片、宣传图片…等；

④ 新建 index.html 在根目录：

⑤ 新建 CSS 文件夹保存网站的样式，并新建以下CSS文件：

  • base.css：基础公共样式（清徐默认样式和内减模式）；
  • common.css：该网站中多个网页相同模块的重复样式，如：头部、底部（写版心）；
  • index.css：首页样式；

在这里插入图片描述

2. 基础公共样式

场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式；

作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发；

操作：准备好base.css代码，项目中可以直接引入使用；

这里给出一般网页前端开发都会用到的，完整清除浏览器默认样式及元素默认样式的公共代码：

/* 去除常见标签默认的 margin 和 padding */
* {
  margin: 0;
  padding: 0;
}

/* 內减模式 */
* {
    box-sizing: border-box;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线 */
a {
  text-decoration: none;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

/* 双伪元素清浮法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

总结

◆ 能够在网页中使用 精灵图
◆ 能够使用 背景大小属性 ，设置背景图片的大小
◆ 能够认识 CSS书写顺序，提高代码专业性和浏览器渲染性能
◆ 能够使用的专业方式完成 项目结构搭建 和 基础公共样式

以上就是所要介绍的CSS的第六节内容，后续即将更新CSS的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下CSS基础学习的文章内容，再结合之前所介绍的HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布