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>