【前端】一文带你了解 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>

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

相关推荐
caperxi几秒前
前端开发中的防抖与节流
前端·javascript·html
霸气小男几秒前
react + antDesign封装图片预览组件（支持多张图片）
前端·react.js
susu10830189111 分钟前
前端css样式覆盖
前端·css
学习路上的小刘3 分钟前
vue h5 蓝牙连接 webBluetooth API
前端·javascript·vue.js
＆白帝＆3 分钟前
vue3常用的组件间通信
前端·javascript·vue.js
小白小白从不日白14 分钟前
react 组件通讯
前端·react.js
Redstone Monstrosity31 分钟前
字节二面
前端·面试
东方翱翔38 分钟前
CSS的三种基本选择器
前端·css
Fan_web1 小时前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
yanglamei19621 小时前
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明，后端采用flask，前端采用vue
前端·数据库·flask
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07Coze扣子平台完整体验和实践（附国内和国际版对比）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10借助 LocatorJS ，快速定位本地代码