CSS零基础入门详解教程

一、什么是CSS

1.概念

CSS（层叠样式表，Cascading Style Sheets） 是一种用于描述网页外观和格式的样式表语言。它与 HTML 结合使用，控制网页的布局、颜色、字体、动画等视觉效果。CSS 的核心目标是实现内容与表现的分离，使开发者能够更高效地管理和维护网页样式。

2.文件后缀：.css

3.语法构成：

CSS 规则由两个主要的部分构成:

选择器，一条或多条声明（样式）

选择器通常是您需要改变样式的 HTML 元素； 每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

在里加入

标题内容

哈哈哈

二、CSS的引入方式

1.内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。

温馨提示：缺乏整体性和规划性，不利于维护，维护成本高。

我是内联样式的方案

2.内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

我是内部样式的方案

我是第二个p标签

我是第二个p标签

我是第4个p标签

3.外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个html页面使用 标签链接到样式表。 标签在(文档的)头部。

herf选择设计好的css文件

p{

color: chartreuse;

font-size: 25px;

}

三、选择器

1.全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化。

在头部添加

2.元素选择器

HTML文档中的元素，p、b、div、a、img、body等 标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。 再比如说，我想让“学完前端，继续学C#”这句话中的“前端”两个变为红色字体，那么我可以用 标签把“前端”这两个字围起来，然后给 标签加一个标签选择器。

我是第一个

我是第二个

标签

我是第三个

学完前端，继续学C#

温馨提示：

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等；无论这个标签藏的多深，一定能够被选择上；选择的所有，而不是一个

3.类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用 优点：灵活。

class属性的特点：

类选择器可以被多种标签使用；类名不能以数字开头；同一个标签可以使用多个类选择器。用空格隔开。

大家好

我很好

我emo了!

我哭泣了！！！！

开心了

4.ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义。

Hello

文本一

文本二

特别强调：

ID是唯一的ID不能以数字开头

5.合并选择器

语法：选择器1,选择器2,......{}

作用：提取共同的样式，减少重复代码。

我是p标签

我是标题标签

6.*-*选择器的优先级

CSS中,权重用数字衡量：

元素选择器的权重为:1class选择器的权重为:10id选择器的权重为:100内联样式的权重为:1000

优先级从高到低:行内样式 > ID选择器 > 类选择器 > 元素选择器

全局选择器：*

元素选择器：标签名称

类选择器：class属性名(.)

id局选择器：id属性名(#)

行内样式1000 > ID选择器100 > 类选择器10 > 元素选择器1

我是p标签的内容

我是p1标签的内容

若是同级别，后面的会把前面的覆盖掉！！！

四、属性

1.字体属性

CSS字体属性定义字体，颜色、大小，加粗，文字样式。

1.1 color（颜色）

规定文本的颜色。

rgba:a是透明度。

1.2 font-size（大小）

设置文本的大小。

温馨提示： chrome浏览器接受最小字体是12px。

1.3 font-weight（粗细）

设置文本的粗细。

值描述bold定义粗体字符bolder定义更粗的字符lighter定义更细的字符100~900定义由细到粗 400等同于默认，700等同于bold

1.4 font-style（样式）

指定文本的字体样式。

值描述normal默认值italic定义斜体字

1.5 font-family（字体）

指定一个元素的字体。

温馨提示：

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

我来学习字体属性

2.背景属性

CSS的背景属性主要有以下几种：

属性描述background-color设置背景颜色background-image设置背景图片background-position设置背景显示位置background-report设置背景图片如何填充background-size设置背景大小属性

2.1 background-color

该属性设置背景颜色。

2.2 background-image

设置元素的背景图像。

元素的背景是元素的总大小，包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分。

2.3 background-repeat

该属性设置如何平铺背景图像。默认是水平，垂直都平铺。

2.4 background-size

该属性设置背景图像的大小。

2.5 background-position

该属性设置背景图像的起始位置，其默认值是：0% 0%。

3.文本属性

控制文本的显示效果。

3.1 text-align

指定元素文本的水平对齐方式。

3.2 text-decoration

规定添加到文本的修饰、下划线、上划线、删除线等。

我是一个标题内容

3.3 text-transform

控制文本的大小写。

我是一个标题内容

helloworld

3.4 text-indent

规定文本块中首行文本缩进。

我是一个标题内容

helloworld

我的呼吸在灯光的波纹里，遥遥地望着村庄边畔的断崖，断崖仍然在它的世界里。

断崖的形象在我的意念里。

我为它在我的思维里安排了一个位置，支撑起我的信念，滤得我的目光越来越纯净。

在城市的绿色和乡村的绿色之外，还有一块心灵的绿色，它茂盛地长在每个人的心灵沃土上。

它不以美丽的外表示人，它独自体现着生命的本质，既承受阳光雨露，呕经历电闪雷鸣。

它无形却胜过有形，因为一个人的心灵如果失去了绿色，也就失去了善意，失去了真诚，失去了生机和活力。

生命只有宽度，没有长度，只有在宽度里发挥弹性，才能保证生命的质量。

4.表格属性

4.1 表格边框

指定CSS表格边框，使用border属性。

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

4.2 折叠边框

border-callapse属性设置表格的边框是否被折叠成一个单一二点边框或隔开。

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

4.3 表格宽度和高度

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

4.4 表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式，向左，向右，或中心。

vertical-align设置垂直对齐

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

4.5 表格填充

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

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

4.6 表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色。

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

五、关系选择器

1. 后代选择器

1.1 定义：

选择所有被E元素包含的F元素，中间用空格隔开。

1.2 语法：

2. 子代选择器

2.1 定义：

选择所有元素作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。

2.2 语法：

3.相邻兄弟选择器

3.1 定义：

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择。

3.2 语法：

我是标题

我是内容1

我是内容2

4.通用兄弟选择器

4.1 定义：

选择E元素之后的所有元素F，作用于多个元素，用~隔开！！只能向下选择。

4.2 语法：

上面的内容

我是标题

我是内容1

我是内容2

我是内容3

六、CSS盒子模型（Box Model）

1. 概念

所有HTML元素可以看作盒子，在CSS中，“box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括:

1.1外边距(margin)，

margin 属性接受 1~4 个值。每个值可以是 ，，或auto。

当只指定一个值时，该值会统一应用到全部四个边的外边距上。

指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。

指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。

指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

可取值：

:以固定值为外边距。

:相对于包含块的宽度，以百分比值为外边距。

auto:让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

1.2边框(border)，

1.3内边距(padding)，

1.4实际内容(content)

2.图解：

​

Margin(外边距)-清除边框外的区域，外边距是透明的；Border(边框)-围绕在内边距和内容外的边框；Padding(内边距)-清除内容周围的区域，内边距是透明的；（如果有两个值：第一个值道标山下边距，第二个代表左右边距。）Content(内容)-盒子的内容，显示文本和图像。

七、弹性盒模型（flex box）

1. 定义：

弹性盒子是 CSS3 的一种新的布局模式； CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。

2. 内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex ilem)组成；

弹性容器通过设置display属性的值为flex将其定义为弹性容器；

弹性容器内包含了一个或多个弹性子元素

​

​

3. 父元素上的属性

3.1 display属性

display:flex; 开启弹性盒

display:flex; 属性设置后子元素默认水平排列

3.2 flex-direction属性

3.2.1 定义

flex-direction属性指定了弹性元素在父容器中的位置。

3.2.2 语法

​

row：横向从左到右排列（左对齐），默认的排列方式；row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面；column：纵向排列；column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

3.3 justify-content属性（水平对齐）

3.3.1定义

内容对齐(justify-content)属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐。

3.3.2语法

​

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

3.4 align-items属性（垂直对齐）

3.4.1 定义

align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

3.4.2 语法

​

flex-start 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界flex-end 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界center 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)

4.子元素上的属性

4.1 flex

flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间；（权重分配）默认为0，即如果存在剩余空间，也不放大如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%

八、浮动：float

​

1. 浮动的定义

float 属性定义元素在哪个方向浮动，任何元素都可以浮动。

值描述left元素向左浮动right元素向右浮动

2. 浮动的原理

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

3. 元素向左浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

​

4.元素向右浮动

​

​

5. 所有元素向左浮动

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右。

​

​

​

• 导航一
• 导航2
• 导航3
• 导航4

6. 当容器不足时

当容器不足以横向摆放内容时候，会在下一行摆放。

​

• 导航一
• 导航2
• 导航3
• 导航4

九、清除浮动

​

1. 浮动的副作用

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，

浮动元素会造成父元素高度塌陷后续元素会受到影响

​

​

2. 清除浮动

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用

解决方案有很多种：

父元素设置高度受影响的元素增加clear属性overflow清除浮动伪对象方式

2.1 父元素设置高度

如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身的大小。

​

2.2 给受影响的元素增加clear属性

clear:both;

​

2.3 overflow清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用overiow 清除浮动

这种情况下，父布局不能设置高度

父级标签的样式里面同时添加:overow:hidden; clear:both;

​

2.4 伪对象方式 after

如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理。

为父标签添加伪类 after,设置空的内容，并且使用 clear:both; 。

这种情况下，父布局不能设置高度。

.container::after {

content: "";

display: block;

clear: both;

}

​

十、定位 position

​

1. 定义

position属性指定了元素的定位类型。

值 描述

relative相对定位absolute绝对定位fixed固定定位

其中，绝对定位和固定定位会脱离文档流。

设置定位之后:可以使用四个方向值进行调整位置:left、top、right、bottom。

1.2 相对定位 relative

​

1.3 绝对定位 absolute

每一个绝对定位都是一个图层，会有压盖的情况。

​

1.4 固定定位 fixed

固定定位不会随着页面的滚动而滚动。

​

固定定位不会动

绝对定位会动

相对定位会动

温馨提示： 设置定位之后，相对定位和绝对定位他是相对于“ 具有定位的父级元素 ”进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

1.5 设置元素的堆叠顺序 z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

十一、CSS3新特性

​

1. 圆角 border-radius

使用 CSS3 border-radius 属性，你可以给任何元素制作"圆角

border-radius 属性，可以使用以下规则:

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角三个值: 第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角一个值: 四个圆角值相同

​

2. 阴影 box-shadow

box-shandow向框添加一个或多个阴影。​

​

​

十二、动画 @keyframes

​

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词"from"和“to"，等同于 0% 和 100%。

0% 是动画的开始，100%是动画的完成。

1. @keyframes创建动画

​

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

2. animation执行动画

​

​

​

​

3. 呼吸效果

十三、媒体查询

媒体查询能使页面在不同任终端设备下达到不同的效果； 慧体查询会根据设备的大小自动识别加载不同的样式。

1. 设置meta标签

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

参数解释：

width= device-width 宽度等于当前设备的宽度initial-scale 初始的缩放比例(默认设置为1.0)maximum-scale 允许用户缩放到的最大比例(默认设置为1.0)user-scalable 用户是否可以手动缩放(默认设置为no)

2.媒体查询语法

十四、雪碧图 Sprite

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

优点：

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

原理：

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

实例：

1.jpg：

十五、字体图标

常用字体图标库：阿里字体图标库

1. 优点

轻量性:加载速度快，减少http请求灵活性:可以利用CSS设置大小颜色尊兼容性:网页字体支持所有现代浏览器，包括IE低版本

2. 使用字体图标

注册账号井登录选取閣标或搜索图标添加购物车下载代码选择 font-class 引用