码迷,mamicode.com
首页 > Web开发 > 详细

CSS 高级:尺寸、分类、伪类、伪元素

时间:2014-08-04 20:56:17      阅读:533      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   strong   io   

  • 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 伪类用于向某些选择器添加特殊的效果。

伪类作用IEFN 
: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>

效果图:

bubuko.com,布布扣

 

bubuko.com,布布扣

 

<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>

bubuko.com,布布扣

 

伪元素

CSS 伪元素用于将特殊的效果添加到某些选择器。

 

伪元素作用IEFN 
: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>

bubuko.com,布布扣

bubuko.com,布布扣

CSS 高级:尺寸、分类、伪类、伪元素,布布扣,bubuko.com

CSS 高级:尺寸、分类、伪类、伪元素

标签:style   blog   http   color   使用   os   strong   io   

原文地址:http://www.cnblogs.com/mmcmmc/p/3890679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!