博客

CSS详解

  • Post author:
  • Post category:其他


目录标题



什么是CSS

在这里插入图片描述



CSS的重点如下

在这里插入图片描述



什么是CSS：

在这里插入图片描述



CSS的发展史

在这里插入图片描述



CSS的快速入门

在这里插入图片描述



建议使用这种规范

！！！

注意 下面图片中 style.css 和 index.html

是在同一个命名为css目录的文件下

所以 href=“css/style.css”

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述



CSS的优势

在这里插入图片描述



CSS的三种导入方式



练习

做一个练习来比较：行内样式 和外部样式 内部样式 的优先级

所以可以得出优先级为 就近原则！！！

在这里插入图片描述



比较结果如下

css可以分为 内部样式表 和外部样式表 两种

还有行内样式！！

在这里插入图片描述

在这里插入图片描述



CSS的三种基本选择器 （重点）



作用是：选择页面上的某一个或者某一类 元素



基本选择器



1 标签选择器

2 类选择器 class

3 Id 选择器



重点： 标签选择器 会选择到页面上所有的这个标签的元素

在这里插入图片描述



通过类选择器

我们可以通过只想让 第一个 h1 标题 变色

在这里插入图片描述



id选择器

id选择器的重点：id必须保证全局 唯一！！！

命名的方式为 #id的名称 {}

在这里插入图片描述



重点！

扩展 ： 来比较 类选择器 id选择器 和标签选择器 三者的优先级

得出结果： 它们不遵行 就近原则

id选择器大于类选择器大于标签选择器

在这里插入图片描述



基本选择器总结



重点

类选择器 class ： 选择所有的class属性一致的标签 可以跨标签

例如 一个是p标签 一个 h1 标签 但是它们都可以用一类的class标签

来进行改变

在这里插入图片描述



高级选择器



层次选择器



先写一个框架

在这里插入图片描述



层次选择器：

分为

1 后代选择器 ： 在某个元素的后面 祖爷爷 爷爷 爸爸 你

2 子选择器 ：只有一代 儿子

3 相邻兄弟选择器 同辈

4 通用选择器 ：就是当前选中元素的向下所有兄弟元素

在这里插入图片描述



后代选择器

在这里插入图片描述



子选择器

在这里插入图片描述



相邻兄弟选择器

在这里插入图片描述



通用选择器

在这里插入图片描述



结构伪类选择器



body标签结构为

在这里插入图片描述



在不使用 class 和id选择器的情况下

选中 标签的第一个子元素 和 最后一个子元素



练习



例如 改变 ul中的 第一个子元素和最后一个子元素

在这里插入图片描述



练习二



改变p2的颜色

选择当前p元素的父级元素

选中父级元素的第一个

并且是当前元素才生效（重点）

在这里插入图片描述



例如

如果 标签结构更改

添加一个 h标签 在p标签上

那么就不会更改 p1 的颜色

(因为括号中值为1 而父级元素的第一个元素为h标签 所以不会改变颜色)

在这里插入图片描述



但是可以改变p1 的颜色

(因为括号中值为1 而父级元素的第一个元素为h标签 所以不会改变颜色)

（但是 当括号中的值为2 是 那么父级元素的第二个元素为p标签 当前元素 所以会改变颜色！！！）

在这里插入图片描述



练习



重点

比较 P:nth-child(2){} 的不同

p：nth-of-type(1){}

跟上面的选择器不同

因为 上面选择器括号中的值是按排序的顺序的

而 这里选择器括号中的值是按类性的顺序选择的

注意重点！！！

所以它会自动省略 不是不是当前元素的标签 直到找到当前元素的标签后

才开始计数改变颜色

在这里插入图片描述



重点总结！！！

伪类（会带着冒号 :）

伪类就是条件！！！

还有一种伪类 是

重点： 鼠标悬浮变颜色

格式： 标签命名：hover{}

可以看出 a：hover{}

使得 a 标签里面的 文字 当鼠标悬浮在上面的时候 发生变色

在这里插入图片描述



还有一种伪类

鼠标按住未释放的状态

格式 标签命名：active{}

在这里插入图片描述



补充扩展

在这里插入图片描述



属性选择器（常用和重点）



可以搜索百度 来学习下面第一张图不会的标签内容

如 float display 等！！！

在这里插入图片描述



body标签结构显示如下

在这里插入图片描述



head标签显示

在这里插入图片描述



网页显示

在这里插入图片描述



属性选择器是重点 常用的CSS

要重点掌握！！！



练习



练习 a标签中 选择 id 和 class

的命名

例如：

a标签中 id=first

a标签中 只选择 id

在这里插入图片描述



在 = 和 * =

这两个符号 含义是不相同的



= 是绝对等于 * = 是包含这个元素 （只要包含这个元素的一部分就可以选择上）



a标签中 class含有links的命名

a标签中 class *= “links”

在这里插入图片描述



例如：

以 a标签中 href以 http 开头的元素的命名有哪些

^= 符号的意思是 以什么什么开头的元素命名

a [href^=http] {}

$= 符号的意思是 以什么什么结尾的元素命名

例如下面 以 href 中 以 jpg为结尾的命名有哪些

在这里插入图片描述



属性选择器 的强大之处： 就是 把 id+class结合了起来



正则表达式的通配符

在这里插入图片描述



重点：！！！

选择器是前端里面最重要的一个东西

他会在js jQuery vue css 中都会用到



美化网页元素



为什么美化网页



span标签

在这里插入图片描述



例如

比如我们想 美化一些字体

那么我们可以选择 id选择器来进行优化

下面中 欢迎来学习Java 我们想优化 Java 两个字

看下面的实例！！！

在这里插入图片描述



字体样式



重点 ：

font-family：字体

font-size： 字体大小

font-weight: 字体的粗细

color ：字体的颜色



font属性

在这里插入图片描述



还有 字体的风格

如下！！！

在这里插入图片描述



文本样式



重点部分：

注意 文本对齐的方式： text-align=center

首行缩进 text-indent：2em

行高：line-height：单行文字上下居中 （文字在一个方块中的位置是居中的类型）

​ 就是 行高=高度 line-height=height

在这里插入图片描述



文本样式中

重点！！！ 字体行高的 理解 ：

就是将字体 line-height 设置成

字块行高的高度 那么就会出现 字体居中的情况

实例如下： 如下方图片 如果经过 设置后的行高后 下面的数字在方块中就会出现

居中的情况！！！

在这里插入图片描述



练习

在这里插入图片描述



练习 上中下划线

在这里插入图片描述



测试结果！！！

在这里插入图片描述



练习



让图片和文字居中

在这里插入图片描述



练习：

在这里插入图片描述



超链接伪类



body标签如下

在这里插入图片描述



阴影



练习



给价格添加阴影属性

给价格 ￥99 添加 i d 标签

在这里插入图片描述



阴影属性

在这里插入图片描述



介绍 属性 text-shadow！！！

text-shadow ：阴影颜色 水平偏移 垂直偏移 阴影半径

在这里插入图片描述



总结 什么是超链接伪类

就是 a 标签下 的 hover 属性

在这里插入图片描述



列表



body 标签 如下

在这里插入图片描述



字体大小 font-size

字体粗体 font-weight

段落的第一行缩进 text-indent

设置以百分比计的行高 line-height

list-style ： 设置 文字前面的符号 比如 设置为 圆，数字，等等



练习



修改如下

在这里插入图片描述

在这里插入图片描述



效果如下

在这里插入图片描述



练习



添加一个 div 标签 修改

背景图片的大小

在这里插入图片描述



背景



背景分为 背景颜色 和 背景图片

body标签 ！！！



第一种平铺

第二种 垂直平铺

第三种 单独一张图片

在这里插入图片描述



添加背景图片



练习



具体的详细代码

在上面的练习中

在这里插入图片描述



效果图 ！！！

在这里插入图片描述



经过调整 位置

如下！！

所以

背景的格式为： 颜色 图片 图片位置 平铺方式

在这里插入图片描述



练习二



在下面的背景中添加图片

在这里插入图片描述



效果图 如下

在这里插入图片描述



渐变



径向渐变 圆形渐变

等等…

渐变颜色代码

在这里插入图片描述



网页效果

在这里插入图片描述



练习



我们可以再网页上

自己调整图片颜色来得到想要的效果

然后在 放在代码中去

在这里插入图片描述



重点！

扩展 渐变图形 网站！！！

https://www.grabient.com/

在这里插入图片描述



盒子模型



代码部分

页面显示

在这里插入图片描述



什么是盒子



margin： 外边距

padding： 内边距

border：边框

在这里插入图片描述



边框



我们一共讲解三部分 边框 内边距 外边距！！！

下面含有

border标签的就是 边框

就是盒子模型的一部分！！！



body标签

在这里插入图片描述



margin：为外边距

在这里插入图片描述



练习



效果图

在这里插入图片描述



外边距



外边距 就是 margin

margin格式

一共有四个方向 方向为 上 右 下 左

所谓 格式为 margin： 上 右 下 左（顺时针旋转）

而且外边距 可以调整 居中 内容



body标签

在这里插入图片描述



修改部分

在这里插入图片描述



内边距



padding标签 就是内边距

而内边距也有方向

当 padding：1px 代表 上下左右 方向 都间隔 1px

当padding： 1px 3px 代表 上下为 1px 左右为 3px

当 padding ： 1px 2px 3px 3px 代表 上 1px 右 2px 下3px 左 4px

注意此刻为顺时针方向！！！

在这里插入图片描述



其他代码 跟外边距 代码一样

参考上面的代码！！

在这里插入图片描述



注意点！！！

盒子的计算方式

在这里插入图片描述



圆角边框



同样 圆角边框也属于 border部分

只不过 精准属于 border-radius 部分

而且 他也存在方向

border-radius：10px 20px 表示为

左上 右下的那个角度为 10px 右上 左下那个角为2opx

当然它也是顺时针方向！！！

顺序为 左上 右上 右下 左下



body代码

在这里插入图片描述



修改

在这里插入图片描述



练习



设置一个半圆的图形

在这里插入图片描述



练习二



设置一个左半圆的图形

在这里插入图片描述



练习三



设置一个扇形图形

在这里插入图片描述



练习



将一个图片 变成圆形

在这里插入图片描述



总结 可能通过网页作图 或者 背景图 渐变

可能会比 ps 等等一些软件要快 和效果要好！！！



阴影



阴影 shadow 的标签内容

盒子阴影效果 box-shadow

在这里插入图片描述



练习



让图片出现阴影！！！

margin 是外边距

外边距居中的 条件（margin： 0 auto）

要有 块元素 而且块元素有固定的宽度



效果图

在这里插入图片描述



重点！

扩展 ：

前端代码参考网站

源码之家！！！

还有

搜索：

后台管理系统 模板之家

还有

搜索

layui

或者

搜索

element-ui

还有

搜索

飞冰

https://www.ice.work.cn/

还有很多

搜索

门户网站 模板之家

在这里插入图片描述



浮动的理解



理解

标准文档流

下面图中

左边是正常的

右边是 标准文档流

在这里插入图片描述



理解 块级元素 和 行内元素

行内元素可以包在块级元素中

但是 块级元素 不能 包在 行内元素中

在这里插入图片描述



display（陈列）



display 陈列的意思

display 是行内元素的一种

display 可以有三种情况

分别为 block 或者 inline 或者 inline-block

它们的意思分别为

block 块元素

inline 行内元素

inline-block 是块元素 但也可以内联 放一行！

英文学习

block 块的意思



标签代码

重点：

在下面的两个 div 和 span 标签中

它们是不同的

div 为块级元素

span 为 行内元素

（而且还可以发现 行内元素 与选择器中的 width 和 height 是没有关系的）

但是我们 可以利用 display 将 行内元素 变成 块级元素

同样的 块级元素 也可以利用 display 变成 行内元素



理解 ：

块级元素 独占一整行

行内元素 只占一行中的某一块 所以可以跟其他元素 并排 排列



效果

在这里插入图片描述



总结！！！

display 也是一种实现行内元素排列的方式

但是我们很多情况都使用 float



练习



写一个导航栏

需要用到 display

写出导航栏 理解

先利用 inline-block 大框架

将他们 变成 内联 块级元素 但是可以写在一行里面

再将大框架中的元素 变成 块级元素 自动排版到一行中

就会出现导航栏中的现象！！！



HTML代码

在这里插入图片描述



css代码

如下

在这里插入图片描述



效果如下

在这里插入图片描述



float（浮动）



接着上面浮动

练习：

float 浮动的意思

让图片 浮动起来

在这里插入图片描述



重点：

要重点学习 float浮动 和 display陈列

两种内容 ！！！



父级边框塌陷的问题



解决 父级边框塌陷现象！！！

在这里插入图片描述



练习

在这里插入图片描述



重点：

clear 属性 的解释

clear ：right; 右侧不允许有浮动元素 （如果有浮动元素 则排到元素的下面一行去）

clear: Left; 左侧不允许有浮动元素

clear: both; 两侧不允许有浮动元素



将上面图片完整居中的排列到一行！！！

解决元素浮动出现的这种情况！！！



解决方法1

增加父级元素的高度

在这里插入图片描述



解决方法2

增加一个空的div标签 清除浮动

在这里插入图片描述



解决方法3

overflow 溢出

举例 如下

在这里插入图片描述



所以解决为

在父级元素中增加一个 overflow：hidden 即可

在这里插入图片描述

​



解决方法4

在父类添加一个伪类 ：after

clear 属性 的解释

clear ：right; 右侧不允许有浮动元素 （如果有浮动元素 则排到元素的下面一行去）

clear: Left; 左侧不允许有浮动元素

clear: both; 两侧不允许有浮动元素

在这里插入图片描述



四种解决方法的总结：

在这里插入图片描述



display和float两者的对比



1 display ：方向不可以控制

2 float ： 浮动的话 会脱离标准文档流 所以要解决 父级边框塌陷现象



定位



相对定位



基础代码部分



练习

在这里插入图片描述



练习



什么是相对定位

相对于 自己原来的位置进行偏移

将第一个盒子 设定相对定位！！！

在这里插入图片描述



将第三个盒子 设定相对定位

在这里插入图片描述



效果图如下！！！

在这里插入图片描述



总结：

就是 学习 相对定位 position：relative;

相对于原来的位置 进行指定的偏移

相对定位的话 仍然它会在标准文档流中 原来的位置会被保留！！！



可以观察下面的图片来理解

这个值设计，正常理解的正值要写成负值

相对定位元素的定位是相对其正常位置。

在这里插入图片描述



练习

在这里插入图片描述



绝对定位



重点：！！！

绝对定位：基于xxx的定位 上下左右

第一种情况： 如果在没有父级元素定位的前提下 相对于浏览器定位

第二种情况： 假设父级元素存在定位 我们通常会相对于父级元素进行偏移

第三种情况： 在父级元素范围内移动



绝对定位相对于父级或浏览器的位置 进行指定的偏移 而且 绝对定位的话 它不在标准文档流中 而且原来的位置不会被保留



而且重点

绝对定位只会在父级范围内移动！！！（必须父级存在定位）

在这里插入图片描述



固定定位 fixed



理解：

绝对定位 ：相对于浏览器

fixed 固定定位！！

在这里插入图片描述



重点！！！

所以可以观察到

当拉动滚动条的时候 你可以发现 div1 会随着滚动条的位置而变动

而 div2 不会变动！！！

在这里插入图片描述



z-index



z-inde 英文意思 就是层级的意思

在这里插入图片描述



练习



学习层级

在这里插入图片描述



从下面的效果图中 我们可以看到

层级 z-index 的区别

如果不设定层级 那么就会不被原来的高层级颜色 覆盖掉

那么 这几行字 “学习微服务” 就不会显示出来

z-index等于的值要高 层级要大 那么就容易显示出来

在这里插入图片描述



动画



可以参考 less 中文网

可以参考

搜索

canvas动画

可以搜索

html5 浪漫告白

可以参考

搜索

卡巴斯基网络监控

在这里插入图片描述



CSS总结

在这里插入图片描述


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