前端自学day08-css 笔记整理

最新推荐文章于 2024-09-15 10:33:02 发布

LenoF

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量395

点赞数

分类专栏：自学文章标签：前端 css css3 html

本文链接：https://blog.csdn.net/m0_59470174/article/details/123673486

版权

自学专栏收录该内容

6 篇文章 0 订阅

订阅专栏

课程：（b站）黑马程序员【前端HTML5+CSS3+移动web全套教程】

day08

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

一、项目样式补充

目标：能够使用精灵图，能够给元素添加阴影效果，让元素完成过渡效果

精灵图
背景图片大小
文字阴影
盒子阴影
过渡

1.1精灵图结介绍

场景：项目中将一张小图片合成一张大图片，大图片称为精灵图
优点：较少服务器发送次数，减轻服务器压力，提高页面加载速度

1.2精灵图使用步骤

创建一个盒子
设置盒子大小为小图片大小
设置精灵图为盒子的背景图片
将小图片左上角坐标取负值，设置给盒子的background-position：x y

background-position属性用于设置背景图片的起始位置的，其中参数x表示水平位置，y表示垂直位置

2.1背景图片大小

语法：background-size：高度宽度；

取值	场景	优点	缺点
数字+px	简单方便，常用	设置简单	图片可能会拉伸变形
百分比	相对于当前盒子自身的宽高百分比	同上	同上
contain	(包含)将背景图片等比例缩放，直到不会超出盒子的最大	进行等比例缩放，不会让图片变形	可能盒子会出现留白
cover	(覆盖)将背景图片等比例缩放，直到刚好填满整个盒子没有空白	同上	可能背景图片会超出盒子

2.3background连写

格式：background：color image repeat position/size；
注意：
background连写与background-size同时设置时，需要注意覆盖问题

因为连写中有size的一席之地，省略相当于设置默认值，单独写在前面的话，会被覆盖掉

解决：
1.单独样式写在连写下面
2.单独样式写在连写里面

3.1文字阴影

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

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
color	可选，阴影颜色

拓展：

阴影可以叠加设置，每组阴影取值之间以逗号分隔

4.1盒子阴影

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

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

5.1过渡

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

参数	取值
过度的属性	`all：`所有能过度的属性都过度；
过度的时长	数字+s(秒)

注意：

1.过渡需要：默认状态和hover状态样式不同，才会有过渡效果
2.可以同时设置多组样式，每组逗号隔开
3.transition给需要过渡的元素本身加
transition属性设置在不同状态，效果不同

给默认状态设置，鼠标移入移出都有效果
给hover状态设置，鼠标移入有过度效果，移出没有过度效果

二、项目前置认知

目标：能够知道SEO三大标签，能够设置网页的ico图标，能够书写版心公共类代码

网页与网站的关系
骨架结构标签
SEO三大标签
ico图标
版心

1.1网页与网站的关系

互联网中，网站类似于一本书，网页就是这本书的每一页
多个同主题网页整合在一起，就称之网站

1.2网页与网站的概念

网页：网站种的每一“页” 如淘宝主页、登录页等
网站：提供特定服务的一组网页集合

2.1DOCTYPE文档说明

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本
注意：

DOCTYPE需要写在页面的第一行，不属于html标签

2.2网页语言

<html lang="en">标识网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN 简体中文；en英文

2.3字符编码

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

开发中统一使用UTF-8字符编码即可

<!DOCTYPE html>
<!-- 
  document：文档
  type：类型
  文档类型声明：当前网页是html5
 -->

<html lang="en">
<!-- 
  标识网页使用的语言
  en：英文
  zh-CN：中文
 -->

<head>
  <meta charset="UTF-8">
  <!-- 
    设置网页使用的字符编码
    UTF-8：字符编码的一种

   -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  我是一个中文
</body>
</html>

3.1 SEO简介

SEO(Search Engine Optimization)：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
1.竞价排名
2.将网页制作成html后缀
3.标签语义化(在合适地方使用合适标签)

3.2 SEO三大标签

1.title：网页标题标签
2.description：网页描述标签
3.keywords：网页关键词标签

(拓展)有语义的布局标签

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

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

注意：

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

4.1 ico图标设置

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

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

5.1 版心的介绍

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

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

注意：

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

(拓展2)css书写顺序

衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范(专业性)
不同的css书写顺序为影响浏览器的渲染性能推荐前端工程师使用专业的书写顺序习惯

注意：

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

顺序	类别	属性
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-align、box-shadow