Web前端----CSS基础的学习总结

已于 2022-08-07 18:57:24 修改
阅读量169 收藏 2
点赞数 2
文章标签： 前端 学习 css
于 2022-08-07 15:23:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70612148/article/details/126210835
版权

此文章是对CSS进行的一些基础的学习。

 前言

随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下CSS的语法，用来对CSS进行基础的学习。

一、CSS是什么？

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS基础

1.1 初识CSS

代码示例如下：

<!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>
    <style>
        /* css的注释 */
        /* 这里写的都是css */
        /* 来一个选择器{css属性} */
        /* 选择器：查找标签 */
        p {
            /* 文字颜色变红色 */
            color: red;
        /* 字体变大 */
        font-size: 30px;
        /* width heiht长宽 */
        width: 400px;
        height: 400px;
        background-color: rgb(0, 0, 128);
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

代码运行结果如下：

 1.2 CSS引入方式

 代码示例如下：

<!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>
    <!-- 关系为样式表 -->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

 代码示例如下：

1.3 选择器-标签

代码示例如下：

<!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>
    <style>
        /* 选择器{}*/
        /* 标签选择器或者是以标签名命名的选择器 */
        p {
            color: red;
        }
        /* 标签选择器选中所有的这个标签都生效 */
    </style>
</head>
<body>
    <p>ppppppp</p>
    <p>ooooo</p>
    <p>33333</p>
</html>

代码运行结果如下：

 1.4 类选择器标签

代码示例如下：

<!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>
    <style>
        .red {
            color: red;

        }
        .size {
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 类：定义和使用才能生效 -->
    <p class="red">111</p>
    <!-- 一个标签可以使用多个类名，需要空格隔开即可 -->
    <p class="red size">222</p>
    <div class="red">这个文字标签也要变红</div>
</body>
</html>

代码运行结果如下：

 1.5 ID选择器

代码示例如下：

<!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>
    <style>
        /* 定义ID选择器 */
        /* ID选择器在一个页面是唯一的，一个页面只能用一次 */
        /* 配合js的使用 */
        #blue {
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">这个div文字是蓝色的</div>
    <p id="blue">111111111</p>
</body>
</html>

代码运行结果如下：

 1.6 通配符选择器

代码示例如下：

<!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>
    <style>
        * {
            color: red;
        }
        /* 清除内外边距 */
        * {
            margin: 0%;
            padding: 0%;
        }
    </style>
</head>
<body>
    <div>div标签</div>
    <p>ppppdsds</p>
    <h1>1111</h1>
    <span>5494894</span>
    <p>sdasdasd</p>
    <h2>dasdasd</h2>
</body>
</html>

代码运行结果如下：

 1.7 字号

代码示例如下：

<!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>
    <style>
        p {
            font-size: 90px;
        }
    </style>
</head>
<body>
    <!-- 默认字号就是16 -->
    <p>段落文字</p>
</body>
</html>

代码运行结果如下：

 1.8 文字粗细

代码示例如下：

<!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>
    <style>
        div {
            /* 加粗 */
            font-weight: 700;
        }
        h1 {
            /* 不加粗 */
            font-weight: 400;
        }
    </style>
</head>
<body>
    <div>这是div</div>
    <h1>一级标题</h1>
</body>
</html>

代码运行结果如下：

 1.9 文字的倾斜效果

代码示例如下：

<!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>
    <style>
        div {
            /*倾斜 */
            font-style: italic;
        }

        em {
            /* 不倾斜的效果 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <div>div文字</div>
    <em>em</em>
</body>
</html>

代码运行结果如下：

 2.0 字体

代码示例如下：

<!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>
    <style>
        div {
            /* font-family：宋体；
            如果用户电脑没有安装微软雅黑，就按黑体显示文字
            如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */
            font-family: 微软雅黑,黑体,sans-serif;
        }
    </style>
</head>
<body>
    <div>
        这是一个div标签
    </div>
</body>
</html>

代码运行结果如下：

 2.1 拓展-层叠性

代码示例如下：

<!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>
    <style>
        p {
            color: black;
            color: blue;
        }
    </style>
</head>
<body>
    <p>ppppp</p>
</body>
</html>

代码运行结果如下：

 2.2 font属性

代码示例如下：

<!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>
    <style>
        p {
            /* font-size: ;
            font-style: ;
            font-weight: ;
            font-family: ; 
            font:style  weight size 字体；*/
            /* font-style: normal; */
            /* font: italic 700 66px 宋体; */
            font: 100px 微软雅黑;
        }
        /* 以后还会遇见一个属性冒号后面写多个值的写法----复合属性 */
    
    </style>
</head>

<body>
    <p>这是p标签</p>
</body>

</html>

代码运行结果如下：

 2.3 文本缩进

代码示例如下：

<!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>
    <style>
        p {
            /* text-indent: 50px;
            首行缩进2个字的大小
            默认字号：16px ；32 */
            /* text-indent: 40px; */
            /* font-size: 20px; */
            text-indent: 2em;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>123456</p>
</body>
</html>

 2.4 水平对齐方式

代码示例如下：

<!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>
    <style>
        h1 {
            text-align: center;
        }
        body {
            text-align: center;
        }
        /* right left center */
        /* 文本 超链接 a标签 span标签 input标签 img标签 */
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    
    <img src="./img/04.png" alt="">
</body>
</html>

代码运行结果如下：

 2.5 文本修饰

代码示例如下：

<!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>
    <style>
        div {
            text-decoration: underline;
            /* 下划线  常用*/
        }
        p {
            text-decoration: line-through;
            /* 删除线  不常用*/
        }
        h2 {
            text-decoration: overline;
            /* 上划线 不常用 */
        }
        a {
            text-decoration: none;
            /* 无装饰线 常用 */
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>ppp</p>
    <h2>h2</h2>
    <a href="">我是超链接,点我</a>
</body>
</html>

代码运行结果如下：

 2.6 行高

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            line-height: 1.5;
            /* 自己字号的1.5倍 */
            /* line-height: 50px; */
            /* 66px 宋体 倾斜 加粗 行高是2倍 */
            font: italic 700 66px/2 宋体 ;
        }
    </style>
</head>
<body>
    <p>123</p>
</body>
</html>

2.7 拓展-标签水平居中

代码示例如下：

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: brown;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</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>
    <style>
        body {
            background-color: #ffefef;
        }

        .goods {
            width: 234px;
            height: 300px;
            background-color: aqua;
            /* 标签div居中 */
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }

        img {
            width: 160px;
        }
        /* .goods {
            width: 234px;
            height: 300px;
            background-color: ffffff;
            margin: 0 auto;
        } */
        .che1 {
            font-size: 14px;
            line-height: 25px;
        }
        .che2 {
            line-height: 30px;
            font-size: 12px;
            color: #ccc;
        }
        .che3 {
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>

<body>
    <!-- div用来网页布局，一个页面可能用无数次，原则:如果使用div，尽量使用类名控制模式 -->
    <div class="goods">
        <img src="./img/05.png" alt="">
        <div class="che1">九号平衡车</div>
        <div class="che2">成年人的玩具</div>
        <br>
        <div class="che3">1999元</div>
    </div>
</body>

</html>

代码运行结果如下：

 总结

以上就是CSS基础中比较重要的语法，谢谢大家的观看。

坚持与努力的星星
关注
Web前端----CSS盒子模型教学总结
软件测试的坑，让我来踩吧
08-08 768
此文章是对CSS盒子模型进行的一些学习，一看就懂，一学就会。
web应用基础 HTML & CSS 学习总结
mikumiku5的博客
07-10 309
标题是通过h1~h6来定义的 展现出来的效果是从大到小的文字，且每句话单独一行。 展现出来的效果是两行正常大小的文字。 展现出来的效果默认是带下划线的文字，点击可跳转到href指定站点。 a标签还可以设置target属性，target属性默认值为_self，即在本浏览器标签打开，可以设置为_blank在新的标签中打开。 默认会显示出图片的原本大小，src是图片的地址，alt是图片加载失败时出现的文字，title是鼠标移上去时显示的文字，且src地址以#开头，若后面跟的值存在元素id与之对应，则会跳转到该元素
Web前端--初级样题理+实.rar
01-03
在Web前端开发领域，初级阶段的学习是至关重要的，它为后续深入学习和职业发展奠定了基础。"Web前端--初级样题理+实.rar"这个压缩包文件，显然包含了理论与实践相结合的学习材料，旨在帮助初学者掌握Web前端开发的...
WEB前端-案例汇总
11-08
通过这个“WEB前端-案例汇总”，学习者不仅可以全面了解前端开发的各个方面，还能通过实践提升解决问题的能力，为成为专业的前端开发者奠定坚实基础。无论是HTML5的新特性，还是前沿的前端框架，都能在这个资源包中...
Web-前端html+css从入门到精通 142. animation动画基础语法.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石，而CSS3的animation动画功能则为网页增添了许多动态效果和交互性。本课程"Web-前端html+css从入门到精通 142. animation动画基础语法"着重讲解了如何使用CSS3的`@...
web前端技术--css.pptx
01-11
Web 前端技术- CSS 基础知识点 CSS（Cascading Style Sheets）是用于描述网页样式的标记语言，主要用于控制网页的布局、颜色、字体、图像等样式。CSS 基础知识点包括 CSS 概述、CSS 语法规则、CSS 引入方式、选择器...
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 262
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
web扩展
x737510的博客
10-10 517
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 1384
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
基于Java(Jsp+Sevlet）+MySql 实现的（Web）成绩管理系统
神仙别闹的自留地
10-08 1689
如果能把负责学生成绩管理的模块独立出来形成一个独立的系统，便可以有效降低教务系统的数据量，不仅可以方便管理员对于所有学生的信息进行系统的管理，而且便于教师对学生成绩进行查询和修改，学生也可以查询自己的成绩。因此，开发一套合适的、兼容性好的系统是很有必要的。：DAO层主要是做数据持久层的工作，负责与数据库进行联络的一些任务都封装在此，DAO层的设计首先是设计DAO的接口，然后定义此接口的实现类，然后就可在模块中调用此接口来进行数据业务的处理，而不用关心此接口的具体实现类是哪个类，显得结构非常清晰。
前端地图数据开发
最新发布
shuxiaoxii的博客
10-13 202
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 390
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 158
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
探秘纯前端Excel表格：构建现金流量表的完整指南
葡萄城技术团队博客
10-10 1068
现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。
一文区分SSTI 和 CSTI
zkaq7777777的博客
10-10 338
𝗦𝗲𝗿𝘃𝗲𝗿-𝘀𝗶𝗱𝗲 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗶𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 指可能发生使用服务器端模板引擎的 Web 应用程序。它涉及代码注入攻击，攻击者可以在服务器端模板中注入并执行恶意代码。𝗖𝗹𝗶𝗲𝗻𝘁 𝗦𝗶𝗱𝗲 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗜𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 是一个安全问题，攻击者的输入是注入页面并由客户端 JavaScript 库处理。TL;SSTI 允许在远程服务器上执行代码，而 CSTI 允许在受害者端【客户端】执行任意 JavaScript 代码。
字节跳动青训营开始报名了！
窗外风景随心变幻
10-10 1726
青训营是字节跳动技术团队发起的技术系列培训 &人才选拔项目;面向高校在校生，旨在培养优秀且具有职业竞争力的开发工程师。本次技术训练营由掘金联合豆包MarsCode 团队主办课程包含前端、后端和 A 方向，在这个飞速发展的 AI 时代，我们将和豆包MarsCode 一起深入探索，在青训营的技术氛围中，学习 AI，使用 Al，高效写码~
使用 Docker 部署前端项目：Vue 和 React 结合 Nginx 实现静态文件托管
IT小辉同学
10-10 1249
Web 开发中，将前端项目（例如 Vue 或 React 应用）打包后通过 Docker 容器和 Nginx 部署是非常常见的方式。它不仅简化了部署流程，还能确保在不同环境中一致的运行效果。本文将介绍如何使用 Docker 将打包生成的 `dist` 文件夹结合 Nginx 来实现前端项目的静态文件托管与访问。
Vue：点击图片在新的页面打开
MMF博客园
10-10 184
Vue：点击图片在新的页面打开
vue2路由和vue3路由区别及原理
qq_25416827的博客
10-07 1466
Vue 3 的相较于 Vue 2 更加现代化和灵活，并且对 TypeScript 进行了更好的支持。与此同时，Vue 3 的路由实现基于 Composition API，使其能够更好地与 Vue 3 的设计理念相契合，提升了开发体验和可维护性。
深入学习Web前端：掌握box-shadow盒子阴影技术
资源摘要信息: "《Web-前端html+css从入门到精通》...而《Web-前端html+css从入门到精通》的这一章节视频教学将指导初学者从基础知识到实际应用的全方位学习过程，帮助学员快速掌握并精通Web前端开发中的CSS阴影技巧。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值