CSS基本知识

最新推荐文章于 2024-08-17 22:24:13 发布

学代码的咸鱼

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量1.1k

点赞数 19

分类专栏：前端简单介绍文章标签： css 前端

本文链接：https://blog.csdn.net/qq_52154068/article/details/135362875

版权

前端简单介绍专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. CSS 是什么

CSS叫做层叠样式表。CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果。能够做到页面的样式和结构分离。

2. 基本语法规范

在这里插入图片描述
举个例子：

这里的style标签我们一般设置在head标签里。

可以看出被选择器修饰的和没被修饰的不同。

3. 引入方式

3.1 内部样式表

写在 style 标签中，嵌入到 html 内部，理论上来说 style 放到 html 的哪里都行，但是一般都是放到 head 标签中。
在这里插入图片描述

3.2 行内样式表

通过 style 属性，来指定某个标签的样式，只适合于写简单样式，只针对某个标签生效。
在这里插入图片描述

3.3 外部样式

在这里插入图片描述
举个例子：

我们在这里创建一个css文件，在里面把样式写好。

然后引入，就可以看到效果了。

4. 选择器

4.1 选择器的功能

选中页面中指定的标签元素，因为要先选中元素，才能设置元素的属性。

4.2 选择器的种类

在这里插入图片描述

4.3 基础选择器

4.3.1 标签选择器

在这里插入图片描述
上面写的例子就是标签选择器。

4.3.2 类选择器

在这里插入图片描述
举个例子：

我们用class来取名，就可以指定了。

代码示例: 使用多个类名
注意: 一个标签可以同时使用多个类名，这样做可以把相同的属性提取出来, 达到简化代码的效果。

4.3.3 id 选择器

在这里插入图片描述
举个例子：

它的使用方法和类选择器类似，区别是：姓名是类选择器, 可以重复。身份证号码是 id 选择器, 是唯一的。

4.3.4 通配符选择器

在这里插入图片描述
一般可以用来设置背景颜色。

4.4 复合选择器

4.4.1 后代选择器

选择某个父元素中的某个子元素，或者是孙子级别的。
在这里插入图片描述
举个例子：

把 ol 中的 li 修改颜色, 不影响 ul 中的li

把父子关系都写上就可以区别开了。

元素 2 不一定非是儿子, 也可以是孙子。
在这里插入图片描述

我们有这两种方法来写。

4.4.2 伪类选择器

在这里插入图片描述
伪类选择器有什么用呢?

在这里插入图片描述
当我们点这种链接时，会变颜色，不点就是黑色。

5. 字体属性

5.1 文本对齐

不光能控制文本对齐，也能控制图片等元素居中或者靠右。
在这里插入图片描述

5.2 文本装饰

在这里插入图片描述

5.3 文本缩进

在这里插入图片描述
这里在介绍一个行高：行高指的是上下文本行之间的基线距离。

6. 背景属性

6.1 背景颜色

在这里插入图片描述

6.2 背景图片

在这里插入图片描述

6.3 背景平铺

在这里插入图片描述
举个例子：

可以看到水平平铺会在行一直铺下去，垂直平铺会在垂直方向按照大小一直铺下去。

6.4 背景位置

在这里插入图片描述

6.5 背景尺寸

在这里插入图片描述

7. 圆角矩形

在这里插入图片描述

这是一个矩形。现在我们可以让它变圆一点。

7.1 展开写法

在这里插入图片描述

8. 元素的显示模式

在这里插入图片描述

8.1 改变显示模式

使用 display 属性可以修改元素的显示模式.
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素。

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

9. 盒模型

在这里插入图片描述

9.1 边框

在这里插入图片描述
举个例子：

结果如下：

但是边框会撑大盒子，width, height 是 500*250，而最终整个盒子大小是 520 * 270。边框10个像素相当于扩大了大小。

9.2 内边距

padding 设置内容和边框之间的距离，默认内容是顶着边框来放置的。
在这里插入图片描述
举个例子：

注意：内边距也会影响到盒子大小(撑大盒子)。使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子(和上面 border 类似)。

9.3 外边距

在这里插入图片描述

9.4 块级元素水平居中

在这里插入图片描述
举个例子：

这个水平居中的方式和 text-align 不一样，margin: auto 是给块级元素用得到。text-align: center 是让行内元素或者行内块元素居中的，另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式。

10. 弹性布局

举个例子：
在这里插入图片描述

可以看到，给span 设置高度，没有效果。

当我们给 div 加上 display:flex 之后，可以看到span 有了高度，不再是 “行内元素了”。

10.1 flex 布局基本概念

flex 是 flexible box 的缩写，意思为 “弹性盒子”。任何一个 html 元素，都可以指定为 display:flex 完成弹性布局。flex 布局的本质是给父盒子添加 display:flex 属性，来控制子盒子的位置和排列方式。
在这里插入图片描述

10.2 justify-content

设置主轴上的子元素排列方式：
在这里插入图片描述
举个例子：

10.3 align-items

设置侧轴上的元素排列方式：
在这里插入图片描述
理解 stretch(拉伸)：这个是 align-content 的默认值，意思是如果子元素没有被显式指定高度，那么就会填充满父元素的高度。

align-items 只能针对单行元素来实现，如果有多行元素，就需要使用 item-contents。