CSS全览_选择符+特指+单位+字体

CSS全览_选择符+特指+单位+字体

目录

• CSS全览_选择符+特指+单位+字体
  • 1. CSS样式
  • 2. 选择符
  • 3. 特指度和层叠
  • 4. 值和单位
  • 5. 字体

作者: https://www.cnblogs.com/xiaxiangx/

---

1. CSS样式

CSS( Cascading Style Sheet)

• CSS3由多个独立的模块构成, 原因是各模块可以独立演进, 这样做的缺点是" CSS3规范 "不能涵盖一切

• CSS两种形式: 置换元素和非置换元素, 词如其名, 置换元素表示内容不由文档直接表示, 如img, input

• 元素的显示方式: 常见三种, 块级元素, 行内元素和行内块元素, 还有其他的在display中

• 候选样式表: 将rel属性设为alternate stylesheet, 仅当用户自己选择, 文档才会使用候选样式渲染

  <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default">
  <link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="title1">
  <link rel="alternate stylesheet" type="text/css" href="sheet3.css" title="title2">
  

• 厂商前缀

  • -epub- 国际数字出版论坛制定的epub格式
  • -moz- 基于Mozilla的浏览器( 如Firefox )
  • -ms- 微软Internet Explorer
  • -o- 基于Opera的浏览器
  • -webkit- 基于webkit的浏览器( 如safari 和 Chrome )

• 处理空白: 和HTML类似, 连续的空白会合并成一个空白

• 媒体查询: @media all{body{color: red;}}

  • 媒体类型: all, print, screen
  • 媒体描述符: and, not, only

• 特性查询: @support(color: black){body{color: black;}}

  • 嵌套:

    @supports(display: flex){@media screen{/*针对屏幕的样式*/}}

---

2. 选择符

2.1 元素选择符: p{color: red;}

2.2 群组选择符: h2, p{color: red;}

• 通用选择符: *{color: red;}
• 在旧浏览器中使用新元素, 使用document.createElement('main'), 运行这段代码后, 旧版浏览器就能识别新元素

2.3 类选择符和ID选择符

1. 类选择符: .class1{color: red;} 表示color属性值会赋予class属性包含class1的元素上

2. 类选择符+元素选择符: p.class1{color: red;} 表示color属性值会赋予class属性包含class1的p元素上

3. id选择符: #id1{color: red;} 将属性值赋予id为id1的元素上

   由于id唯一, 因此一般情况下, id选择器不作为其他选择器的后缀, 而是前缀, 如#id1>li , 而li>#id1(除了提高权重, 没有意义)

2.4 属性选择符

1. 简单属性选择符: h1[class], 选择包含class的h1元素

2. 精准属性值选择符: h1[class="class1"], 选择class="class1"的h1元素, class="class1 class2"选择不到

3. 根据部分属性值选择

   1. [class|="class1"]: 选择class属性值以class1或者-class1开头的
   2. [class~="class1"]: 选择class属性值包括class1的一组词, 如class="class1 class2", 但clss="class12"不行
   3. [class*="class1"]: 选择class属性值包含字串class1的, 如class="class12", class="class1 class2"也行
   4. [class^="class1"]: 选择class属性值以class1开头的, 如class="class123"
   5. [class$="class1"]: 选择class属性值以class1结尾的

4. 不区分大小写的标识符

   h1[class="class1" i], 之后可以选中class属性值为Class1, cLAss1, ClasS1, 忽略其大小写

2.5 根据文档结构选择

1. 后代选择符, h1 p{color: red;}, h1下的孩子p元素, 包括儿子, 孙子, 重孙等
2. 子元素选择符, h1>p{color: red;}, h1下的儿子p元素, 不是孙子, 只有第一层
3. 选择紧邻同胞元素, h1+p{color: red;}, h1下紧挨着的弟弟
4. 选择后续同胞, h1~p{color: red;}, h1下的弟弟, 不必紧挨

2.6 伪类选择符

1. 拼接伪类: a:link:hover{color: red;}​, 将伪类进行拼接, 注意, 相互排斥的伪类拼接没有意义

2. 结构伪类

   • 选择根元素 :root, 与html效果类似, 但是特指度不同

   • 选择空元素 :empty, 有换行或空格均不算, 注释应先去掉再看

   • 选择唯一的子代 :only-child, img:only-child, 表示选中img的父亲只有img一个孩子的img

   • 选择类型唯一的子代 :only-of-type, 与上一个不同的是, 父亲可能有多个孩子, 但是在孩子中, 自己的类型(元素类型)只有自己有

   • 选择第一个和最后一个子代 :first-child, 选择第一个子元素. :last-child, 选择最后一个子元素

   • 选择第一个和最后一个某种元素 :first-of-type 和 :last-of-type

   • 选择每第n个子元素 :nth-child(n)

     :nth-child(1), 第一个子元素, :nth-child(odd), 第奇数个子元素, :nth-child(odd), 第偶数个子元素, :nth-child(n), 从1到最后一个子元素, :nth-child(an+b), n从1到an+b越界的n, 代入计算

     :nth-last-child(n)从后向前数

   • 选择每第n个某种元素 :nth-of-type()和nth-last-of-type()

   • 动态伪类 :link :visited :focus :hover :active, 顺序得一致, 否则会覆盖样式

   • UI状态伪类

     :enabled 指代启用的用户界面元素(例如表单元素)

     :disabled 指代禁用的用户界面元素(例如表单元素)

     :checked 指代由用户或文档默认选中的单选按钮或复选框

     :indeterminate 指代没有确定的单选按钮或复选框, 这个状态只能由DOM脚本设定, 用户不能设定

     :default 指代默认选中的单选按钮, 复选框或选项

     :valid 指代满足所有数据有效性语义的输入框

     :invalid 指代不满足所有有效性语义的输入框

     :in-range 指代输入的值在最小值和最大值之间的输入框

     :out-of-range 指代输入的值不在范围内的输入框

     :required 指代必须输入值的输入框

     :optional 指代无需一定输入值的输入框

     :read-write 指代可由用户编辑的输入框

     :read-only 指代不能由用户编辑的输入框

3. :target 伪类, 指向目标id的元素, 突出显示, 例如 http://www.w3.org/TR/css3-selectors/#target-pseudo

4. :lang 伪类, 匹配方式上与 |= 类似, :lang伪类可以使用各种来源, 而属性选择器使用 |= 有限制

5. 否定伪类, :not, 例子, .moreinfo:not(li){color: red;}, 选择class为moreinfo但是不是li的元素, 可以拼接, 表示既不是, 也不是

6. 伪元素选择符只能出现在选择符的最后, p::first-line em 是无效的

7. 装饰首字母, ::first-letter, 装饰任何非行内元素的首字母, 或者开头的标点符号和首字母

8. 装饰首行, ::first-line, 装饰元素的首行文本, 也只能应用到块级元素上

9. 装饰前置和后置内容元素, ::

10. ::before, ::after{content: "";}

---

3. 特指度和层叠

当一个元素被多个选择器选中, 应用哪一个, 这个问题由特指度和层叠解决

特指度由四个部分组成, 前面的部分总比后面的部分大, 特指度0,0,0,0; 两个特指度, 一个0, 0, 1, 0, 总比0, 0, 0, 1000大.

1. 选择符的特指度
   • id属性值: 0,1,0,0
   • 类属性值, 属性选择或伪类: 0,0,1,0
   • 元素和伪元素: 0,0,0,1
   • 连结符和通用选择符不增加特指度
2. 声明打散, 通用选择符和连结符
   • 声明打散: 如 h1{color: red; background: black;}, color的特指度为h1, background的特指度也为h1
   • 通用选择符特指度为0,0,0,0
   • 连结符的没有特指度
3. 行内样式, 重要性
   • 行内样式的特指度为 1,0,0,0
   • 重要的声明 !important, 它对特指度没有影响, 但是它有自己的比较范围, 有!important与没有的发生冲突时, 总是重要声明胜出
4. 继承
   • 多数盒模型属性不继承, 继承的值没有特指度, 通用选择符0特指度能战胜继承的值
   • 层叠规则
     1. 找到匹配特定元素的所有规则
     2. 按显式权重排序应用到特定元素上的所有声明. 以 !important 标记的规则比没有这一标记的权重高
     3. 按来源应用到特定元素上的所有声明. 声明有三个来源: 创作人员, 读者和用户代理. 正常情况下, 创作人员编写的样式击败读者提供的样式; 读者样式中以 !important 标记的声明比其他样式权重高, 包括创作人员编写的样式中以 !important标记的声明; 创作人员和读者样式覆盖用户代理的默认样式
     4. 按特指度排序应用到特定元素上的所有声明. 特指度高的声明具有较高的权重
     5. 按声明的前后位置排序应用到特定元素上的所有声明. 样式表或文档中靠后的声明权重较高. 导入的样式表中的声明放在当前样式表中所有声明的前面.

---

4. 值和单位

单位可以影响颜色, 距离和尺寸等一系列属性, 可以帮助定义这些值.

样式表中的一切都是文本, 但是有些类型的值表示的是字符串本身, 而不是数字或颜色等.

1. 关键字

   • none: 移除下划线等, 不同属性配上相同关键字可能有不一样的效果, 具体情况具体说明

   • 全局关键字

     inherit: 继承, initial: 重设值, unset: 能继承属性就继承, 不能就重设

     all: 只接受inherit, initial, unset三个值, all: inherit, 表示出了不能继承的都继承

2. 字符串

   • 字符串值放在单引号或双引号内的任意字符序列, 换行标识符为 \A

3. URL(protocol://server/pathname)

4. 图像

   • url, 指向外部资源的URL标识符
   • image-set, 一系列图像, 根据值中的条件选择. 行为接近picture元素的srcsest属性. 几乎所有浏览器都支持srcset, 很少支持image-set
   • gradient, 线性渐变或径向渐变图像, 可以是单个的, 也可以重复

5. 标识符

6. 数字和百分数

   • 弹性值, fr

   • 绝对长度单位, in(英尺), cm(厘米), mm(毫米), q(四分之一毫米), pt(点), pc(派卡, 12点), px(像素)

   • 分辨率单位, dpi(点每英寸), dpcm(点每厘米), dppx(点每像素)

   • 相对长度单位,

     1em等于元素的 font-size 属性值. 它是相当于父元素的字号而言.

     1ex 指所用字体中小写字母x的高度.

     rem与em区别很小, rem相对于文档根的font-size.

     ch(新增), 渲染0字形的进距.

     vw(视区宽度单位), vh(视区高度单位), vmin(视区尺寸最小值单位, 宽高取小), vmax(视区尺寸最大值单位)

7. 计算值

   • calc(5em + 5em)
   • calc(2 * 3em), calc(2em * 3)
   • calc(30em / 3)

8. 属性值 attr(), width: attr(maxlenth em) 支持的浏览器较少

9. 颜色

   • 具名颜色
   • rgb和rgba, rgb(100%, 100%, 100%), rgb(255, 255, 255), rgba中的a始终是0-1
   • 十六进制RGB, #ffffff 白色 , RGBA #000000FF
   • HSL和HSLa(Hue色相, Saturation饱和度, Lightness明度)
   • 颜色关键字, transparent完全透明的颜色, 元素背景色的默认值, currentColor, 当前color属性计算得到的值

10. 角度

    • deg 度数, 完整的圆周是360度
    • grad 百分度, 完整的圆周是400百分度
    • rad 弧度, 完整的圆周是2π
    • turn 圈数, 一个完整的圆周是一圈

11. 时间和频率 s, ms, Hz, kHz, 不区分大小写

12. 位置 用于指定图像在背景区域中的位置

13. 自定义值

    html{
     --base-color: #369
    }
    
    h1{color: var(--base-color);}
    

---

5. 字体

CSS2开始支持 @font-face 下载指定的自定义字体

1. 字体族

   • 衬线字体, 这种字体中的字形宽度各异, 并且有衬线
   • 无衬线字体, 这种字体中的字形宽度各异, 而且无衬线
   • 等宽字体, 等宽字体中的宽度一样
   • 草书字体, 这种字体尝试模仿人类笔迹或手写体
   • 奇幻字体, 这种字体没有什么统一的特征

2. 使用字体族

   • font-family: sans-serif(无衬线)
   • font-family: wedgie, 'Karrank%', klingon, fantasy; 字体名称中有空格或符合得用'', 在最后设置一个通用字体

3. 自定义字体

   • @font-face{font-family: "SwitzeraADF"; src: url("SwiteraADF-Regular.otf");}

   • 惰性加载, 使用时加载. 浏览器是不管是否需要, 都会现行下载声明的全部字形

   • 必须的描述符, font-family和src

   • 使用HTTP首部Access-Control-Allow-Origin设定服务器, 允许跨域加载

   • format, 告诉客户代理格式

     @font-face{
     	font-family: "SwitzeraADF";
     	src: url("SwiteraADF-Regular.otf") format('opentype'),
         src: url("SwiteraADF-Regular.true") format('truetype');
     }
     

   • 字体格式值

     embedded-opentype EOT

     opentype OTF

     svg SVG(Scalable Vector Graphics)

     truetype TTF

     woff WOFF(Web Open Font Format)

   • local(已经安装的字体), src: local("Switzera-Regular")

   • 万全之策

     @font-face{
         font-family: "SwitzeraADF";
         src: url("SwitzeraADF-Regular.eot");
         src: url("SwitzeraADF-Regular.eot?#iefix") format("embedded-opentype"),
             url("SwitzeraADF-Regular.woff") format("woff"),
             url("SwitzeraADF-Regular.ttf") format("truetype"),
             url("SwitzeraADF-Regular.svg#switzera_adf_regular") format("svg");
     }
     

   • 其他字体描述符

     描述符	默认值	说明
     font-stype	normal	区分常规, 斜体和倾斜字形
     font-weight	normal	区分不同的字重(例如加粗)
     font-stretch	normal	区分不同的字符宽度(例如紧缩和加宽)
     font-variant	normal	区分众多字体变形(例如小号大写字母)
     font-feature-setting	normal	直接访问OpenType的底层特性(例如启用连字)
     unicode-range	U+0-10FFFF	定义指定字体中可用的字符范围

4. 字重

   • normal bold bolder lighter 100 200 --- 900
   • 100最细, 900最粗, 正常400

5. 字号

   • xx-small x-small small medium large x-large xx-large smaller larger
   • 没有行距( line-height )的情况下两条基线的距离
   • 绝对大小, 14px
   • 相对大小, 换算系数是1.2
   • 字号的继承会带来问题, 渲染等宽字体尤为明显, 解决方案, font-family: monospace, serif; font-size: 1em;
   • 使用长度单位, 36pt, 3pc, 0.5in, 1.27cm...
   • 由于不是所有浏览器都能轻易缩放像素值设定的文本( 有事甚至不能缩放 ), 而且有时使用像素值设定的文本在模仿全屏幕设备的移动设备中的实际字号特别小( 例如多款iPhone ), 但就这一点, 一般不推荐使用像素值设定字号
   • 自动调整字号, 有两个因素影响字体是否清晰易辩: 字号和 x 高度. x高度除以字号得到的结果称为高宽比值. 高宽比值越高, 字体越清晰, font-size-adjust用于修改, 取值none, auto

6. 字形

   • font-style, 取值normal, italic(斜体) 和 oblique (倾斜体)
   • 斜体和倾斜体区别不大, 可以互相代替

7. 字体拉伸

   • font-stretch, 取值 normal ultra-condensed extra-condensed condensed semicondensed semi-expanded expanded extra-expanded ultraexpanded

8. 字距调整

   • font-kerning, 取值 auto normal none
   • 对定义了字符之间相对位置的数据有效, 比如oc和ox两个字距就可能不同

9. 字体变形

   • font-variant, 取值太多了, css1和2只有两个取值normal, small-caps(小号大写字母), 对中文没效果

10. 字体特性

    • font-feature-settings ,从底层控制OpenType字体

    • 使用方法 font-feature-settings: "liga" on, "calt" on, "ccmp" 1, "clig"; on 1 默认都可以

    • 默认情况下, OpenType字体启用的特性

      calt 根据上下文替换

      ccmp 组合字符

      clig 根据上下文连字

      liga 标准连字

      locl 本地化形式

      mark 基本定位标记

      mkmk 标记定位标记

      rlig 必要的连字

11. 字体合成

    • font-synthesis, 取值 none, weight, style
    • 作用: 用户代理尝试使用可用的字体合成所需的字形

12. font属性

    • 必须有font-size和字体
    • 前三个值顺序任意, font-style font-weight font-variant
    • 可以加入行高, font-size/ling-height, 200%/1.2
    • 使用font属性时, 不写的设成默认

13. 使用系统字体

    • font: caption

    • 可用的系统值

      caption 用于说明文字的控件, 如按钮

      icon 标注图标

      menu 在菜单栏中使用, 即下拉菜单和菜单列表

      message-box 在对话框中使用

      small-caption 用于标注小型控件

      status-bar 用在窗口的状态栏中

14. 字体匹配过程

    1. 用户代理创建或者访问字体属性数据库. 这个数据库中有用户代理能访问的全部字体的各个CSS属性. 通常, 设备中的所有字体都在这里, 不过可能还有其他字体( 例如, 用户代理可能内置了字体 ). 如果用户代理遇到两个一样的字体, 将会忽略掉其中一个
    2. 用户代理把应用了字体属性的元素摘出来, 构建显示元素所需要的字体属性列表. 首先, 用户代理根据这个列表选择使用哪个字体族显示元素. 如果能找到完全匹配的字体, 用户代理就使用那个字体; 否则, 还要做些额外的工作
    3. 匹配字体时先看font-stretch属性
    4. 然后再看font-style属性. 任何以"italic"或"oblique"标识的字体都能匹配 italic 关键字. 如果没有这样的字体, 匹配失败
    5. 接下来匹配font-weight, 鉴于CSS对 font-weight 的处理方式, 这一匹配绝对不会失败
    6. 然后处理font-size, 匹配字号时一定要有容差, 不过这个容器由用户代理定义. 因此, 指定的字号和实际使用的字号在一个用户代理中可能允许存在20%的容差, 而在另一个用户代理中只允许10%的容差
    7. 如果第 2 步没有找到匹配的字体, 用户代理在同一个字体族中选择替代字体. 找到后, 回到第 2 步.
    8. 假设找到一个基本匹配的字体, 而且所有替代字体都试过了, 用户代理将选择指定字体族中的默认字体, 力争正确显示元素.

    此外, 用户代理处理字体变形和特性的方式如下:

    1. 查看默认启用的字体特性, 包括指定文本的特性. 默认启用的特性有"calt"...
    2. 如果是 @font-face 规则定义的字体, 检查 @font-face 规则中 font-variant 描述符对应的特性. 然后检查 @font-face规则中 font-variant 描述符对应的特性. 然后检查 @font-face 规则中 font-feature-settings 描述符对应的特性
    3. 检查由 font-variant 或 font-feature-settings 之外的属性确定的特性设置( 例如, 把letter-spacing 属性设为默认值之外的值时将禁用连字 )
    4. 检查 font-variant 属性及其子属性 (例如 font-variant-ligatures) , 以及其他可能会调用 OpenType 特性的属性( 例如 font-kerning ) 的值对应的特性
    5. 检查 font-feature-setting 属性的值对应的特性.