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>
CSS 高级：尺寸、分类、伪类、伪元素的更多相关文章
- css伪类伪元素
在CSS中,模式(pattern)匹配规则决定哪种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值; ...
- css中伪类/伪元素详解
一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...
- css伪类 伪元素
之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...
- 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素
CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 伪类&伪元素
刚开始学习伪类和伪元素的时候,觉得好混乱呀,分不清有什么区别,用的时候也没注意对比.现在总结一下他们的区别吧. w3c中对它们的定义分别为: css伪类用于向某些选择器添加特殊的效果. css伪元素用 ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- HTML5--(2)属性选择器+结构性伪类+伪类
一.属性选择器 [att] 匹配所有具有att属性的 [att=val] 匹配所有att属性等于“val”的 [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一 ...
- css样式（二）（伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 ）
一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
随机推荐
- Hibernate逍遥游记-第5章映射一对多-01单向<many-to-one>、cascade="save-update"、lazy、TransientObjectException
1. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hi ...
- 不用Invoke就等用 Control.CheckForIllegalCrossThreadCalls = false;
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Tomcat下的一些配置
1. JAVA虚拟机性能优化,修改bin下的 catalina.sh/bat rem ----- Execute The Requested Command -------------------- ...
- C++：类的组合
在类中定义的数据成员一般都是基本数据类型或服复合数据类型.但是还可以根据需要使用 其他类的对象作为正在声明的数据成员.复杂的对象还可以有比较简单的对象一某种方式组合 而成,复杂对象和组成它的简单对象之 ...
- Android 自定义Android带图片和文字的ImageButton
经过分析,上述按钮效果实际上就是一个布局,一个最简单不过的垂直线性布局,上部分是一个ImageView,下部分是一个TextView,这个布局可点击.可设置监听. 我们首先要编写自己的ImageBut ...
- Entity Framework学习 - 1.连接数据库
1.添加项,选择ADO.NET实体数据模型 2.选择从数据库生成 3.建立数据库连接 4.选择要关联的表 点击完成,数据库已连接完毕,并生成了对应的Model
- 无法生成临时类(result=1)。 error CS0229: “DCSoftDotfuscate.aam.a”与“DCSoftDotfuscate.aam.a()”之间存在二义性
对于错误无法生成临时类(result=1).error CS0229: “DCSoftDotfuscate.aam.a”与“DCSoftDotfuscate.aam.a()”之间存在二义性 出现这个错 ...
- 自己动手实现STL：前言
一.前言 最近,刚看完<STL源码剖析>,深深被实现STL库的那些的大牛们所折服.同时又感觉自己与大牛们差距之大,便萌生深入学习之意.如果仅仅只是看看<STL源码剖析>的话,又 ...
- textContent、innerText的用法，在文档中插入纯文本
有时候需要查询纯文本形式的元素内容,或者在文档中插入纯文本.标准的方法是用Node的textContent属性来实现: var para = document.getElementsByTagName ...
- HDU 4638 Group ★(树状数组)
题意 询问一段区间里的数能组成多少段连续的数. 思路 先考虑从左往右一个数一个数添加,考虑当前添加了i - 1个数的答案是x,那么可以看出添加完i个数后的答案是根据a[i]-1和a[i]+1是否已经添 ...