3.CSS使用基础(2)

目录

一.CSS 链接

二.CSS 列表样式(ul)

 

一.CSS 链接

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

  a:link {color:#FF0000;}      /* unvisited link */ 
  a:visited {color:#00FF00;}  /* visited link */ 
  a:hover {color:#FF00FF;}  /* mouse over link */ 
  a:active {color:#0000FF;}  /* selected link */

  当设置为若干链路状态的样式，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

    常见的链接样式

    根据上述链接的颜色变化的例子，看它是在什么状态。

    让我们通过一些其他常见的方式转到链接样式：

    文本修饰

    text-decoration 属性主要用于删除链接中的下划线：

    a:link {text-decoration:none;} 
    a:visited {text-decoration:none;} 
    a:hover {text-decoration:underline;} 
    a:active {text-decoration:underline;}

    背景颜色

    背景颜色属性指定链接背景色：

    a:link {background-color:#B2FF99;} 
    a:visited {background-color:#FFFF85;} 
    a:hover {background-color:#FF704D;} 
    a:active {background-color:#FF704D;}

    二.CSS 列表样式(ul)

    不同的列表项标记

    list-style-type属性指定列表项标记的类型是：

    ul.a {list-style-type: circle;}
    ul.b {list-style-type: square;}
    
    ol.c {list-style-type: upper-roman;}
    ol.d {list-style-type: lower-alpha;}

    一些值是无序列表，以及有些是有序列表。

    下列是对list-style-type属性的常见属性值的描述：

    • none：不使用项目符号
    • disc：实心圆
    • circle：空心圆
    • square：实心方块
    • demical：阿拉伯数字 
    • lower-alpha：小写英文字母 
    • upper-alpha：大写英文字母 
    • lower-roman：小写罗马数字 
    • upper-roman：大写罗马数字

      值	描述
      none	无标记。
      disc	默认。标记是实心圆。
      circle	标记是空心圆。
      square	标记是实心方块。
      decimal	标记是数字。
      decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
      lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
      upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
      lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
      upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
      lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
      lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
      upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
      hebrew	传统的希伯来编号方式
      armenian	传统的亚美尼亚编号方式
      georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
      cjk-ideographic	简单的表意数字
      hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
      katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
      hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
      katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

      作为列表项标记的图像

      要指定列表项标记的图像，使用列表样式图像属性：

      ul
      {
      list-style-image: url('sqpurple.gif');
      }

      上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

      提示：利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。

      如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

      浏览器兼容性解决方案

      同样在所有的浏览器，下面的例子会显示的图像标记：

    • ul
      {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      }
      ul li
      {
      background-image: url(sqpurple.gif);
      background-repeat: no-repeat;
      background-position: 0px 5px; 
      padding-left: 14px; 
      }

       

      值	描述
      URL	图像的路径。
      none	默认。无图形被显示。
      inherit	规定应该从父元素继承 list-style-image 属性的值。

    • 列表中列表项目标记的位置

      CSS list-style-position 属性

      值	描述
      inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
      outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
      inherit	规定应该从父元素继承 list-style-position 属性的值。

    • 列表 -缩写属性

      在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。

      为列表使用缩写属性，列表样式属性设置如下：

      ul
      {
      list-style: square url("sqpurple.gif");
      }

      如果使用缩写属性值的顺序是：

      • list-style-type
      • list-style-position (有关说明，请参见下面的CSS属性表)
      • list-style-image

      如果上述值丢失一个，其余仍在指定的顺序，就没关系。