零基础Vue的小白学习路——CSS基础（二）CSS三大特性、字体属性、文本属性、列表属性

• CSS三大特性：
  • 层叠性：如果发生了样式冲突，会根据一定规则（选择器优先级）进行样式的层叠（覆盖）
  • 继承性：元素会自动拥有其父元素、祖先元素的某些样式。
    • 常见可继承属性：text-??，font-??，line-??，color.....
    • 规则：优先继承离得近的
  • 优先级：！important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式
    • 注意：计算权重时，并集选择器的每个部分分开计算。
• CSS之像素与颜色：
  • 像素的概念：显示屏上具有单一颜色的色块，显示屏像素越大，图像越精细。
  • 颜色的表示：
    • 1、颜色名：编写简单，但表达颜色单一，用到不多，具体颜色名可参考MDN官方文档
    • 2、rgb或rgba值：
      • color:rgb(红值，绿值，蓝值)
      • color:rgba(红值，绿值，蓝值，透明度)
    • 3、HEX或HEXA值：
      • HEX：#红值绿值蓝值（三个值用两位的16进制数字表示）
      • HEXA：#红值绿值蓝值透明度（HEX加上16进制的透明度）
    • 4、HSL或HSL值：
      • hsl(色相，饱和度，亮度)
        • 饱和度：取值范围0~100%，0%全灰，100%没有灰。
        • 亮度：取值范围0~100%，0%无亮度呈现黑色，100%亮度太强呈现白色。
      • hsla（色相，饱和度，亮度，透明度）
• CSS 字体属性：
  • font-size：字体大小
    • 不同浏览器默认文字大小不同，因此最好给一个明确值
    • 通常给body设置font-size属性，这样body中的其他元素可以直接继承
  • font-family：字体族，例如选择微软雅黑、宋体等字体族。
    • 衬线字体：有棱角
    • 非衬线字体：无棱角，网页常用字体
    • 注意：使用英文名字兼容性更好；如果字体名包含空格，必须使用引号包裹起来；可以设置多个备选字体，且通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）。
  • font-style：字体风格
    • normal：正常
    • italic：斜体（使用字体自带的斜体效果，实际应用中推荐使用italic）
    • oblique：斜体（强制倾斜产生的斜体效果）
  • font-weight：字体粗细
    • 1、关键词表示：
      • lighter：细
      • normal：正常
      • bold：粗
      • bolder：很粗（多数字体不支持）
    • 2、数值表示：
      • 范围100-1000，通常100-300等同于lighter，400-500等同于normal，600及以上等同于bold。具体情况跟不同字体的初始设计有关。
  • font：字体复合属性
    • 编写规则：
      • 1、字体大小、字体族必须都写上
      • 2、字体族必须最后一位、字体按大小必须倒数第二位
      • 3、各个属性间用空格隔开
• CSS文本属性：
  • color:文本颜色
    • 1、颜色名
    • 2、rgb,rgba值
    • 3、HEX或HEXA值
    • 4、HSL或HSLA值
  • letter-spacing与word-spacing：文本间距
    • letter-spacing：字母间距
    • word-spacing：单词间距（通过空格识别词）
  • text-decoration：文本修饰
    • 1、none：无装饰线
    • 2、underline：下划线
    • 3、overline：上划线
    • 4、line-through：删除线
    • 可搭配属性：
      • 1、dotted：虚线
      • 2、wavy：波浪线
      • 3、也可以指定颜色
  • text-indent：文本缩进
    • 属性值：px
  • text-align：文本水平对齐
  • line-height：行高
    • 1、像素值
    • 2、normal
    • 3、数值或百分比（字体大小的倍数）
    • 注意：由于字体设计原因，文字在一行中，并不是绝对垂直居中。
  • 文本垂直对齐三种手法方式：
    • 1、顶部：默认顶部对齐
    • 2、居中：让line-height = height
    • 3、底部：让line-height = 2 * height - font-size （由于字体设计大小原因还需要再微调）
  • vertical-align：文本垂直对齐
    • 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
    • 1、baseline：默认值，元素基线与父元素的基线对齐
    • 2、top：元素顶部与其所在行的顶部对齐
    • 3、middle：元素的中部与父元素的基线加上父元素字母x的一半对齐(简记为父元素字母x的中心点)。
    • 4、bottom：元素的底部与其所在行的底部对齐。
    • 注意：vertical-align只能用于行内元素，不能用于块元素。
• 列表相关属性：
  • list-style-type：列表符号形状
  • list-style-position：列表符号位置
  • list-style-image：自定义列表符号图案
  • list-style：列表复合属性，可以直接写入以上三项属性，中间用空格隔开