文字属性

color的三种方式

关键字、十六进制、rgb值。

  1. 十六进制
  • 十六进制转换rgb

（1）先将十六进制六位字符拆分为三组，每组两个字符

（2）将两位字符从右到左的顺序进行计算：依次乘于16的0次方，16的1次方….
例如 81 = 1*161 = 129;

  • rgb转十六进制

（1）对rgb值用16取余，值和余数拼起来
例如:125 = 125/16 = 7d。

  1. 颜色关键字

直接用英文单词表示：red

  1. rgb(red,green,blue)每种颜色的取值范围是0-255

rgb(0,0,0)黑色

rgb(255,255,255)白色

rgba(red,green,blue,透明)

font-family

  1. 设置字体
  • 字体不能随便设置，必须是计算机中含有的字体
  • 字体值是中文或者中间有空格的情况下要加引号
  • 当页面中既有英文又有中文的情况下，要想各自使用各自的字体，需要把英文字体写在前面，中文字体写在后面
  1. 小米字体：

Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif

font-size

  1. 表示字体大小；
  2. 单位
    px 像素（固定单位，设置字体大小尽量使用双数）

em 相对单位，相对于父元素的字体大小进行取值

rem 相对单位，相对于html根元素的字体大小进行取值,一般用于移动端

font-style

设置字体样式，两种取值normal默认正常取值，italic表示设置斜体

font-weight

设置字体的粗细

两种取值：bold和100-900，500是个分界点。

line-height

  1. 设置行高
    两种取值：px固定单位，一般用来设置字体的垂直居中，是行高等于本身的高就可以设置垂直居中

倍数（number） 相对于本身字体大小的一个倍数

font

字体综合属性：
font: font-style font-weight font-size/line-height font-family

最少必须包含font-size/line-height font-family

文本

  1. text-align针对块元素里面的文本的对齐方式
    center居中对齐

给块元素设置居中对齐可以使块元素内的行内元素和img居中对齐

left左对齐

right右对齐

justify两端对齐

  1. text-decoration

none去除a标签下划线

underline下划线

overline上划线

line-through删除线

  1. text-indent
    设置首行缩进

两种取值：px固定单位

em：直接设置2em不管字体大小都首行缩进两字符

  1. letter-spacing

设置字符之间的间距，针对中文和英文都有效果

  1. word-spacing

设置单词间距，只针对英文

  1. vertical-align

设置图片和文本的对齐方式

三类元素的转换：

  1. 转换成块元素:display:block
  2. 转换成行内元素:display:inline
  3. 转化成行内块元素:display:inline-block

display:inline-block问题

  • 会产生行内块元素之间会有一个大约4px的一个距离

产生原因：换行符导致的

解决办法：

  1. 删除换行符或者注释换行符
  2. 给父元素设置font-size：0，然后给本身一个不为0的字体大小
  • 在ie8以下不兼容
    需要添加以下两行代码：

*display:inline

*zoom:1

三类元素的嵌套

  1. 块元素可以嵌套块元素，行内元素和行内块元素，比如div
  2. 某些块元素只能嵌套行内元素，而不能嵌套块元素，这些元素包含p和h1-h6
  3. 行内元素不能嵌套块元素，只能嵌套其他的行内元素
  4. a标签是万能的，可以嵌套任何元素(使用时将a标签转换成块元素)，意思是只要是a标签里面的内容都是可以点击跳转的
  5. 尽量书写页面结构的时候，使同类元素同级

三类元素的水平居中

  1. 块元素水平居中：

设置属性 margin:0 auto(这个块元素必须有宽)

  1. 行内元素和行内块元素进行居中

使其用块元素进行包裹，然后给块元素一个text-align:center