第十八天学习：链接样式+背景样式+列表样式

关键字：链接样式+背景样式+列表样式

学习计划：

  • 链接的表示
  • 文档的背景
    • background-color特性
    • background-image特性
    • background-repeat特性
    • background-position特性
    • background-attachment特性
    • background特性
  • 列表
    • list-style-type特性
    • list-style-position特性
    • list-style-image特性
    • list-style特性
    • marker-offset特性

学习记录：

  • 链接的表示
    • 链接的四种状态：
      • a:link-普通的、未被访问的链接：
      • a:visited-用户已访问的链接
      • a:hover-鼠标指针位于链接上方
      • a:active-链接被点击的时刻
    • 当为链接的不同状态设置样式时，请按照以下次序规则：
      • a:hover必须位于a:link和a:visited之后
      • a:active必须位于a:hover之后
    • 常见的链接样式：
      • text-decoration属性大多用于去掉链接中的下划线
      • background-color属性规定链接的背景色
  • 文档的背景：
    • background-color特性
      • 设置元素的背景颜色，这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距），如果边框有透明部分（如线边框），会通过这些透明部分显示出背景色
      • 这个特性的值可以是十六进制编码、颜色名或者RGB值，transparent值是默认值，设置背景颜色为透明
    • background-image特性
      • 为元素设置背景图像，元素的背景占据了元素的全部尺寸，包括内边框和边框，但不包括外边距。
      • 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
      • 应该设置一种可用的背景颜色，这样的话，加入背景图像不可用，页面也可获得良好的视觉效果。
      • 该特性能够附带的值如下：
        • 起始字母url，然后在小括号和双引号内包括图像的url
      • 不具有alt特性，因此，背景图像不能用于传送任何重要信息，因为对于看不到背景图像的访问者来说，图像上的信息是不可访问。
    • background-repeat特性
      • 属性设置是否及如何重复背景图像，默认地，背景图像在水平和垂直方向向上重复
      • 可能的值：
        • repeat：默认。背景图像将在垂直方向和水平方向重复
        • repeat-x：在水平方向重复
        • repeat-y：在垂直方向重复
        • no-repeat：将仅显示一次
    • background-position特性
      • 属性设置背景图像的起始位置
      • 可能的值：
        • x%y%：第一个值是水平位置，第二个值是垂直位置。左上角是0%0%，右下角是100%100%。如果仅规定了一个值，另一个值将是50%
        • xy：第一个值是水平位置，第二个值是垂直位置。左上角是0 0 。单位是像素（0px 0px）或者任何其他的CSS单位。如果仅规定一个值，另一个值将是50%，可以混合使用%和position值
        • left：在页面或者包含元素的左边显示
        • center：在页面或者包含元素的中间显示
        • right：在页面或者包含元素的右边显示
        • top：在页面或者包含元素的顶部显示
        • bottom：在页面或者包含元素的底部显示
    • background-attachment特性
      • 可用于指定称为水印的图像。这种设置的关键区别是，即使用户向上或向下滚动页面或者滚动页面中的所有其他元素，背景图像都将停留在相同的位置
      • 值：
        • fixed：用户向上或向下滚动页面时图像不会移动
        • scrool：图像停留在页面背景上的相同位置处。如果用户向上或向下滚动页面，则图像也随之移动。
    • background特性
      • 利用background特性可以一次性指定所有5个背景特性。如果不提供任何值，则将使用默认值。可以以任何顺序提供值：
      • 值：
        • background-color
        • background-image
        • background-repeat
        • background-attachment
        • background-position
  • 列表
    • list-style-type特性
      • 可用于控制无序列表中项目符号（也称为标记符）的形状或者有序列表中编写字符的样式
      • 无序列表的标准样式
        • none：没有标记符
        • disc：默认值，填充的圆
        • circle：空心圆
        • square：填充的正方形
      • 有序列表的广泛支持值
        • decimal：数值，例如1、2、3、4、5
        • decimal-leading-zero：在前面添加0的数值，例如：01、02、03、04
        • lower-alpha：小写字母数字字符，例如：a、b、c
        • upper-alpha：大学字母数字字符，例如：A、B、C
        • lower-roman：小写罗马数字，例如：i、ii、iii、iv、v
        • upper-roman：大写罗马数字，例如：I、II、III、IV、V
      • list-style-type特性可以用于<ul>元素和<ol>元素，也可以用于<li>元素
    • list-style-position特性
      • 指示标记符应当出现在包含项目列表的框的内部还是外部
      • 当项目列表中某一项的文本超出一行时才会显现具体的区别。因为这个特性设置换行的文本是出现在项目符号的下方还是与第一行文本位置对齐
      • 值：
        • inside：如果文本超出一行，则换行的文本将位于标记符的下方
        • outside：如果文本超出一行，则换行的文本将与第一行文本的起始位置（项目符号的右边对齐），缩进显示
    • list-style-image特性
      • 使用图像来替换列表项的标记
      • 如果图像无法显示，浏览器将只会显示一个圆点，而不是破碎的图像符号
    • list-style特性
      • 可以一次性表达其他3种特性，并且这3种特性可以按照任意顺序出现
      • 可以为ul、ol、li、dl、dt、dd、元素设置border、padding和margin特性
    • marker-offset特性
      • 可用于指定标记符和该标记符相关的文本之间的距离，它的值必须是一个长度　　

扩展阅读：

问题的记录与解答：

  • marker-offset特性怎么用？
posted @ 2016-07-26 21:41  桂  Views(122)  Comments(0)    收藏  举报