当前位置：首页 > news >正文

web前端之CSS

news 文章来源：https://blog.csdn.net/you_well/article/details/132076046 2025/5/15 8:08:58

文章目录

一、CSS简介
- - 1.1 CSS语法规则
二、CSS的引用方法
- 2.1 定义行内样式表
- 2.2定义内部样式表
- 2.3链入外部样式表
- 2.4导入外部样式表
三、CSS选择符
- 3.1 基本选择符
- - 3.1.1 标签选择符
  - 3.1.2 class类选择符
  - 3.1.3 id选择符
- 3.2 复合选择符
- - 3.2.1 交集选择符（合并选择器）
  - 3.2.2 并集选择符
  - 3.2.3 后代选择符
- 3.3 通配符选择符
- 3.4 特殊选择符
- - 3.4.1伪类选择符
  - 3.4.2 伪元素
- 3.5 选择器的优先级
四、CSS属性单位
- 4.1 字体属性
- - 4.1.1 color
  - 4.1.2 font-size
  - 4.1.3 font-weight (设置文本粗细)
  - 4.1.4 font-style(指定文本字体样式)
  - 4.1.5 font-family(指定一个元素的字体)
- 4.2 背景属性
- - 4.2.1 background-color(设置背景颜色)
  - 4.2.2 background-image(设置背景图片)
  - 4.2.3 background-repeat(设置如何平铺背景图像)
  - 4.2.4 background-size(设置背景图像大小)
  - 4.2.5 background-position(设置背景图像起始位置，默认值0% 0%)
- 4.3 文本属性
- - 4.3.1 text-align(指定元素对齐方式)
  - 4.3.2 text-decoration(添加文本的修饰)
  - 4.3.3 text-transform(控制文本的大小写)
  - 4.3.4 text-indent(规定文本块中首行文本的缩进)
- 4.4 表格属性
- - 4.4.1 border(表格边框)
  - 4.4.2 border-collapse(折叠边框)
  - 4.4.3 text-align(表格文字对齐)
  - 4.4.4 表格填充
  - 4.4.5 表格颜色
五、CSS盒子模型
- 5.1 盒子模型
- 5.2 弹性盒子模型
- - 5.2.1 flex-direction属性
  - 5.2.2 justify-content(内容对齐)
  - 5.2.3 align-items 对齐方式
六、浮动
七、定位及CSS新特性
- 7.1 relative(相对定位)
- 7.2 absolute(绝对定位)
- 7.3 fixed(固定定位)
- 7.4 z-index（设置元素堆叠顺序）
- 7.5 border-radius（圆角）
- 7.6 shadow（阴影）
八、动画
- 8.1 @keyframes创建动画
- 8.2 animation执行动画
九、媒体查询
- 9.1 meta标签
十、雪碧图

一、CSS简介

CSS，层叠样式表单，又称级联样式表，简称样式表，用于html文档中元素样式的定义。
CSS文件后缀名.css
注释：/* …*/

1.1 CSS语法规则

主要由2个部分构成，选择器以及一条或多条声明。
在这里插入图片描述
每条声明由一个属性或一个值组成。
属性是希望设置的样式属性，每个属性有一个值，属性和值被冒号分开。

<style>h1{color: blue;font-size:12px;}
</style>

以上代码中，h1是选择器，表明选择的元素。

二、CSS的引用方法

2.1 定义行内样式表

定义行内样式就是通过直接设置各个元素的style属性，从而达到设置样式的目的。需要在相关标签内使用style属性，style属性可以包含任何css属性。

<body><p style="font-size:18px;color:red">此行文字被style定义为红色显示</p><p>此行文字没有被style属性定义</p>
</body>

2.2定义内部样式表

指的是样式表的定义处于html文件一个单独的区域，若单个文档需要特殊的样式时，就应该使用内部样式表，可以用《style》标签定义在文档的头部。
注意：内部样式表处于页面的《head》《/head》之间

<head><style>p{color:red;font-size:18px;}</style>
</head>
<body><p >此行文字被style定义为红色显示</p><p>此行文字被style属性定义</p>
</body>

2.3链入外部样式表

外部样式表通过在某个html页面中添加链接的方式生效。
外部样式表把声明的样式放在样式文件中，页面需要修改样式时，通过link标签链接外部样式表文件。

<link rel="stylesheet" type="text/css" href="xxx.css">

样式表文件的格式
样式表文件的内容是定义的样式表，不包含html标签。

2.4导入外部样式表

指在内部样式表的

<style type="text/css">
<!--@import url("外部样式表的文件名1.css");
-->
</style>

链入外样式表与导入外部样式表的本质区别：

导入方式实在浏览器下载HTML文件时将样式表文件的全部内容复制到@import关键字位置，以替换该关键字。
链入方式尽在HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接样式表文件读取需要的内容，但是并不进行替换。

三、CSS选择符

3.1 基本选择符

3.1.1 标签选择符

以文档对象模型作为选择符，即选择某个html标签为对象，设置其样式规则，所有的标签都可以作为选择符，样式如下：

E{/*CSS代码*/
}

E表示网页元素。
具体例子：

body{font-size:13px;}
div{border:3px double #f00;width:300px;}

3.1.2 class类选择符

class类选择符的名称可以由用户自定义，使用时必须使用英文.（点）进行标识。

.blue{color: #00f;
}
p{border:2px dashed #f00;width:28px;
}

应用class类选择符的代码如下：

<h3 class="blue">标题可以应用样式，蓝色</h3>
<p class="blue">段落可以应用样式，蓝色</h3>

同一个标签可以使用多个类选择器，用空格隔开，代码如下：

<h3 class="content size"> 这是一个标题</h3>

3.1.3 id选择符

针对某一个特定标签，一次只能使用一次。
css中定义id选择符时要在id名称前加上一个#号。

#id 是定义的id选择符名称，该选择符名称在一个文档中是唯一的，不能以数字开头，只对页面中唯一元素进行样式定义。

#top{line-height:20px;font-size:24px;color: #f00;
}

应用id选择符的代码如下：

<div id="top">尝试一下</div>

3.2 复合选择符

3.2.1 交集选择符（合并选择器）

由两个选择符直接连接构成，其结果是选中两者各自元素范围的交集。第一个选择符必须是标签选择符，第二个选择符必须是class类选择符或id选择符。

.p,.class {Color:red;font-size:16px;}

p是标签，class是类选择符。

3.2.2 并集选择符

同时选中各个基本选择符所选择的范围，任何形式的基本选择符都可以作为并集选择符的一部分。

h1 span {Color:red;font-size:16px;}

h1 和 span均为标签

3.2.3 后代选择符

选择所有被h1元素包含的span元素，中间用空格隔开

h1 span {Color:red;font-size:16px;}

外层标签是h1，内层标签是span，span标签成为h1标签的后代。

3.3 通配符选择符

*表示定义所有元素的样式
格式如下：

*{CSS代码}

例如：

*{	/*    *表示全局变量     */margin:1px;	/*外边距设置为1*/padding:2px; /*内边距设置为2*/
}

3.4 特殊选择符

3.4.1伪类选择符

a:link{color:#ff0000;}	/*未访问的超链接状态*/
a:visited{color:#00ff00;} /*已访问链接状态*/
a:hover{color:#ff00ff;} /*鼠标悬停在超链接上的状态*/
a:active{color:#0000ff;} /*被激活的超链接状态*/

注意要把active样式写到hover样式后面，否则active样式是不生效的。

3.4.2 伪元素

语法格式：

选择符：伪元素{属性：属性值}

:first-letter 将特殊样式添加到文本的首字母
:first-line 将特殊样式添加到文本的首行
:before 在某元素之前插入内容
:after 在某元素之后插入内容

3.5 选择器的优先级

CSS中，权重用数字衡量。

优先级从高到低：行内样式1000>ID选择器100>类选择器10>元素选择器1

四、CSS属性单位

4.1 字体属性

4.1.1 color

<p>学习字体属性</p>
p{ color: red;		/*红色*/}
p{ color: #ff0000;	/*红色*/}
p{ color: rgb(0,0,0);  /*黑色*/}

4.1.2 font-size

<p>学习字体属性</p>
p{font-size:14px; }

4.1.3 font-weight (设置文本粗细)

在这里插入图片描述

4.1.4 font-style(指定文本字体样式)

在这里插入图片描述

4.1.5 font-family(指定一个元素的字体)

每个值用逗号分开
如果字体包含空格，它必须加上引号。

font-family:"Simsun","SimHei";

4.2 背景属性

4.2.1 background-color(设置背景颜色)

.box1{width:400px;height:400px;background-color:#f00000;}

4.2.2 background-image(设置背景图片)

.box1{width:400px;height:400px;background-image: url(路径);}

4.2.3 background-repeat(设置如何平铺背景图像)

在这里插入图片描述

.box1{width:400px;height:400px;background-image: url(路径);background-repeat: repeat-y;}

4.2.4 background-size(设置背景图像大小)

在这里插入图片描述

.box1{width:400px;height:400px;background-image: url(路径);background-repeat: repeat-y;background-size: 100% 100%;}

4.2.5 background-position(设置背景图像起始位置，默认值0% 0%)

在这里插入图片描述

4.3 文本属性

4.3.1 text-align(指定元素对齐方式)

在这里插入图片描述

h1 {text-align: left;}

4.3.2 text-decoration(添加文本的修饰)

text-decoration

h1{text-decoration:overline;}

4.3.3 text-transform(控制文本的大小写)

在这里插入图片描述

h1{text-transform:uppercase;}

4.3.4 text-indent(规定文本块中首行文本的缩进)

p{text-indent:50px;
}

4.4 表格属性

4.4.1 border(表格边框)

table,td{border:1px solid black;}

4.4.2 border-collapse(折叠边框)

设置表格的边框是否被折叠成一个单一的边框或隔开

table{border-collapse:collapse;}

4.4.3 text-align(表格文字对齐)

设置水平对齐方式，向左、右、中心

td{text-align:right;}

设置垂直对齐属性

td{height:50px;vertial-align:bottom;}

4.4.4 表格填充

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

td{padding:15px;}

4.4.5 表格颜色

下面指定边框的颜色和th元素的文本和颜色

table,td,th{ border:1px solid green;}
td{background-color:green;color:white;}

五、CSS盒子模型

5.1 盒子模型

概念
所有html元素可以看作盒子，css盒子模型本质上是一个盒子，封装周围的html元素，它包括外边距（margin），边框（border），内边距（padding），实际内容（content）。
在这里插入图片描述

Margin(外边距)- 清除边框外的区域，外边距是透明的，第一个值代表上下，第二个值代表左右
Border(边框)-围绕在内边距和内容外的边框
Padding(内边距)- 清除内容周围的区域，第一个值代表上下，第二个值代表左右
Content(内容)-盒子的内容，显示文本和图像

5.2 弹性盒子模型

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成.
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素

5.2.1 flex-direction属性

定义：指定了弹性子元素在父容器中的位置
语法：

flex-direction:row;

row:横向从左到右排列左对产)默认的排列方式
row-reverse:反转横向排列(右对齐，从后往前排，最后一项排在最前面
column:纵向排列
column-reverse:反转纵向排列，从后往前排，最后一项排在最上面

5.2.2 justify-content(内容对齐)

flex-stat 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平产摆放
center弹性项目居中紧挨着填充(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出)

5.2.3 align-items 对齐方式

在这里插入图片描述

六、浮动

float属性定义元素在哪儿个方向浮动，任何元素都可以浮动。
在这里插入图片描述
浮动的原理：

浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动
元素向左浮动

元素向右浮动

当容器不足时

七、定位及CSS新特性

7.1 relative(相对定位)

不脱离文档流

<div class="box"></div>
.box{width:100px;height:100px;background-color:red;position:relative;left:100px;}

7.2 absolute(绝对定位)

脱离文档流

<div class="box1"></div>
<div class="box2"></div>
.box1{width:100px;height:100px;background-color:red;position:absolute;left:100px;}
.box2{width:200px;height:200px;background-color:red;}

7.3 fixed(固定定位)

脱离文档流

<div class="box"></div>
.box{width:100px;height:100px;background-color:red;position:fixed;left:100px;}

7.4 z-index（设置元素堆叠顺序）

<div class="box1"></div>
<div class="box2"></div>
.box1{width:100px;height:100px;background-color:red;position:absolute;left:100px;z-index:100;}
.box2{width:200px;height:200px;background-color:red;z-index:10;}

7.5 border-radius（圆角）

<div class="box"></div>
.box{width:100px;height:100px;background-color:red;border-radius:10px;}

使用规则：
在这里插入图片描述

7.6 shadow（阴影）

box-shadow:h-shadow或v-shadow或blur或color;

在这里插入图片描述

八、动画

8.1 @keyframes创建动画

@keyframes name{from|0%{CSS样式}percent{CSS样式}to|100%{CSS样式}}

name：为动画名称，开发人员自己命名
percent：为百分比值，可以添加多个百分比值
例如：

8.2 animation执行动画

animation: name duration timing-function delay iteration-count direction;

在这里插入图片描述

切换背景颜色

<div class="animation"></div>
.animation{width:100px;height:100px;background-color:red;animation:anima 5s linear 5s infinite;}
.animation:hover{animation-play-state:paused;}
@keyframes anima{0%{background-color:red;}50%{background-color:green;}100%{background-color:blueviolet;}}

九、媒体查询

9.1 meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放，在标签里加入这个meta标签。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

加入以上代码就会按设置的宽度不变，如果不加则会按比例缩放。
参数解释

十、雪碧图

CSS Sprite也叫CSS精灵图，CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一个大图中去。
优点

减少图片的字节
减少网页的http请求，从而大大提高页面的性能

原理

通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置

文章目录

一、CSS简介

1.1 CSS语法规则

二、CSS的引用方法

2.1 定义行内样式表

2.2定义内部样式表

2.3链入外部样式表

2.4导入外部样式表

三、CSS选择符

3.1 基本选择符

3.1.1 标签选择符

3.1.2 class类选择符

3.1.3 id选择符

3.2 复合选择符

3.2.1 交集选择符（合并选择器）

3.2.2 并集选择符

3.2.3 后代选择符

3.3 通配符选择符

3.4 特殊选择符

3.4.1伪类选择符

3.4.2 伪元素

3.5 选择器的优先级

四、CSS属性单位

4.1 字体属性

4.1.1 color

4.1.2 font-size

4.1.3 font-weight (设置文本粗细)

4.1.4 font-style(指定文本字体样式)

4.1.5 font-family(指定一个元素的字体)

4.2 背景属性

4.2.1 background-color(设置背景颜色)

4.2.2 background-image(设置背景图片)

4.2.3 background-repeat(设置如何平铺背景图像)

4.2.4 background-size(设置背景图像大小)

4.2.5 background-position(设置背景图像起始位置，默认值0% 0%)

4.3 文本属性

4.3.1 text-align(指定元素对齐方式)

4.3.2 text-decoration(添加文本的修饰)

4.3.3 text-transform(控制文本的大小写)

4.3.4 text-indent(规定文本块中首行文本的缩进)

4.4 表格属性

4.4.1 border(表格边框)

4.4.2 border-collapse(折叠边框)

4.4.3 text-align(表格文字对齐)

4.4.4 表格填充

4.4.5 表格颜色

五、CSS盒子模型

5.1 盒子模型

5.2 弹性盒子模型

5.2.1 flex-direction属性

5.2.2 justify-content(内容对齐)

5.2.3 align-items 对齐方式

六、浮动

七、定位及CSS新特性

7.1 relative(相对定位)

7.2 absolute(绝对定位)

7.3 fixed(固定定位)

7.4 z-index（设置元素堆叠顺序）

7.5 border-radius（圆角）

7.6 shadow（阴影）

八、动画

8.1 @keyframes创建动画

8.2 animation执行动画

九、媒体查询

9.1 meta标签

十、雪碧图

相关文章：