一、关键字、字符串和其它文本值

  1. 关键字:与其它编程语言一样,是代表特定含义的一个单词( 接收关键字的属性,所取的关键字必须在那个属性允许使用的关键字范围之内 )
  2. 字符串:前后引号要保持一致( 可以是单引号也可以是双引号 )
  3. URL:绝对 URL,相对 URL
  4. 图像:图像的值基本上就是 URL 的值
  5. 标识符:即用户定义的某种标识符,区分大小写。不要把标识符定义地跟有效的关键字一样

二、数字和百分数

  1. 整数:有些属性取值范围外的整数会忽略,而有些会去成相近的整数
  2. 数字:可以有小数点( 规则同上 )
  3. 百分数:数字的百分制
  4. 弹性制:

三、距离

  1. 绝对长度单位
  2. 分辨率单位
    • 点每英寸( dpi )
    • 点每厘米( dpcm )
    • 点每像素单位( dppx)
  3. 相对长度单位
    • 所用字体m的宽度( em )
    • 所用字体x的高度( ex )
    • 根元素所用字体m的宽度( rem )
    • 0字符所用的进距( ch )
    • 视区宽度单位( vw )
    • 视区高度单位( vh )
    • 视区尺寸最小值单位( vmin )
    • 视区尺寸最大值单位( vmax )

四、计算值( calc() )

  1. + 号和 - 号两侧的值必须使用相同的单位类型
  2. * 计算的值必须有一个是number类型,没有单位那种,如果两个都有单位的话,例如是cm,求的就是面积了cm2
  3. / 计算的两个值中右边那个必须是number类型,也就是没有单位那种,否则无效
  4. 任何情况下都不能除0
  5. + 和 - 运算符两侧必须有空白,* 和 / 没有这一限制,这样做有助于避免混淆负数

五、属性值

  attr():适配性很差,很难在开发中使用,忽略即可

六、颜色

  1. 具名颜色:关键字颜色
  2. RGB 和 RGBa
  3. HSL 和HSLa
  4. 颜色关键字:transparent( 完全透明的颜色 ),currentColor( 当前元素color的值 )

七、角度

  1. 度数( deg )一圈360deg
  2. 弧度( rad ) 一圈2π,近似6.28
  3. 圈数( turn )

八、时间和频率

  1. 时间

    • 秒( s )
    • 毫秒( ms )
  2. 频率
    • 赫兹( hz )
    • 千赫兹( khz )

九、位置

  没弄明白,忽略

十、自定义值

  1. 自定义标识符以( -- )开头
  2. 调用的方法是var()
  3. 区分大小写
  4. 类似于c的宏定义和使用

CSS学习(四)值和单位的更多相关文章

  1. CSS学习摘要-数值和单位及颜色

    在CSS中,值的类型有很多种,一些很常见,一些你却几乎没怎么遇到过.我们不会在这篇文档中面面俱到地描述他们,而只是这些对于掌握CSS可能最有用处的这些.本文将会涉及如下CSS的值: 数值: 长度值,用 ...

  2. css学习の第五弹—单位和值

    一. >>1.颜色表示方法总结: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是 ...

  3. web(六)css的基本语法、取值与单位

    css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...

  4. 《CSS权威指南(第三版)》---第四章 值和单位

    本章主要讲解的是一些属性声明用的值: CSS中的值主要有数字,百分数,颜色, 1.颜色: rgb(100%,100%,100%)  OR  rgb(255,255,255) OR #FF0000 WE ...

  5. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  6. 过渡与动画 - steps调速函数&CSS值与单位之ch

    写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...

  7. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  8. HTML, CSS学习笔记(完整版)

    第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...

  9. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  10. CSS学习摘要-定位

    CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...

随机推荐

  1. 最新最全的BMS/EMS/PCS六大国产“储能方案”,不信你全都看过!

    作为国内领先的嵌入式产品平台提供商,创龙科技在"能源电力"行业拥有超过1000家客户,接下来就让小编向大家分享创龙科技推出的BMS/EMS/PCS"六大储能方案" ...

  2. NXP i.MX 6ULL工业核心板硬件说明书( ARM Cortex-A7,主频792MHz)

    1          硬件资源 创龙科技SOM-TLIMX6U是一款基于NXP i.MX 6ULL的ARM Cortex-A7高性能低功耗处理器设计的低成本工业级核心板,主频792MHz,通过邮票孔连 ...

  3. joigsc2022_e 题解

    翻译 有长度为 \(n\) 的序列 \(a\) 和 \(L\),你需要对于每个 \(x \in[1,n]\) 求出若把第 \(x\) 个数到第 \(n\) 个数依次装入容量为 \(L\) 的箱子中(每 ...

  4. 实现ASP.Net Core3.1运行在DockeDesktop下并用Nginx实现负载均衡

    一.首先去https://docs.docker.com/get-docker/下载Windows版本的Docker Desktop并安装(需要win10专业版以上操作系统,并启用CPU虚拟化和安装H ...

  5. 历代iPad及Android平板的主要参数对比

    「程序员的备忘录系列」这笔记可是持续更新的哦     逻辑分辨率Point,也就是CSS像素,是进行网页适配的关键,以下是平时整理的一些备忘录数据,可以收藏. 以现在平板的销量,还没有手机的十分之一, ...

  6. Spring MVC 中的拦截器的使用“拦截器基本配置” 和 “拦截器高级配置”

    1. Spring MVC 中的拦截器的使用"拦截器基本配置" 和 "拦截器高级配置" @ 目录 1. Spring MVC 中的拦截器的使用"拦截器 ...

  7. [oeasy]python0123_中文字符_文字编码_gb2312_激光照排技术_王选

    中文编码GB2312 回忆上次内容 上次回顾了 日韩各有 编码格式 日本 有假名 五十音 一字节 可以勉强放下   有日本汉字 字符数量超过20000+     韩国 有谚文 数量超过500 一个字节 ...

  8. 【游记】CSP 2023

    day 0 和 printfmingren 整理了一下不会的知识点,发现有点多,遂开摆 音游真的太好玩了 对着<算法竞赛进阶指南>复习了下对拍器的写法,把部分算法的模板又打了一遍 感觉前途 ...

  9. 网络基础 Modbus协议学习总结

    协议简介 Modbus协议,首先从字面理解它包括Mod和Bus两部分,首先它是一种bus,即总线协议,总线就意味着有主机,有从机,这些设备在同一条总线上. Modbus支持单主机,多个从机,最多支持2 ...

  10. Python pluggy框架基础用法总结

    代码为例进行说明 实践环境 Python 3.6.5 pluggy 0.13.0 例1 注册类函数为插件函数 #!/usr/bin/env python # -*- coding:utf-8 -*- ...