css常用属性总结:颜色和单位

在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚。

颜色

当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般常用英文颜色名或者十六进制颜色值来设置颜色,但是css中还有一些其他较为复杂的
写法。

RGB颜色

计算机通过不同级别的红、绿、蓝来产生新的颜色,这就是常说的RGB颜色。有了这样一个产生颜色的机制,就可以通过直接给出不同的颜色级来确定颜色,就可以自己去
组合三种颜色的值。

写法:
h1{color:rgb(100%,100%,100%)} 百分比rgb颜色写法,数字范围从0%到100%
h1{color:rgb(0,255,255)} 数字rgb颜色写法,数字范围从0到255

注意:两种写法的值都会被修剪,百分比会被修剪成0%-100%,即超出100%被修剪成100%,低于0%修剪成0%,数字则会被修剪成0-255,另外,两者不能混写,混写是不会生效的。

十六进制颜色和颜色名设置颜色我们就不再提了

单位

长度单位:一般分为绝对单位和相对单位。绝对单位从诞生之日起其实用的很少,至少我平时在项目上很少用到。所以这里就跳过了绝对单位的介绍。

相对单位:有三种相对的长度单位,em、ex和px。前两种分别代表“元素的字体高度”和“字母shezhi‘x’的高度”,他们是普通印刷上的量度,最后一个px代表“像素”,之所以说它是
                 相对的,是因为它依赖显示器的分辨率。

em:css中,一个“em”就是给定字体的font-size值。唯一例外的就是在设置字体尺寸,这种情况下em的值是相对于父元素的。

  • body{font-size:20px;}
  • p{font-size:1em;}


这时p的字体大小就是20px,而不是默认的16px。

px:按像素值px来设置。如
body{font-size:20px;}
p{font-size:16px;}
p元素中字体的大小就是16px

百分比值:同长度单位比较,百分比就显得很简单,就是一个百分比值。例如:
h1{line-height:150%;} 设置所有h1的行高比普通行高大一半。

总之百分比总是通过另外一个值来计算的,这些在后面属性讲解中会一一提到。而且百分比可正可负,对于有些属性只接受正值,这就另说了。

今天的内容就这么多,写的有点乱,希望以后越写越好吧。

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

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

相关文章

JPA –我应该成为懒惰的极端主义者吗?

当您与开发人员讨论将对象映射到关系数据库时,他们经常抱怨JPA性能差,JPA提供程序的行为不可预测等。通常,在对话的某些时候,您会听到: “让我们完全放弃这项技术,我们在上个月的会议上看到了更好的东西。 …

mysql恢复 报错_Mysql 数据恢复报错

1.测试mysql binlog 数据恢复功能,我的mysql版本是5.7.172.删了数据之后,执行show binlog events 命令得到如下记录3.找到开始删除和结束删除的位置,然后执行恢复命令:mysqlbinlog --no-defaults --start-position8991 --stop-position290468…

IONIC

1.项目摘要  随着移动互联网的不断发展,移动端流量所占比例已经越来越高。下图来自IResearch所做的关于移动互联网的市场调研报告 由此我们可以看出,移动互联网在人们生活中的位置越来越重要。 受益于国家“提速降费”以及即将取消流量漫游的优惠政策&…

line-height与图片底部间隙的学习整理转述

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里; line-height,两行文字的基线之间的距离&…

java学习之异常之格式

第一个格式: try{}catch(){} 第二个格式: try{}catch(){}finally{} 第三个格式: try{}finally{} 注意:catch是用于处理异常,如果没有catch就代表异常没有被处理过,如果该异常是检测时异常,那么必…

分数DRL:在OptaPlanner中更快,更轻松

对于OptaPlanner ( Drools Planner)6.0.0.Beta1,我已经用更优雅的ConstraintMatch系统替换了ConstraintOccurrence。 结果是您的DRL评分文件为: 快多了 更容易读写 错误的发生率要低得多,因为它们使分数损坏变得更加…

mysql 的数据库实例理解_理解数据库和实例

数据库:物理操作系统文件或者其他形式文件类型的集合。在mysql中,数据库文件可以是frm、MYD、MYI、ibd等结尾的文件。当使用NDB引擎时,数据库的文件可能不是操作系统文件,而是存放于内存之中的文件。实例:mysql数据库由…

STM32 环境搭建

从之前的51,到后来的AVR,再到现在的STM32,处理器的处理能力在不断的提高,我们也跟随着处理器一步一步的玩到了STM32 目前STM32的开发环境很多,常用的例如Keil,IAR等,但是这些软件都是收费的&…

css常用属性初总结:伪元素和伪元素

前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧。 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究竟什么是伪类&…

Java 8:CompletableFuture的权威指南

Java 8即将到来&#xff0c;因此该学习新功能了。 尽管Java 7和Java 6只是次要的发行版&#xff0c;但版本8将向前迈出一大步。 也许太大了&#xff1f; 今天&#xff0c;我将为您详细介绍JDK 8中的新抽象– CompletableFuture<T> 。 众所周知&#xff0c;Java 8有望在不…

mysql数据库工程师网易微专业_网易MySQL数据库工程师微专业学习笔记(五)

一、mysql数据库中的存储引擎mysql在创建数据表时可以通过engine关键字设置存储引擎的类型&#xff0c;也可以通过alter命令来修改表的存储引擎。可以通过show engines命令来查看当前mysql数据库支持的存储引擎的类型&#xff0c;一般场景的存储引擎有&#xff1a;InnoDB、MyIS…

Java并发编程笔记之ConcurrentLinkedQueue源码探究

JDK 中基于链表的非阻塞无界队列 ConcurrentLinkedQueue 原理剖析&#xff0c;ConcurrentLinkedQueue 内部是如何使用 CAS 非阻塞算法来保证多线程下入队出队操作的线程安全&#xff1f; ConcurrentLinkedQueue是线程安全的无界非阻塞队列&#xff0c;其底层数据结构是使用单向…

03 Day Python数据类型

一&#xff1a;什么是数据&#xff1f; x10&#xff0c;10是我们要存储的数据 2 为何数据要分不同的类型 数据是用来表示状态的&#xff0c;不同的状态就应该用不同的类型的数据去表示 3 数据类型 数字 字符串 列表 元组 字典 集合 二&#xff1a;数字int #bit_length() 当十进…

border三角形阴影(不规则图形阴影)和多重边框的制作

前言&#xff1a;这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方&#xff0c;请大家指正&#xff0c;我会持续更新&#xff01; 1. border的组合写法 border&#xff1a;border-width border-style border-color; border-width&#xff1a;边框宽度&#xff0…

JDK 8 Javadoc调整了方法列表

自开始以来&#xff0c; Javadoc输出基本上是静态HTML&#xff0c;具有导航链接和外观的简单样式表样式。 Java SE 7很长时间以来就看到Javadoc输出默认外观的第一个重大变化 &#xff0c;现在看来JDK 8将在生成的Javadoc输出上引入新的变化。 在本文中&#xff0c;我将通过JDK…

hdp安装 不安装mysql_hdp安装及使用问题汇总(一)

1)安装HDP时&#xff0c;如果打印如下错误信息&#xff1a;[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:579)是由于系统的python版本过高&#xff0c;导致验证ssl失败&#xff0c;将python降级为2.7.5以下或修改每个安装节点的python证书验证配置文件…

PhotoSphereViewer 全景图

1网站地址&#xff1a;http://photo-sphere-viewer.js.org/markers.html#demo 2参数中文地址&#xff1a;https://www.cnblogs.com/big-tree/p/5933437.html 使用方法&#xff1a; /*** Initialize the viewer*/ var PSV new PhotoSphereViewer({ // main configuration panor…

常用Lunix命令

计算机 1.硬件系统 输入单元、输出单元、算术逻辑单元、控制单元、记忆单元 中央处理单元&#xff1a;CPU&#xff08;算术逻辑单元、控制单元&#xff09; 电源、主板、CPU、内存&#xff08;RAM&#xff09;、硬盘、&#xff08;声卡、显卡、网卡&#xff09;&#xff08;集成…

angularJS constant和value

angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。 相同点是&#xff1a;都可以接受两个参数&#xff0c;name和value。 区别&#xff1a; 1.constant(name,value)可以将一个已经存在的变量值注册为服务&#xff0c;并将其注入到应用的其他…

让我们编写一个文档样式的Web服务

您可能知道&#xff0c;我们可以使用四种主要的Web服务样式。 它们如下&#xff1a; 文件/文学 包装的文件/文学 RPC /编码 RPC /文字 当然&#xff0c;现在不建议使用RPC /编码样式。 如果您有兴趣&#xff0c;可以在此处找到这篇非常全面的文章&#xff0c;以了解不同的…