走进 CSS

创始人

2024-05-20 04:34:40

0次

看完本篇博客，你能收获：

👉 了解 CSS 是什么？
👉 学会 CSS 怎么用？
👉 CSS的选择器
👉 如何用 CSS 美化网页

文章目录

01 CSS 是什么？
02 CSS的发展史
03 CSS 快速入门
04 CSS的3种导入方式（使用方式）
05 选择器 👇
- - 基本选择器：
  - - 1. 标签选择器（\）：
    - 2. 类选择器：
    - 3. id 选择器：
  - 层次选择器：
  - - 1. 后代选择器
    - 2. 子选择器
    - 3. 相邻兄弟选择器
    - 4. 通用选择器
  - 结构伪类选择器：
  - 属性选择器（常用 ※）：
06 网页美化
- 👉 字体样式
- 👉 文本样式
- 👉 超链接伪类（悬浮效果）
- 👉 列表样式
- 👉 背景图像及渐变
07 盒子模型
- - 👉 什么是盒子模型？
  - 👉 边框 border
  - 👉 外边距&内边距 margin&padding
  - 👉 圆角边框
  - 👉 阴影
08 浮动
09 定位
- 👉 相对定位 relative
- 👉 绝对定位 absolute
- 👉 固定定位 fixed
- 👉 z - index
10 动画
>>> 开发技巧 <<<

01 CSS 是什么？

👉 Cascading Style Sheet ( 层叠级联样式表 )

CSS可以干什么？

美化网页
字体、颜色、边距、高度宽度、背景图片、网页定位

02 CSS的发展史

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

👉	CSS 发展历程
CSS 1.0	1996年12月W3C推出了CSS规范的第一个版本
CSS 2.0	div 块+CSS，HTML与CSS结构分离的思想，网页变得简单，方便SEO
CSS 2.1	浮动，定位
CSS 3.0	圆角，阴影、动画…浏览器兼容性

03 CSS 快速入门

（一个文件）在 HTML代码中插入 style标签写CSS代码：



CSS快速入门
标题

在这里插入图片描述

但实际开发中，多把 HTML 和 CSS 分离

（两个文件）只需在HTML代码中使用 link 标签，然后指向 CSS 文件：

在这里插入图片描述效果也是一样的，但更建议使用这种方式（ HTML + CSS 分离）

CSS的优势：

内容和表现分离（ HTML 和 CSS 分离）；
网页结构表现统一，可以实现复用；
样式十分丰富；
建议使用独立于 HTML 的 CSS 文件；
利用 SEO ，容易被搜索引擎收录；

04 CSS的3种导入方式（使用方式）

外部样式：link 标签（HTML文件+CSS文件）；
内部样式：style 标签；
行内样式：在标签元素中加入一个 style 属性



CSS的3种导入方式

拓展：外部样式有两种写法

链接式：link 标签；
导入式（CSS 2.1 特有）：
link 和 import 之间的区别?

差别 1：

本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。

差别 2：

加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS
的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。

差别 3：

兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link标签无此问题。

差别 4：

使用 dom(document object model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom
去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。

05 选择器 👇

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

基本选择器：

1. 标签选择器（）：

选择一类标签



基本选择器
HTML
CSS
JavaScript
OK

在这里插入图片描述

2. 类选择器：

选种所有 class 属性的标签（可跨标签）



类选择器
No.1
No.2
No.3

可以不同类型的多个标签归类，实现同一效果
在这里插入图片描述

3. id 选择器：

id 全局唯一，不可重复



id选择器
标题1
标题2
标题3

显示优先级：id > class > 标签

在这里插入图片描述

层次选择器：

如果想实现如下层次图中的某个层次，可以考虑以下选择器
在这里插入图片描述



层次选择器
p1
p2
p3
p4
p5
p4
p5
p6

1. 后代选择器

在某个元素的后面，（祖爷爷爷爷爸爸儿子都有）

/*后代选择器*/
body p{background: yellow;
}

在这里插入图片描述

2. 子选择器

一代，( 只有儿子有 )

/*子选择器*/
body>p{background: cyan;
}

在这里插入图片描述

3. 相邻兄弟选择器

同辈都有，对下不对上（只对代码之下的有用）

/*相邻兄弟选择器：只有一个，相邻（向下）*/
.brother + p{background: cadetblue;
}

在这里插入图片描述

4. 通用选择器

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

/*通用选择器：当前选中元素的向下的所有兄弟元素*/
.active ~ p{background: orange;
}

在这里插入图片描述

结构伪类选择器：

标签 + 冒号：以构成伪类选择器：



结构伪类选择器

p1
p2
p3
li1
li2
li3

在这里插入图片描述

鼠标移到上面变色：

属性选择器（常用 ※）：

id 和 class 结合起来的选择器，支持正则表达式，日常开发中最常用

属性选择器：(支持正则表达式)标签[属性名=属性值]{}= 绝对等于*= 包含这个元素 (通配符)^= 开头等于$= 结尾等于

完整代码：（下文有解读）



属性选择器

123456789

代码解读：

构建数字块图

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

选中存在 id 属性的元素

/*存在id属性的元素*/
a[id]{background: cyan;
}

在这里插入图片描述

选中 id 等于 first 的元素

/*id等于first的元素*/
a[id=first]{background: cyan;
}

在这里插入图片描述

选中 class 中有 links 的元素

/*class中有links的元素*/
a[class*="links"]{background: cyan;
}

在这里插入图片描述

选中href中以https开头的元素

/*选中href中以https开头的元素*/
a[href^="https"]{background: cyan;
}

在这里插入图片描述

选中href中以pdf结尾的元素

/*选中href中以pdf结尾的元素*/
a[href$=pdf]{background:cyan;
}

在这里插入图片描述

=   绝对等于
*=   包含这个元素 (通配符)
^=   开头等于
$=   结尾等于

06 网页美化

为什么要美化网页？

有效传递页面信息；
页面美观吸引用户；
凸显页面主题；
提高用户体验；

👉 字体样式

font：



字体样式



CSS是什么？

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。

1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。


W3C:World Wide Web Consortium

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

span 标签：重点要突出的字，用 span 套起来



span标签
欢迎学习Java

效果如下:

在这里插入图片描述

👉 文本样式

颜色：color rgb rgba
文本对齐方式：text - align center
首行缩进 text - indent : 2em
行高：line - height :
装饰 : text - decoration
文本图片水平对齐 : vertical - align : middle



文本样式
CSS是什么？

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。

1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。


W3C:World Wide Web Consortium

miaobanli
miaobanli
miaobanli
超链接

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

文本阴影：https://www.w3school.com.cn/css/css_text_shadow.asp
a{text-shadow:#3cc7f2 10px 10px 10px;/*  阴影颜色 水平偏移 垂直偏移 阴影半径 */
}

👉 超链接伪类（悬浮效果）

a:hover { }



超链接伪类


CSDN

苗半里

鼠标悬浮（未点击）及鼠标点击（未释放）效果
在这里插入图片描述

👉 列表样式

初始样式：
在这里插入图片描述
HTML ：



列表样式

全部商品分类
图书  音像  数字商品
家用电器  手机  数码
电脑  办公
家居  家装  厨具
服装鞋帽  个护化妆
礼品箱包  钟表  珠宝
食品饮料  保健食品
彩票  旅行  充值  票务

+ CSS:

#nav{width:230px;background: gray;
}
.title{font-size:18px;font-weight:bold;text-indent:1em;line-height:35px;background: indianred;
}
/* list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形*/
ul{background:gray ;
}
ul li{height:30px;list-style:none;
}
a{text-decoration:none;font-size:14px;color:black;
}
a:hover{color:orange;text-decoration: underline;
}

HTML + CSS 修改后：

在这里插入图片描述

👉 背景图像及渐变

图像背景：



图片背景

在这里插入图片描述

渐变：

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

在这里插入图片描述

👉 可以从这个网站 https://www.grabient.com里面调样式复制 CSS 代码

07 盒子模型

👉 什么是盒子模型？

我们在查看网页源代码（在一个页面点击检查）时，总能发现如下图这样一个"盒子"

在这里插入图片描述
margin ：外边距
padding ：内边距
border ：边框

盒子大小 = margin + border + padding + 内容宽度

👉 边框 border

边框的粗细
边框的样式
边框的颜色



Title


登录界面
用户名：
密码：
邮箱：

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

👉 外边距&内边距 margin&padding



Title



登录界面
用户名：
密码：
邮箱：

在这里插入图片描述

👉 圆角边框



Title

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

👉 阴影



Title

在这里插入图片描述

08 浮动

display ：方向不可控制
float : 浮动起来可能会脱离标准文档流，要解决父级边框塌陷问题



Title


div块元素
span行内元素

在这里插入图片描述

如果有父级边框塌陷问题：比如设置了浮动以后，只有浮动元素，而原来的块元素收缩了，可以增加 clear：

clear : right ; 右侧不允许有浮动元素
clear : left ; 左侧不允许有浮动元素
clear : both ; 两侧不允许有浮动元素
clear : none ; 允许有浮动

解决方案：

增加父级元素的高度（不建议）；
增加一个空的 div 标签然后清除浮动；
overflow 在父级元素被中增加一个 overflow 属性

overflow : hidden; 超出规定大小后就隐藏
overflow : scroll; 超出规定大小就有滚动条，自动溢出
overflow : auto;

父类添加一个伪类 after (推荐)

father:after{content:'';display:block;clear:both;
}

09 定位

👉 相对定位 relative

相对于自己原来的位置进行偏移
- position : relative
- top : -20px;
- left : 20px;
- bottom : -10px;
- right : 20px;
原来位置会被保留



Title


第一个盒子
第二个盒子
第三个盒子

原来是这样：
在这里插入图片描述
相对位移后：

👉 绝对定位 absolute

基于 XXX 定位，上下左右位移
- position : absolute
- top : -20px;
- left : 20px;
- bottom : -10px;
- right : 20px;

没有父级元素定位时，相对于浏览器定位；
假设父级元素存在定位，通常会相对父级元素进行位移；
原来位置不会被保留

在这里插入图片描述

👉 固定定位 fixed

固定在网页的某个位置，即使滚动条滚动，也始终保持在原来的位置



Title


div1
div2

绿色的块是绝对定位，滚动条一滑就跟着跑了
粉色的是固定定位，即使滚动条滑了，也是固定在右下角不动的
在这里插入图片描述

👉 z - index

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index 默认是 0

使用前提：

（1）必须在定位元素（position:relative/absolute/fixed/sticky）上才有效

（2）可以有负值

（3）不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染.

在这里插入图片描述

z-index不起作用的几种情形：

当前设置z-index元素的父元素 position:relative/absolute;
当前设置z-index元素为浮动元素。

示例：文字及背景悬浮在图片之上：
在这里插入图片描述



Title


大展宏兔

👉 更多详细介绍

10 动画

https://www.runoob.com/css3/css3-animations.html
https://www.html5tricks.com/tag/css3动画/

>>> 开发技巧 <<<

👉 CSS-菜鸟教程

如果看到比较好看的页面想要模仿，可以保存网页源码来仿照着写；
也可以网上搜索一些源码仿照（源码之家模板之家等）

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：一文理解JVM虚拟机

下一篇：PyQt5开发环境搭建 1.2 简单的例子

走进 CSS

文章目录

01 CSS 是什么？

02 CSS的发展史

03 CSS 快速入门

标题

04 CSS的3种导入方式（使用方式）

05 选择器 👇

基本选择器：

1. 标签选择器（ ）：

HTML

CSS

JavaScript

2. 类选择器：

No.1

No.2

3. id 选择器：

标题1

标题2

标题3

层次选择器：

1. 后代选择器

2. 子选择器

3. 相邻兄弟选择器

4. 通用选择器

结构伪类选择器：

属性选择器 （常用 ※）：

06 网页美化

👉 字体样式

CSS是什么？

👉 文本样式

CSS是什么？

👉 超链接伪类（悬浮效果）

👉 列表样式

全部商品分类

👉 背景图像及渐变

07 盒子模型

👉 什么是盒子模型？

👉 边框 border

登录界面

👉 外边距&内边距 margin&padding

登录界面

👉 圆角边框

👉 阴影

08 浮动

09 定位

👉 相对定位 relative

👉 绝对定位 absolute

👉 固定定位 fixed

👉 z - index

10 动画

>>> 开发技巧 <<<

相关内容

热门资讯

1. 标签选择器（）：

属性选择器（常用 ※）：