CSS入门详解（四）

接下来对CSS其他属性进行解释。

• 字体

  • font-family :设置文字的字体，属性值为字体名。使用font-family 指定的字体，需要求这些字体在当前系统上已经安装了，如果你指定的字体在当前系统上未安装，则不能正确显示。
  • font-size ：设置当前文本内容字体的大小，属性值可以是：xx-small（最小字体），x-small（较小字体），small（小字体），medium（正常大小的字体，是默认值），large（大字体），x-large（较大字体），xx-large（最大字体），larger（相对于父元素中的字体进行相对增大），smaller（相对于父元素中的字体进行相对减少），具体值/百分比值（直接设置字体大小）。
  • font-weight ：设置当前文本内容字体的粗细，属性值分为两种：
    • 数字：100、200、300....
    • 单词：lighter（更细）、normal（正常）、bold（加粗）、bolder（更粗）。
  • font-style:设置文字风格，属性值有normal（正常）、italic（斜体）、oblique（倾斜）。
  • text-decoration：设置文本装饰，常用属性值有4种：underline（下划线），none（无修饰）， overline（上划线）， line-through （删除线）。
  • color:控制文字颜色。
  • font-variant:设置文字的大写字母的格式。属性值可以是normal（正常的字体）、small-caps（小型的大写字母）。
  • text-shadow:设置文字是否有阴影效果，属性值为具体像素值，顺序同边框粗细。
  • text-transform:设置文字的大小写。

• 文本

  • text-indent ：指定文本第一行的缩进，属性值为具体像素值。
  • letter-spacing ：指定文本中字符之间的间距，属性值为具体像素值。
  • word-spacing ：指定文本中单词之间的间距，属性值为具体像素值。
  • white-space：指定元素内部空白的处理方式，属性值为具体像素值，或是normal（默认属性值，浏览器忽略文本中的空白）、pre（浏览器保留文本中的所有空白），nowrap（文本不会换行），pre-wrap（保留空白符序列），pre-line（合并空白符序列），inherit（指定从父元素继承white-space属性的值）。
  • text-align ：设置文本的水平对齐方式，属性值可以是left(左对齐)、 right(右对齐)、center(居中对齐）和justify(两端对齐）。
  • line-height：设置文本行高操作，属性值为具体像素值。
  • vertical-align:设置目标元素里内容的垂直对齐方式，属性值有top（顶端对齐），bottom（底对齐）等。
  • word-break:设置目标元素中文本内容的换行方式，属性值有normal（按浏览器默认规则进行换行），keep-all（只能在半角空格或连字符处换行），break-all（设置允许在单词中间换行）。
  • word-wrap:设置目标元素中文本内容的换行方式，属性值有normal（按浏览器的默认规则进行换行），break-word（设置允许在单词中间换行）。

• 表格

  • border-collapse：控制两个单元格的边框是合并在一起，属性值可以是seperate(边框分开，使得单元格的分隔线为双线)，collapse(边框合并，使得单元格的分隔线为单线)。
  • border-spacing：设置两个单元格边框之间的间距。
  • table-layout:设置表格宽度布局的方法。属性值有auto（默认值,平时常见的表格布局方式），fixed（指定使用固定布局方式）。

• 鼠标

  • cursor：设置鼠标样式，属性值有：
    • all-scrolling：十字箭头光标。
    • col-resize:水平拖动线光标。
    • crosshair:十字线光标。
    • move:移动十字箭头光标。
    • help:带问号的箭头光标。
    • no-drop:禁止光标。
    • not-allowed:禁止光标。
    • pointer:手形光标。

• 布局

  • display ：规定是否/如何显示元素，属性值为none（不显示），block（块元素），inline（内联元素），flex（弹性盒子）。
  • justify-content：设置主轴上的子元素排列方式，属性值有flex-start（项目位于容器的开头），flex-end（项目位于容器的结尾）， center（项目位于容器中央），space-between（项目在行与行之间留有间隔），space-around（项目在行之前、行之间和行之后留有空间）。