css 7.30
1.外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界(float时margin)问题
2.一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
3.
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。
4.链接
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
<!DOCTYPE html>
<html>
<head>
<style>
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:'微软雅黑';} a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head> <body>
<p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p> <p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p>
</body> </html>
例二
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
} a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head> <body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>
css 7.30的更多相关文章
- 30个最常用css选择器解析(zz)
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- 30个最常用css选择器解析
转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远 ...
- 你须知道的30个CSS选择器 »
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- css基本的东西
0 css本来也是一个比较乱的东西,我们需要在最恰当的情况下,写出最杂乱的效果.1 面对body设置了 -webkit-font-smoothing:antialiased (默认值为subpixel ...
- 前端开发必备 40款优秀CSS代码编写工具推荐
摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- 分享一个discuz touch端的jQuery下拉刷新组件
在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...
- buyexpressv6
<script type="text/javascript"> var is_enabled = -1; var checkSubmitFlg = false; var ...
- JQuery02
一:JQuery知识点 *:JQuery的dom操作 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用. ...
随机推荐
- Java中的Unsafe
在阅读AtomicInteger的源码时,看到了这个类:sum.msic.Unsafe,之前从没见过.所以花了点时间google了一下. Unsafe的源码:http://www.docjar.com ...
- 正规消息发送器－－ ESFramework 4.0 进阶（06）
在ESFramework 4.0 进阶(04)-- 驱动力:通信引擎(下)一文末尾我们已经将通信引擎以及整个消息骨架流程组装起来了,只要通信引擎一接收到消息,框架就会按照规定的流程进行运转.到这里,自 ...
- 比较不熟的JavaScript点滴，慢慢前行，附带简单复杂化的php小计算器一份
interface.php <html> <head> <meta charset="utf-8" /> <title>这是一个简单 ...
- LoadLibrary 失败 GetLastError 126
这个错误可能是 Load的库依赖另外的库,而其依赖的库不存在,也会返回这个错误!
- Python 邮件发送
python发送各类邮件的主要方法 python中email模块使得处理邮件变得比较简单,今天着重学习了一下发送邮件的具体做法,这里写写自己的的心得,也请高手给些指点. 一.相关模块介绍 ...
- 向.net后端发送请求获取数据，在前端动态填充表格
实现效果 实现步骤 通过Ajax请求的方式 1.在前端定义Table 2.通过Ajax向.net后端发送数据请求 3.在.net后端定义方法供前端调用,并返回所需的数据 4.通过构造字符串的方式,将后 ...
- Java动态绑定的内部实现机制
JAVA虚拟机调用一个类方法时,它会基于对象引用的类型(通常在编译时可知)来选择所调用的方法.相反,当虚拟机调用一个实例方法时,它会基于对象实际的类型(只能在运行时得知)来选择所调用的方法,这就是动 ...
- leetcode70
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...
- 嵌套表SHAPE
SQL语法 SHAPE {<master query>} APPEND ({ <child table query> } RELATE <master column> ...
- java中的equals()方法
大家都知道,在Java中,对于对象的比较,如果用“==”比较的是对象的引用,而equals才是比较的对象的内容. 一般我们在设计一个类时,需要重写父类的equals方法,在重写这个方法时,需要按照以下 ...