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

news2024/12/23 16:10:06

本节学习: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.coloradmin.cn/o/2210354.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

研发线上事故风险解读之缓存篇

专业在线打字练习平台-巧手打字通&#xff0c;只输出有价值的知识。 一 前言 本文继续基于《线上事故案例集》&#xff0c;进一步深入梳理线上事故缓存使用方面的问题点&#xff0c;重点关注缓存在使用和优化过程中可能出现的问题&#xff0c;旨在为读者提供具有实践指导意义的…

矩形函数的傅里叶变换——从一维到二维,从连续到离散

一维连续矩形函数的傅里叶变换 二维连续矩形函数的傅里叶变换 禹晶、肖创柏、廖庆敏《数字图像处理&#xff08;面向新工科的电工电子信息基础课程系列教材&#xff09;》P109 2D DFT 禹晶、肖创柏、廖庆敏《数字图像处理&#xff08;面向新工科的电工电子信息基础课程系…

java计算机毕设课设—俄罗斯方块游戏(附源码、文章、相关截图、部署视频)

这是什么系统&#xff1f; 资源获取方式再最下方 java计算机毕设课设—俄罗斯方块游戏(附源码、文章、相关截图、部署视频) 基于Java的俄罗斯方块游戏&#xff0c;以提供一种既具娱乐性又具挑战性的游戏体验。通过精心设计的游戏界面和控制功能&#xff0c;该游戏不仅能够满…

STM32G474硬件I2C之配置方法

STM32G474硬件I2C接口&#xff1a;英文Inter-integrated circuit简写为I2C。STM32G474是M4核&#xff0c;在使用硬件I2C时&#xff0c;配置方法和M3核相差较大。通过阅读参考手册和HAL&#xff0c;总算了解了其配置原理。 1、I2C工作模式 I2C标准模式&#xff1a;最高时钟频率…

使用HTML和CSS实现3D波浪动画效果

使用HTML和CSS实现3D波浪动画效果 在本篇博客中&#xff0c;将详细介绍如何使用HTML与CSS创建一个3D波浪动画效果。这个效果不仅能够在网页中创建立体感强的视觉体验&#xff0c;还能够通过悬停和聚焦实现与用户的交互。我们将逐步解析代码中的每个部分&#xff0c;帮助你掌握…

探索Theine:Python中的AI缓存新贵

文章目录 探索Theine&#xff1a;Python中的AI缓存新贵背景&#xff1a;为何选择Theine&#xff1f;Theine是什么&#xff1f;如何安装Theine&#xff1f;简单的库函数使用方法场景应用场景一&#xff1a;Web应用缓存场景二&#xff1a;分布式系统中的数据共享场景三&#xff1…

使用WordPress从零开始搭建一个本地网站实现远程访问

文章目录 前言1. 安装WordPress2. 创建WordPress数据库3. 安装相对URL插件4. 安装内网穿透发布网站4.1 命令行方式&#xff1a;4.2. 配置wordpress公网地址 5. 配置WordPress固定公网地址 前言 本文主要介绍如何在Linux Ubuntu系统上使用WordPress搭建一个本地网站&#xff0c…

C语言网络编程深入研究

网络编程是现代软件开发中的一个重要部分&#xff0c;它允许不同计算机之间相互通信和交换数据。本指南将深入探讨使用C语言进行网络编程的技术细节&#xff0c;特别是TCP/IP协议族的核心概念和技术实现。我们将通过具体的代码示例来讨论如何创建客户端和服务器程序&#xff0c…

渗透测试 之 AD域渗透 【Kerberoasting】 攻击技术讲解 对应得工具详细介绍哟~ 以及相关示例 按照步骤做你也会哟

说明 Kerberoasting 攻击发生在Kerberos协议的TGS_REP阶段&#xff0c;KDC的TGS服务返回一个由服务Hash加密的ST给客户端。由于该ST是用服务Hash进行加密的&#xff0c;因此客户端在拿到该ST后可以用于本地离线爆破。 攻击的过程 攻击者提供一个正常的域用户密码对域进行身份…

拆解学习【STC宏晶MCU-CM1020电池保护】(一)

MIJIA米家USB-C充气宝1S: 米家这款充气宝内置2串18650锂电池为电机和控制板供电。控制板采用STC宏晶MCU进行气压测量和电机控制以及压力显示&#xff0c;内部电池保护板采用创芯微CM1020进行电池保护&#xff0c;并采用捷捷微MOS管进行开关控制。 LED数码管采用贴片LED二极管…

NVM 切换Node.js版本工具

大家好我是苏麟&#xff0c;今天聊聊NVM切换版本工具。 切换 node 版本工具 &#xff1a; GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions 查看node版本 node -v 查看 nvm 版本 nvm -v 查看可安装的Nod…

JavaScript进阶笔记--深入对象-内置构造函数及案例

深入对象 创建对象三种方式 利用对象字面量new Object&#xff08;{…}&#xff09;利用构造函数 // 1. 字面量创建对象const obj1 {name: pig,age: 18};console.log(obj1); // {name: "pig", age: 18}// 2. 构造函数创建对象function Pig(name, age) {this.name…

RVIZ2可视化移动机器人模型

RVIZ2可视化移动机器人模型 上一节讲完joint和link&#xff0c;我们来把我们上面定义的简单的URDF(包含身体和雷达)用RVIZ2显示出来&#xff0c;直观的感受下&#xff0c;我们的机器人模型。 URDF可视化的步骤如下&#xff1a; 1建立机器人描述功能包 2建立urdf文件夹编写…

子组件向父组件传值$emit

点击子组件的按钮&#xff0c;将子组件的值传递给父组件&#xff0c;并进行提示。 子组件 <template><div><button click"emitIndex">clickme</button></div> </template> <script> export default {methods: {emitInde…

计算机毕业设计Django+Vue.js豆瓣图书推荐系统 图书评论情感分析 豆瓣图书可视化大屏 豆瓣图书爬虫 数据分析 图书大数据 大数据毕业设计 机器学习

《DjangoVue.js豆瓣图书推荐系统》开题报告 一、研究背景与意义 1. 研究背景 随着数字化时代的来临&#xff0c;图书资源日益丰富&#xff0c;用户面临着信息过载的问题。如何在海量图书中快速找到符合个人兴趣和需求的书籍成为了亟待解决的问题。传统的图书检索方式往往基于…

【含开题报告+文档+PPT+源码】基于SpringBoot的景区酒店点评系统的设计与实现

开题报告 旅游业的快速发展使得越来越多的人选择旅游作为休闲和放松的方式。景区酒店作为旅游的重要组成部分&#xff0c;承担着提供住宿和服务的重要角色。然而&#xff0c;对于游客来说&#xff0c;在选择合适的景区酒店时往往存在信息不对称的问题&#xff0c;缺乏可靠的点…

Windows 下安装 jdk8

一、简介 JDK&#xff1a;Java SE Development Kit&#xff08;Java 开发工具&#xff09;。JRE&#xff1a;Java Runtime Environment &#xff08;Java 运行环境&#xff09;。 如果想进行 Java 编程&#xff08;开发人员&#xff09;&#xff0c;需要安装 JDK&#xff1b;如…

【含开题报告+文档+PPT+源码】基于过滤协同算法的城市旅游网站的设计与实现

开题报告 几年的疫情对生活的各个领域都产生了巨大的影响&#xff0c;疫情之后&#xff0c;随着国内经济的加速复苏&#xff0c;旅游业也迅速回暖。2023 年我国旅游需求迅速增多&#xff0c;一季度旅游人次为12.16 亿人次&#xff0c;较 2022 年同期增长了 46.5%。在当今数字化…

79 NAT-NAT444端口块静态映射

NAT444&#xff08;Network Address Translation 444&#xff09;是一种网络地址转换技术&#xff0c;用于将私有IP地址转换为公有IP地址&#xff0c;实现私有网络与公有网络之间的通信。 端口块静态映射是NAT444中的一种映射方式&#xff0c;它将一组端口范围映射到一个公有I…

GO 语言协程知识点学习笔记

GO 语言协程知识点学习笔记 是个人从互联网上学习整理的笔记。因个人技艺不精&#xff0c;如有纰漏&#xff0c;还请斧正。 协程&#xff1f; 协程并不是 GO 语言特有的机制&#xff0c;像 Lua、Ruby、Python、Kotlin、C/C 也都有协程的支持。区别在于有些是从语言层面支持&a…