CSS入门：美化网页的艺术

加勒比海涛2024-09-10 10:22

CSS入门：美化网页的艺术

  • [一 . CSS 介绍](#一 . CSS 介绍)
    • [1.1 应用场景](#1.1 应用场景)
    • [1.2 CSS 介绍](#1.2 CSS 介绍)
  • [二 . CSS 导入方式](#二 . CSS 导入方式)
    • [2.1 内联样式](#2.1 内联样式)
    • [2.2 内部样式](#2.2 内部样式)
    • [2.3 外部样式](#2.3 外部样式)
  • [三 . CSS 选择器](#三 . CSS 选择器)
    • [3.1 id 选择器](#3.1 id 选择器)
    • [3.2 class 类选择器](#3.2 class 类选择器)
  • [四 . CSS 属性](#四 . CSS 属性)
    • [4.1 border 边框](#4.1 border 边框)
    • [4.2 display](#4.2 display)
    • [4.3 background-image 属性](#4.3 background-image 属性)

本篇文章会带您快速掌握CSS的基础知识，包括CSS的三种导入方式：内联、内部和外部样式。通过实例，我们需要学习如何使用CSS选择器和常用属性来美化网页。

前端专栏 : https://blog.csdn.net/m0_53117341/category_12778663.html

一 . CSS 介绍

1.1 应用场景

虽然网站的网页都是由 HTML 编写的 , 但是所有的网页还都需要使用 CSS 进行美化 .

1.2 CSS 介绍

CSS 是一门语言 , 用于控制网页的表现 , 也叫做层叠样式表 .

把所有的样式都可以加到一个标签上 , 层叠起来 , 所以叫做层叠样式表 .

二 . CSS 导入方式

CSS 导入 HTML 有三种方式 :

内联样式 : 在 HTML 标签内部使用 style 属性 , 属性值是 CSS 属性键值对

html 复制代码 
<div style="color: red">Hello CSS</div>

内部样式 : 在 标签中定义

html 复制代码 
<head>
  <!-- type="text/css" 可省略 -->
  <style type="text/css">
    div {
      color: "red";
    }
  </style>
</head>

外部样式 : 定义 link 标签 , 引入外部的 CSS 文件

html 复制代码 
<link ref="stylesheet" href="demo.css">

demo.css :

css 复制代码 
div {
  color: red;
}

2.1 内联样式

在 HTML 标签内部中 , 要想引入 CSS , 就要求属性名必须是 style , 然后在属性值中书写的都是 css 代码样式 .

语法 : style="样式名1:样式值1;样式名2:样式值2;样式名3:样式值3;..."

可以设置的元素比如有

  1. color : 表示字体颜色
  2. font-size : 表示字体大小
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        在 HTML 标签内部中 , 要想引入 CSS , 就要求属性名必须是 style , 然后在属性值中书写的都是 css 代码样式 .
        可以设置的元素比如有
            1. color : 表示字体颜色
            2. font-size : 表示字体大小
     -->
    <div style="color: red;font-size: 300px">张三</div>
</body>
</html>

要注意的是 , 在 CSS 中 , 单位 px 必须添加 , 要不然显示的字体大小就是默认值了

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        在 HTML 标签内部中 , 要想引入 CSS , 就要求属性名必须是 style , 然后在属性值中书写的都是 css 代码样式 .
        可以设置的元素比如有
            1. color : 表示字体颜色
            2. font-size : 表示字体大小
     -->
    <div style="color: red;font-size: 300px">张三</div>
    <!-- 在 CSS 中 , 单位 px 必须添加 , 要不然显示的字体大小就是默认值了 -->
    <div style="color: red;font-size: 300">张三</div>
</body>
</html>

2.2 内部样式

内部样式是我们需要在 head 标签内部引入 CSS

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 在 head 标签内部引入 css -->
    <style type="text/css">
        /* 在这里书写 CSS 代码 */
        div {
            /* 字体颜色 */
            color: blue;
            /* 字体大小 */
            font-size: 100px;
        }
    </style>
</head>
<body>
    <!-- 内部样式需要绑定下面的 div -->
    <div>Hello World</div>
    <div>Hello CSS</div>
</body>
</html>

2.3 外部样式

我们首先在当前代码的外部创建一个 css 文件夹 , 专门存放 css 的代码

然后就可以编写 css 代码了

HTML 页面 :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入外部的 css -->
    <!--
        1. 使用 link 标签引入外部的 css 文件
        2. rel="stylesheet" 表示层叠样式, 必须书写
        3. type="text/css" 表示属于 css 类型, 可以不书写
     -->
    <link rel='stylesheet' href='./css/index03.css' type='text/css'>
</head>
<body>
    <!-- 外部样式需要绑定下面的 div -->
    <div>万人迷</div>
    <div>三梦奇缘</div>
</body>
</html>

css 代码 :

css 复制代码 
/* 在 css 文件中只能书写 css 代码, css 文件后缀名为 .css */
div {
  color: orange;
  font-size: 100px;
}

我们来看一下效果

三 . CSS 选择器

CSS 选择器指的是选取需要设置样式的元素 (标签)

分为三种 :

  1. 元素选择器
css 复制代码 
元素名称 {color: red;}

比如 :

css 复制代码 
div {color: red;}
  1. id 选择器
css 复制代码 
#id属性值 {color: red;}

比如 :

CSS :

css 复制代码 
#name {color: red;}

HTML :

html 复制代码 
<div id="name">Hello CSS</div>
  1. 类选择器
css 复制代码 
.class属性值 {color: red;}

比如 :

CSS :

css 复制代码 
.cls {color: red;}

HTML :

html 复制代码 
<div class="cls">Hello CSS</div>

3.1 id 选择器

我们想对第二个 div 标签进行修改 , 那就可以使用 id 选择器

CSS :

css 复制代码 
/* 在 css 文件中只能书写 css 代码, css 文件后缀名为 .css */
/* 
    id 选择器格式:
        #id属性值 {
            样式名: 样式值;
            样式名: 样式值;
            样式名: 样式值;
            ......
        }
 */
#div1 {
    /* 字体颜色 */
    color: green;
    /* 字体大小 */
    font-size: 50px;
}

HTML :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部的 css -->
    <!-- 
        1. 使用 link 标签引入外部的 css 文件
        2. rel="stylesheet" 表示层叠样式, 必须书写
        3. type="text/css" 表示属于 css 类型, 可以不书写
     -->
    <link rel="stylesheet" href="../css/demo01.css" type="text/css">
</head>
<body>
    <!-- 内部样式需要绑定下面的 div -->
    <div>Hello World</div>
    <div id="div1">Hello HTML</div>
    <div id="div2">Hello CSS</div>
</body>
</html>

此时我们查看一下效果

3.2 class 类选择器

需求 : 让第二个 div 和第三个 div 的字体颜色变成蓝色 , 并且设置大小为 100px

CSS :

css 复制代码 
/* 在 css 文件中只能书写 css 代码, css 文件后缀名为 .css */
/*
    class 选择器格式:
        .class属性值 {
            样式名: 样式值;
            样式名: 样式值;
            样式名: 样式值;
            ......
        }
 */
.mydiv {
    /* 字体颜色 */
    color: blue;
    /* 字体大小 */
    font-size: 50px;
}

HTML :

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部的 css -->
    <!-- 
        1. 使用 link 标签引入外部的 css 文件
        2. rel="stylesheet" 表示层叠样式, 必须书写
        3. type="text/css" 表示属于 css 类型, 可以不书写
     -->
    <link rel="stylesheet" href="../css/demo01.css" type="text/css">
</head>
<body>
    <!-- 内部样式需要绑定下面的 div -->
    <div>Hello World</div>
    <div class="mydiv">Hello HTML</div>
    <div class="mydiv">Hello CSS</div>
</body>
</html>

id 选择器一般用来针对一个标签进行修改 , class 类选择器一般可以针对同一属性的多个标签来进行修改 .

四 . CSS 属性

具体的 CSS 属性我们可以通过这个网站来查询 :

4.1 border 边框

比如我们找一个语法来模拟一下 : https://www.runoob.com/css/css-border.html

那我们就可以创建一个 div 标签 , 然后对这个 div 标签设置这些样式

border-width : 边框的宽度

border-style : 边框的样式

border-color : 边框的颜色

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部的 css -->
    <!-- 
        1. 使用 link 标签引入外部的 css 文件
        2. rel="stylesheet" 表示层叠样式, 必须书写
        3. type="text/css" 表示属于 css 类型, 可以不书写
     -->
    <link rel="stylesheet" href="../css/demo01.css" type="text/css">
</head>
<body>
    <!-- 
        1. border-width: 5px; - 边框宽度
        2. border-style: solid; - 边框样式, solid 为实线 , dashed 为虚线
     -->
    <div style="border-width: 5px;border-style: solid;border-color: blue;">Hello World</div>
</body>
</html>

那这条 div 甚至可以简写

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部的 css -->
    <!-- 
        1. 使用 link 标签引入外部的 css 文件
        2. rel="stylesheet" 表示层叠样式, 必须书写
        3. type="text/css" 表示属于 css 类型, 可以不书写
     -->
    <link rel="stylesheet" href="../css/demo01.css" type="text/css">
</head>
<body>
    <!-- 
        1. border-width: 5px; - 边框宽度
        2. border-style: solid; - 边框样式, solid 为实线 , dashed 为虚线
     -->
    <div style="border-width: 5px;border-style: solid;border-color: blue;">Hello World</div>
    <!-- 
        border: 5px solid blue 
            边框的宽度是 5px 
            边框样式为实线
            边框颜色为蓝色
            background-color: yellow 表示背景颜色为黄色
    -->
    <div style="border: 5px solid blue ;background-color: yellow">Hello CSS</div>
</body>
</html>

我们也能看到产生效果了

4.2 display

我们继续学习一个语法 : https://www.runoob.com/css/css-display-visibility.html

它的作用是可以隐藏页面中的元素

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <!-- display: none; 表示隐藏页面中的元素 -->
    <div style="border: 5px solid red;background-color: blue;display: none;">test</div>
</body>
</html>

我们可以看一下效果

那 display 还有其他的属性 , 比如 : block 和 inline 属性 , 我们可以看一下

那我们就可以给 span 标签指定 display 属性 , 设置为 block 就代表将该元素设置成块级元素 , 这样的话两个 span 标签就会展示到两行

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <!-- 
        display 的属性值:
            none: 此元素不会被显示
            block: 此元素会被显示为块级元素, 此元素前后带有换行符, 将行内标签变为块级标签
            inline: 默认, 此元素会被显示为内联元素, 元素前后没有换行符, 将块级标签变为行内标签
     -->

    <!-- span 属于行内标签, 与其他元素共处一行 -->
    <!-- style="display: block;" 表示将当前行内标签 span 转化为块级元素 -->
    <span style="display: block;">div1</span>
    <span>div2</span>
</body>
</html>

同样 , 我们也可以通过 display 属性将块级元素设置成行级元素

那接下来我们就可以使用 display 的 inline 属性 , 将块级元素设置成为行级元素

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <!-- 
        display 的属性值:
            none: 此元素不会被显示
            block: 此元素会被显示为块级元素, 此元素前后带有换行符, 将行内标签变为块级标签
            inline: 默认, 此元素会被显示为内联元素,元素前后没有换行符, 将块级标签变为行内标签
     -->

    <!-- p 属于块级元素,与其他元素不会共处一行 -->
    <!-- style="display: inline;" 表示将当前块级元素 p 转化为行内标签 -->
    <p style="display: inline;">将块级标签变为行内标签</p>
    <p style="display: inline;">将块级标签变为行内标签</p>
</body>
</html>

4.3 background-image 属性

https://www.runoob.com/css3/css3-backgrounds.html

https://www.w3school.com.cn/cssref/pr_background-image.asp

那我们也可以对 body 标签设置属性

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body style="background-image: url(../material/小米.png);">

</body>
</html>

我们可以看一下效果

发现 , 小米这个 logo 竟然铺满了整个页面 , 我们来看一下原因 .

所以我们可以设置一下 background-repeat 属性的值

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<!-- 
    background-repeat: repeat-y; 按 y 轴竖着铺
    background-repeat: repeat-x; 按 x 轴横着铺
    background-repeat: no-repeat; 不铺
-->
<body style="background-image: url(../material/小米.png);background-repeat: repeat-y;">

</body>
</html>

我们还可以使用 background-size: cover; 来去设置背景图覆盖整个容器

修改之前 :

修改之后 :

对 CSS 的介绍就到此为止了 , 如果对你有帮助的话还请一键三连~

相关推荐
桂月二二34 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css
浪浪山小白兔3 小时前
HTML5 新表单属性详解
前端·html·html5
lee5763 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579653 小时前
AI赋能Flutter开发：ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me4 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者4 小时前
如何构建一个简单的React应用？
前端·react.js·前端框架
qq_392794484 小时前
前端缓存策略：强缓存与协商缓存深度剖析
前端·缓存
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04xgboost: Why not implement distributed XGBoost on top of spark05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06密码学原理技术-第六章-introduction to pulibc-key cryptography07PyTorch AMP 混合精度中grad_scaler.py的scale函数解析08Windows10安装PCL1.14.0及点云配准09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10如何实现抖音直播弹幕抓取（PHP版本）