前端基础：CSS样式与项目构建详解,-优快云博客

本文链接：https://blog.youkuaiyun.com/Esther_liew/article/details/130895345

前端基础-CSS样式补充

本篇目录

- - 前端基础-CSS样式补充

一、CSS样式补充

1.精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如：需要在网页中展示8张小图片
- 8张小图片分别发送 → 发送8次
- 合成一张精灵图发送 → 发送1次
精灵图的使用步骤：
- 创建一个盒子
- 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
- 将精灵图设置为盒子的背景图片
- 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y；

2.背景图片大小

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

取值：

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

background连写拓展
- 完整连写： background：color image repeat position/size；
- 注意点： background-size和background连写同时设置时，需要注意覆盖问题
- 解决：要么单独的样式写连写的下面/要么单独的样式写在连写的里面

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（秒）
注意点：
- 过渡需要：默认状态和 hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同的
  - 给默认状态设置，鼠标移入移出都有过渡效果
  - 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

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

二、项目前置认知

1.网页与网站的关系

网页：相当于是每页纸
网站：相当于一本书籍
- 用户翻阅的时候，看的是每页纸上的内容
- 由多页纸整合在一起，就是完整的一本书籍了
在互联网中，网站类似于是一本书，网页就是这本书的每一页
- 比如：淘宝、京东、黑马程序员等就是一个网站，类似于是一本书
- 这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸
- 多个同主题网页整合在一起，就称之为网站
网页与网站的概念
- 网页：网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等
- 网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东、黑马程序员等；

2.骨架结构标签

2.1 DOCTYPE文档说明

文档类型声明，告诉浏览器该网页的 HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

2.2 网页语言

--------网页使用的语言
作用：搜索引擎归类 + 浏览器翻译
常见语言：zh-CN 简体中文 / en 英

2.3 字符编码（了解）

<meta charset="UTF-8">------网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码：
- UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
- GB2312：6000+ 汉字
- GBK：20000+ 汉字
注意点：开发中统一使用 UTF-8 字符编码即可

3.SEO三大标签

SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
- …
SEO三大标签：
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签

在这里插入图片描述

4.ico图标设置

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

在这里插入图片描述

常见代码：

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

注：shortcut和type写不写没有区别；快捷键生成：link:favicon

5.版心

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

代码：

/* 版心 */
.container {
    width:1240px;
    margin:0 auto;
}

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

6.（拓展补充） CSS书写顺序

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

不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习

顺序	类别	属性
1	布局属性	display，position，float，clear，visibility，overflow
2	盒子模型+背景	width，height，margin，padding，border，background
3	文本内容属性	color，font，text-decoration，text-align，line-height
4	点缀属性	cursor，border-radius，text-shadow，box-shadow

注意点：开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个

三、项目结构搭建

1.文件和目录准备

1.1 文件和目录准备

新建项目文件夹 xtx-pc-client，在VScode中打开
- 在实际开发中，项目文件夹不建议使用中文
- 所有项目相关文件都保存在 xtx-pc-client目录中
复制 favicon.ico 到 xtx-pc-client 目录
- 一般习惯将ico图标放在项目根目录
复制 images 和 uploads 目录到 xtx-pc-client 目录中
- images ：存放网站固定使用的图片素材，如：logo、样式修饰图片… 等
- uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片…等
新建 index.html 在根目录
新建 css 文件夹保存网站的样式，并新建以下CSS文件：
- base.css：基础公共样式
- common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
- index.css：首页样式