3.4 CSS取值与单位

news2024/11/16 2:47:06

3.4.1 数字

     数字取值是在CSS2中规定的,有三种取值形式如表3-3所示。

   

3.4.2 长度

    长度取值<length>是在CSS2中规定的,表示方法为数值接长度单位。可用于描述文本、图像或其他各类元素的尺寸。 

    长度取值的单位可分为相对长度单位和绝对长度单位。相对单位的长度不是固定的,是根据参照物换算出实际长度,又可分为文本相对长度单位和视口相对长度单位。绝对长度单位的取值是固定的,例如厘米、毫米等,该取值不根据浏览器或容器的大小发生改变。

3.4.3 角度

    角度取值<angle>是在CSS3中规定的,可用于描述元素变形时旋转的角度。

3.4.4 时间

     时间取值<time>是在CSS3中规定的,可用于描述元素变形时旋转的角度。

3.4.5 文本

    文本常见有三种取值形式,如表所示。

3.4.6 颜色

     CSS颜色可以用于设置HTML元素的背景颜色、边框颜色、字体颜色等。本节主要介绍了网页中颜色显示的原理—RGB色彩模式,和三种常用的颜色表示方式。

1. RGB色彩模式

    RBG色彩模式是一种基于光学原理的颜色标准规范,也是目前运用最广泛的工业界颜色标准之一。颜色是通过对红、绿、蓝光的强弱程度不同组合叠加显示出来的,而RGB三个字母正来自于红(Red)、绿(Green)、蓝(Blue)三个英文单词首字母组合而成,代表了这三种颜色光线叠加在一起形成的各式各样的色彩。

    目前的显示器大多是采用了RGB色彩模式,是通过屏幕上的红、绿、蓝三色的发光极的亮度组合出不同的色彩。因此网页上的任何一种颜色都可以由一组RGB值来表示。

    RGB色彩模式规定了红、绿、蓝三种光的亮度值均用整数表示,其范围是[0, 255] 共有256级,其中0为最暗,255为最亮。因此红、绿、蓝三种颜色通道的取值能组合出256X256X256=16,777,216种不同的颜色。目前主流浏览器能支持其中大约16000多种色彩。

2. 常见颜色表示方式

CSS中常用的颜色表示方式有:

  • 使用RGB颜色的方式:例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等;
  • RGB的十六进制表示法:例如#000000表示黑色、#FFFFFF表示白色等;
  • 直接使用英文单词名称:例如red表示红色、blue表示蓝色等

CSS颜色的简单应用 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS颜色的简单应用</title>
        <style>
		    /* 设置字体颜色为红色 */
            .red {
                color: #FF0000
            }
			/* 设置字体颜色为蓝色 */
            .blue {
                color: rgb(0,0,255)
            }
			/* 设置字体颜色为橙色 */
            .orange {
                color: orange
            } 
        </style>
    </head>
    <body>
        <h3>CSS颜色的简单应用</h3>
        <hr />
        <p class="red">
            该段落字体将设置为红色
        </p>

        <p class="blue">
            该段落字体将设置为蓝色
        </p>

        <p class="orange">
            该段落字体将设置为橙色
        </p>
    </body>
</html>

运行结果: 

 

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

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

相关文章

day5-QT

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QFontDialog> //字体对话框类 #include<QFont> //字体类 #include<QMessageBox> //消息对话框类 #include<QColorDialog> //颜色对话框类 #include<QColor> //颜…

静态路由表学习实验

实验要求&#xff1a;各个pc设备可以通信&#xff0c;并且可以访问外网&#xff0c;假设R1已连接外网 拓扑结构 思路&#xff1a;配置pc机ip地址&#xff0c;子网掩码&#xff0c;和网关&#xff08;网关地址是上层路由接口的地址&#xff09;&#xff0c;配置路由各个接口地址…

SpringBoot整合Swagger-UI实现在线API文档

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉🍎个人主页:Leo的博客 💞当前专栏: 循序渐进学SpringBoot ✨特色专栏: MySQL学习 🥭本文内容:SpringBoot整合Swagger-UI实现在线API文档 📚个人知识库: Leo知识库,欢迎大…

STM32学习笔记(6_7)- TIM定时器的编码器接口原理

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 现在开…

“Linux 三剑客”,通常指的是三个经典的命令行工具:grep、sed 和 awk

1、grep&#xff1a; 简介&#xff1a;grep 是一个强大的文本搜索工具&#xff0c;可以用于在文件中查找匹配特定模式的行。示例&#xff1a; 搜索包含特定关键词的行&#xff1a; grep "keyword" filename 递归搜索目录下所有文件&#xff1a; grep -r define zj…

聊聊多模态大模型处理的思考

多模态&#xff1a;文本、音频、视频、图像等多形态的展现形式。目前部门内业务要求领域大模型需要是多模态——支持音频/文本。从个人思考的角度来审视下&#xff0c;审视下多模态大模型的实现方式。首先就要区分输入与输出&#xff0c;即输入的模态与输出的模态。从目前来看&…

专项测试之「 性能测试」总结

1、性能测试概念 虚拟用户】模拟真实业务逻辑步骤的虚拟用户&#xff0c;其模拟的操作步骤都被记录再虚拟用户脚本中。 【事务】事务是性能测试脚本的一个重要特性&#xff0c;按照最小的http请求打包而成。 【TPS】每秒中系统处理的交易或者事务的数量。 【PV】用户浏览器…

SQLynx发布3.0.0版本:带来更流畅便捷的SQL开发体验

作为新一代的一站式数据库管理开发工具&#xff0c; SQLynx自发布上线以来&#xff0c;一直受到广大用户的好评与鼓励。 为了给用户提供更高效、更便捷、更可靠的数据库管理开发体验&#xff0c;SQLynx今日正式发布3.0.0版本&#xff0c;同步在麦聪软件官网上线&#xff0c;全…

大型网络游戏设计与AI赋能-3

接上文&#xff01;&#xff01;&#xff01;&#xff01; 先和大家互动一下 大家觉得架构设计包含了哪些东西&#xff1f; 大家可能会提起一些名词&#xff0c;比如框架、不同功能、工具集、软件体系结构、设计思想等。其实引擎是一种软件。我们说传统的软件设计的这个体系里…

搭建机器人产业发展重要展示平台“2024南京国际机器人展览会”

2024南京国际智能机器人展览会 2024 Nanjing Intelligent Robot Expo 时间:2024年11月22-24日 地点:南京国际博览中心 南京&#xff0c;这座历史悠久的文化名城&#xff0c;如今正站在机器人产业发展的前沿。随着全球科技的飞速进步&#xff0c;机器人产业已经成为推动经济社…

数据结构·二叉树(2)

目录 1 堆的概念 2 堆的实现 2.1 堆的初始化和销毁 2.2 获取堆顶数据和堆的判空 2.3 堆的向上调整算法 2.4 堆的向下调整算法 2.4 堆的插入 2.5 删除堆顶数据 2.6 建堆 3 建堆的时间复杂度 3.1 向上建堆的时间复杂度 3.2向下建堆的时间复杂度 4 堆的排序 前言&…

【C++语言】冲突-C语言:命名冲突(输入输出、缺省参数、引用、内联函数)

文章目录 前言正文2. C的输入与输出&#xff1a;3.缺省参数3.1 缺省参数的概念&#xff1a;3.2 缺省参数的分类&#xff1a;全缺省参数&#xff1a;半缺省参数&#xff1a; 4.函数重载4.1 函数重载的概念&#xff1a; 5.引用5.1 引用的基本概念&#xff1a;5.2 引用的特性&…

后端代码1

// 新增 public JsonResultVo<?> create(ApiIgnore RequestAttribute(ConstVal.REQ_USER) BaseUser baseUser,RequestBody IUTradeBuyPreserveVo iuTradeBuyPreserveVo) {//权限判断if (!baseCompanyService.dataPermission(baseUser, iuTradeBuyPreserveVo.getCompanyi…

Kimi和ChatGPT做古诗词阅读理解,谁更胜一筹?

前几天发过一篇Kimi整理会议的体验教程&#xff0c;没想到大家很感兴趣&#xff0c;这次再来拿Kimi做古诗词阅读理解看看&#xff0c;同时也对比下ChatGPT的效果。 ChatGPT是几乎家喻户晓的AI大模型&#xff0c;Kimi和它对比有哪些异同点呢&#xff1f; 首先它们都是基于对话…

【小沐学AI】智谱AI大模型的一点点学习(Python)

文章目录 1、简介1.1 大模型排行榜 2、智谱AI2.1 GLM2.1.1 模型简介2.1.2 开源代码2.1.2.1 GLM-130B 2.2 ChatGLM2.2.1 模型简介2.2.2 开源代码2.2.2.1 ChatGLM2.2.2.2 ChatGLM22.2.2.3 ChatGLM3 2.3 CodeGeeX2.3.1 模型简介2.3.2 开源代码 2.4 CogView2.4.1 模型简介2.4.2 开源…

【项目技术介绍篇】如何在本地运行若依项目

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…

Error: Cannot find module ‘@rollup/rollup-win32-x64-msvc‘

1.背景 新项目需要使用vite搭建一个v3项目,之前也弄过,但项目创建后却一直无法跑起来,大聪明的我一直没有注意到这个问题 2.解决步骤 方案1:删除node_modules和package-lock.json文件重新npm install下包,部分码农通过这个步骤可解决 方案2:node版本或者npm版本不对,或者没…

Redission 分布式锁原理分析

一、前言 我们先来说说分布式锁&#xff0c;为啥要有分布式锁呢? 像 JDK 提供的 synchronized、Lock 等实现锁不香吗&#xff1f;这是因为在单进程情况下&#xff0c;多个线程访问同一资源&#xff0c;可以使用 synchronized 和 Lock 实现&#xff1b;在多进程情况下&#xff…

SpringBoot 文件上传(二)

上一节讲解了如何利用MultipartFile接收浏览器端上传的文件&#xff1a; SpringBoot 文件上传&#xff08;一)-CSDN博客 这节讲解服务器端如何将文件保存到本地目录下&#xff0c;下节讲解服务端如何将文件保存在阿里云上。 本节需要解决两个难点&#xff1a; 文件重名问题…

力扣---最长回文子串---二维动态规划

二维动态规划思路&#xff1a; 首先&#xff0c;刚做完这道题&#xff1a;力扣---最长有效括号---动态规划&#xff0c;栈-CSDN博客&#xff0c;所以会有一种冲动&#xff0c;设立g[i]&#xff0c;表示以第i位为结尾的最长回文子串长度&#xff0c;然后再遍历一遍取最大长度即可…