1. 设置元素的颜色和透明度

前面有介绍CSS颜色的各种用法，如 background-color属性、boder-color属性等。还有另外两个与颜色有关的属性。

1.1 设置前景色

color属性设置元素的前景色。一般而言，元素对color属性之于它的意义可以有不同的解读，不过实际上，color属性一般用来设置文本的颜色。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Example</title>
  6.     <style type="text/css">
  7.         p { padding: 5px; border: medium solid #000000; background-color: lightgray;}
  8.         span:first-child { color: #1fa6e6;}
  9.         span:last-child { color: rgba(255,255,255,0.6); background-color: green;}
  10.     </style>
  11. </head>
  12. <body>
  13. <p>
  14.     <span>你的特别不是因为你在创业，不是因为你进了牛企，不是因为你的牛offer，而是因为你就是你，坚信自己的特别，坚信自己的内心，勇敢做自己。</span>
  15.     <br />
  16.     <span>IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span>
  17. </p>
  18. </body>
  19. </html>

此例中，用了两次color属性：以此为第一个span元素设置前景色，一次为第二个span设置前景色和透明度。效果如下：

1.2 设置元素的透明度

在前面的例子中使用了 rgba函数设置span元素的颜色。通过提供一个小于1的alpha值可以让文本变透明。实际上透明意味着文本允许一小部分背景色透过。可以使用opacity属性让整个元素和文本内容透明。这个属性的取值是0到1，前者代表完全透明，后者代表完全不透明。

修改前面示例的CSS代码如下：

  1. p { padding: 5px; border: medium solid #000000; background-color: lightgray;}
  2. span {color:#FFFFFF; background-color: green;}
  3. span:last-child {opacity: 0.6}

从效果图可以看到是否设置透明度的差别：

2. 设置表格样式

有不少属性可用来为table元素设置独特样式，下表总结了这些属性。

2.1 合并表格边框

border-collapse 用来控制 table 元素相邻单元格边框的样式。

在下面代码中，浏览器为表格绘制了一个边框，同时还为每个单元格绘制边框，显示出来就是双边框。使用 border-collapse 属性可以改变这种状态：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Example</title>
  6.     <style type="text/css">
  7.         table { border-collapse: collapse;}
  8.         th,td { padding: 2px;}
  9.     </style>
  10. </head>
  11. <body>
  12. <table border="1">
  13.     <caption>Results of the 2011 Fruit Survey</caption>
  14.     <colgroup id="colgroup1">
  15.         <col id="clo1And2" span="2" />
  16.         <col id="col3" />
  17.     </colgroup>
  18.     <colgroup id="colgroup2" span="2"></colgroup>
  19.     <thead>
  20.     <tr>
  21.         <th>Rank</th><th>Name</th><th>Color</th>
  22.         <th colspan="2">Size & Votes</th>
  23.     </tr>
  24.     </thead>
  25.     <tbody>
  26.     <tr>
  27.         <th>Favorite:</th><td>Apples</td><td>Green</td>
  28.         <td>Medium</td><td>500</td>
  29.     </tr>
  30.     <tr>
  31.         <th>2th Favorite:</th><td>Oranges</td><td>Orange</td>
  32.         <td>Large</td><td>450</td>
  33.     </tr>
  34.     </tbody>
  35.     <tfoot>
  36.     <tr>
  37.         <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
  38.     </tr>
  39.     </tfoot>
  40. </table>
  41. </body>
  42. </html>

collapse 告诉浏览器不要为相邻元素绘制两个边框，从下图可以看到设置 border-collapse属性值为 collapse 前后的显示效果：

2.2 配置独立边框

如果一定要 border-collapse 属性使用默认值 separate，再加几个其他属性同样可以改善表格的外观。 border-spacing 属性定义相邻元素边框的间距，修改前面示例HTML文件如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Example</title>
  6.     <style type="text/css">
  7.         table { border-collapse: separate; border-spacing: 10px;}
  8.         th,td { padding: 2px;}
  9.     </style>
  10. </head>
  11. <body>
  12. <table border="1">
  13.     <caption>Results of the 2011 Fruit Survey</caption>
  14.     <colgroup id="colgroup1">
  15.         <col id="clo1And2" span="2" />
  16.         <col id="col3" />
  17.     </colgroup>
  18.     <colgroup id="colgroup2" span="2"></colgroup>
  19.     <thead>
  20.     <tr>
  21.         <th>Rank</th><th>Name</th><th>Color</th>
  22.         <th colspan="2">Size & Votes</th>
  23.     </tr>
  24.     </thead>
  25.     <tbody>
  26.     <tr>
  27.         <th>Favorite:</th><td>Apples</td><td>Green</td>
  28.         <td>Medium</td><td>500</td>
  29.     </tr>
  30.     <tr>
  31.         <th>2th Favorite:</th><td>Oranges</td><td>Orange</td>
  32.         <td></td><td></td>
  33.     </tr>
  34.     </tbody>
  35.     <tfoot>
  36.     <tr>
  37.         <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
  38.     </tr>
  39.     </tfoot>
  40. </table>
  41. </body>
  42. </html>

2.3 处理空单元格

我们也可以告诉浏览器如何处理空单元格。默认情况下，即使单元格为空，浏览器也会为单元格设置独立的边框。可以使用 empty-cells 属性控制这种行为。empty-cells 的默认值为 show，如果将该属性设置为 hide，浏览器就不会绘制边框。修改前面例子的CSS文件如下：

  1. table { border-collapse: separate; border-spacing: 10px; empty-cells: hide;}
  2. th,td { padding: 2px;}

2.4 设置标题的位置

如果为 table 元素添加 caption ，标题会显示在表格的顶部。不过，可以使用 caption-side 属性改变这种默认行为。这个属性有两个值：top （默认值）和 bottom。修改前面例子的CSS样式如下：

  1. table {  border-collapse:collapse; caption-side: bottom;}
  2. th,td { padding: 2px;}

2.5 指定表格布局

默认情况下，浏览器会根据表格每一列中最宽的单元格设置整列单元格的宽度。这意味着不需要担心还需要亲自解决单元格大小的问题，不过，这意味着在能够确定页面布局之前，浏览器必须获取所有的表格内容。

浏览器显示表格采用的方法是由 table-layout 属性决定的，它的默认值是 auto。使用另一个值 fixed 可以禁用自动布局。在 fixed模式中。表格的大小是由表格自身和单独每列的width值决定的。如果没有列宽值可用，浏览器就会设置等距离的列宽。

因此，只要获取了一行的表格数据，浏览器就可以确定列宽。其他行内的数据会自动换行以适应列宽（可能导致行高比auto模式下高）。

修改前面示例的CSS样式如下：

  1. table { collapse:collapse; caption-side: bottom;table-layout: fixed; width: 100%;}
  2. th,td { padding: 2px;}

3. 设置列表样式

有许多属性是专门用来设置列表样式的，下表总结了这些属性：

list-style 简写属性的格式如下所示：

  1. list-style: <list-style-type> <list-style-position> <list-style-image>

3.1 设置列表标记类型

list-style-type 属性用来设置标记（有时候也成为项目符号）的样式，这个属性允许的值如下表所示：

上表只是展示了一部分可用的样式。除了这里列出的，列表还有很多样式，比如不同的字母字符、不同的符号样式，以及数字约定。 https://www.w3.org/TR/css-lists-3/ 列出了完整的列表样式。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Example</title>
  6.     <style type="text/css">
  7.         ol { list-style-type: lower-alpha;}
  8.     </style>
  9. </head>
  10. <body>
  11. I like apples and oranges.
  12. I also like:
  13. <ol>
  14.     <li>banana</li>
  15.     <li>mangoes</li>
  16.     <li style="list-style-type: decimal;">cherries</li>
  17.     <li>plums</li>
  18.     <li>peaches</li>
  19.     <li>grapes</li>
  20. </ol>
  21. </body>
  22. </html>

可以将这个属性应用到整个列表或者单独的列表项。这个例子中两种方法都用上了，显示效果见下图：

3.2 使用图像作为列表标记

list-style-image 属性可以将图像用作列表标记。

修改前面示例的CSS样式如下：

  1. ol { list-style-image: url('imgs/banana-vsmall.png');}

3.3 设置列表标记的位置

可以使用 list-style-position 属性指定标记相对于 li元素内容框的位置。这个属性有两个值：inside 和 outside，前者定义标记位于内容框内部，后者定义标记位于内容框外部。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Example</title>
  6.     <style type="text/css">
  7.         li.inside { list-style-position: inside;}
  8.         li.outside { list-style-position: outside;}
  9.         li { background-color: lightgrey;}
  10.     </style>
  11. </head>
  12. <body>
  13. I like apples and oranges.
  14. I also like:
  15. <ol>
  16.     There are the inside items:
  17.     <li class="inside">banana</li>
  18.     <li class="inside">mangoes</li>
  19.     <li class="inside">cherries</li>
  20.     There are the outside items:
  21.     <li class="outside">plums</li>
  22.     <li class="outside">peaches</li>
  23.     <li class="outside">grapes</li>
  24. </ol>
  25. </body>
  26. </html>

从效果图中可以很明显的看到 list-style-position 属性不同值的效果。

4. 设置光标样式

cursor 属性用来改变光标的外形。其值有：auto、crosshair、default、help、move、pointer、progress、text、wait、n-resize、s-resize、e-resize、w-resize、ne-resize、nw-resize、se-resize、sw-resize 。

当鼠标划过被设置样式的元素时，cursor属性的不同取值告诉浏览器显示不同的光标形状。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Example</title>
  6.     <style type="text/css">
  7.         p {
  8.             width: 200px;height: 200px; background-color: lightgray;
  9.             cursor: progress;
  10.         }
  11.  
  12.     </style>
  13. </head>
  14. <body>
  15. <p></p>
  16. </body>
  17. </html>

【CSS】其他CSS属性和特性的更多相关文章

  1. 其他css属性和特性

    其他css属性和特性 设置元素的颜色和透明度 下表列出了这些属性. 颜色相关属性 属 性 说 明 值 color 设置元素的前景色 <颜色> opacity 设置颜色的透明度 <数值 ...

  2. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  3. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  4. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  5. CSS的margin属性：详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...

  6. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  7. HTML+css基础 css的几种形式 css选择器的两大特性

    3.外联样式 css选择器的两大特性 1.继承性:所有跟文本字体有关的属性都会被子元素继承.且权重是0000. 2.层叠性:就是解决选择器权重大小的一种能力,就是看那个选择器的权重大.谁的权重大听谁的 ...

  8. 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性

    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...

  9. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  10. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

随机推荐

  1. Redis 学习笔记（C#）

    Redis安装及简单操作 Windows下安装步骤: 1. 第一步当然是先下载咯~  地址:https://github.com/dmajkic/redis/downloads (根据自己实际情况选择 ...

  2. Unity3D 5.x 简单实例 - 发射炮弹

    1,下载.安装: http://unity3d.com/cn/get-unity/download/archive 建议直接借助 UnityDownloadAssistant 进行安装,根据需要勾选需 ...

  3. 【nodejs笔记1】配置webstorm + node.js +express + mongodb开发博客的环境

    1. 安装webstorm 并破解 2. 安装node (以及express框架) 至官网下载并安装.(http://nodejs.org)v0.10.32   msi  安装后测试,打开命令行, c ...

  4. Struts2运行流程

    解释:首先浏览器发送一个请求.给/StrutsPrepareAndExecuteFilter调用doFilter()方法.创建/StrutsActionProxy执行execute()方法.有一个引用 ...

  5. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  6. oracle函数大全（转载）

    F.1字符函数--返回字符值 这些函数全都接收的是字符族类型的参数(CHR除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据 ...

  7. Java中，关于字符串类型、随机验证码、 时间类型

    一.字符串类型:String类型 定义一个字符串 String a="Hello World"; String b= new String ("Hello World&q ...

  8. struts通过action返回json

    其实struts2通过action返回json挺简单的,但是就是老要忘,所以索性写在博客上.好的,开始. 首先是引入必须的jar包: struts2-json-plugin-2.3.24.jar 然后 ...

  9. 06-图1 列出连通集 (25分)（C语言邻接表实现）

    题目地址:https://pta.patest.cn/pta/test/558/exam/4/question/9495 由于边数E<(n*(n-1))/2 所以我选用了邻接表实现,优先队列用循 ...

  10. JVM监控工具介绍

    JVM监控工具介绍 VisualVM是一种集成了多个JDK命令行工具的可视化工具,它能为您提供强大的分析能力.所有这些都是免费的!它囊括的命令行工具包括jps,jstat,jmap,jinfo,jst ...