CSS学习总结

position:absolute;
clip:rect(0px 50px 200px 0px)上 右 下 左
clip属性剪切了一幅图像

===========================================================================
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
图片将会显示的文字后面。
假如设置z-index:1，图片将把文字覆盖。

===========================================================================
通配符选择器：
例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}

===========================================================================
ID 选择器：
#intro {font-weight:bold;}

把包含标题（title）的所有元素变为红色：
*[title] {color:red;}

只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}

将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}

将指向 Web 服务器上某个指定文档的超链接变成红色：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

假选择 class 属性中包含 important 的元素：
p[class~="important"] {color: red;}

[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
对指向 W3School 的所有链接应用样式：
a[href*="w3school.com.cn"] {color: red;}

选择 lang 属性等于 en 或以 en- 开头的所有元素：
*[lang|="en"] {color: red;}
===========================================================================
<style type="text/css">
a:link {color: #FF0000}/* 未访问的链接 */
a:visited {color: #00FF00}/* 已访问的链接 */
a:hover {color: #FF00FF}/* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */
</style>

<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
===========================================================================
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>

<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>