《HTML&&CSS3入门经典》(8)——关于层叠样式表的更多介绍

1. 链接

  1. 常用属性
    • color:改变链接颜色
    • background-color:高亮显示链接
    • text-decoration:控制链接是否带有下划线,也可以用于指定文本带有横穿线、闪烁或上划线
  2. 四个伪类:
    • link:链接的总体样式
    • visited:已访问链接的样式
    • hover:当链接上有鼠标悬浮时的样式
    • active:链接当前为活跃状态(正被单击)时的样式

2. 背景

  1. 常用属性
    • background-color:指定背景颜色
    • background-image:指定一个作为背景的图片。该属性的值以字母url开头,然后是由括号及引号包裹的图片URL。例如body{background-image:url("images/background.gif");
    • background-repeat:指定背景图片是否应该重复显示
      • repeat:默认值,重复图片显示
      • repeat-x:图片会水平重复,横跨页面
      • repeat-y:图片会垂直向下重复显示,不会横跨页面重复
      • no-repeat:图片只显示一次
    • background-attachment:指定背景图片应该固定于页面中的一个位置,以及在用户向下滚动页面时是否留在原地
      • fixed:上下滚动液面,图片保持不动
      • scroll:图片保持在页面背景中相对位置
    • background-position:指定图片位置
      • x% y%
      • x y
      • left
      • center
      • right
      • top
      • bottom
    • background:简写形式,允许指定以上所有属性

3. 列表

  1. list-style-type:允许控制标记符号的形状或外观
    无序列表
    • none:无
    • disc:实心圆(默认)
    • circle:空心圆
    • square:实心方块

    有序列表:

    • decimal:数字
    • decimal-leading-zero:数字前加0
    • lower-alpha lower-latin:小写拉丁字符
    • upper-alpha upper-latin:大写拉丁字符
    • lower-roman:小写罗马数字
    • upper-roman:大写罗马数字
    • lower-greek:小写古希腊字母
    • armenian:亚美尼亚计数
    • georgian:格鲁吉亚计数
  2. list-style-position:列表项占据多于一行时,标点符号相对于文本应出现的位置
    • inside:符号在文本快内(缩进显示)
    • outside:符号位于文本块左侧(默认值)
  3. list-style-image:为标记符号指定图片,属性以url开始
  4. list-style:上述属性缩略形式。排列顺序:类型、位置、图片
  5. marker-offset:指定列表中标记符号与文本间的距离

4. 表格

  1. border-collapse:在两表格单元边框接触位置。指定两边框是否都应可见,或者浏览器应只选取其中一个边框进行显示
    • collapse:水平边框压缩,垂直边框彼此紧邻显示
    • separate:观察独立规则,给予进一步控制:
  2. border-spacing:指定两表格单元间应显示的空间宽度。提供一个值,同时应用于垂直和水平。提供两个值,前者水平,后者垂直
  3. empty-cells:指定单元为空时是否应显示边框
    • show:单元为空也显示边框(默认值)
    • hide:单元为空,隐藏边框
    • inherit:针对嵌套表格
  4. caption-side:指定标题应显示于表格的哪一侧,取值有top、right、bottom、left
  5. table-layout:强制表格使用指定的尺寸
    • auto:每个表格单元都将与单元中最长不中断字符集和的宽度相同
    • fixed
    • inherit

5. 轮廓(测试无效果)

  1. 轮廓与边框两个关键的区别是
    1. 轮廓不占据空间
    2. 轮廓不必是矩形
  2. 轮廓的四个属性:
    • outline-width:指定轮廓的宽度
    • outline-style:指定轮廓的线性样式
    • outline-color:指定轮廓的颜色
    • outline:缩率形式,模式:宽度、样式、颜色

6. :focus与:active伪类

  1. :focus伪类能够在一个元素获得焦点时,将额外规则与其关联,使其更加醒目
  2. :active伪类能够在元素被激活时——如用户单击链接时——对其关联更多样式

7. 生成的内容

  1. :before与:after伪元素:能够在选择器中定义的元素的每个实例之前或之后添加文本
  2. content属性:
    1. 计数器
    2. 引号

8. 杂项属性

  1. cursor属性:指定向用户显示的鼠标光标类型
  2. display属性:
    • block:转变为块级元素
    • inline:转变为行内元素
    • inline-block:转变为行内块
    • none:不被显示,不占据任何空间
  3. visibility属性:消失仍然影响布局
    • visible
    • hidden

9. 额外规则

  1. @impoert规则:模块化的样式表
    因阻塞并行下载而带来性能损失
  2. !important规则

10. 使用CSS定位与布局

  1. 正常流:块级元素自顶向下,行内元素自左向右
  2. position属性:
    • static:与正常流相同,为默认值
    • relative:盒子位置相对在其正常流中的位置出现偏移
    • absolute:盒子完全以包含元素左上角为原点的x及y坐标进行定位。特指position属性被设置为relative、absolute或fixed的包含元素
    • fixed:以浏览器窗口左上角为原点计算得出,且不随用户滚动窗口而改变位置
  3. z-index属性:值是一个数字,值越大越接近元素显示位置的顶部
  4. float属性:当为一个元素指定float属性时,必须设置width属性已指定盒子应该占据的宽度。否则,自动占据包含盒子100%的宽度。
  5. clear属性:
    • left:具有clear属性的元素在其左手侧不能有任何内容
    • right:具有clear属性的元素在其右手侧不能有任何内容
    • both:具有clear属性的元素在其左右两侧不能有任何内容
    • none:允许两侧出现浮动
Table of Contents