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

QD1-P21-P22 CSS 基础语法、注释、使用方法

news 2026/2/8 23:44:20

本节学习：CSS 基础语法和注释，以及如何使用CSS定义的样式。

本节视频

https://www.bilibili.com/video/BV1n64y1U7oj?p=21

CSS 基本语法

CSS（层叠样式表）的基本语法相对简单，由选择器和一组包含在花括号 {}​ 中的声明组成。

​Clip_2024-10-12_16-44-47​

组成部分：

  • 选择器

    选择器用于指定你想要样式化的 HTML 元素。它们可以是元素名称、类名、ID 或者属性值等。

  • 声明

    声明由一个属性（property）和一个值（value）组成，中间用冒号 :​ 分隔。每个声明结束于一个分号 ;​。

  • 属性

    属性是你要设置的样式特性，如颜色、字体大小、边距等。

  • 值

    值是你想要应用到属性上的具体信息，如特定的颜色代码、像素值等。

实践，如何使用CSS定义的样式

  • 内联样式：直接在 HTML 元素中使用 style ​属性。

​Clip_2024-10-12_17-00-52​

作用域：只作用于当前元素。

‍

  • 内联样式表：在 HTML 文件的 <head> ​部分使用 <style> ​元素定义样式。

​Clip_2024-10-12_16-54-57​

作用域：当前页面的元素。

‍

  • 外部样式表：将样式写在外部 CSS 文件中，再在 HTML 文档中通过 <link> ​元素导入 CSS 文件中的样式。

​Clip_2024-10-12_17-18-45​

​Clip_2024-10-12_17-21-01​

作用域：所有页面都可以导入 CSS 外部样式。

优先级和作用域

样式生效的优先级规则：就近原则。

‍

样式优先级：内联样式 > 内联样式表 > 外部样式表

样式作用域：外部样式表 > 外部样式表 > 内联样式

规范代码格式

规范的写法应该在 link 标签和 style 标签中使用 type 属性指定导入代码的类型为text/css​

​Clip_2024-10-12_17-34-45​

虽然没有写type属性浏览器也正常加载了，但不能保障所有浏览器都能够识别不规范的CSS代码。

特别是CSS代码存在错误时，浏览器不会报错，但是不能正常加载CSS定义的样式。没有报错信息，这就不好调试了。所以一开始就要把代码写规范。

‍

相关文章：

QD1-P21-P22 CSS 基础语法、注释、使用方法

本节学习&#xff1a;CSS 基础语法和注释&#xff0c;以及如何使用CSS定义的样式。 本节视频 https://www.bilibili.com/video/BV1n64y1U7oj?p21 CSS 基本语法 CSS&#xff08;层叠样式表&#xff09;的基本语法相对简单&#xff0c;由选择器和一组包含在花括号 {}​ 中的声…...

编程日记 2024/10/13 8:36:01

您是否也在寻找免费的 PDF 编辑器工具？10个备选PDF 编辑器工具

您是否也在寻找免费的 PDF 编辑器工具&#xff1f; 如果是&#xff0c;那么您在互联网上处于最佳位置&#xff01; 本指南中提到的所有 10 大免费 PDF 编辑器工具都易于使用&#xff0c;可以允许您添加文本、更改图像、添加图形、填写表格、添加签名等等。 因此&#xff0c;…...

编程日记 2024/10/13 8:33:58

C++调试方法（Vscode）（一） ——本地调试

初学者在调试一段代码的时候&#xff0c;经常出于不明原因&#xff0c;写出bug&#xff0c;导致程序崩溃。但是定位崩溃的地方时&#xff0c;往往采用简单而朴素的方法&#xff1a;即采用cout或者printf进行输出。这种方式既原始&#xff0c;又低效。一个合格的工程师应该是通过…...

编程日记 2024/10/13 8:32:57

C语言 | Leetcode C语言题解之第460题LFU缓存

题目&#xff1a; 题解&#xff1a; /* 数值链表的节点定义。 */ typedef struct ValueListNode_s {int key;int value;int counter;struct ValueListNode_s *prev;struct ValueListNode_s *next; } ValueListNode;/* 计数链表的节点定义。 其中&#xff0c;head是数值链表的头…...

编程日记 2024/10/13 8:30:55

【AI论文精读12】RAG论文综述2（微软亚研院 2409）P4-隐性事实查询L2

AI知识点总结&#xff1a;【AI知识点】 AI论文精读、项目、思考&#xff1a;【AI修炼之路】 P1&#xff0c;P2&#xff0c;P3 四、隐性事实查询&#xff08;L2&#xff09; 4.1 概述 ps&#xff1a;P2有四种查询&#xff08;L1&#xff0c;L2&#xff0c;L3&#xff0c;L4&…...

编程日记 2024/10/13 8:25:50

SpringBoot中间件Docker

Docker&#xff08;属于C/S架构软件&#xff09; 简介与概述 1.Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux …...

编程日记 2024/10/13 8:18:41

计算机毕设选题推荐【大数据专业】

计算机毕设选题推荐【大数据专业】 大数据专业的毕业设计需要结合数据的采集、存储、处理与分析等方面的技能。为帮助同学们找到一个适合且具有实践性的选题&#xff0c;我们为大家整理了50个精选的毕设选题。这些选题涵盖了大数据分析、处理技术、可视化等多个方向&#xff0…...

编程日记 2024/10/13 8:15:38

Bootstrap 4 多媒体对象

Bootstrap 4 多媒体对象 引言 Bootstrap 4 是目前最受欢迎的前端框架之一，它提供了一套丰富的工具和组件，帮助开发者快速构建响应式和移动设备优先的网页。在本文中，我们将重点探讨 Bootstrap 4 中的多媒体对象（Media Object）组件，这是一种用于构建复杂和灵活布局的强大…...

编程日记 2024/10/13 8:13:36

Springmvc Thymeleaf 标签

Thymeleaf是一个适用于Java的模板引擎&#xff0c;它允许开发者将动态内容嵌入到HTML页面中。在SpringMVC框架中&#xff0c;Thymeleaf可以作为一个视图解析器&#xff0c;使得开发者能够轻松地创建动态网页。以下是关于SpringMVC中Thymeleaf标签的详细介绍&#xff1a; 一、T…...

编程日记 2024/10/13 8:11:33

用java来编写web界面

一、ssm框架整体目录架构 二、编写后端代码 1、编写实体层代码 实体层代码就是你的对象 entity package com.cv.entity;public class Apple {private Integer id;private String name;private Integer quantity;private Integer price;private Integer categoryId;public…...

编程日记 2024/10/13 8:10:32

如何利用Fiddler进行抓包并自动化

首先一般使用Fiddler都是对手机模拟器进行抓包 接下来以MUMU模拟器为例 首先打开Fiddler-->tool-->options-->connection 将要打上的勾都打上&#xff0c;可以看到代理的端口是8888 打开HTTPS选项 把要打的勾打上&#xff0c;这样子才可以接收到HTTPS的包 MUMU打开…...

编程日记 2024/10/13 8:09:31

权重衰减与暂退法——pytorch与paddle实现模型正则化

权重衰减与暂退法——pytorch与paddle实现模型正则化 在深度学习中&#xff0c;模型正则化是一种至关重要的技术&#xff0c;它有助于防止模型过拟合&#xff0c;提高泛化能力。过拟合是指在训练数据上表现良好&#xff0c;但在测试数据或新数据上表现不佳的现象。为了缓解这一…...

编程日记 2024/10/13 8:08:30

MYSQL-windows安装配置两个或多个版本MYSQL

安装第一个mysql很简单&#xff0c;这里不再赘述。主要说说第二个怎么安装&#xff0c;服务怎么配置。 1. 从官网下载第二个MySQL并安装 一般都是免安装版了&#xff0c;下载解压到某个文件目录下(路径中尽量不要带空格或中文)&#xff0c;再新建一个my.ini文件&#xff08;或…...

编程日记 2024/10/13 8:05:27

6、Spring Boot 3.x集成RabbitMQ动态交换机、队列

一、前言 本篇主要是围绕着 Spring Boot 3.x 与 RabbitMQ 的动态配置集成&#xff0c;比如动态新增 RabbitMQ 交换机、队列等操作。二、默认RabbitMQ中的exchange、queue动态新增及监听 1、新增RabbitMQ配置 RabbitMQConfig.java import org.springframework.amqp.rabbit.a…...

编程日记 2024/10/13 8:01:21

【分布式微服务云原生】 探索SOAP协议：简单对象访问协议的深度解析与实践

探索SOAP协议&#xff1a;简单对象访问协议的深度解析与实践 摘要&#xff1a; 在现代分布式系统中&#xff0c;SOAP&#xff08;简单对象访问协议&#xff09;扮演着至关重要的角色&#xff0c;提供了一种标准化的方式来实现不同系统间的通信。本文深入探讨了SOAP的工作原理、…...

编程日记 2024/10/13 7:56:16

C语言题目练习2

前面我们知道了单链表的结构及其一些数据操作&#xff0c;今天我们来看看有关于单链表的题目~ 移除链表元素 移除链表元素&#xff1a; https://leetcode.cn/problems/remove-linked-list-elements/description/ 这个题目要求我们删除链表中是指定数据的结点&#xff0c;最终返…...

编程日记 2024/10/13 7:54:07

复变函数与积分变换——留数定理求拉氏逆变换

1.留数定理 若s1&#xff0c;s2&#xff0c;…&#xff0c;sn是F(s)的所有奇点&#xff08;函数在某个点上的取值无定义或者无限大&#xff09;&#xff0c;且当s→∞时&#xff0c;F(s)→0&#xff0c;则有&#xff1a; 一般地&#xff1a; s1是一级极点&#xff0c;则&#…...

编程日记 2024/10/13 7:52:05

RabbitMQ事务模块

目录 消息分发​​​​​​​ 负载均衡 幂等性保障 顺序性保障 顺序性保障方案 二号策略:分区消费 三号策略:消息确认机制 四号策略: 消息积压 RabbitMQ集群 选举过程 RabbitMQ是基于AMQP协议实现的,该协议实现了事务机制&#xff0c;要么全部成功&#xff0c;要么全…...

编程日记 2024/10/13 7:47:56

Android终端GB28181音视频实时回传设计探讨

技术背景 好多开发者&#xff0c;在调研Android平台GB28181实时回传的时候&#xff0c;对这块整体的流程&#xff0c;没有个整体的了解&#xff0c;本文以大牛直播SDK的SmartGBD设计开发为例&#xff0c;聊下如何在Android终端实现GB28181音视频数据实时回传。 技术实现 Andr…...

编程日记 2024/10/13 7:43:52

AI金融攻防赛：金融场景凭证篡改检测(DataWhale组队学习)

引言 大家好&#xff0c;我是GISer Liu&#x1f601;&#xff0c;一名热爱AI技术的GIS开发者。本系列文章是我跟随DataWhale 2024年10月学习赛的AI金融攻防赛学习总结文档。本文主要讲解如何解决 金融场景凭证篡改检测的核心问题&#xff0c;以及解决思路和代码实现过程。希望…...

编程日记 2024/10/13 7:41:50

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2026/2/6 5:51:08

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...

编程新知 2025/12/15 8:20:48

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2026/2/5 3:03:00

车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程新知 2026/1/26 21:09:29