CSS 基础知识
CSS(级联样式表)是设置 Web 内容样式的代码。CSS 基础知识将介绍入门所需的内容。我们将回答以下问题:如何将文本设置为红色?如何使内容显示在(网页)布局中的某个位置?如何用背景图片和颜色装饰我的网页?
什么是CSS?
像HTML一样,CSS不是一种编程语言。它也不是一种标记语言。CSS是一种样式表语言。CSS 是用于有选择地设置 HTML 元素样式的工具。例如,此 CSS 选择段落文本,将颜色设置为红色:
<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-selector)">p</span> <span style="color:var(--code-token-punctuation)">{</span><span style="color:var(--code-token-attribute-name)">color</span><span style="color:var(--code-token-punctuation)">:</span> red<span style="color:var(--code-token-punctuation)">;</span>
<span style="color:var(--code-token-punctuation)">}</span>
</code></span> 让我们试试看吧!使用文本编辑器,将三行 CSS(上面)粘贴到一个新文件中。将文件另存为名为 的目录中。style.cssstyles
为了使代码正常工作,我们仍然需要将此 CSS(上面)应用于您的 HTML 文档。否则,样式不会更改 HTML 的外观。(如果您还没有关注我们的项目,请在此处停下来阅读处理文件和 HTML 基础知识。
- 打开您的文件。将以下行粘贴到头部("><头部>和标签之间):
index.html</head>[HTML全文]复制到剪贴板<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>link</span> <span style="color:var(--code-token-attribute-name)">href</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>styles/style.css<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-attribute-name)">rel</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>stylesheet<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-punctuation)">/></span></span> </code></span> - 将其保存并加载到浏览器中。您应该看到类似这样的内容:
index.html
如果您的段落文本是红色的,那么恭喜!你的CSS正在工作。
CSS 规则集剖析
让我们剖析一下红色段落文本的 CSS 代码,以了解它是如何工作的:
整个结构称为规则集。(术语“规则集”通常称为“公正规则”。请注意各个部件的名称:
选择器
这是规则集开头的 HTML 元素名称。它定义了要设置样式的元素(在此示例中为 "><p> 元素)。要设置不同元素的样式,请更改选择器。
声明
这是一条规则,如 .它指定要设置元素的样式的元素属性。color: red;
性能
这些是设置 HTML 元素样式的方法。(在此示例中,是 "><p> 元素的属性。在 CSS 中,您可以选择要影响规则中的属性。color
属性值
在属性的右侧(冒号之后)是属性值。这将从给定属性的众多可能外观中选择一种。(例如,除了 .) 之外,还有许多值。colorred
请注意语法的其他重要部分:
- 除了选择器之外,每个规则集都必须用大括号括起来。(
{}) - 在每个声明中,必须使用冒号 () 将属性与其值分隔开。
:
相关文章:
CSS 基础知识
CSS(级联样式表)是设置 Web 内容样式的代码。CSS 基础知识将介绍入门所需的内容。我们将回答以下问题:如何将文本设置为红色?如何使内容显示在(网页)布局中的某个位置?如何用背景图片和颜色装饰我的网页? 什么是CSS? 像HTML一样,CSS不是一种编程语言。它也不是一种标…...
IntelliJ IDEA 和 Eclipse的区别
IntelliJ IDEA 和 Eclipse 是两个非常流行的 Java 集成开发环境(IDE),它们各自具有不同的特点和优势。下面是它们之间的一些主要对比: 性能和资源使用 IntelliJ IDEA 被认为在某些方面更加智能,能够提供更好的代码分…...
Ansible之playbook剧本编写(二)
tags 模块 可以在一个playbook中为某个或某些任务定义“标签”,在执行此playbook时通过ansible-playbook命令使用--tags选项能实现仅运行指定的tasks。 playbook还提供了一个特殊的tags为always。作用就是当使用always作为tags的task时,无论执行哪一个t…...
力扣第二十九题——两数相除
内容介绍 给你两个整数,被除数 dividend 和除数 divisor。将两数相除,要求 不使用 乘法、除法和取余运算。 整数除法应该向零截断,也就是截去(truncate)其小数部分。例如,8.345 将被截断为 8 ,-…...
解析三款热门的文献翻译工具:优势与使用指南
今儿咱们来聊聊那些让咱们头疼又不得不面对的事儿——文献翻译。在浩瀚的学术海洋里遨游时,遇到外文文献那是家常便饭,但语言障碍就像海上的迷雾,一不小心就能让你偏离航向。别担心,我这不就带着几款亲测好用的文献翻译神器来了嘛…...
git 过滤LFS文件下载
git config --global filter.lfs.smudge "git-lfs smudge --skip -- %f" git config --global filter.lfs.process "git-lfs filter-process --skip" 恢复下载 git config --global filter.lfs.smudge "git-lfs smudge -- %f" git config --g…...
内存泄漏详解
文章目录 什么是内存泄漏内存泄漏的原因排查及解决内存泄漏避免内存泄漏及时释放资源设置合理的变量作用域及时清理不需要的对象避免无限增长避免内部类持有外部类引用使用弱引用 什么是内存泄漏 内存泄漏是指不使用的对象持续占有内存使得内存得不到释放,从而造成…...
多角度解析高防CDN防御DDOS及CC攻击
网络攻击的形式也日益多样化,其中DDoS(分布式拒绝服务)和CC(Challenge Collapsar)攻击尤为突出,给网站和企业带来了巨大的安全威胁。高防CDN(Content Delivery Network)作为一种专业…...
(7) cmake 编译C++程序(二)
文章目录 概要整体代码结构整体代码小结 概要 在ubuntu下,通过cmake编译一个稍微复杂的管理程序 整体代码结构 整体代码 boss.cpp #include "boss.h"Boss::Boss(int id, string name, int dId) {this->Id id;this->Name name;this->DeptId …...
C语言系统调用linux文件系统
在C语言中,open、write和read函数是系统调用(system calls),它们直接由操作系统提供,用于底层的文件操作。这些函数是UNIX和类UNIX系统(如Linux)中的标准接口,不同于C标准库中的文件…...
LeetCode142 环形链表 II
前言 题目: 142. 环形链表 II 文档: 代码随想录——环形链表 II 编程语言: C 解题状态: 思路错误,链表不允许被修改 思路 两步走,第一步,判断有没有环,第二步,判断入环口…...
逆向案例二十八——某高考志愿网异步请求头参数加密,以及webpack
网址:aHR0cDovL3d3dy54aW5nYW9rYW90Yi5jb20vY29sbGVnZXMvc2VhcmNo 抓包分析,发现请求头有参数u-sign是加密的,载荷没有进行加密,直接跟栈分析。 进入第二个栈,打上断点,分析有没有加密位置。 可以看到参数…...
WebKit的文本装饰艺术:CSS Text Decoration全解析
WebKit的文本装饰艺术:CSS Text Decoration全解析 CSS文本装饰(Text Decoration)是一组用于美化和增强网页文本表现的属性,它们可以为文本添加下划线、上划线、线删除和强调标记等效果。WebKit作为许多现代浏览器的渲染引擎&…...
【linux】Shell脚本三剑客之sed命令的详细用法攻略
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…...
解析class字节码文件获取魔数和版本号
写在前面 本文看下如何获取class字节码文件的魔数和版本号信息。 1:正文 需要对class字节码的结构有一定的了解,可以参考这篇文章 。 直接看代码: package org.example;import java.math.BigInteger;public class TTTT {//取部分字节码&…...
技术文档总结----思维导图
性能调优| ProcessOn免费在线作图,在线流程图,在线思维导图 mysql| ProcessOn免费在线作图,在线流程图,在线思维导图 kafka| ProcessOn免费在线作图,在线流程图,在线思维导图 mybatis缓存| ProcessOn免费在线作图,在线流程图,在线思维导图 java锁| ProcessOn免费在线作图,在…...
【iOS】—— retain\release实现原理和属性关键字
【iOS】—— retain\release实现原理和属性关键字 1. retain\reelase实现原理1.1 retain实现原理1.2 release实现原理 2. 属性关键字2.1 属性关键字的分类2.2 内存管理关键字2.2.1 weak2.2.2 assgin2.3.3 strong和copy 2.4 线程安全的关键字2.5 修饰变量的关键字2.5.1常量const…...
这一文,关于Java泛型的点点滴滴 一
作为一个 Java 程序员,用到泛型最多的,我估计应该就是这一行代码: List<String> list new ArrayList<>();这也是所有 Java 程序员的泛型之路开始的地方啊。 不过本文讲泛型,先不从这里开始讲,而是再往前…...
微信小程序之调查问卷
一、设计思路 1、界面 调查问卷又称调查表,是以问题的形式系统地记载调查内容的一种形式。微信小程序制作的调查问卷,可以在短时间内快速收集反馈信息。具体效果如下所示: 2、思路 此调查问卷采用服务器客户端的方式进行设计,服…...
基于Qt的视频剪辑
在Qt中进行视频剪辑可以通过多种方式实现,但通常需要使用一些额外的库来处理视频数据。以下是一些常见的方法和步骤: 使用FFmpeg FFmpeg是一个非常强大的多媒体框架,可以用来处理视频和音频数据。你可以使用FFmpeg的命令行工具或者其库来实现…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
windows系统MySQL安装文档
概览:本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容,为学习者提供全面的操作指导。关键要点包括: 解压 :下载完成后解压压缩包,得到MySQL 8.…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...
高防服务器价格高原因分析
高防服务器的价格较高,主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因: 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器,因此…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...
《信号与系统》第 6 章 信号与系统的时域和频域特性
目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...
验证redis数据结构
一、功能验证 1.验证redis的数据结构(如字符串、列表、哈希、集合、有序集合等)是否按照预期工作。 2、常见的数据结构验证方法: ①字符串(string) 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...
