首页 > 其他分享 >8、CSS权威指南--第四章(p121)值和单位

8、CSS权威指南--第四章(p121)值和单位

时间:2023-01-24 00:55:08浏览次数:64  
标签:p121 -- 单位 color font CSS 属性

 

4.1 关键字、字符串和其他文本值

样式表中的一切都是文本,但是有些类型的值表示的是字符串本省,而不是数字或颜色等。表示字符串本身的值有 URL 和让人难以置信的图像。

4.1.1 关键字

有时,声明的值用一个词表示,这叫关键字。接受关键字的属性,所取的关键字必须在那个属性允许使用的关键字范围之内。

如果两个属性使用相同的关键字,在不同的属性中相同的关键字可能具有不一样的行为。

全局关键字

CSS 定义了几个“全局”关键字,规范中的每个属性都能使用: inherit 、 initial 、unset 。

inherit 关键字:把元素某个属性的值设为与父元素同一属性的值一样。也就是说。这个关键字强制继承,几遍是在通常情况下不继承时。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        div div {
            border: 2px solid green;
            border: inherit; /* border 属性通常默认是不继承的 */
            width: 50px;
            height: 50px;
            
        }
        body>div {
            border: 2px solid red; 
            width: 100px;
            height: 100px;
        }
        span {border: inherit;}
    </style>
</head>
<body>
    <div>
        <div></div>
        <span>我歌且谣</span>
    </div>
    
</body>
</html>

 

initial 关键字 :把属性的值设为预定义的初始值,相当于“重设”值。

unset 关键字:unset 是 inherit 和 initial 的通用替身。对继承的属性来说, unset 的作用与 inherit 一样,对于不继承的属性来说,unset 的作用与 initial 一样。

以上三个全局关键字在所有的属性中都可以使用,有个特殊的属性只接受这几个全局关键字:all

all 表示除 direction 和 unicode-bidi 之外的所有属性。因此,如果一个元素声明 all: inherit ,意思是除 direction 和 unicode-bidi 之外的所有属性都从父元素上继承值。

4.1.2 字符串

字符串值指放在单引号或双引号内的任意字符串序列,定义可取的值时以 <string> 表示。

字符串中还可以有引号,只要不与外层的引号同样就行,此外也可以使用反斜线转义。注意,字符串界定符只能使用直引号。

如果字符串中有换行,可以转义换行符。

4.1.3 URL

绝对URL 相对URL ,略。

@important url(path...) 注意: url 和 开始括号 “( ”之间不能由空格。

4.1.4 图像

图像值引用的是图像,句法使用 <image> 表示。 <image> 值基本上就是 <url>值。不过在更高级的用户代理中, <image> 表示下面三种值中的一个:

<url>  :指向外部资源的 URL 标识符,这里指图像的 URL 。

<image-set> :一系列图像,根据值中的条件选择。可以用来根据不同设备的屏幕密度或者分辨率显示不同的背景图片(background-image)或者遮罩图片(mask-image)等。

参考:我们一起学习CSS image-set() « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

<gradient> : 线性渐变或径向渐变图像,可以是耽搁的,也可以是重复的。

4.1.5 标识符

在CSS标识符命名中可以使用包含字符(a-zA-Z0-9)和ISO 10646字符字符集中的字符,也可以使用连字符(-)和下划线(_);同时,起始部分不能是数字,或两个连字符"-"或一个两个连字符"-"或一个"-"连字符后跟一个数字。

标识符也可以包含转义字符和任何ISO10646字符数字代码。

css中的特殊字符包含:!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^,`, {, |, }, ~
这些字符需要转义才能用于命名,在其前面加上反斜杠"\"转义来取消这些字符的特定含义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          #\! {color: red;}
          .\# {color: green;}
      
    </style>
</head>
<body>
    <div>
        <span id="!">我歌且谣</span>
        <span class="#">急支糖浆,新冠咳嗽</span>
    </div>    
</body>
</html>

4.2 数字和百分数

这两种值的特别之处在于,他们是很多其他类型值的基础。

4.2.1 整数

  即整数,在取值句法中,整数值用 <integer> 表示 。

4.2.2 数字

即数字,数轴上的数字。在取值句法中,数字值用 <number> 表示。

4.2.3 百分数

即百分数, 句法取值用 <percentage> 表示。百分数值始终相对于另一个值,另一个值可以是任何值。

接受百分数值的属性都会定义取值范围,以及百分比相对什么计算。

4.2.4弹性值 

弹性值是 <number> 后跟 fr 。因此,单位弹性值是 1fr。这个概念由栅格布局引入,用于把布局中不受限制的控件分成几部分。

4.3 距离

长度值用整数或负数后跟一个标注表示,不过有些属性只接受正数。此外,还可以使用实数,即带小数点的数字,如 10.5 , 或 4.561 。

长度的后面是一个缩写,表示长度的单位。长度为 0 时是唯一的例外,此时无需单位。长度单位分两种,绝对长度单位和相对长度单位。

4.3.1 绝对长度单位

绝对长度单位有 7 个,如下:

英寸(in)美国尺子所用的英寸

厘米(cm)世界上其他地方使用的尺子上的厘米。1英寸=2.54厘米,1厘米=0.394英寸。

毫米(mm)1厘米=10毫米,1英寸=25.4毫米,1毫米=0.0394英寸。

四分之一毫米(q)1厘米=40个 q 单位,1毫米=4q。

点(pt)点是一个标准的印刷度量单位,在打印机和打字机上已经使用数十年,字处理程序也使用多年了。

             按照惯例,1英寸有72点。因此,吧大写字母设为12点的意思是文本的高度为 1/6 英寸高。如p{font-size:18pt;} 与 p{font-size:0.25in;}等效。

派卡(pc)也是印刷术语,1派卡=12点,因此,1英寸=6派卡。

像素(px)像素是屏幕上的点,不过CSS定义的像素较为抽象。在CSS中,1像素所占的尺寸够1英寸中放下96个像素。很多用户代理忽略这个定义,而是直接使用屏幕上的像素。

                 缩放页面或打印时要考虑缩放,此时100px宽的元素经渲染后得到的宽度可能大于设备上的100个小点。

4.3.2 分辨率单位

随着媒体查询和响应式设计的出现,为了描述显示器的分辨率,出现了三个新单位。

点每英寸(dpi)在长为1英寸的范围内能显示的点数。可以指出打印机输出的点,也可以指LED屏幕等设备上的物理像素点,或者垫子墨水屏上的图像单元。

点每厘米(dpcm)与dpi类似,不过测量的范围是1厘米,而不是1英寸。

点每像素单位(dppx)CSS中每个px单位显示的点数,从CSS3起,1dppx相当于96doi,因为CSS就是按照这个换算比例定义像素单位的。不过这个比例在CSS未来版本中可能会变。

截至2017年年末,这些单位只能在媒体查询中使用。比如说,创作人员可以让一个媒体查询快中的样式只用于分辨率超过 500 dpi 的显示器:

@media (min-resolution: 500dpi) { /* 样式规则 */ }

4.3.3 相对长度单位

em 和 ex 单位 :

按CSS的定义,1 em 等于元素的 font-size 属性值。如果元素的 font-size 为14像素,那么对那个元素来说, 1 em 等于14像素。 如果使用 em 设定字号,那么它相对父元素的字号而言。

ex 指所用字体中小写字母 x  的高度。因此,如果两个段落的字号都是 24 点,但是使用的字体不同,那么 ex 的值也不一样。这是因为不同字体中的 x 高度有所不同。

rem 单位  :与 em 单位类似,rem 也是基于声明的字号。二者之间的区别是(很微小),em 相对当前元素的字号计算,而 rem 始终相对于根元素计算。

ch 单位:CSS3新增了一个有趣的单位: ch 。这个单位基本上可以理解为 “一个字符” 。

CSS3规范是这样定义的: 等于渲染时所用字体中 "0" (零,U+0030) 字形的进距。“进距” 其实是CSS3自造的,对应于字体排版印中的 “进宽” 。

简单来说,字形的进宽指一个字形的起点到下一个字形的起点之间的距离。一般情况下,这段距离等于字形本身的宽度加上侧边的间距。(间距可以为正也可为负)

CSS 把 ch 单位定义为所用字体中一个零的进宽。对于等宽字体来说,所有字符的宽度都是 1ch 。而非等宽字体则可能比 “0” 宽,也可能比“0”窄,因此不能认为是 1ch 宽。

视区相关的单位:CSS3 还新增了三个与视区尺寸相关的单位。

视区宽度单位(vw)这个单位是根据视区的宽度计算,然后除以100。如视区的宽度是937像素,那么1vw等于9.37px。如果视区宽度有变,vw 的值会随之改变。

视区高度单位(vh)这个单位根据视区的高度计算,然后除以100。如果视区的高度是650像素,那么1vh等于6.5px。如果视区高度有变,vh 的值随之改变。

4.4 计算值

为了方便数学计算,CSS 提供了 cale() 值。括号内可以使用简单的数学算式。允许加减乘除以及括号。

在运算时,会检查括号内的各个值的类型,确保是兼容的。检查方式如下:

+ 和 - 号两侧的值必须使用相同的单位类型。因此,5 + 2.7 是有效的,结果为7.7;而 5em + 2.7 是无效的,因为一个是长度单位,一个是纯数字。

注意:5em + 20px 是有效的,因为 em  和 px 都是长度单位。

* 计算的两个值中,必须有一个是<number> ,因此,2.5rem * 2 和2rem * 2.5 都是有效的,结果为 5rem 。但2.5rem * 2.5rem 是无效的,因为rem平方是面积,而不是长度单位了。

/ 计算两个值中右边的那个必须是 <number> 。即必须符合 N / 数字 , N可以有单位,也可以没有。如30em / 2.75 是有效的。而30 / 2.75em 是无效的。

此外,任何情况下都不能除以零。如30px / 0 是不被允许的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* em */
        .d1 {font-size: 36px;}
        .d1 p {font-size: 1em;}  /* 此处的 em 相对于父元素 div 的font-size */  
        body>span {font-size: 1em;} /* 此处的 em 相对于 html 的font-size */   
        
        /* ex */
        .d2 :nth-child(1) {font-family: 'Courier New'; font-size: 10ex;} 
        .d2 :nth-child(2) {font-family: Courier; font-size: 10ex;} 
        .d2 :nth-child(3) {font-family:  monospace; font-size: 10ex;} 

        /* rem */ 
        .d3 p {font-size: 1.3rem;}

        /* ch */ 
        .d4 {position: relative;}
        .d4 div {
            position: absolute;
            top: 1.1ch;
            width: 10ch;
            border-top: 3px solid red;
        }

        /* 视区相关单位 vw  vh  vmin  vmax */
        .d5 span:nth-of-type(1) {font-size: 3vw;}
        .d5 span:nth-of-type(2) {font-size: 3vh;}
        .d5 span:nth-of-type(3) {font-size: 3vmin;}
        .d5 span:nth-of-type(4) {font-size: 3vmax;}

        /* calc() */
        .d6 {
            width: 160px; 
            height: 160px; 
            border: 1px solid red;
            margin: 0;
            
        }
        
        .d6 div {
            width: calc(80% - 15px);
            height: calc(80% - 35px);
            border: 1px solid red;
            margin: calc(15% - 10px)  auto; /* 此时父元素margin为零,但依旧有效??margin会跨级传递??盒模型数值对不上0啊 */
        }
      
    </style>
</head>
<body>
    <div class="d1">
        <p> 理论上,1 em 等于所用字体中小写字母 m 的宽度 。 其实, “em"这个名称就是由此而来这是一个古老的排版术语。然而,CSS没有才用这个定义。</p>
    </div>    
    <span>相对长度单位中的“相对”是指其长度是相对其他东西而言的。</span>
    <div class="d2">
        <span>x</span>
        <span>x</span>
        <span>x</span>
    </div><br>

    <div class="d3">
        <p>
            rem 的实际作用相当于重设字号:不管祖辈元素把字号设为多大,font-size: 1rem;都会把字号还原成根元素设定的大小。  
        </p>
        <span>1rem = 根元素的font-size的属性值。</span>
    </div><br>

    <div class="d4">
        <span>0000000000</span> <!-- 10个零 -->
        <div></div>
    </div><br>

    <div class="d5">
        <span>这里使用 vw 单位(试着改变浏览器窗口大小)</span><br>
        <span>这里使用 vh 单位</span><br>
        <span>这里使用 vmin 单位</span><br>
        <span>这里使用 vmax 单位</span><br>
    </div><br>

    <div class="d6">
        <div>calc() 允许运算 + 、 - 、 * 、 / 。其中 + 、 - 两个符号前后必须要有空格</div>
    </div>
</body>
</html>

 

4.5 属性值

attr() 函数返回被选择元素的属性值。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        div::after {content: attr(num);}
    </style>
</head>
<body>
    <div num="123"></div>    
</body>
</html>

 4.6 颜色

 CSS中可以使用颜色名,十六进制、RGB和RGBa格式、HSL 和 HSLa

4.6.1-4.6.2

RGB句法是 rgb(color),其中color是三个值,可以是百分数或整数。百分数的值是 0%~100% , 整数的取值范围是 0 ~ 255 。但是,一个颜色值中不能混用整数和百分数,如 rgb(15% , 100 , 36) 是无效的。

百分数与整数之间的转换关系是,百分数乘以255即可得到百分数对应的整数。 R代表红色red,G代表绿色green,B代表黑色black。

RGBa中,a是alpha表示不透明度。取值范围是0~1,0表示完全透明,1表示完全不透明。

十六进制表示法与三个整数表示法在数值上是等效的。

4.6.3 HSL 和 HSLa 颜色

 HSL是 hue(色相) ,Saturation(饱和度) 和 Lightness(明度)的简称。其中色相是角度值,取值范围是 0 - 360,饱和度是从 0(无饱和度)~100(完全饱和)的百分数,明度是从 0 (全暗)~100(全明)的百分数。

色相分布在一个色相环上,随着角度的旋转得到色谱上的不同颜色。 0度是红色,选装360度有回到红色。

4.6.4 颜色关键字

有两个特殊的关键字可以在任何允许使用颜色值的地方使用: transparent 和 currentColor 。

transparent表示完全透明的颜色,与 rgb(0,0,0) 等效。

currentColor 的意思是,获取当前元素 color 的属性值,并使用。如 div {color: red; border-color: currentColor; }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            color: red;
            background-color: currentColor;             
        }
    </style>
</head>
<body>
    <div></div>    
</body>
</html>

4.7 角度

角度一般用 <angle> 表示。即一个 <number> 后跟下列四个单位中的一个。

deg :度数,完整的圆周是360度。

grad :百分度(gradian,也叫grade或gon),完整的圆周是400百分度。

rad : 弧度,完整的圆周是 2π (近似于6.28)。

turn : 圈数,一个完整的圆的一周。这个单位在旋转动画中最有用,比如让一个元素旋转10圈就是 10turn 。

4.8 时间和频率

 属性是时间时,是一个 <number> 值后跟一个 s(秒)或 ms(毫秒)。时间值常用在过渡和动画中使用,用于定义持续时间或延迟时间。1s = 1000ms 。

视听CSS中有一种值 <frequency> ,它是一个 <number> 值后跟 Hz(赫兹)或KHz(千赫兹)。这个单位的标识符不区分大小写。Hz 和 hz 是等效的。

4.9 位置

位置值用于指定图像在背景区域中的位置,使用<position> 表示。

如果只声明一个值。例如 left 或 25% ,那么第二个值将被设为 center。

如果声明两个值,而且第一个值是长度或百分数,那么前一个始终是横向值。

如果声明是四个值,必须有两个长度或百分数,而且前面都得是关键字。

三个值的处理方式跟四个值一样,不过最后一个偏移量将设为零,即不偏移。

(完全没看懂,额...)

4.10 自定义值

2017年末,CSS新增了一个特性,这个特性的术语是“自定义属性”,不过它的作用其实是在CSS中创建变量。这个名称词不达意,它并不创建特殊的CSS属性。

自定义属性(有时候也被称作CSS 变量或者级联变量)是由 CSS 作者定义的,它包含的值可以在整个文档中重复使用。

由自定义属性标记设定值(比如: --main-color: black;),由 var() 函数来获取值(比如: color: var(--main-color);)复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值。

举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。

另一个好处是语义化的标识。比如,--main-text-color 会比 #00ff00 更易理解,尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束,并从其父级继承其值。

自定义标识符以两个连字符开头(--),调用的方法是使用 var() 值类型。被定义的标识符是区分大小写的。(CSS变量只能替换值)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html {
            --alison: #639;
            --david: #AEA;
        }
        h1 {color: var(--alison);}
        h2 {color: var(--david);}
    </style>
</head>
<body>
    <h1>这些自定义的标识符通常被称为“CSS变量”,这解释了为什么使用var()调用它们。</h1>
    <h2>不过要记住,自定义标识符没有编辑语言中的变量那样的功能全面。</h2>
    <p>其实,自定义标识符更像是文本编辑器中的宏,作用只是把一个值替换成另一个。</p>
</body>
</html>

另外,自定义属性还有个特性:拥有作用域。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html {
            --d-color: #639;/* 紫色 */
        }
        div {--d-color: #F60;}/* 橙色 */
        div span {color: var(--d-color);}
        p {color: var(--d-color);}
    </style>
</head>
<body>
    <div>
        <span>这里将使用橙色</span>
    </div>
    <p>这里将使用紫色</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html {
            --d-color: #639;/* 紫色 */
            --d-width: 1px;
            --w-number: 160;
            --d-height: 1px;
            --h-number: 100;
        }
        div {--d-color: #F60;}/* 橙色 */
        div span {color: var(--d-color);}
        p {color: var(--d-color);}
        div {
            width: calc(var(--d-width)*var(--w-number)); /* var()后,不能跟单位,如: var(...)px */
            height: calc(var(--d-height)*var(--h-number));
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <span>这里将使用橙色</span>
    </div>
    <p>这里将使用紫色</p>
</body>
</html>

如果想试试自定义属性,又担心支持情况,可别忘了能查询特性的 @supports() ,这样遇到不支持的用户代理,使用变量的样式规则便隐藏起来:

@supports (color: var(--custom)) {

        /* 使用变量的规则 */

}

@supports (--custom:value) {

        /* 替代样式 */

}

(@supports 用于检测浏览器是否支持 CSS 的某个属性。其实就是条件判断,如果支持某个属性可以写一套样式,如果不支持某个属性,可以提供另外一套样式作为替补。可以放在代码的顶层,也可以嵌套在任何其他条件组规则中。)

 

 

标签:p121,--,单位,color,font,CSS,属性
From: https://www.cnblogs.com/wgqy/p/17064087.html

相关文章

  • Git Guide
    Git&Github为什么学习git&github?git是一个代码版本控制系统,github是git版本库托管平台。学习目的:使用git控制项目版本使用github托管项目借助github使用git......
  • uni-app黑马优购项目学习记录
    uni-app黑马优购项目学习记录(上):https://ailjx.blog.csdn.net/article/details/124192676?spm=1001.2014.3001.5502uni-app黑马优购项目学习记录(下):https://ailjx.blog.csdn......
  • Day06-字符串操作
    一、字符串的下标(索引)#获取正负索引数据sub_str=str_data[1] #y#[正索引]0开始取索引的格式 下标 获取单个数据print(sub_str)sub_str=str_data[-2] #o......
  • 力扣---2. 两数相加
    给你两个非空的链表,表示两个非负的整数。它们每位数字都是按照逆序的方式存储的,并且每个节点只能存储一位数字。请你将两个数相加,并以相同形式返回一个表示和的链表......
  • [1]-bwapp-文件上传无法保存-问题&解决方案
    一、问题描述1.参考apache2404解决apache2文件配置结构文件无法移动更改权限2.本机环境物理机:windows10虚拟化软件:vmware17虚拟系统:centos7.9docker容器:Do......
  • 数字孪生:打破虚实界限,开发无限可能
    近年来,数字孪生得到了越来越广泛的传播,得益于物联网、大数据、云计算、人工智能等新一代信息技术的发展,数字孪生已经在智慧城市、智慧园区、智能制造等领域沉淀了大量优秀......
  • 推荐一款在浏览器编辑`Blazor`的`IDE`
    不知道是否有Blazor用户羡慕过React或者Vue用户,在一些组件库中,它们就提供了在当前的组件预览对于组件的实时编辑并且预览?比如semi-design的这种在比如codepen这种由......
  • 回忆录
    回忆录前言​ 看过了许多游记,也欣赏过了一些回忆录,心想自己何时也能如他们一般向别人诉说自己或平凡或不凡的故事。巧遇今夜思绪烦乱,回想起自己曾经的经历,便在大年初二夜......
  • 洛必达法则
    定义若\(\lim\frac{f(x)}{g(x)}\)满足\(\frac{0}{0}\)或$\frac{\infty}{\infty}$,则$\lim\frac{f(x)}{g(x)}=\lim\frac{f'(x)}{g'(x)}$0型,$\frac{0}{0}......
  • 2023-01-23 初二
    2023-01-23周一今日可能比较枯燥,就是工作,今天市集人流稍微比昨天少点。想起昨天有个比较有趣的事,就是阿涛让几个围观的小朋友帮他拉客。几个小朋友应该是看上套圈圈的......