CSS知识总结

最新推荐文章于 2022-09-14 17:52:35 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2022-09-14 17:52:35 发布

阅读量295

点赞数

分类专栏： CSS

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/tuzi007a/article/details/112441103

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

大家好，我是梅巴哥er。这篇是之前总结的css知识，忘了发出来了。今天分享一下。刚学前端的时候做的笔记，没有排版，看着可能缺了点美感。

本篇内容是看的B站pink老师视频，边看边做的总结。有想了解更多用法的，可以去w3c或菜鸟教程或者B站看PINK老师的视频教程。

看前预警：图片较多，如果是手机版，请尽量在wifi模式下观看！！！

CSS层叠样式表

第一天

在这里插入图片描述

1，HTML的局限性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IrA08Skn-1610281112849)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307174051064.png)]$

2，CSS网页的美容师

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aO8UWzrY-1610281112850)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307174214176.png)]$

3，CSS初识

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5M819idh-1610281112852)(C:\Users\Shinelon\AppData\Roaming\Typora\typora-user-images\image-20200307174344215.png)]$

4，引入CSS样式表（书写位置）

要书写css样式，应该写在哪个位置呢？

4.1 行内式（内联样式）

在这里插入图片描述

4.2 内部样式表（内嵌样式表）

在这里插入图片描述

4.3 外部样式表（外链式）

在这里插入图片描述

CSS选择器（重点）

在这里插入图片描述

1，选择器的作用（重点）

在这里插入图片描述

2，css基础选择器

2.1 标签选择器

在这里插入图片描述

2.2 类选择器

在这里插入图片描述

2.3 类选择器特殊用法–多类名

<标签名 class=" 类名1 类名2 …">…</标签名>

2.4 id选择器

在这里插入图片描述

id选择器和类选择器的区别：

最大的不同在于使用次数上。 id选择器只能用一次。类选择器可以用很多次。

2.5 通配符选择器

在这里插入图片描述

2.6 基础选择器总结

在这里插入图片描述

团队约定：

在这里插入图片描述

css字体样式属性调试工具

在这里插入图片描述

1， font字体

1.1 font-size：大小，常用单位px

谷歌浏览器默认的文字大小是16px. 不同浏览器默认字体大小不一致。

1.2， font-family:字体

在这里插入图片描述

css Unicode字体

在这里插入图片描述

为了照顾不同电脑字体安装问题，我们尽量只使用宋体和微软雅黑。

1.3 font-weight:字体粗细

在这里插入图片描述

1.4 font-style:字体风格（倾斜和不倾斜）

在这里插入图片描述

1.5 font：综合设置字体样式（重点）

在这里插入图片描述

设置顺序就是：正斜，粗细，大小，字体。（正粗大字）

2 ，css外观属性总结

在这里插入图片描述

属性如下：颜色，行高，水平对齐，首行缩进，下划线（颜行齐缩线）

1em就是一个英文字母或者一个汉字的大小。

3，开发者工具

按F12打开开发者工具。或者右击页面然后选检查。

CSS第二天

在这里插入图片描述

1，css复合选择器（5个种类，3个重点）

css选择器分为基础选择器和复合选择器。

符合选择器是由两个或多个基础选择器，通过不同的方式组合而成。

1.1 后代选择器（重点）

在这里插入图片描述

1.2 子元素选择器

在这里插入图片描述

1.3 交集选择器（用的较少，了解即可）

在这里插入图片描述

1.4 并集选择器（重点）

在这里插入图片描述

1.5 链接伪类选择器（重点）

在这里插入图片描述

2，标签显示模式display（重点）

在这里插入图片描述

2.1 什么是标签显示模式

在这里插入图片描述

2.2 块级元素block

在这里插入图片描述

2.3 行内元素inline

在这里插入图片描述

2.4 行内块元素 inline-block

在这里插入图片描述

2.5 三种模式总结区别

在这里插入图片描述

2.6 标签显示模式的转换 display

在这里插入图片描述

3，行高那些事儿line-height

3.1 单行文本垂直居中

在这里插入图片描述

4，css背景background

在这里插入图片描述

4.1 背景颜色background-color

在这里插入图片描述

4.2 背景图片 background-image

语法： background-image:none 或url（）；

4.3 背景平铺 background-repeat

在这里插入图片描述

4.4 背景位置position（重点）

在这里插入图片描述

4.5 背景附着

在这里插入图片描述

4.6 背景属性合写

在这里插入图片描述

4.7 背景透明css3

在这里插入图片描述

4.8 背景总结

在这里插入图片描述

5，CSS三大特性

在这里插入图片描述

5.1 css层叠性

在这里插入图片描述

5.2 继承性

在这里插入图片描述

5.3 优先级（重点）

在这里插入图片描述

盒子模型（css重中之重）

css学习的三大重点：css盒子模型，浮动，定位

在这里插入图片描述

1，看透网页布局的本质

在这里插入图片描述

2，盒子模型

在这里插入图片描述

3，盒子边框

在这里插入图片描述

3.1 边框综合设置

习惯写法：border: 1px solid red; 没有顺序要求。

3.2 盒子边框写法总结表：

在这里插入图片描述

3.3 表格的细线边框

在这里插入图片描述

4，内边距padding

4.1 概念

是指内容和边框之间的距离。

4.2 设置

在这里插入图片描述

分开写的时候就记住一点：值从左到右的顺序分别是上右下左。

没写下，下就会继承上的值；没写左，左就会继承右的值。没写右，右就会继承上的值。

4.3 内盒尺寸计算，元素实际大小

在这里插入图片描述

4.4 内边距产生的问题

内边距会撑开盒子。如果给了盒子高度和宽度，再给盒子一个内边距，盒子就会被撑开。

原来的宽度和高度会变大。

解决方法：

通过给设置了宽度和高度的盒子，减去相应的内边距的值，来维持原来盒子的大小。

4.5 特例：padding不影响盒子大小的情况

如果没有给盒子指定宽度，此时如果给这个盒子加上左右内边距，则不会撑开盒子。

5，外边距margin

5.1 概念作用

margin就是控制盒子与盒子之间的距离。

5.2 设置

和padding方式相同。

在这里插入图片描述

5.3 外边距实现盒子居中

在这里插入图片描述

auto是自动的意思。

5.4 文字居中和盒子水平居中的区别

在这里插入图片描述

5.5 插入图片和背景图片的区别

在这里插入图片描述

5.6 消除页面的内外边距（重要）

在这里插入图片描述

5.7 外边距合并或塌陷现象（垂直方向的合并。左右方向是没有合并的）

（1）相邻块元素垂直外边距的合并或塌陷

在这里插入图片描述

（2）嵌套块元素垂直外边距的合并或塌陷

在这里插入图片描述

6，盒子模型布局稳定性（布局的时候很有用）

在这里插入图片描述

7，ps的基本操作以及常用快捷键

在这里插入图片描述

8，拓展@（css3部分新属性）

8.1，圆角边框border-radius

如果想单独设定某个角变圆角，顺序如下：

border-radius: 左上角右上角右下角左下角;

在这里插入图片描述

8.2 盒子阴影

在这里插入图片描述

blur 值表示影子的模糊程度。

在这里插入图片描述

css浮动

1，浮动float

在这里插入图片描述

1.1 css布局的三种机制

网页布局的核心–就是用css来摆放盒子。

在这里插入图片描述

1.2 为什么需要浮动

在这里插入图片描述

1.3 什么是浮动float

在这里插入图片描述

1.3.1 浮动口诀之浮

在这里插入图片描述

1.3.2 浮动口诀之漏

在这里插入图片描述

1.3.2 浮动口诀之特

在这里插入图片描述

比实际的行内块更特别的是，水平相邻的两个浮动块之间是贴着的，没有缝隙。其他特性和行内块很相似。

1.4 浮动float的应用（重要）

1.5 浮动float的扩展

1.5.1 浮动元素和父盒子的关系

在这里插入图片描述

1.5.2 浮动float元素与兄弟盒子的关系

在这里插入图片描述

2，清除浮动

2.1 为什么要清除浮动

在这里插入图片描述

2.2 清除浮动的本质

清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。

2.3 清除浮动的方法

在这里插入图片描述

2.3.1 额外标签法，也叫隔墙法

在这里插入图片描述

2.3.2 父级添加overflow属性方法

在这里插入图片描述

2.3.3 使用after伪元素清除浮动

在这里插入图片描述

2.3.4 使用双伪元素清除浮动

在这里插入图片描述

2.4 清除浮动总结

在这里插入图片描述

网页制作的准备工作

1，css属性书写顺序（重点）

在这里插入图片描述

2，布局流程

在这里插入图片描述

3，页面制作

先制作版心，确定版心宽度，每个版心都要居中对齐。

在这里插入图片描述

1.3.1 头部制作

在这里插入图片描述

1.3.2 banner制作

在这里插入图片描述

1.3.3 精品推荐小模块

在这里插入图片描述

1.3.4 底部模块制作

在这里插入图片描述

css定位position（重要）

在这里插入图片描述

1，css布局的三种机制

在这里插入图片描述

2，为什么要使用定位

在这里插入图片描述

3，定位position详解

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

定位 = 定位模式 + 边偏移

3.1 边偏移

在这里插入图片描述

3.2 定位模式

在这里插入图片描述

3.2.1 静态定位static（了解）

在这里插入图片描述

3.2.2 相对定位relative（重要）

在这里插入图片描述

3.2.3 绝对定位 absolute（重要）

在这里插入图片描述

3.2.4 固定定位 fixed（重要）

在这里插入图片描述

4，定位position的扩展

4.1 绝对定位的盒子居中

在这里插入图片描述

4.2 堆叠顺序 z-index

在这里插入图片描述

4.3 定位改变display属性

在这里插入图片描述

5，定位小结

在这里插入图片描述

css高级技巧

在这里插入图片描述

1，元素的显示和隐藏

在这里插入图片描述

1.1 display 显示（重点）

在这里插入图片描述

1.2 visibility 可见性（了解）

在这里插入图片描述

1.3 overflow 溢出（重点）

在这里插入图片描述

1.4 显示与隐藏总结

在这里插入图片描述

2，css用户界面样式

在这里插入图片描述

2.1 鼠标样式cursor

在这里插入图片描述

2.2 轮廓线 outline

在这里插入图片描述

2.3 防止拖拽文本域resize

在这里插入图片描述

2.4 用户界面样式总结

在这里插入图片描述

3，vertical-align 垂直对齐

在这里插入图片描述

3.1 图片、表单和文字对齐

默认文字与图片是基线对齐的。

3.2 去除图片底部空白缝隙

在这里插入图片描述

4，溢出的文字用省略号显示

4.1 white-space

在这里插入图片描述

4.2 text-overflow 文字溢出

在这里插入图片描述

4.3 总结三部曲

在这里插入图片描述

5，css精灵技术sprite（重点）

5.1 为什么需要精灵技术

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

5.2 精灵技术讲解

在这里插入图片描述

5.3 精灵技术使用的核心总结

在这里插入图片描述

5.4 制作精灵图（了解）

在这里插入图片描述

6，滑动门技术

核心技术

在这里插入图片描述

7，margin负值的应用@拓展

7.1 margin负值之美

7.1.1 负边距+定位：实现水平垂直居中

在这里插入图片描述

7.1.2 压住盒子相邻边框

例 margin-left：-1px；

7.2 css三角形之美

在这里插入图片描述

完整项目流程：

1，项目介绍

页面制作。

2，项目背景

锻炼布局技术。

3，设计目标

在这里插入图片描述

4，所用技术

现学到的是html css+div 布局

5，代码规范

5.1 HTML规范

在这里插入图片描述

5.2 css规范

5.3 图片规范

在这里插入图片描述

5.4 命名规范

在这里插入图片描述

6，前期准备工作

在这里插入图片描述

要实现结构HTML和样式css分离的设计思想。

6.1 创建目录文件夹

在这里插入图片描述

css样式文件夹里面的文件分类

在这里插入图片描述

7，网站ico图标

在这里插入图片描述

7.1使用ico图标

首先，怎么从网站中取出网站的ico图标呢？

先去到网站的首页，然后在首页网址的最后面输入 /favicon.ico 再回车右键保存就可以拿到网站的ico了

ico图片直接放在项目根目录下即可。

在这里插入图片描述

然后，在自己的HTML里面，之间引入以下代码即可。

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

7.2 制作ico图标

把自己做的图片，通过三方网站转换成ico图标。

http://www.bitbug.net/

目标尺寸一般选择16x16 ，或者32x32 和48x48

在这里插入图片描述

8，网站优化三大标签

title ， description ， keywords

8.1 网页title标题

在这里插入图片描述

8.2 description 网站说明

在这里插入图片描述

语法：

在这里插入图片描述

8.3 keywords 关键字

在这里插入图片描述

9，字体图标icon font（重点）

这块请查看我的这篇博文：https://blog.csdn.net/tuzi007a/article/details/105621939

css3知识点-过渡

在这里插入图片描述

项目课程总结

在这里插入图片描述

CSS3新增特性

在这里插入图片描述

css3新增选择器

属性选择器

在这里插入图片描述

结构伪类选择器

在这里插入图片描述

#left_chdalu li:first-child a {
color: #3c3c3c;
} 第一个li里面的a标签
#left_chdalu li:nth-child(2) a {
color: red;
} 第二个li里面的a标签

注：

在这里插入图片描述

伪元素选择器 ::before和::after （用的很频繁，非常重要）

在这里插入图片描述

例如： div::before {

content: “我”;

}

CSS3 的2D转换transform效果:移动，旋转，缩放

在这里插入图片描述

2D转换之移动 translate

在这里插入图片描述

2D转换之旋转 ratate

在这里插入图片描述

2D转换的中心点 transform-origin

在这里插入图片描述

2D转换之缩放 scale

在这里插入图片描述

2D转换的综合写法

在这里插入图片描述

css3动画 animation

动画的基本使用

制作动画分为两步：

1，先定义动画

用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {

0% {

width: 100px;

}

100% {

width: 200px;

}

}

2，再使用（调用）动画

div {

width: 200px;

height: 200px;

background-color: pink;

margin: 100px auto;

animation-name: 动画名称;

animation-duration: 持续时间;

}

动画常用属性

在这里插入图片描述

速度曲线细节

在这里插入图片描述

steps(n)，这里面n是几，就是让动画分几步来完成。

3D转换

特点：近大远小。物体后面遮挡不可见。

常用的：3D位移和3D旋转。

在这里插入图片描述

3D透视 perspective

格式： perspective: 数字px;

在这里插入图片描述

3D旋转 rotate3D (左手定则)

在这里插入图片描述

3D呈现 transform-style

在这里插入图片描述

浏览器私有前缀

在这里插入图片描述

新生代农民工官方认证码农小拽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
CSS知识总结

大家好，我是梅巴哥er。这篇是之前总结的css知识，忘了发出来了。今天分享一下。刚学前端的时候做的笔记，没有排版，看着可能缺了点美感。本篇内容是看的B站pink老师视频，边看边做的总结。有想了解更多用法的，可以去w3c或菜鸟教程或者B站看PINK老师的视频教程。看前预警：图片较多，如果是手机版，请尽量在wifi模式下观看！！！CSS层叠样式表第一天1，HTML的局限性2，CSS网页的美容师3，CSS初识4，引入CSS样式表（书写位置）要书写css样式，应该写在哪个位置呢？4.1
复制链接

扫一扫

专栏目录

评论 4

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。