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