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里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用. ...
随机推荐
- 文件断点续传原理与实现—— ESFramework 通信框架4.0 进阶（12）
在ESFramework通信框架 4.0 快速上手(13) -- 文件传送,如此简单一文的详细介绍和ESFramework通信框架 4.0 快速上手(14) -- 聊天系统Demo,增加文件传送功能( ...
- ESFramework 4.0 性能测试
本实验用于测试ESFramework服务端引擎的性能,测试程序使用ESFramework 4.0版本. 一．准备工作 测试的机器总共有3台,都是普通的PC,一台作为服务器,两台作为客户端. 作为服务器 ...
- poj2140（奇因数的个数）
#include<stdio.h>int main(){ int n,s=0; scanf("%d",&n); for(int i=1;i<=n;i++) ...
- LYF模板连接.txt
在解决方案里创建了一个新建网站,在其右键下添加一个模板后,准备使用模板的,在添加新建项里突然没有“使用模板页的web窗体”,顿时感觉悲剧... 解决方法:模板页代码---LYFMaterPage.Ma ...
- POJ 1966 ZOJ 2182 Cable TV Network
无向图顶点连通度的求解,即最少删除多少个点使无向图不连通. 我校“荣誉”出品的<图论算法理论.实现及其应用>这本书上写的有错误,请不要看了,正确的是这样的: 对于每个顶点,分成两个点,v和 ...
- Emacs阅读chm文档
.title { text-align: center; margin-bottom: .2em } .subtitle { text-align: center; font-size: medium ...
- zencart低版本由php5.2.17升级PHP5.3环境下错误及解决方案
方法:有错误或者空白先打开错误提示,ftp看cache错误日志 或者 面板查看错误日志,再对比数据库是否正确,可拿脚本看是否能连接 \cp -r backipmysql/nlbarb_007li/ ...
- Chapter 2 Open Book——12
I called him in when dinner was ready, and he sniffed appreciatively as he walked into the room. 当晚饭 ...
- JS总结之一：字符串的调用方法
字符串的调用方法:var s="hello, world";document.write(s.charAt(0)); //第一个字符document.write(s.charAt( ...
- hdu_2141_Can you find it?(二分)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2141 题意:叫你找三个数,使得这三个数的值为X,如果找得到就输出YES否则输出NO,注意两个32位数相 ...