CSS学习(四)值和单位
一、关键字、字符串和其它文本值
- 关键字:与其它编程语言一样,是代表特定含义的一个单词( 接收关键字的属性,所取的关键字必须在那个属性允许使用的关键字范围之内 )
- 字符串:前后引号要保持一致( 可以是单引号也可以是双引号 )
- URL:绝对 URL,相对 URL
- 图像:图像的值基本上就是 URL 的值
- 标识符:即用户定义的某种标识符,区分大小写。不要把标识符定义地跟有效的关键字一样
二、数字和百分数
- 整数:有些属性取值范围外的整数会忽略,而有些会去成相近的整数
- 数字:可以有小数点( 规则同上 )
- 百分数:数字的百分制
- 弹性制:
三、距离
- 绝对长度单位
- 英寸( in )
- 厘米( cm )
- 毫米( mm )
- 四分之一毫米( q )
- 点( pt )
- 派卡( pc )
- 像素( px ):根据分辨率的不同而改变( 详见:https://www.cnblogs.com/xddisme/p/15525932.html )
- 分辨率单位
- 点每英寸( dpi )
- 点每厘米( dpcm )
- 点每像素单位( dppx)
- 相对长度单位
- 所用字体m的宽度( em )
- 所用字体x的高度( ex )
- 根元素所用字体m的宽度( rem )
- 0字符所用的进距( ch )
- 视区宽度单位( vw )
- 视区高度单位( vh )
- 视区尺寸最小值单位( vmin )
- 视区尺寸最大值单位( vmax )
四、计算值( calc() )
- + 号和 - 号两侧的值必须使用相同的单位类型
- * 计算的值必须有一个是number类型,没有单位那种,如果两个都有单位的话,例如是cm,求的就是面积了cm2
- / 计算的两个值中右边那个必须是number类型,也就是没有单位那种,否则无效
- 任何情况下都不能除0
- + 和 - 运算符两侧必须有空白,* 和 / 没有这一限制,这样做有助于避免混淆负数
五、属性值
attr():适配性很差,很难在开发中使用,忽略即可
六、颜色
- 具名颜色:关键字颜色
- RGB 和 RGBa
- HSL 和HSLa
- 颜色关键字:transparent( 完全透明的颜色 ),currentColor( 当前元素color的值 )
七、角度
- 度数( deg )一圈360deg
- 弧度( rad ) 一圈2π,近似6.28
- 圈数( turn )
八、时间和频率
- 时间
- 秒( s )
- 毫秒( ms )
- 频率
- 赫兹( hz )
- 千赫兹( khz )
九、位置
没弄明白,忽略
十、自定义值
- 自定义标识符以( -- )开头
- 调用的方法是var()
- 区分大小写
- 类似于c的宏定义和使用
CSS学习(四)值和单位的更多相关文章
- CSS学习摘要-数值和单位及颜色
在CSS中,值的类型有很多种,一些很常见,一些你却几乎没怎么遇到过.我们不会在这篇文档中面面俱到地描述他们,而只是这些对于掌握CSS可能最有用处的这些.本文将会涉及如下CSS的值: 数值: 长度值,用 ...
- css学习の第五弹—单位和值
一. >>1.颜色表示方法总结: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是 ...
- web(六)css的基本语法、取值与单位
css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...
- 《CSS权威指南(第三版)》---第四章 值和单位
本章主要讲解的是一些属性声明用的值: CSS中的值主要有数字,百分数,颜色, 1.颜色: rgb(100%,100%,100%) OR rgb(255,255,255) OR #FF0000 WE ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 过渡与动画 - steps调速函数&CSS值与单位之ch
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- HTML, CSS学习笔记(完整版)
第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- CSS学习摘要-定位
CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...
随机推荐
- get基于报错的sql注入
get基于报错的sql注入发现 Less1: sqli-labs第一关提示说在网页上输入id,也就是?id=1. 但这个?是什么意思,它表示index.php?也就是默认页面.然后?id=1就是把id ...
- 韦东山freeRTOS系列教程之【第六章】信号量(semaphore)
目录 系列教程总目录 概述 6.1 信号量的特性 6.1.1 信号量的常规操作 6.1.2 信号量跟队列的对比 6.1.3 两种信号量的对比 6.2 信号量函数 6.2.1 创建 6.2.2 删除 6 ...
- @ConfigurationProperties 还能这样用
在编写项目代码时,我们要求更灵活的配置,更好的模块化整合.在 Spring Boot 项目中,为满足以上要求,我们将大量的参数配置在 application.properties 或 applicat ...
- wangEditor增加源码模式,添加查看源码功能
wangEditor是一款轻量级的富文本编辑器.使用还比较方便,但是缺少查看源码模式,需要我们自定义一个menu给增加查看源码模式 下面是wangEditor增加源码模式的代码: <!DOCTY ...
- 基于Java+SpringBoot+vue+element助农平台设计和实现
\n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 随着互联网大趋势的到来,社会的方方面面,各行各业都在考虑利用互联网作为媒介将自 ...
- [oeasy]python0135_命名惯用法_name_convention
命名惯用法 回忆上次内容 上次 了解了isidentifier的细节 关于 关键字 关于 下划线 如何查询 变量所指向的地址? id 如何查询 已有的各种变量? locals 如果 用一个 ...
- oeasy教您玩转vim - 12 - # 词头词尾
词头词尾 回忆上节课内容 我们这次学了向前一个单词 w 意思是 word 还学习了向后一个单词 b 意思是 backward 这俩命令都落在单词的第一个字母 还有什么好玩的命令吗? 动手练习 我们可以 ...
- C#全局键盘监听(Hook)的使用
一.为什么需要全局键盘监听? 在某些情况下应用程序需要实现快捷键执行特定功能,例如大家熟知的QQ截图功能Ctrl+Alt+A快捷键,只要QQ程序在运行(无论是拥有焦点还是处于后台运行状态),都可以按下 ...
- JavaScript小面试~数组相关的方法和运用(学习笔记)
1,稀疏数组 稀疏数组是指数组中的某个下标未给出值或某个下标的值被删除.例如: let arrayOne=['xiaozi',,12,,true,23] let arrayTwo=[1,2,3,3,4 ...
- Python 按规则解析并替换字符串中的变量及函数
按规则解析并替换字符串中的变量及函数 需求 1.按照一定规则解析字符串中的函数.变量表达式,并替换这些表达式.这些函数表达式可能包含其它函数表达式,即支持函数嵌套 2.函数表达式格式:${ __函数名 ...