前端零基础学习Day-Eight

CSS字体和文本样式

CSS文字样式

• 字体：font-family

  • 语法：font-family:[字体1][,字体2][,...]

    • p{font-family:"微软雅黑","宋体","黑体";}

  • 含空格字体名和中文，用英文引号括起

  • 属性值：具体字体名，字体集

    • 字体集：Serif,Sans-serif,Monospace,Cursive,Fantasy

    • p{font-family:"微软雅黑","宋体","黑体",sans-serif;}

  • 多个字体，用英文逗号隔开

  • 引号嵌套，外使用双引号，内使用单引号

    • 如行内样式<h1 style="font-family:'宋体';">

---

• 文字大小：font-size

  • 语法：font-size:绝对单位|相对单位

  • 绝对单位：

    属性值	说明
    in	英寸，1英寸=2.54厘米
    cm	1厘米=0.394英寸
    mm	毫米
    pt	磅，印刷的点数，72磅=1英寸
    pc	Pica，1pc=12pt

    属性值	CSS2缩放系数1.2
    xx-small	9px
    x-small	11px
    small	13px
    medium	16px
    large	19px
    x-large	23px
    xx-large	28px

    • 当不设置字体大小时，默认为浏览器默认值，一般默认字体是16px

    • 绝对大小，不能随浏览器分辨率或父元素大小的改变而改变

  • 相对单位：

    • px像素

    • em/% （相对值）都是针对父元素

    • 文字大小受显示器分辨率影响

    • 属性值larger：相对父元素的文字大小变大

    • 属性值smaller：相对父元素的文字大小变小

---

• 文字颜色：color

  • 语法：color:颜色名|十六进制|RGB

    • 十六进制:#000000

      • 每一位值：0~F

      • 简写，#008800可简写成#080

      • 不区分大小写，大写A和小写a效果一样

      • Web安全色：www.bootcss.com/p/websafecolors/

    • RGB(红，绿，蓝)：rgb(250,250,250)、rgb(50%,50%,50%)

      • 数字：0~255，小于0会修正成0，大于255会修正成255

      • 百分比：0%~100%，小于0%会修正成0%，大于100%会修正成100%

---

• 文字粗细：font-weight

  • HTML语法：<b>标签，<strong>标签

  • 语法：font-weight:normal | bold | bolder | lighter | 100~900

  • 默认值：normal

  • 400等同于normal，700等同于bold

---

• 文字样式：font-style

  • HTML语法设置斜体：<em>标签，<i>标签

  • 语法：font-style:normal | italic(常用) | oblique

---

• 字体变形：font-variant

  • 设置元素中文本为小型大写字母

  • 语法：font-variant:normal | small-caps

---

• font属性（简写）

  • 语法：font:font-style font-variant font-weight font-size/line-helight(行高) font-family

  • 值之间空格隔开

  • 同时设置font-size和font-family，属性才会起作用

  • 注意书写顺序

  • font-italic bold small-caps 50px "黑体","宋体";

CSS文本样式

• 水平对齐方式：text-align

  • 设置元素内内联元素（如文本和图片）的水平对齐方式

  • text-align:left | right | center | justify

  • 图片居中(设置图片的对齐方式，需要设置图片父元素的text-align属性)：

    • 错误方法：img{text-align:center;}

    • 正确方法：div{text-align:center;}

      <div><img src="img/logo.png"/></div>

  • CSS text-align属性并不控制块级元素的对齐方式，它控制块级元素里面的内联元素的对齐方式。虽然这个属性的名称为text-align，但是块级元素中的所有内联元素都会被这个属性影响。

---

• 行高：line-height

  • 设置元素中文本行高

  • 语法：line-height:长度值 | 百分比

  • 设置px时行高不会因字体大小改变而改变，而em和%于字体大小有关系

  • 实际开发中一般使用em这个单位

  • 浏览器有默认行高，不同浏览器默认行高不一样

  • 行高可继承，继承的是计算后的值，而不是直接把em或%的值继承过来

---

• 垂直方式vertical-align属性

  • 设置元素内容的垂直方式

  • 语法：vertical-align:baselline | sub(下标) | super(上标) | top | text-top | middle | bottom | text-bottom

    vertical-align：长度 | 百分比

    • 基于文本基线移动

    • 上移：vertical-align:15px;

      vertical-align:100%;

    • 下移：vertical-align:-15px;

      vertical-align:-100%;

  • 对行内元素生效，对于块级元素不生效

  • 文字基线

  • 也可应用于单元格元素

---

• 单行文字垂直水平居中：

  • 设置行高

  • text-align：center;

• 多行文字垂直水平居中

---

• 文本样式属性：

字体属性	说明
word-spacing	设置元素内单词之间间距
letter-spacing	设置元素内字母之间间距
text-transform	设置元素内文本的大小写 capitalize(首字母大写) | uppercase(大写) | lowercase(小写) | none
text-decoration	设置元素内文本的装饰 underline(上划线) | overline(下划线) | line-through(贯穿线) | blink(闪烁效果，有兼容性问题) | none

间距属性值可以是正值也可以是负值，可以使用px也可以使用em

可以设置多个装饰样式属性值，中间用空格隔开