文字属性6大样式：

  1. color(文字颜色)
  2. font-family（字体类别：如：楷体，宋体）
  3. font-size（字体大小）
  4. font-style（字体样式:如：斜体）
  5. font-weight（字体的粗细）
  6. line-height（设置行高）

color

  1. 十六进制 #+（6位数值）
  • 二进制：0.1
  • 八进制：0.1.2.3.4.5.6.7
  • 十进制: 0.1.2.3.4.5.6.7.8.9
  • 十六进制: 0.1.2.3.4.5.6.7.8.9.A.B.C.D.E.F

十六进制转换rgb
1）先将十六进制六位字符拆分为三组，每组两个字符
2）将两位字符从右到左的顺序进行计算：
02 2161=2
81 1161=129
e8 8*161=232
rgb(2,129,232)

color

  1. 颜色关键字(如：color：”楷体”;)
  2. rgb（255.255.255）每个颜色的取值范围式0-255

font-family

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

font-size

  1. 表示字体大小；
  2. 单位
  • px 像素（固定单位，设置字体大小尽量使用双数）
  • em 相对单位，相对于父元素的字体大小进行取值（如：2em，3em）
  • 热门 相对单位，相对于html根元素的字体大小进行取值,一般用于移动端

font-style

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

font-weight

设置字体的粗细

  • 两种取值：bold和100-900（100的整数倍）

line-height

  1. 设置行高
  • 两种取值：px固定单位，一般用来设置字体的垂直居中，是行高等于本身的高就可以设置垂直居中
  • 倍数（number）相对于本身字体大小的一个倍数

font

  1. 字体的综合属性：
  • font：font-style font-weight font-size/line-height font-family

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

文本

  1. text-align：（针对快元素里面的文本的对齐方式）
  • center（居中对齐）
  • 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
  • 设置图片文本的对齐方式

元素的分类

块元素

默认属性：display：block

行内元素

默认属性：dispplay：inline

行内块元素

默认属性：display：inline-block
display:none使元素隐藏，一般与display：block来控制元素的显示和隐藏

三类元素的转换：

  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(这个块元素必须有宽)
  2. 行内元素和行内块元素进行居中
    使其用块元素进行包裹，然后给块元素一个text-align:center