CSS回顾-基础知识详解

一、引言

在前端开发领域，CSS 曾是构建网页视觉效果的关键，与 HTML、JavaScript 一起打造精彩的网络世界。但随着组件库的大量涌现，我们亲手书写 CSS 样式的情况越来越少，CSS 基础知识也逐渐被我们遗忘。
现在，这种遗忘带来了诸如样式调整困难、面对兼容性问题不知所措等麻烦。所以，我们有必要回顾 CSS，重拾这些重要知识，为更好地开发网页助力。

二、基础介绍

2.1 什么是CSS

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种专门用于描述文档（如网页、XML 文档等）呈现方式的样式表语言之一（XSL、LESS、SASS）。

我们知道HTML是负责搭建网页文档的结构地基，而CSS就是给这个网页增加色彩与动画的，最终变成精美的界面呈现给用户。

2.2 基础语法

CSS 是一门基于规则的语言。是由选择器与样式信息组成：选择器 {样式信息}。

h1 {color: red;font-size: 20px;
}

上面写了一个简单示例，我们可以看到h1就代表选择器的一种标签选择器，括号中包裹的就是对应的样式对象信息，由属性、属性值组成。上面样式的意思是：将界面上h1标签元素文字样式设置为红色，文字大小设置为20px；

注意：具体的选择器类别与样式信息后面会总结（挖一个坑，后面回填的），请大家持续关注。

2.3 注释语法

在 CSS（层叠样式表）中，注释用于在代码中添加说明性文字，这些文字不会被浏览器解析为样式规则。CSS 注释有两种常见的语法：

  1. 多行注释：/* 这是
    注释内容 */
  2. 单行注释：/* 这是注释内容 */
/* 这是h1标签样式 */
h1 {/* 多行注释color: red;font-size: 20px;*/
}

三、引用方式

我们配置的css的样式最终是要作用到网页结构信息上面的，而书写的位置也会有不同，书写位置不同会导致最终界面呈现的效果不同。主要分为以下三种：

  1. 外部样式表（外联样式）
  2. 内部样式表（style标签）
  3. 行内样式表（内联样式）

3.1 外部样式表（外联样式）

外部样式表是将 CSS 代码保存在一个独立的.css文件中，然后在 HTML 文档中通过<link>标签或者@import规则来引用这个文件。

首先在外部新建.css后缀的文件，里面书写css样式。示例：

/* style.css 文件样式 */
h1 {color: red;font-size: 20px;
}

主界面引用：

  <!-- link标签引入 --><!-- <link rel="stylesheet" href="./css/style.css"> --><style>/* 内部样式中使用@import引入（不推荐用于 HTML 文件，可以在.css文件中引入） */@import url("./css/style.css");</style>

3.2 内部样式表（style标签）

内部样式表是在 HTML 文档的<head>标签内使用<style>标签来定义 CSS 规则。这些规则只适用于当前的 HTML 文档。

<style>h1 {color: red;font-size: 20px;}
</style>

3.3 行内样式表（内联样式）

内联样式是直接在 HTML 元素的style属性中添加 CSS 规则。这种方式将样式直接应用于特定的元素，优先级非常高。

<h1 style="color: red;font-size: 20px;">h1标题</h1>

3.4 总结

  1. 外联样式
    1. 优点：实现样式和内容完全分离，HTML 文件更简洁专注于结构。多个 HTML 文件可共享，提高代码复用性和可维护性，修改样式表可影响所有引用页面。
    2. 缺点：需要额外管理样式表文件，文件丢失或路径错误会导致样式加载失败，开发时可能需同时打开 HTML 和 CSS 文件编辑，对简单页面稍复杂，但大型项目中优势更明显。
  2. 内部样式表
    1. 优点：能集中管理文档内的样式，较内联样式可维护性有所提高。
    2. 缺点：多个 HTML 页面共享样式时，需在各页面重复编写，会导致代码冗余，大型项目中使 HTML 文件臃肿，不利于代码组织管理。
  3. 内联样式
    1. 优点：简单直接，可快速对个别元素设置样式。
    2. 缺点：可维护性差，样式代码在 HTML 元素中，若多个元素需相同样式，代码会重复，不符合样式和内容分离原则。

在实际的网页开发中，外部样式表是最常用的引入方式，因为它最符合代码的组织和复用原则，能够提高开发效率和代码的可维护性。

四、盒模型

CSS 盒模型是网页布局的基础概念，它把每个 HTML 元素看作一个矩形盒子。这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

div {width: 300px;height: 150px;margin: 20px;padding: 10px;border: 4px solid red;
}

在这里插入图片描述

如上图蓝色部分就是代表元素内容所占宽高，绿色部分代表内容区与边框之前的间距padding，黄色部分代表元素边框，橙色部分代表元素与其他周围元素之间的间距。

4.1 内容区（Content）

内容区是盒模型的核心部分，用于显示元素包含的文本、图像等实际内容.

在上方例子中，width和height属性分别设置了<div>元素内容区的宽度为 300px 和高度为 150px。

4.2 内边距（Padding）

内边距是内容区和边框之间的空间。它可以用于在内容和边框之间添加空白，使内容不会直接贴在边框上，增强了内容的可视性和布局的美观性。

在上面的例子中，设置了四个方向上下左右边距都为10px；还有其他几种书写方式：

  1. padding: 1px 2px 3px 4px;(对应上、右、下、左不同的边距大小)
  2. padding: 1px 2px 3px;(对应上、左右、下不同的边距大小)
  3. padding: 1px 3px;(对应上下、左右不同的边距大小)
  4. 或者单独配置边距：padding-left、padding-top

4.3 边框（Border）

边框是围绕在内边距和内容区外部的线条，用于划分元素的边界。边框可以有不同的样式、宽度和颜色。

border是一个简写方式：border：边框宽度 边框样式 边框颜色;

还可以拆开分别配置：

  1. border-width: 边框宽度
  2. border-style: 边框样式，如solid（实线）、dashed（虚线）、dotted（点线）等）
  3. border-color: 边框颜色(颜色英文或颜色进制，rgb)

还可以单独设置某一边的边框：border-left、border-left-color…

在上面的例子中，只是单纯的设置了四个边为4px的红色实线边框；

4.4 外边距（Margin）

边距是元素边框与相邻元素之间的空间。它用于控制元素之间的间距，使页面布局更加合理。

在上面的例子中，设置了四个方向上下左右边距都为20px；还有其他几种书写方式：

  1. margin: 1px 2px 3px 4px;(对应上、右、下、左不同的边距大小)
  2. margin: 1px 2px 3px;(对应上、左右、下不同的边距大小)
  3. margin: 1px 3px;(对应上下、左右不同的边距大小)
  4. 或者单独配置边距：margin-left、margin-top

4.5 标准盒模型与怪异盒模型

标准盒模型：在标准盒模型中，元素的宽度（width）和高度（height）只包括内容区域的大小，不包括内边距和边框。 如上图：

  1. 元素实际在页面所占宽度=宽度300（width）+ 内边距10*2（padding） + 边框4*2(border);
  2. 元素实际在页面所占高度=高度150（width）+ 内边距10*2（padding） + 边框4*2(border);

怪异盒模型（IE 盒模型）：在怪异盒模型中，元素的宽度（width）和高度（height）是指内容区、内边距和边框的总和，外边距不包括在内。可以通过box - sizing属性来切换盒模型。

div {width: 300px;height: 150px;margin: 20px;padding: 10px;border: 4px solid red;box-sizing: border-box;
}

经过上方样式配置后，就会将元素更改为怪异盒模型：

  1. 元素实际在页面所占宽度300=宽度（width）+ 内边距（padding） + 边框(border);
  2. 元素实际在页面所占高度150=高度（width）+ 内边距（padding） + 边框(border);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/13491.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Spring Boot编程训练系统：构建可扩展的应用

Spring Boot编程训练系统：构建可扩展的应用

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了编程训练系统的开发全过程。通过分析编程训练系统管理的不足&#xff0c;创建了一个计算机管理编程训练系统的方案。文章介绍了编程训练系统的系统分析部分&…
阅读更多...
点云论文阅读-1-pointnet++

点云论文阅读-1-pointnet++

pointnet局限性&#xff1a;不能获取局部结构信息 作者提出pointnet需要解决的问题&#xff1a; 如何生成点云的分区&#xff08;需要保证每一个分区具有相似的结构&#xff0c;使学习算法的参数在局部共享&#xff09;如何通过一个局部特征学习算法抽象点云或局部特征 解决…
阅读更多...
Summaries 总结

Summaries 总结

Goto Data Grid 数据网格 Summaries 摘要 Summary Types 摘要类型 Total Summary 总摘要 汇总总数 &#xff08;GridSummaryItem&#xff09; 将针对所有数据网格记录进行计算&#xff0c;并显示在视图页脚中。启用 View 的 OptionsView.ShowFooter 设置以显示视图页脚。 …
阅读更多...
MySQL技巧之跨服务器数据查询：基础篇-如何获取查询语句中的参数

MySQL技巧之跨服务器数据查询：基础篇-如何获取查询语句中的参数

MySQL技巧之跨服务器数据查询&#xff1a;基础篇-如何获取查询语句中的参数 上一篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MySQL数据库的连接名: MY_ODBC_MYSQL 以…
阅读更多...
unity3d————协程练习题

unity3d————协程练习题

1.计秒器&#xff1a; void Start(){StartCoroutine(MyCoroutine());}IEnumerator MyCoroutine(){int time 0;while(true){print(time "秒");time;yield return new WaitForSeconds(1);}} 结果&#xff1a; 2.生成多个cude &#xff08;不卡顿&#xff09;&#x…
阅读更多...
Go开发指南- Gorouting

Go开发指南- Gorouting

目录&#xff1a; (1)Go开发指南-Hello World (2)Go开发指南-Gin与Web开发 (3)Go开发指南-Gorouting Goroutine 在java中我们要实现并发编程的时候&#xff0c;通常要自己维护一个线程池&#xff0c;并且需要去包装任务、调度任务和维护上下文切换。这个过程需要消耗大量的精…
阅读更多...
R语言机器学习与临床预测模型69--机器学习模型解释利器：SHAP

R语言机器学习与临床预测模型69--机器学习模型解释利器：SHAP

R小盐准备介绍R语言机器学习与预测模型的学习笔记&#xff0c; 快来收藏关注【科研私家菜】 01 机器学习的可解释性 对于集成学习方法&#xff0c;效果虽好&#xff0c;但一直无法解决可解释性的问题。我们知道一个xgboost或lightgbm模型&#xff0c;是由N棵树组成&#xff0c;…
阅读更多...
Docker部署青龙面板，实现京东自动签到刷京东，提供脚本

Docker部署青龙面板，实现京东自动签到刷京东，提供脚本

项目简介 青龙面板是一个基于Docker的可视化任务管理系统&#xff0c;用于执行定时任务&#xff0c;如自动签到。 部署安装 安装Docker curl -sSL https://get.docker.com/ | sh 安装Docker-compose 下载 Docker-Compose 二进制包 curl -L https://github.com/docker/compo…
阅读更多...
路径穿越浅析

路径穿越浅析

当使用 RouterFunctions 来处理静态资源且资源处理通过 FileSystemResource 进行配置时&#xff0c;攻击者可以通过构造恶意 HTTP 请求&#xff0c;利用路径遍历漏洞获取相关受影响版本文件系统中的任意文件。 主要影响范围&#xff1a; Spring Framework 5.3.0 - 5.3.39 6.…
阅读更多...
【网络安全渗透测试零基础入门】之Vulnhub靶场PWNOS: 2.0 多种渗透方法，收藏这一篇就够了！

【网络安全渗透测试零基础入门】之Vulnhub靶场PWNOS: 2.0 多种渗透方法，收藏这一篇就够了！

前言 这是小强给粉丝盆友们整理的网络安全渗透测试入门阶段Vulnhub靶场实战教程 喜欢的朋友们&#xff0c;记得给我点赞支持和收藏一下&#xff0c;关注我&#xff0c;学习黑客技术。 本文介绍靶机PWNOS: 2.0 的渗透方法&#xff0c;由于靶机系统比较老&#xff0c;尝试了几种…
阅读更多...
【缓存策略】你知道 Write Around（缓存绕过写）这个缓存策略吗？

【缓存策略】你知道 Write Around（缓存绕过写）这个缓存策略吗？

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…
阅读更多...
JavaScript入门笔记

JavaScript入门笔记

目录 JavaScript 介绍 1.JavaScript书写位置 1.1内部 js 1.2外部 js 2.输入和输出语法 变量 1.变量是什么 2.变量基本使用 2.1变量的声明 2.2变量的赋值 3.数组 常量 数据类型 1.数据类型 1.1基本数据类型 1.1.1.number: 数字型 1.1.2.string: 字符串型 1.1.…
阅读更多...
游戏引擎学习第七天

游戏引擎学习第七天

视频参考:https://www.bilibili.com/video/BV1QFmhYcE69 ERROR_DEVICE_NOT_CONNECTED 是一个错误代码&#xff0c;通常在调用 XInputGetState 或 XInputSetState 函数时返回&#xff0c;表示指定的设备未连接。通常会出现以下几种情况&#xff1a; 未连接控制器&#xff1a;如…
阅读更多...
IDE内存不足，这可能会影响性能。请考虑增加堆大小。

IDE内存不足，这可能会影响性能。请考虑增加堆大小。

警告信息&#xff1a;Low Memory The IDE is running low on memory and this might affect performance. Please consider increasing available heap. 解决方案&#xff1a; 重启即可。
阅读更多...
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头

Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头

记录一下工作中使用element plus时候遇到的一个小bug 就是这个小箭头太折磨人了&#xff0c;因为我需要根据路由动态加载menu&#xff0c;所以对这个menu组件进行了一些处理&#xff0c;然后可能是因为破坏了它原来的层级关系吧导致折叠菜单的时候这个小箭头还在&#xff08;官…
阅读更多...
语义通信论文略读（七）Contrastive Learning-Based Semantic Communications

语义通信论文略读（七）Contrastive Learning-Based Semantic Communications

Contrastive Learning-Based Semantic Communications 基于对比学习的语义通信 作者: Shunpu Tang, Qianqian Yang, Lisheng Fan, Xianfu Lei, Arumugam Nallanathan, George K. Karagiannidis 所属机构: 广州大学计算机科学与网络安全学院&#xff0c;浙江大学信息科学与电…
阅读更多...
windows下QT5.12.11使用MSVC编译器编译mysql驱动并使用详解

windows下QT5.12.11使用MSVC编译器编译mysql驱动并使用详解

1、下载mysql开发库，后面驱动编译的时候需要引用到，下载地址：mysql开发库下载 2、使用everything搜索：msvc-version.conf，用记事本打开，添加：QMAKE_MSC_VER=1909。不然msvc下的mysql源码加载不上。
阅读更多...
技术栈2：Git分布式版本控制工具

技术栈2：Git分布式版本控制工具

目录 1.版本控制器 2.Git概述 3.Git常用命令 4.获取本地仓库 5.基础操作指令 6.gitignore文件 7.分支与合并 8.远程仓库 1.版本控制器 1.1集中式版本控制器 集中式版本控制工具&#xff0c;版本库是集中存放在中央服务器的&#xff0c;team里每个人work时…
阅读更多...
【ARM Coresight OpenOCD 系列 5 -- arp_examine 使用介绍】

【ARM Coresight OpenOCD 系列 5 -- arp_examine 使用介绍】

文章目录 OpenOCD arp_examine 使用 OpenOCD arp_examine 使用 因为我们很多时候运行 Openocd 的时候有些 core 还没有启动, 所以最好在配置脚本中添加 -defer-examine这个参数, 如下&#xff1a; #cortex-m33 target create ${_CHIPNAME}.m33 cortex_m -dap ${_CHIPNAME}.da…
阅读更多...
计算机毕业设计Python+大模型斗鱼直播可视化 直播预测 直播爬虫 直播数据分析 直播大数据 大数据毕业设计 机器学习 深度学习

计算机毕业设计Python+大模型斗鱼直播可视化 直播预测 直播爬虫 直播数据分析 直播大数据 大数据毕业设计 机器学习 深度学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…
阅读更多...
最新文章

Copyright @ 2022~2023