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

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

news 2025/9/19 7:12:14

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

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/9/18 19:23:34

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/7/31 5:34:43

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/9/18 22:34:40

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/9/18 17:18:22

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/9/7 8:49:46

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2025/9/7 8:48:47

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...

编程新知 2025/9/15 2:53:22

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

编程新知 2025/9/14 14:14:48

【工具教程】多个条形码识别用条码内容对图片重命名，批量PDF条形码识别后用条码内容批量改名，使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...

编程新知 2025/9/9 16:40:17

生信服务器 | 做生信为什么推荐使用Linux服务器？

原文链接&#xff1a;生信服务器 | 做生信为什么推荐使用Linux服务器&#xff1f; 一、 做生信为什么推荐使用服务器&#xff1f; 大家好&#xff0c;我是小杜。在做生信分析的同学&#xff0c;或是将接触学习生信分析的同学&#xff0c;<font style"color:rgb(53, 1…...

编程新知 2025/9/9 10:00:10