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

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

news 2026/5/18 1:51:19

本节学习：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

proxy-doctor：自动化诊断与修复开发工具代理配置的利器

1. 项目概述与核心价值最近在折腾一些需要稳定网络连接的项目时&#xff0c;遇到了一个老生常谈但又极其恼人的问题&#xff1a;代理配置。无论是开发环境里的包管理工具&#xff0c;还是日常使用的命令行工具&#xff0c;一旦涉及到网络请求&#xff0c;代理设置不对&#xff…...

编程新知 2026/5/17 10:42:01

一键获取Steam游戏清单：Onekey工具让游戏管理变得如此简单

一键获取Steam游戏清单&#xff1a;Onekey工具让游戏管理变得如此简单 【免费下载链接】Onekey Onekey Steam Depot Manifest Downloader 项目地址: https://gitcode.com/gh_mirrors/one/Onekey 你是否曾为管理Steam游戏文件而烦恼&#xff1f;想备份心爱的游戏却不知从…...

编程新知 2026/5/17 10:28:28

SmarterRouter：基于软件定义与模块化构建智能路由器系统

1. 项目概述&#xff1a;一个更聪明的路由器&#xff0c;它到底想做什么&#xff1f;如果你和我一样&#xff0c;折腾过家里的网络&#xff0c;从刷第三方固件到组软路由&#xff0c;那你肯定对“路由器”这三个字有复杂的感情。它本该是默默无闻的网络基石&#xff0c;却常常因…...

编程新知 2026/5/17 9:31:23

【低功耗蓝牙】④ 蓝牙MIDI协议：从ESP32 MicroPython代码到智能乐器DIY

1. 蓝牙MIDI协议入门&#xff1a;从音乐小白到智能乐器开发者 第一次听说蓝牙MIDI协议时&#xff0c;我正盯着桌上的ESP32开发板发呆。作为一个只会弹几个和弦的编程爱好者&#xff0c;完全没想到自己能用代码"演奏"音乐。蓝牙MIDI就像音乐世界的通用语言&#xff0c…...

编程新知 2026/5/17 9:31:20

如何在3分钟内为Photoshop安装AVIF插件：让你的图片体积减半的终极方案

如何在3分钟内为Photoshop安装AVIF插件&#xff1a;让你的图片体积减半的终极方案 【免费下载链接】avif-format An AV1 Image (AVIF) file format plug-in for Adobe Photoshop 项目地址: https://gitcode.com/gh_mirrors/avi/avif-format 还在为网站图片加载缓慢而烦恼…...

编程新知 2026/5/17 9:24:51

终极Windows Defender移除指南：13项核心服务的完整卸载方案

终极Windows Defender移除指南&#xff1a;13项核心服务的完整卸载方案 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_mirror…...

编程新知 2026/5/17 9:12:34

基于大语言模型的本地语义搜索工具LLocalSearch部署与应用指南

1. 项目概述&#xff1a;一个能“读懂”你电脑的本地搜索工具 如果你和我一样&#xff0c;电脑里塞满了各种文档、邮件、聊天记录和代码片段&#xff0c;那么“找东西”这件事&#xff0c;绝对能排进日常最耗时的任务前三。传统的文件搜索&#xff0c;比如Windows自带的搜索或者…...

编程新知 2026/5/17 8:37:01

开源机械爪控制库：从PID算法到ROS集成的全栈开发指南

1. 项目概述&#xff1a;一个开源的机械爪设计与控制库最近在机器人硬件开发的圈子里&#xff0c;开源项目“MeyerZhou/openclaw”引起了不少创客和机器人爱好者的注意。简单来说&#xff0c;这是一个专注于机械爪&#xff08;或称机械手、夹爪&#xff09;设计与控制的代码库和…...

编程新知 2026/5/17 8:37:00

基于 Next.js 的无头电商架构实战：从 Vercel Commerce 看现代全栈开发

1. 项目概述&#xff1a;一个面向未来的全栈电商起点如果你最近在琢磨着用 Next.js 搞一个电商网站&#xff0c;或者想找一个现代、开箱即用的全栈电商模板来启动项目&#xff0c;那你大概率已经听说过vercel/commerce这个仓库了。它不是某个具体的电商平台&#xff0c;而是一个…...

编程新知 2026/5/17 6:59:25

Deep Lake：AI数据湖实战指南，解决深度学习数据管理难题

1. 项目概述&#xff1a;当数据湖遇上深度学习如果你在深度学习项目里被数据管理搞得焦头烂额过&#xff0c;那你肯定懂我在说什么。模型训练到一半&#xff0c;发现数据版本不对&#xff0c;或者想对海量图像、视频做快速查询和采样&#xff0c;结果被IO速度卡得死死的。传统的…...

编程新知 2026/5/17 5:52:52