• 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. 前端笔记之HTML5&amp;CSS3(中)选择器&amp;伪类伪元素&amp;CSS3效果&amp;渐变背景&amp;过渡

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

  5. 伪类&amp;伪元素

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

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

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

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

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

  8. css样式(二)(伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 )

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

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

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

  10. CSS 伪类和伪元素--pseudo

    总结在前: 0. 参考资料 1. 伪类和伪元素是不同的两种东西. 2. 伪类和伪元素都属于CSS选择器. 3. CSS引入伪类和伪元素是为了实现基于文档树之外的信息,i.e. 段落的第一行,的格式化. ...

随机推荐

  1. std::vector介绍

    vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被认为是一个容器,是因为它能够像容器一样存放各种类型的对象,简单地说,vec ...

  2. Eplan PPE Pro-panel Electric fluid P8 2.4图文安装教程

    Eplan ppe pro-panel electric fluid P8等多个最新2.4中文版本的安装,都是使用相同的虚拟驱动MultiKey,还是只有win32位的安装包,不过支持64位操作系统的 ...

  3. [MarsZ]程序猿谈大学之为什么不推荐就业时做程序猿

    这篇文章适合一切有志做一个程序猿的人,而不仅仅只是即将进入就业市场的大学生. “又到了毕业找工作的时候了,好多朋友打电话向我咨询要不要让孩子做程序员.作为一个业内资深人士,我觉得这不能一概而论!要辩证 ...

  4. Windows Azure 网站上的 WordPress 3.8

     编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Sunitha Muthukrishna 和 Windows Azure 网站开发人员体验合作伙伴共同撰写. WordPr ...

  5. bzoj 4373 算术天才⑨与等差数列

    4373: 算术天才⑨与等差数列 Time Limit: 10 Sec  Memory Limit: 128 MBhttp://www.lydsy.com/JudgeOnline/problem.ph ...

  6. 有点深度的聊聊JDK动态代理

    在接触SpringAOP的时候,大家一定会被这神奇的功能所折服,想知道其中的奥秘,底层到底是如何实现的.于是,大家会通过搜索引擎,知道了一个陌生的名词:动态代理,慢慢的又知道了动态代理有多种实现方式, ...

  7. Grunt-jsdoc生成JS API文档

    Grunt-jsdoc生成JS API文档 具体的请看官网 https://github.com/krampstudio/grunt-jsdoc 一:首先确保本机电脑上是否已经安装了nodejs和np ...

  8. 安装Android模拟器

    说明:可以直接通过Android SDK目录下的SDK Manager.exe进行安装,我这里写的是通过下载各种文件进行安装的方法,没有通过SDK Manager.exe进行下载安装 一.下载以下内容 ...

  9. JdbcTemplate详解

    1.JdbcTemplate操作数据库 Spring对数据库的操作在jdbc上面做了深层次的封装,使用spring的注入功能,可以把DataSource注册到JdbcTemplate之中.同时,为了支 ...

  10. Centos7安装elasticsearch、logstash、kibana、elasticsearch head

    环境:Centos7, jdk1.8 安装logstash 1.下载logstash 地址:https://artifacts.elastic.co/downloads/logstash/logsta ...