CSS 高级：尺寸、分类、伪类、伪元素
- CSS 尺寸：允许你控制元素的高度和宽度。同样，还允许你增加行间距。
- CSS 分类：允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
- CSS 伪类：用于向某些选择器添加特殊的效果。
- CSS 伪元素：用于将特殊的效果添加到某些选择器。
CSS 尺寸属性
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。
| 属性 | 描述 |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
CSS 分类属性 (Classification)
CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
| 属性 | 描述 |
|---|---|
| clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
| cursor | 规定当指向某元素之上时显示的指针类型。 |
| display | 设置是否及如何显示元素。 |
| float | 定义元素在哪个方向浮动。 |
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| visibility | 设置元素是否可见或不可见。 |
/*display*/ span{ display:inline; display:block; display:none; } /*position*/ h2.pos_left { position:relative;/*相对定位会按照元素的<原始位置>对该元素进行移动。*/ left:-20px } h2.pos_right { position:relative; left:20px } h2.pos_abs { position:absolute;/*通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。*/ left:100px; top:150px } /*visibility*/ h1.visible {visibility:visible} h1.invisible {visibility:hidden} /*cursor*/ <body> <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:crosshair"> Crosshair</span><br /> <span style="cursor:default"> Default</span><br /> <span style="cursor:pointer"> Pointer</span><br /> <span style="cursor:move"> Move</span><br /> <span style="cursor:e-resize"> e-resize</span><br /> <span style="cursor:ne-resize"> ne-resize</span><br /> <span style="cursor:nw-resize"> nw-resize</span><br /> <span style="cursor:n-resize"> n-resize</span><br /> <span style="cursor:se-resize"> se-resize</span><br /> <span style="cursor:sw-resize"> sw-resize</span><br /> <span style="cursor:s-resize"> s-resize</span><br /> <span style="cursor:w-resize"> w-resize</span><br /> <span style="cursor:text"> text</span><br /> <span style="cursor:wait"> wait</span><br /> <span style="cursor:help"> help</span> </body>
伪类
CSS 伪类用于向某些选择器添加特殊的效果。
| 伪类 | 作用 | IE | F | N | |
|---|---|---|---|---|---|
| :active | 将样式添加到被激活的元素 | 4 | 1 | 8 | |
| :focus | 将样式添加到被选中的元素 | - | - | - | |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 | 4 | 1 | 7 | |
| :link | 将特殊的样式添加到未被访问过的链接 | 3 | 1 | 4 | |
| :visited | 将特殊的样式添加到被访问过的链接 | 3 | 1 | 4 | |
| :first-child | 将特殊的样式添加到元素的第一个子元素 | 1 | 7 | ||
| :lang | 允许创作者来定义指定的元素中使用的语言 | 1 | 8 |
<style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> /*注释：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！ 注释：在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！ */
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
<style type="text/css">
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
</style>
效果图：
<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>
伪元素
CSS 伪元素用于将特殊的效果添加到某些选择器。
| 伪元素 | 作用 | IE | F | N | |
|---|---|---|---|---|---|
| :first-letter | 将特殊的样式添加到文本的首字母 | 5 | 1 | 8 | 1 |
| :first-line | 将特殊的样式添加到文本的首行 | 5 | 1 | 8 | 1 |
| :before | 在某元素之前插入某些内容 | 1.5 | 8 | 2 | |
| :after | 在某元素之后插入某些内容 | 1.5 | 8 | 2 |
<style type="text/css"> p:first-letter { color: #ff0000; font-size:xx-large } p:first-line { color: #ff0000; font-variant: small-caps } </style>
