CSS学习记录（二）：css优先级与文本操作

CSS优先级

CSS优先级列表

类型	权重
ID	0100
class	0010
标签、伪类	0001
*（全局）	0000
行内样式	1000

ps:

• 同级标准，后出现的样式优先（可以理解为覆盖）
• 优先级可以计算，当两个选择器复合，优先级相加
• 上表中的优先级是十进制的

强制提升优先级

通过添加!important字段强制提升优先级（会破坏CSS语言规则，一般不建议使用）

input:enabled{    
	background: ivory !important;
}

优先级的继承

如下例子，article标签包含div，在没有div样式的情况下，div会继承article的样式，但是如果有div的css样式代码存在，由于继承得到的样式优先级为NULL，因此会被article标签的样式覆盖。
ps：边框不会被继承

article{    
	color: red;
}
div{    
	color: royalblue;
}

通配符与继承

通配符优先级为0，继承得到的样式优先级为NULL，0>NULL

CSS预处理器与优先级

Easy LESS包，可以在VScode直接安装，帮助生成CSS文件：

main{    
	article{        
		h2{            
			color: red;       
 		}
 		h1{            
 			color: saddlebrown;       
 		 }   
 	 }
 }

自动生成的CSS文件如下：

main article h2 {  
color: red;
}
main article h1 { 
 color: saddlebrown;
}

less文件的编写方式，在我看来符合html文件中的结构关系，在标签选择器方面还是很方便的，本次学习中并没有重点学习less，在后面的学习中会提到。

字体

ps:

• 一般网页定义字体会定义多个，防止用户浏览器不存在某个字体的情况，如果都不存在，就默认使用浏览器的默认字体。
• 网络开源中文字体体积过大，商业字体要花钱

字体的定义

自己定义的字体格式如下：

@font-face{    
	font-family: "name";    
	/* otf woff ttf */
    src: url("文件1") format("opentype") ,
          url("文件2") format("opentype");
            /* 字体文件地址 以及字体类型 */
} 

通过字体制作图标

贴一个图标网站，传送门

字重与字号

通过font-size设置字号，font-weight设置字重

• 字重取值范围：normal | bold | bolder | lighter | 100-900。其中400嘴硬normal700对应bold
• 字号取值范围： xx-small | x-small | small | meidum | large | x-large | xx-large
• 百分数是子元素相对于父元素的大小，包括字号
• em单位，参照父元素

文本颜色与行高

颜色由color设定，可以使用颜色的字符串或者rgb坐标（坐标的第三个值为透明度），一般工作中会从ps设计稿中用吸管获取颜色
line-height设定行高，单位与上面相同，常用em单位，根据字号设置倍数

字体的倾斜风格以及组合定义

• font-style设置字体的风格，italic是倾斜风格对应的是normal
• font属性包含前面的属性，同时根据特定的顺序设定所有相关样式。

p{
    font: bold italic 15px/1.5em "Courier New",Courier,monospace;
    }

最后面是字体中种类

文本大小写与下划线

font-variant控制大小写

属性值	说明
small-caps	字体不变大的大写
uppercase	正常的大写
lowercase	小写
capitalize	首字母大写

text-decoration属性来控制文本线条

属性值	说明
unbderline	下划线
overline	上划线
line-through	删除线
none	取消下划线

文本阴影

text-shadow设定文本阴影 ：颜色值 水平偏移 纵向偏移 模糊量，单位px

空白与文本溢出

• 可以通过pre标签来显示多个空格
• white-space空白处理属性

属性值	说明
pre	保留空白和换行
pre-wrap	同上
pre-line	保留换行合并空格
nowrap	合并空格，不显示换行

• overflow属性隐藏溢出的文本
• text-overflow处理溢出的文本

div{
    white-space: nowrap; /*不换行*/
    overflow: hidden;/*隐藏溢出文本*/
    text-overflow: ellipsis;/*溢出的地方加省略号*/
 }

文本缩进与对齐

设置缩进使用text-indent属性，一般使用em（一个字符的宽度）单位

text-align属性设置对齐

属性值	说明
center	中心对齐
right	向右对齐
left	向左对齐

vertical-align 垂直对齐

属性值	说明
top	顶部对齐
bottom	底部对齐
middle	中间对齐
px值	正值往上，负值往下

文本排版

letter-spacing字符间距
word-spacing单词间距
writing-mode排版模式 （vertical-rl纵向，horizontal-tb横向）