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

CSS 高级：尺寸、分类、伪类、伪元素的更多相关文章

  1. css伪类伪元素

    在CSS中,模式(pattern)匹配规则决定哪种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值; ...

  2. css中伪类/伪元素详解

    一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...

  3. css伪类 伪元素

    之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...

  4. 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

    CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...

  5. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  6. 伪类&伪元素

    刚开始学习伪类和伪元素的时候,觉得好混乱呀,分不清有什么区别,用的时候也没注意对比.现在总结一下他们的区别吧. w3c中对它们的定义分别为: css伪类用于向某些选择器添加特殊的效果. css伪元素用 ...

  7. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  8. HTML5--(2)属性选择器+结构性伪类+伪类

    一.属性选择器 [att] 匹配所有具有att属性的 [att=val] 匹配所有att属性等于“val”的 [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一 ...

  9. css样式（二）（伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 ）

    一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一 ...

  10. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

随机推荐

  1. 在屏幕上显示C盘根目录下的所有文件和文件夹

    1 import java.io.File; //在屏幕上显示C盘根目录下的所有文件和文件夹 public class ListDemo { public static void main(Strin ...

  2. ubuntu下安装Ming的教程

    Ming是一个操纵swf(flash movice)的C库,支持php. ruby. python等语言. 重要提示: 在安装Ming之前,应该准备好你的系统,特别是Linux/Unix系统,如果你对 ...

  3. ubuntu set host name

    http://wiki.joyent.com/wiki/display/jpc2/Setting+the+Host+Name+on+a+Linux+VM Set the host name in th ...

  4. Java中常见几种数据库连接方法

    1:引入java.sql数据包;   import java.sql.*; 2:加载JDBC驱动程序   Class.forName(JDBC驱动包的名字).newInstance(); 3:产生Co ...

  5. 严重: Catalina.stop: java.net.ConnectException: Connection refused: connect

    原因: 1.连接被拒绝,关闭的时候报错.是不是已经关闭了,你又关闭,他当然找不到了. 2.连接被拒绝有可能是服务端连接数到达最高了 3.服务器拒绝连接,ip地址是否写对,端口号正确与否,网络是否通畅, ...

  6. poj3307

    可以证明,每个符合的数都由2,3,5,7相乘得到. 依据猜想:下一个出现的数是由前面某个数乘上这几个数之一得到的新的数. 假设之前的数均满足序列,则因为下一个数必有2,3,5,7相乘得到,而这个数之前 ...

  7. bzoj2489

    这种题完全可以暴力找规律,暴力打表各种搞法 这里有一篇比较全面的题解:http://acm.uestc.edu.cn/bbs/read.php?tid=3698&page=1&tore ...

  8. BZOJ2626: JZPFAR

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2626 题解:裸K-Dtree,最大值?自己yy一下估价函数就好了. 两题居然是同一个错误,真是 ...

  9. sql2005主从数据库同步配置

    网站规模到了一定程度之后,该分的也分了,该优化的也做了优化,但是还是不能满足业务上对性能的要求:这时候我们可以考虑使用主从库.主从库是两台服务器上的两个数据库,主库以最快的速度做增删改操作+最新数据的 ...

  10. AssetManager asset的使用

    Android 系统为每个新设计的程序提供了/assets目录,这个目录保存的文件可以打包在程序里./res 和/assets的不同点是,android不为/assets下的文件生成ID.如果使用/a ...