文章目录
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横向)