当前位置： 首页 > news >正文

CSS基础入门

news 2025/7/5 12:26:09

CSS基础之语法

介绍

​CSS（层叠样式表）是一门用来设计网页样式的语言，如网页的布局、字体、颜色搭配、视觉特效。作为WEB开发的基础技术之一，掌握CSS的语法和API对于我们构建丰富的网页是必须的。

基础语法

<style>div {border: 5px red;}p,span {color: black;}.container {border: 5px red;}
</style>
  • 语法由一个选择器起头，它决定了将我们的样式添加到那些HTML元素上。接着是 {} ，在两个大括号中间可以定义多个 属性:值; 对，不同的属性有不同的合法值。
<div style="border: 5px red;"></div>
  • 行内样式是指将 属性:值; 写在HTML元素的 style 属性中的样式。
<link rel="stylesheet" href="styles.css">
  • 通过 link 标签，可以不必将CSS内容和HTML内容写在同一个文件中，而是存放到不同文件，这样不仅使代码更简洁，在需要的情况下我们可以将CSS拆分到不同的CSS文件中，在加载时按需加载。

选择器

​在基础语法小节我们看到选择器是CSS规则的第一部分，它告诉浏览器哪个HTML元素应该被选中应用样式。选择器有很多种，它们可以单独使用也可以组合使用，还支持一定的表达式。

<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="utf-8"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><style>/* 类型选择器 */div {border: 2px black solid;}/* 分组选择器：div或span元素 */div,span{border: 2px black solid;}/* 类选择器 */.container{border: 2px red solid;}/* ID选择器 */#key{border: 2px yellow solid;}/* 标签属性选择器 */div[align]{border: 2px yellowgreen solid;}/* 标签属性值选择器 */div[align=left]{border: 2px darkorange solid;}</style></head><body><div>1.类型选择器</div><div class="container">2.类选择器</div><div id="key">3.ID选择器</div><div align="center">4.标签属性选择器</div><div align="left">5.标签属性值选择器</div></body>
</html>
  • 代码片段展示了几种基础的选择器。
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="utf-8"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><style>/* 后代选择器 */div span {color: red;}/* 子代选择器 */div > span {color: antiquewhite;}/* 相邻选择器 */h1 + p {color:aqua;}/* 同辈选择器 */h2 ~ p {color:brown;}/* 关系选择器（组合） */div > article > h2 ~ p {color:chartreuse;}</style></head><body><div><p><span>1.后代选择器</span></p></div><div><span>2.子代选择器</span></div><article><h1>滕王阁序</h1><p>3.豫章故郡，洪都新府。</p></article><article><h2>静夜思</h2><p>4.床前明月光，疑是地上霜。</p><p>4.举头望明月，抵扣思故乡。</p></article><div><article><h2>静夜思</h2><p>5.床前明月光，疑是地上霜。</p><p>5.举头望明月，抵扣思故乡。</p></article></div></body>
</html>
  • 关系选择器提供了一种与文档位置相关的关联逻辑，通过这套逻辑可以按后代、子代、相邻、同辈等关系指定样式。
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="utf-8"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><style>/* 组合1 */div > article > h2 + p {color:chartreuse;}/* 组合2 */div > article > h2 ~ p[k] {color:darkgreen;}/* 组合3 */div > article > h2 ~ .css {color:red;}</style></head><body><div><article><h2>滕王阁序</h2><p>1.豫章故郡，洪都新府。</p><p class="css">1.星分翼轸，地接衡庐。</p><p k="d">2.襟三江而带五湖，控蛮荆而引瓯越。</p></article></div></body>
</html>
  • 各种选择器可以任意组合使用。

理解继承

像字体的样式我们在指定之后，不想每个后代元素都指定一边，而是希望他们与它的父元素保持一直，这种特性CSS是支持的。

理解继承

<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="utf-8"/><meta property="og:locale" content="zh-CN"/><title>理解继承</title><style>#human{color: red;font-size: 10px;}.bjy{color: yellowgreen;}</style></head><body><div id="human"><p>李白</p><p class="bjy">白居易</p></div></body>
</html>
  • “李白”显示红色，是因为 p 元素的 color 元素继承自父容器 div 。
  • “白居易”显示黄绿色，是因为类样式中的 color 覆盖了从父容器那继承的属性值。
  • 并不是所有属性都会被继承，例如width、margin、padding 和 border。

控制继承

​为了控制继承行为CSS提供了5个特殊的属性值，所有的CSS属性都可以接收这些值。

  • inherit：设置属性值与父元素相同（开启继承）。
  • initial：设置为属性的初始值。
  • unset：如果属性有从父元素继承的值则设置为该值，否则重置为初始值。
  • revert：类似与unset，不同的是将重置为浏览器的默认样式而不是改属性的默认值。
  • revert-layer：重置为上一个级联层（@layer）中建立的值。

控制所有属性的继承

<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="utf-8"/><meta property="og:locale" content="zh-CN"/><title>理解继承</title><style>div{color: red;font-size: 10px;}.name{/* 当我们有很多属性并且它们的继承行为是一致的时候，可以使用all来简写这种行为 */all: initial;}</style></head><body><div><p>李白</p><p class="name">白居易</p></div></body>
</html>

理解层叠

​你是否会有疑惑，当不同的选择器针对某个HTML设置了不同的背景颜色，浏览器会以那个为准？在实际工作中有时你会发现明明书写了CSS规则但是HTML元素的样式就是不变。接下来我们来学习下浏览器是怎么解决CSS规则冲突的。

​CSS是Cascading Style Sheets的简写，理解第一个词层叠（cascade）很重要。层叠可以理解成一个元素 p 的 color 属性值有多个来源进而发生冲突的现象，也可以理解是解决这种冲突的手段。有三个因素决定了浏览器应用那个CSS规则到元素上，将它们按重要性排序分别是：资源顺序、优先级、重要程度。

资源顺序

<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="utf-8"/><meta property="og:locale" content="zh-CN"/><title>理解继承</title><style>p{color: red;}p{color: yellowgreen;}</style></head><body><div id="human"><p>李白</p><p>白居易</p><p style="color: aqua;color:black;">王浩然</p></div></body>
</html>
  • 当样式的优先级相同时，在后面的规则会覆盖前面的规则。

优先级

​选择器的优先级有三部分组成 {id}.{类}.{元素}，每个部分都会计算出一个分值，这些分值就是选择器的权重。在比较权重时会先比较 {id} 部分，相等时比较 {类} 部分，还相等则比较 {元素} 部分。优先级的计算如下表所示：

选择器ID类元素优先级
h1{ 规则内容 }0010-0-1
h1 + p::first-letter{ 规则内容 }0030-0-3
li > a[href*="en-US"] > .inline-warning{ 规则内容 }0220-2-2
#identifier{ 规则内容 }1001-0-0
button:not(#mainBtn, .cta){ 规则内容 }1011-0-1
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="utf-8"/><meta property="og:locale" content="zh-CN"/><title>理解继承</title><style>/* 2-0-0 */#human #bjy{color: red;}/* 1-0-0 */#bjy{color: yellowgreen;}/* 0-0-1 */div{color: blue;}/* 0-0-2 */div span{color: chartreuse;}/* 1-0-1 */div #bjy2{color:cadetblue;}</style></head><body><div id="human"><p id="bjy">白居易</p></div><div><span>李白</span><span id="bjy2">白居易</span></div></body>
</html>
  • 内联样式优先于所有普通样式，内联样式的权重分值可以理解是 1-0-0-0，即无论有多少ID选择器，内联样式的优先级都是最高的。

!important

​关键词 !important 会忽略优先级强制生效。覆盖!important 的唯一办法就是有另一个更高优先级或者相同优先级且顺序靠后的!important 。

4· -<html lang="en-US" prefix="og: https://ogp.me/ns#">    <head><meta charset="utf-8"/><meta property="og:locale" content="zh-CN"/><title>!important</title><style>/* 1-0-0 */#lb,#bjy{color: red;}/* 0-0-1 */p{color: yellowgreen !important;}</style></head><body><p id="lb">李白</p><p id="bjy" style="color: yellow !important;">白居易</p></body>
</html>

​在编写我们的样式代码时最好不要使用!important，因为它改变了层叠的默认行为，会增加我们排查样式问题的难度。尤其是在大型样式表中（当你想覆盖UI框架样式时）。

相关文章：

CSS基础入门

CSS基础之语法 介绍 ​CSS&#xff08;层叠样式表&#xff09;是一门用来设计网页样式的语言&#xff0c;如网页的布局、字体、颜色搭配、视觉特效。作为WEB开发的基础技术之一&#xff0c;掌握CSS的语法和API对于我们构建丰富的网页是必须的。 基础语法 <style>div …...

编程日记 2023/4/19 15:15:33

可重入锁、读写锁、邮戳锁 详解

文章目录1、可重入锁&#xff08;递归锁&#xff09;2、读写锁2.1、读写分离2.2、从写锁到读锁&#xff0c;ReentrantReadWriteLock可以降级2.3、写锁和读锁是互斥的3、邮戳锁StampedLock3.1、是什么3.2、锁饥饿3.3、如何缓解锁饥饿问题呢3.3.1、使用“公平”策略3.3.2、Stampe…...

编程日记 2023/4/19 5:23:07

HBase客户端、服务器端、列簇设计、HDFS相关优化，HBase写性能优化切入点，写异常问题检查点

HBase客户端、服务器端、列簇设计、HDFS相关优化&#xff0c;HBase写性能优化切入点&#xff0c;写异常问题检查点HBase读优化1.1 HBase客户端优化1) scan缓存是否设置合理&#xff1f;2) get请求是否可以使用批量请求&#xff1f;3) 请求是否可以显示指定列簇或者列&#xff1…...

编程日记 2023/4/18 11:15:10

DINO-DETR在COCO缩减数据集上实验结果分析

博主在进行DINO-DETR模型实验时&#xff0c;使用缩减后的COCO数据集进行训练&#xff0c;发现其mAP值只能达到0.27作用&#xff0c;故而修改了下pycocotool的代码&#xff0c;令其输出每个类别的AP值&#xff0c;来看看是由于什么原因导致这个问题。 之所以这样是因为博主认为各…...

编程日记 2023/4/18 11:17:06

语聊房app源码及架构设计

语音社交产品技术架构设计 语音社交产品的技术架构设计是产品开发中非常重要的一环。在设计时需要考虑产品的功能、性能、可靠性等多个方面&#xff0c;同时也需要与产品策划与设计相协调。以下是语音社交产品技术架构设计的主要内容。 架构设计原则 在设计语音社交产品的技…...

编程日记 2023/3/31 19:00:27

什么是软件测试？5分钟带你快速了解！

经常有人问我&#xff0c;你的公司是做什么的&#xff1f;我回答“软件测试”&#xff0c;看着对方一脸的迷茫。何为软件测试&#xff1f;软件测试究竟测试什么&#xff1f;一、软件测试的定义和意义软件测试是伴随着软件工程的重要组成部分&#xff0c;是软件质量保证的重要前…...

编程日记 2023/4/15 16:46:06

[3D游戏开发实践] Cocos Cyberpunk 源码解读-手把手教你新增一个后效Shader

Cocos Cyberpunk 是 Cocos 引擎官方团队以展示引擎重度 3D 游戏制作能力&#xff0c;提升社区学习动力而推出的完整开源 TPS 3D游戏&#xff0c;支持 Web, IOS, Android 多端发布。 本系列文章将从各个方面对源码进行解读&#xff0c;提升大家的学习效率。希望能够帮助大家在 …...

编程日记 2023/4/16 6:02:01

构建产品帮助中心，促进SaaS企业的进步

长期来看&#xff0c;保留现有客户比获取新客户更为关键&#xff0c;因此建立良好的客户服务质量需要着重关注客户心理状态。 什么是 SaaS SaaS是软件即服务&#xff08;Software as a Service&#xff09;的缩写。它是一种软件交付模式&#xff0c;其中软件应用程序托管在云计…...

编程日记 2023/4/18 11:18:58

【Qt】Qt单元测试详解（四）：Google Test

1、创建测试工程 【Qt】Qt单元测试详解（一）：通过QtCreator创建测试工程 2、添加测试代码 2.1 默认生成的代码 1）项目工程pro include(gtest_dependency.pri)TEMPLATE = app CONFIG += console c++14 CONFIG -= app_bundle CONFIG += thread CONFIG -= qtHEADERS += \t…...

编程日记 2023/4/11 6:28:52

容器引擎Docker的常用命令

一.镜像相关命令 1.搜索镜像 可使用 docker search命令搜索存放在 Docker Hub中的镜像。执行该命令后&#xff0c; Docker就会在Docker Hub中搜索含有 java这个关键词的镜像仓库 docker search java以上列表包含五列&#xff0c;含义如下&#xff1a; NAME:镜像仓库名称。D…...

编程日记 2023/3/31 18:35:21

vue尚品汇商城项目-day01【3.项目路由的分析】

文章目录本人其他相关文章链接安装命令&#xff1a;cnpm install --save vue-router vue-router 前端所谓路由&#xff1a;kv键值对 key:URL(地址栏中的路径) value:相应的路由组件 注意&#xff1a;本项目是上中下结构 路由组件&#xff1a; Home首页路由组件、Search路由组件…...

编程日记 2023/4/16 6:09:03

详解--高级IO

文章目录前言一、五种IO模型阻塞IO非阻塞IO信号驱动IOIO多路转接:异步IO二、高级IO同步通信和异步通信阻塞 VS 非阻塞其他高级IO三、非阻塞IOfcntl实现函数SetNoBlock总结前言 理解五种IO模型的基本概念.重点是IO多路转接. 正文开始! 一、五种IO模型 IO: 等 数据拷贝 read/…...

编程日记 2023/3/31 18:25:18

Android自定义闹钟

google推荐方式3种&#xff1a; 一、AlarmManager setRepeating() 重复闹钟。1、Android 4.4&#xff08;API 级别 19&#xff09;开始&#xff0c;所有重复闹钟都是不精确的&#xff0c;延时2分钟左右。2、闹钟触发的待定 Intent。当您设置使用同一待定 Intent 的第二个闹钟…...

编程日记 2023/4/18 11:21:48

第02章_MySQL环境搭建

第02章_MySQL环境搭建 &#x1f3e0;个人主页&#xff1a;shark-Gao &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是shark-Gao&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f389;目前状况&#xff1a;23届毕业生&#xff0c;目前…...

编程日记 2023/4/15 16:47:29

java使用线程池和Future接口实现异步的实例

线程池可以提供线程的复用和管理&#xff0c;避免线程频繁创建和销毁的开销。而Future接口则可以获取异步任务的执行结果和状态&#xff0c;避免了阻塞等待异步任务完成的情况。下面是一个简单的示例代码&#xff1a; import java.util.concurrent.*;public class AsyncExample…...

编程日记 2023/4/15 16:48:39

cocosCreator 事件系统

概述&#xff1a; DOM的输入事件通过CCInputManager转化成cocos的输入事件&#xff0c;由CCEventManager 分发给监听器。 监听器在通过回调函数(begin/move/end/cancel)告知事件派发对象&#xff08;eventTarget&#xff09;派发事件。 重要类&#xff1a; event&#xff1…...

编程日记 2023/4/15 16:50:33

刷题_20：字符串反转 and 公共子串计算

一.字符串反转 题目链接&#xff1a; 字符串反转 题目描述&#xff1a; 接受一个只包含小写字母的字符串&#xff0c;然后输出该字符串反转后的字符串。&#xff08;字符串长度不超过1000&#xff09; 输入描述&#xff1a; 输入一行&#xff0c;为一个只包含小写字母的字符串…...

编程日记 2023/4/16 6:10:44

如何在 Linux 命令行中比较两个目录，我教你五个命令！

在 Linux 命令行中比较两个目录是一项常见的任务&#xff0c;特别是当你需要确保两个目录之间的文件完全相同时。在本文中&#xff0c;我们将介绍一些在 Linux 命令行中比较两个目录的方法。 方法一&#xff1a;使用 diff 命令比较两个目录 diff 命令可以比较两个文件或目录之…...

编程日记 2023/4/19 15:18:26

多元算力如何满足万千本土化场景需求，解析第四代至强核心加速器设计

作者 | 宋慧 出品 | CSDN 云计算 2023 年初&#xff0c;英特尔重磅发布了企业级芯片领域重要的产品——第四代英特尔 至强 可扩展处理器。当时报道中&#xff0c;我们就重点提到了其中重要的七大内置加速器&#xff0c;这也是英特尔为千行百业多种创新场景去提供算力支持的底气…...

编程日记 2023/4/18 11:23:30

SPI主模式切换为从模式

一、SPI主模式切换为从模式在SPI总线上&#xff0c;要将主设备转换为从设备或者将从设备转换为主设备&#xff0c;需要通过改变SPI控制寄存器的配置来实现。下面分别介绍SPI主模式切换为从模式的步骤&#xff1a;配置从设备的SPI控制寄存器首先需要配置从设备的SPI控制寄存器。…...

编程日记 2023/4/13 17:42:23

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/6/20 13:53:42

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/7/4 0:30:46

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/6/19 5:45:52

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/6/21 1:16:50

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/7/3 22:55:35

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/6/21 18:04:05

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2025/7/4 12:50:57

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/7/4 16:17:03