CSS讲解(3) CSS基础

CSS

• Cascading Style Sheet
• 层叠样式表

举例：

权重高选择器的样式覆盖权重低的，进行叠加

基本规则

选择器 {
    属性: 值;
    属性: 值;
}

选择器

• 用于匹配HTML元素

  • 有不同的匹配规则
  • 多个选择是可以叠加的

• 分类和权重

• 解析方式和性能

  • 解析方式 浏览器是从右往左，先找最右边的选择器，再验证上级是否符合
  • 为了加快哪些不符合

• 值得关注的选择器

选择器分类

• 元素选择器 a{}
• 伪元素选择器 ::before{}
• 类选择器 .link{}
• 属性选择器 [type=rodio]{}
• 伪类选择器 :hover{}
• ID选择器 #id{}
• 组合选择器 [type=checkbox] + label{}
• 否定选择器 :not(.link){}
• 通用选择器 *{}

伪元素: 不会出现再HTML中，也不会出现在DOM树中，但它一个真实存在的元素，它可以显示内容和设置样式

伪类: 表示状态

选择器权重

选择器	权重值
ID选择器 #id{}	+100
类	+10
属性	+10
伪类	+10
元素	+1
伪元素	+1
其它	+0

计算一个不进位的权重值

比如：

• #id .link a[href]

100(#id) + 10(.link) + 1(a) + 0([href]) = 111

• #id .link.active

100(#id) + 10(.link) + 10(.active) = 120

不进位: 数字不进位的，比如多少个类选择器权重相加都不能超过ID选择器权重

举例：

其它规则

• !important 优先级最高
• 元素属性 优先级高
• 相同权重 后写的生效

例子：

非布局样式

字体

• 字体族

  • serif / sans-serif / monospace / cursive / fantantasy

• 多字体fallback

  • 指定字体找不到，就向后查找

• 网络字体，自定义字体

• iconfont

iconfont-阿里巴巴矢量图标库
使用了伪元素 before

行高

• 行高的构成
• 行高相关的现象和方案
• 行高的调整

1. 为什么行高设的不一样，但显示的行高是一样的？

文本排版

• css行高line-height的一些深入理解及应用

背景

• 背景颜色
• 渐变色背景
• 多背景叠加
• 背景图片和属性 (雪碧图)
• base64和性能优化
• 多分辨率适配

边框

• 边框的属性： 线型 大小 颜色
• 边框背景图
• 边框衔接(三变形)

滚动

• 滚动行为和滚动条
  • visible
  • hidden
  • scroll
  • auto

文本折行

• overflow-wrap(word-wrap)通用换行控制
  • 是否保留单词
• word-break 针对多字节文字
  • 中文句子也是单词
• white-space 空白处是否断行

装饰性属性

• 字重（粗体） font-weight
• 斜体 font-style: itatic
• 下划线 text-decoration
• 指针 cursor

CSS Hack

• Hack 即不合法但生效的写法
• 主要用于区分不同浏览器
• 缺点：难理解 难维护 易失效
• 替代方案： 特性检测
• 替代方案： 针对性加class

实例

真题

1. CSS样式(选择器)的优先级

   • 计算权重确定
   • !important
   • 内联样式
   • 后写优先级高

2. 雪碧图的作用

   • 减少HTTP请求数 提高加载性能
   • 有一些情况下可以减少图片大小

3. 自定义字体的使用场景

   • 宣传/品牌/banner等固定文案
   • 字体图标