【前端】一文带你了解 CSS

明天不吃。2024-07-28 18:42

文章目录

  • [1. CSS 是什么](#1. CSS 是什么)
  • [2. CSS 引入方式](#2. CSS 引入方式)
    • [2.1 内部样式](#2.1 内部样式)
    • [2.2 外部样式](#2.2 外部样式)
    • [2.3 内联样式](#2.3 内联样式)
  • [3. CSS 常见选择器](#3. CSS 常见选择器)
    • [3.1 基础选择器](#3.1 基础选择器)
      • [3.1.1 标签选择器](#3.1.1 标签选择器)
      • [3.1.2 类选择器](#3.1.2 类选择器)
      • [3.1.3 id 选择器](#3.1.3 id 选择器)
      • [3.1.4 通配符选择器](#3.1.4 通配符选择器)
    • [3.2 复合选择器](#3.2 复合选择器)
      • [3.2.1 后代选择器](#3.2.1 后代选择器)
  • [4. CSS 常用属性](#4. CSS 常用属性)
    • [4.1 字体相关](#4.1 字体相关)
    • [4.2 文本相关](#4.2 文本相关)
    • [4.3 背景相关](#4.3 背景相关)
    • [4.4 设置圆角矩形](#4.4 设置圆角矩形)
  • [5. 块级元素与行内元素](#5. 块级元素与行内元素)
    • [5.1 定义](#5.1 定义)
    • [5.2 区别](#5.2 区别)
  • [6. CSS 盒子模型](#6. CSS 盒子模型)
  • [6.1 边框属性](#6.1 边框属性)
  • [6.2 内边距](#6.2 内边距)
    • [6.3 外边距](#6.3 外边距)
  • [7. 弹性布局](#7. 弹性布局)

1. CSS 是什么

【CSS 含义 】层叠样式表，英文全称 ------ Cascading Style Sheets

层叠式样表听起来比较高大上，我们对此进行拆分理解：

1）层叠 ：指的是针对一个 html 的元素或者标签，可以同时应用多组 CSS 样式 ，多组样式叠加在一起

2）样式：大小、位置、间距、颜色、字体、边框、背景等等，统称为"样式"，描述了一个网页长的样子

【CSS 作用 】CSS 能够对网页中元素的位置进行排版，对像素级精准控制，实现美化页面的效果，能够做到页面的样式和结构分离

上期内容我们学习了 HTML 的基本用法，可以实现简单的页面，但是不是很好看，有很多细节可以去调整，使页面变得"漂亮"起来，这时，CSS 闪亮登场啦，它就起到美化页面的效果！

2. CSS 引入方式

CSS 和 HTML 类似，也是在浏览器中运行的，在编写代码的时候，CSS 有多种引入方式，如下：

2.1 内部样式

【内部样式】直接把 CSS 嵌入到 HTML 中，放在 style 标签里面

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        div {
            font-size: 50px;
            color: green;
        }
        </style>
</head>
<body>
 <div>
        hello
    </div>
</body>
</html>

效果如下：

图解说明：

【优点 】能够使样式和页面结构分离

【缺点 】但是分离 的还不够彻底，尤其是 CSS 内容多的时候

2.2 外部样式

【外部样式】把 CSS 写成一个单独的 .css 文件，由 html 文件通过 link 标签引入

  1. 创建一个 css 文件
  2. 使用 link 标签引入 css 文件
c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
       <link rel="stylesheet" href = "style.css">
</head>
<body>
    <div>
        hello
    </div>    
</body>
</html>

style.css 文件内容如下：

c 复制代码 
div {
    font-size: 100px;
    color:red;
}

效果如下：

图解说明：

【优点 】样式和页面结构彻底分离

【缺点 】但是受到浏览器缓存影响 ，修改之后不一定立刻生效(可能需要一定的时间)

2.3 内联样式

【内联样式】直接把 CSS 属性写到元素的 style 属性内

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div style="color: blueviolet; font-size: 200px;">hello</div>
</body>
</html>

效果如下：

图解说明：

【优点 】写法简单

【缺点】只适合于写简单样式，只针对某个标签生效！ 即不能写太复杂的样式

上述三种写法，在实际开发中都十分常见，在本期内容，主要使用内部样式来介绍 CSS

3. CSS 常见选择器

【选择器含义 】针对页面中指定的标签元素生效 ，先要选中元素，才能设置元素的属性

【选择器种类 】选择器有很多种，分为：

1）基础选择器：由单个选择器构成

2）复合选择器：由多种基础选择器构成

CSS 选择器种类非常多，用法也是十分丰富，本期内容仅介绍 5 种选择器，如下：

3.1 基础选择器

3.1.1 标签选择器

【特点 】使用标签名，把页面中所有同名标签的元素都选中，即能快速为同一类型 的标签都选择出来

【缺点 】难以 针对某个元素进行个性化定制 ，即不能差异化选择

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        div {
            font-size: 50px;
            color: green;
        }
        </style>
</head>
<body>
    <div>hello1</div>
    <div>hello2</div>
    <div>hello3</div>

</body>
</html>

效果如下：

图解说明：

3.1.2 类选择器

【特点 】CSS中创建一个"类名"，这个类名对应一组 CSS 属性，让指定的 html 元素应用这个类名即可使用

【优点 】能够差异化表示不同的标签

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
   <div class="one">hello1</div>
   <div class="two">hello2</div>

    <style>
        .one {
            color: red;
            font-size: 100px;
        }

        .two {
            color: green;
            font-size: 100px;
        }
</body>
</html>

效果如下：

图解说明：

【注意 】这里的"类"和 Java 中的类完全没有任何联系~ 这里的一个类名是可以被多个标签引用 ！同时，一个标签还可以引入多个类名，使用多组属性，多个类名之间使用空格分隔

3.1.3 id 选择器

【特点】一个 html 标签，可以有一个 id 属性，id 是唯一的，这个 id 属性的值作为标签的"身份标识"，因此，同样可以通过 id 选择器把这个指定的元素给获取到！

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
   <div id = "mydiv">hello</div>

    <style>
        #mydiv {
            color:rebeccapurple;
            font-style:100px;
        }
        </style>   
</body>
</html>

效果如下：

图解说明：

【注意 】因为 id 是唯一的，即不能被多个标签使用 (这也是类选择器最大的区别)!!!

3.1.4 通配符选择器

【特点】选择所有的标签，页面的所有内容均修改，无需被页面结构调用

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
   <div>hello</div>
   <h2>hh<h2>

    <style>
         * {
            color: red;
         }
        </style>
</body>
</html>

效果如下：

图解说明：

3.2 复合选择器

在本期内容中，仅介绍一种复合选择器，后代选择器

3.2.1 后代选择器

【特点 】后代选择器的效果就是把上述的三种基础选择器进行组合，同时能够体现出"标签的层次结构 "

【优点 】如果有一个页面特别复杂，就可以使用后代选择器，非常针对性地修改某元素，并不影响其它部分内容

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
   <div class="one">
    <h3>hello1<h3>
    </div>
   <div class="two">
    <h3>hello2<h3>
    </div>
   <div class="one">
    <h2>hello3<h2>
    </div>

    <style>
        .one h3{
            color: red;
        }
        .two h3{
            color: green;
        }
        </style>
</body>
</html>

效果如下：

图解说明：

【关于优先级 】

CSS里面有一套优先级规则，但是比较麻烦，需要进行计算，我们作为了解，在这里不进行介绍

1）引用样式 ：可以简单地理解，内联样式 这种优先级 比其它两种更高 ，会覆盖其他的样式

2）类选择器 ：针对同样的样式属性，设置不同的值，使用类选择器的优先级高于标签选择器

4. CSS 常用属性

CSS中有非常多的属性，这里仅介绍常用的属性，详情可以参考：CSS参考手册

4.1 字体相关

1）字体家族： font-family
2）字体大小： font-size
3）字体粗细： font-weight
4）设置文字倾斜： font-style

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            font-family: '宋体';
            /*字体大小*/
            font-size: 100px;
           /*字体粗细*/
            font-weight: 900;
             /*设置文字倾斜*/
            font-style: italic;
        }
    </style>
</body>
</html>

效果如下：

4.2 文本相关

1）文本颜色： color

【注意】color 属性的值有很多种写法

  • 直接写一些表示颜色的单词，日常用到的颜色这里都有，如：color:red;
  • 使用 rgb 的方式表示，如：color:rgb(255,0,0)
  • 使用十六进制方式表示，本质上仍然是 RGB，如：color： #ff0000;
    通过上述的操作，可以调出一些很好看的颜色啦~

2）文本对齐方式： text-align

其中，左对齐为 left，右对齐为 right，居中对齐：center

3）文本装饰(加个下划线等)： text-decoration

加下划线设置为 underline，比如这个链接你不想加下划线，该属性的值可以设置为 none；

4）行间距(行高)： line-height

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            font-size: 100px;
            /* 文本颜色 */
            color: #ff0000;
            /* 文本对齐 左对齐left 右对齐right 居中对齐center */
            text-align: center;
            /* 文本装饰 加个下划线等 */
            text-decoration: underline;
            /* 文本缩进 首行缩进多少空间 */
            text-indent: 20px;
            /* 行高 行间距*/
            line-height: 100px;
        }
    </style>
</body>
</html>

效果如下：

4.3 背景相关

1）背景颜色： background-color
2）背景图片： background-image: url(图片地址);
3）背景平铺方式： background-repeat
4）背景位置： background-position
5）背景大小： background-size

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            font-size: 100px;
            background-color: #ff0000;
            /* 设置图片的宽与高 */
            width: 600px;
            height: 300px;
            background-image: url(dog.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            /* 与图片背景颜色大小一致，所以没有看到背景颜色 */
            background-size: 600px,300px;
        }
    </style>
</body>
</html>

效果如下：

4.4 设置圆角矩形

圆角矩阵 ：border-radius

效果如下：

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            width: 600px;
            height: 300px;
            background-color: gray;
            border-radius: 50px;
            text-align: center;
        }
    </style>
</body>
</html>

效果如下：

如果想要得到一个圆形呢？可以做到吗！

即在正方形中，将 border-radius 的长度设置为正方形边长的一半即可

c 复制代码 
width: 400px;
height: 400px;
border-radius: 200px;

效果如下：

5. 块级元素与行内元素

5.1 定义

【块级元素 】矩形的盒子

【行内元素】一段文本

每个 html 元素均可以通过 CSS 设置 display 属性

c 复制代码 
display:block; 块级元素
display:inline; 行内元素

上期前端专栏介绍的 html 标签，在不显示指定 display 的时候，均有默认的 display 的值！

其中，默认为 block(块级元素) 的标签有：h1-h6，p，ul，ol，li，table，div等等

默认为 inline(行内元素) 的标签有：a，span，b

5.2 区别

块级元素与行内元素的区别有很多方面，主要了解两个方面：

  • 块级元素默认独占一行，行内元素默认不独占一行
  • 块级元素可以设置尺寸，比如可以设置 width、height 的值，而行内元素不可以!

可以通过 display:block，将 span 标签设置为块级元素，因为 span 标签默认是行内元素，改为块级元素后 span 标签也可以设置尺寸了

但是一般不会把块级元素变成行内元素~（没啥意义hh）

也可以使用display:none 实现元素隐藏的效果

6. CSS 盒子模型

一个 html 元素，是一个矩形，这个矩形由以下 4 个部分构成：内容 + 内边距 + 边框 + 外边距 ，如图：

6.1 边框属性

边框属性： border

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            width: 500px;
            height: 300px;
            /* 边框可以分开设置  分成4个方向*/
            border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid; 
        }
    </style>
</body>
</html>

效果如下：选中该元素，查看信息

通过上图，发现我们在代码中设置的是 500 * 300，但是这里的尺寸显示的是 540 * 340

这里是因为，边框把元素给撑大了，边框一个是 20px，所以宽与高均增大了 40px

但是在开发的时候，一般不希望见到这种情况，如果需要排列多个元素的时候，此时就不安排了！因此，一般希望边框不要撑大元素，可以使用一个单独的 CSS 属性进行设置：box-sizing: border-box;

此时选择通配符选择器，设置这个属性~ 因为我希望的是所有的边框不要撑大元素

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        *{
            box-sizing: border-box;
        }
        .one {
            width: 500px;
            height: 300px;
            /* 边框可以分开设置  分成4个方向*/
            border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid; 
        }
    </style>
</body>
</html>

效果如下：此时元素就没有被边框撑大啦！

6.2 内边距

内边距属性： padding 即元素和边框之间的距离

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
          *{
            box-sizing: border-box;
        }
        .one {
            width: 500px;
            height: 300px;
            /* 边框可以分开设置  分成4个方向*/
            border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid;
            
             /* padding也是可以分4个方向设置 */
            padding-left: 20px;
            padding-right:20px;
            padding-top: 50px;
            /* 上下设置 30px 左右设置 20px */
            /* padding: 30px 20px; */
            /* 上右下左 顺时针*/
            /* padding: 10px 20px 30px 40px; */
        }
    </style>
</body>
</html>

效果如下：

【注意】padding 这个本身使用并不复杂，主要是如何设置 padding 比较好看~

6.3 外边距

外边距属性： margin 即边框和其它元素之间的距离

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
          *{
            box-sizing: border-box;
        }
        .one {
            width: 500px;
            height: 300px;
            /* 边框可以分开设置  分成4个方向*/
            border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid;
            
             /* padding也是可以分4个方向设置 */
            padding-left: 20px;
            padding-right:20px;
            padding-top: 50px;
            /* 上下设置 30px 左右设置 20px */
            /* padding: 30px 20px; */
            /* 上右下左 顺时针*/
            /* padding: 10px 20px 30px 40px; */

            margin-top: 50px; 
        }
    </style>
</body>
</html>

效果如下：

【注意 】

将 margin 设置为 auto，可以实现元素水平居中的效果，但是把上下方向设置为 auto 则不能实现垂直居中
即将 margin 设置 auto 可以实现水平居中，但是垂直方向则不行！

【除浏览器默认样式 】

不同浏览器的默认样式存在差别，有的浏览器会给元素加上一些默认的样式，尤其是内外边距，为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式

使用通配符选择器，设置内外边距均为 0，即可完成去除浏览器默认样式，代码如下：

c 复制代码 
* {
    marign: 0;
    padding: 0;
}

7. 弹性布局

对于块级元素，我们知道，默认是独占一行的，即为垂直方向排列的，有时候想让块级元素能够水平方向排列，如何做呢？

有的小伙伴会想到使用行内元素，这就可以水平排列了，但是行内元素不能设置尺寸呀!!!

这个时候弹性布局闪亮登场!!! 可以让块级元素水平排列

本期内容仅介绍弹性布局最基础的三个属性：

  • 开启弹性布局 ：display:flex 其中 flex 即为弹性布局，某元素一旦开启了弹性布局，此时内部的子元素，就会按照水平方向排列，但是子元素里面的子元素是不受影响的!!!
  • 设置水平方向排列规则 ：justify-content，有居中排列，靠左，靠右，分散开等
  • 设置垂直方向排列规则 ：align-items
c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">
        <div class="two">1</div>
        <div class="two">2</div>
        <div class="two">3</div>
        <div class="two">4</div>
        <div class="two">5</div>
    </div>

    <style>
        
          *{
            box-sizing: border-box;
        }
   
        .one {
            width:1000px;
            height: 300px;
            background-color: gray;
            display: flex;
            justify-content:space-around;
            align-items: center;
        }
        .two {
            width: 150px;
            height: 100px;
            background-color: green;
        }
    </style>
</body>
</html>

效果如下：实现了块级元素水平排列！

相关推荐
光影少年6 分钟前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
As977_7 分钟前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
susu10830189119 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾11 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu13 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym18 分钟前
Webpack性能优化指南：从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫19 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫23 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat24 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play