Web前端第9章思维导图

 本章内容是关于CSS样式属性，包含CSS单位、CSS字体样式、CSS文本样式、CSS颜色与背景、CSS列表样式、CSS盒模型。重点在于CSS盒模型、CSS文本样式、CSS字体样式。 

1. CSS单位

• 绝对单位

  • 磅（pt），pica（pc）、cm、mm、in

• 相对单位

  • em（字体高度，根据font-size确定单位大小）

  • ex（小写字母的高度作为参考，一般em/2=ex）

  • px（像素）

  • %（相对单位值）

2.CSS字体样式

• font-size

  • 字体大小：相对单位|绝对单位|关键字

• font-style

  • 字体样式

    • body斜体：,

    • norma：不使用斜体

    • italic：使用斜体

    • oblique：使用倾斜文字

• font-variant

  • 字体变体（主要用于英语字母大小写）

    • normal：正常字体（默认属性）

    • small-caps：使用小型的大写字母字体

• font-family

  • 字体系列：字体1，字体2，字体3......

• font-weight

  • 字体加粗（整数表示：100、200、300、400、...、900）

    • normal：默认不加粗（等价整数400）

    • bold：标准加粗（等价整数700）

    • bolder：特粗（等价整数900）

    • lighter：细体（等价整数100）

• font

  • 复合字体属性

    • font：font-style font-weight font-variant font-size/line-height font-family ①以空格间隔； ②前三个属性不分先后顺序，大小和字体设置必须先大小后字体； ③如果需要设置行高，可以直接在大小后+”/“+行高； ④font可以继承

3.CSS文本样式

• 字符间距，行距与首行缩进属性

  • letter-spacing：（字符间距，设置字符与字符之间的距离）normal|长度单位

    • normal表示默认间距，长度一般为正数，也可以为负数，需要看浏览器是否支持。 word-spacing主要争对英文单词。 letter-spacing对中文和英文均有效。

  • line-height：（行距，用于设置行与行之间的距离）normal|length

    • normal：默认行高。 length：百分比、数字，由浮点数字和单位标识符组成的长度值，允许负值。取百分比是基于字体高度尺寸。

  • text-indent：（首行缩进，设置首行缩进量）长度单位|百分比单位

    • 长度单位可以使用绝对单位和相对单位，也可以使用百分比单位。

• 字符装饰、英文大小写转换属性

  • text-decoration：（字符装饰）主要完成文字加上画线、下划线、删除线

    • text-decoration：none|underline|overline|line-through

  • text-transform：（英文大小写转换）转换英文大小写

    • text-transform：capitalize（将每个单词第一个字母转换为大写）|uppercase（全部转换为大写）|lowercase（全部转换为小写）|none

• 水平对齐、垂直对齐属性

  • text-align（水平对齐）：规定元素的水平对齐方式

    • text-align：left|right|center|justify（两端对齐）

  • vertical-align：规定元素垂直对齐方式

    • vertical-align：top|middle|bottom|text-top|text-bottom top：把元素的顶端与行中最高元素的顶端对齐 middle：把次元素放置在父元素的中部 bottom：把元素的顶端和行中最低元素的顶端对齐 text-top：把元素的顶端和父元素字体的顶端对齐 text-bottom：把元素的底端和父元素字体的底端对齐

4.CSS颜色与背景

• color：设置元素字体的色彩

  • color：颜色英文名|rgb(r%，g%，b%)|rgb(r，g，b)|#FFFFFF|#3FE

• background：用于设置指定元素的背景色彩、背景图案

  • background-color：背景颜色

    • 同color属性设置颜色一样

  • background-image：背景图片

    • background-image：url（“图像名字/地址”）|none

  • background-attachment：设置背景图案在元素滚动的时候是否要滚动

    • background-attachment：scroll（一起滚动）|fixed（固定不滚动）

  • background-position：设置背景图案的起始位置

    • background-position：参数1（left|center|right|x%|xpos） 参数2（top|center|bottom|y%|ypos） 第一个参数表示水平位置，第二个参数表示垂直位置

  • background-repeat：当背景图案小于知道那个元素是是否要重复

    • background-repeat：repeat（完全填充）|no-repeat（不重复）|repeat-x（水平方向填充元素大小空间）|repeat-y（垂直方向填充元素大小）

5.CSS列表样式

• list-style-type：disc（实心圆）|circle（空心圆）|square（实心方块）|decimal（阿拉伯数字）|lower-roman（小写罗马数字）|upper-roman（大写罗马数字）|lower-alpha（小写英文字母）|upper-alpha（大写英文字母）|none

• list-style-position：outside（标志放在文本外，任何换行文本均不对齐）|inside（标志放在文本中，任何换行文本均对齐）

6.CSS盒模型

• MBPC模型：margin（外边界、外边距、边界，盒子边框与页面边界之间）|border（边框）|padding（填充、内边距、内边界，内容与边框之间的距离）|content（内容）

• 一个盒子的高=上边界+上边框+上填充+内容高度+下填充+下边框+下边界

• 一个盒子的宽=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

• margin参数设置

  • margin：10px 20px 30px 40px

  • 一个参数：四个边界均为该参数

  • 两个参数：上下为第一个参数，左右为第二个参数

  • 三个参数：上为第一个参数，左右为第二个参数，下为第三个参数

• border参数设置

  • border-style：设置不同风格边框样式 可以每个边框设置设置一个样式：border-top-style...

    • hidden|none：无边框 dotted：定义点状边框 dashed：定义虚线 solid：定义实线 double：定义双线 groove：定义3D凹槽边框 ridge：山脊状边框 outset：使页面浮出感边框 inset：是页面沉入感边框

  • 边框宽度：border-width：medium（默认值）|thin（小于默认宽度）|thick（大于默认宽度）|length(长度值）

• padding：长度|百分比

  • padding-top|right|bottom|left：长度|百分比

7.示例 

  
  
  
  


  

    绝对单位：英寸（in），厘米（cm），毫米（mm），磅（pt），pica（pc）
    

    相对单位：em（字体高度）；ex（小写字母x的高度，一般em/2=ex）；px（像素点）；%（通过另外一个值进行计算）
  


  

    World!
  

  
关于font-style的取值

  


  
文字文字wenziwenzi
  
文字AWDEWEWwenzi
使用小型大写字母字体
  
文字文字wenziwenzi

  
文本样式
  
letter-spacing用于设置字符间距.CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表
   
CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表CSS文本样式表