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

本节学习: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定义的样式。没有报错信息,这就不好调试了。所以一开始就要把代码写规范。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入Postman- 自动化篇

前言 在前两篇博文《Postman使用 - 基础篇》《玩转Postman:进阶篇》中,我们介绍了 Postman 作为一款专业接口测试工具在接口测试中的主要用法以及它强大的变量、脚本功能,给测试工作人员完成接口的手工测试带来了极大的便利。其实在自动化测试上,Postman 也能进行良好的支…

【Adobe全家桶】 Adobe 全家桶 AE AU PR ME WIN MAC 各个版本

话不多说今天直接分享 Adobe 全家桶&#xff0c;2017-2024版本 包含 window版本 和MAC版本 Adobe Photoshop 2017-2023 CS5-6 mac版本下载地址 WIN版本下载地址 Adobe After Effects 2017-2024 CS5-6 WIN版本下载地址 mac版本下载地址 Adobe Media Encoder 2017-2024 WIN版…

OceanBase + DolphinScheduler,搭建分布式大数据调度平台的实践

本文整理自白鲸开源联合创始人&#xff0c;Apache DolphinScheduler PMC Chair&#xff0c;Apache Foundation Member 代立冬的演讲。主要介绍了DolphinScheduler及其架构、DolphinScheduler与OceanBase 的联合大数据方案。 DolphinScheduler是什么&#xff1f; Apache Dolphi…

AOT漫谈专题(第二篇): 如何对C# AOT轻量级APM监控

一&#xff1a;背景 1. 讲故事 上一篇我们聊到了如何调试.NET Native AOT 程序&#xff0c;这是研究一个未知领域知识的入口&#xff0c;这篇我们再来看下如何对 Native AOT 程序进行轻量级的APM监控&#xff0c;当然这里的轻量级更多的是对 AOT 中的coreclr内容的挖掘。 二…

工业物联网关-ModbusTCP

Modbus-TCP模式把网关视作Modbus从端设备&#xff0c;主端设备可以通过Modbus-TCP协议访问网关上所有终端设备。用户可以自定义多条通道&#xff0c;每条通道可以配置为TCP Server或者TCP Slave。注意&#xff0c;该模式需要指定采集通道&#xff0c;采集通道可以是串口和网口通…

linux 下 verilog 简明开发环境附简单实例

author: hjjdebug date: 2024年 10月 12日 星期六 10:34:13 CST descripton: linux 下 verilog 简明开发环境附简单实例 甲: 安装软件 1. sudo apt install iverilog 该包verilog 源代码的编译器iverilog&#xff0c;其输出是可执行的仿真文件格式vvp格式 它可以检查源代码中…

跟踪一切学习笔记2024

目录 Track-Anything 多目标跟踪分割 masa 多目标检测跟踪: omnimotion iKUN Track-Anything 交互式,选择多个要跟踪的物体,最后是分割 多目标跟踪分割 https://github.com/gaomingqi/Track-Anything masa 多目标检测跟踪:

单臂路由实现vlan间互访

划分vlan 可以隔离广播域,但vlan 之间无法通信。既能隔离广播域,防止广播风暴的发生,又能实现vlan 之间的通信,就需要用到网络层的路由器,可以通过路由器,以单臂路由的方式来实现vlan 之间的通信。 以下是在神州交换机和路由器上实现单臂路由实现 VLAN 间互访的配置代码示…

Sentinel最全笔记,详细使用步骤教程清单

一、Sentinel的基本功能 1、流量控制 流量控制在网络传输中是一个常用的概念&#xff0c;它用于调整网络包的发送数据。然而&#xff0c;从系统稳定性角度考虑&#xff0c;在处理请求的速度上&#xff0c;也有非常多的讲究。任意时间到来的请求往往是随机不可控的&#xff0c;…

光伏项目难管理的问题如何解决?

1.数字化管理平台的应用 数字化是当前解决光伏项目管理难题的关键手段之一。通过建立统一的数字化管理平台&#xff0c;可以实现对光伏电站的远程监控、数据分析、故障预警及运维调度等功能。这类平台通常集成有智能算法&#xff0c;能够实时分析电站运行数据&#xff0c;及时…

Flink 批作业如何在 Master 节点出错重启后恢复执行进度?

摘要&#xff1a;本文撰写自阿里云研发工程师李俊睿&#xff08;昕程&#xff09;&#xff0c;主要介绍 Flink 1.20 版本中引入了批作业在 JM failover 后的进度恢复功能。主要分为以下四个内容&#xff1a; 背景解决思路使用效果如何启用 一、背景 在 Flink 1.20 版本之前&am…

LeetCode讲解篇之2320. 统计放置房子的方式数

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们首先发现一个规律街道两侧是否放置房子是独立的&#xff0c;即放置房子的方式数 一侧放置房子的方式数 * 另一侧放置房子的方案数 一侧放置房子的方式数的二次方 对于一侧[0, i]范围内地块放置房子的方式…

用无人机视角,打开哀牢山!

哀牢山危险且神秘&#xff0c;使用无人机进行探索可以极大地提高安全性和效率。通过无人机的关键性能&#xff0c;将哀牢山的情况记录并传输出来 一、高清摄像与图像传输 高清摄像头&#xff1a;无人机通常搭载高分辨率的摄像头&#xff0c;能够捕捉到哀牢山细腻的自然景观和…

opencv外接矩形cv2.boundingRect和cv2.minAreaRect区别

在OpenCV中&#xff0c;cv2.boundingRect和cv2.minAreaRect是两个用于获取图像中形状边界的函数&#xff0c;但它们在功能和返回结果上有所不同。以下是两者的详细区别&#xff1a; 1. cv2.boundingRect 和 cv2.minAreaRect 功能描述 cv2.boundingRect 主要是用来计算图像轮廓…

第二十三篇:网络拥塞了,TCP/IP如何解决的?

一.显示拥塞通知 当发生网络拥塞时&#xff0c;发送主机应该减少数据包的发送量。作为IP上层协议&#xff0c;TCP虽然也能控制网络拥塞&#xff0c;不过它是通过数据包的实际损坏情况来判断是否发生拥塞。然而这种方法不能在数据包损坏之前减少数据包的发送量。 为了解决这个…

JAVA自动化测试TestNG框架

1.TestNG简介 JAVA自动化测试最重要的基石。官网&#xff1a;https://testng.org 使用注解来管理我们的测试用例。 发现测试用例 执行测试用例 判断测试用例 生成测试报告 2.创建Maven工程 2.1创建一个maven工程 2.2设置maven信息 2.3设置JDK信息 2.4引入testng依赖 <dep…

springboot001基于SpringBoot的在线拍卖系统(论文+源码)_kaic

医护人员排班系统 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了医护人员排班系统的开发全过程。通过分析医护人员排班系统管理的不足&#xff0c;创建了一个计算机管理医护人员排班系统的方案。文章介绍了医…

腾讯云视立方Electron 相关问题

安装相关 trtc-electron-sdk 是否兼容官方 Electron v12.0.1 版本? 兼容的&#xff0c;trtc-electron-sdk 没有特别依赖 elecron 自身的 SDK&#xff0c;所以没有相关的版本依赖。 Electron 下载慢甚至卡住不动&#xff1f; 当开始下载tmp-3320-1-SHASUMS256.txt-6.1.9文件…

JDK17常用新特性

目前国内大部分开发人员都是在使用jdk8&#xff0c;甚至是jdk6&#xff0c;但是随着jdk的更新迭代&#xff0c;jdk8我觉得可能就会慢慢的淡出舞台&#xff0c;随着目前主流框架最新版推出明确说明了不再支持jdk8&#xff0c;也促使我不得不抓紧学习了解一波jdk17的新特性&#…

PDSCH DMRS(解调参考信号)简述

文章目录 PDSCH DMRS&#xff08;解调参考信号&#xff09;简述基本问题例子1. 层数和无数据的DMRS CDM组数量资源元素映射 用户设备假设 PDSCH DMRS&#xff08;解调参考信号&#xff09;简述 这是用来做什么的&#xff1f; 这是一个专门用于解码PDSCH的下行无线信道估计的物理…