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的更多相关文章

  1. 30个最常用css选择器解析(zz)

    你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...

  2. 30个最常用css选择器解析

    转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远 ...

  3. 你须知道的30个CSS选择器 »

    你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...

  4. css基本的东西

    0 css本来也是一个比较乱的东西,我们需要在最恰当的情况下,写出最杂乱的效果.1 面对body设置了 -webkit-font-smoothing:antialiased (默认值为subpixel ...

  5. 前端开发必备 40款优秀CSS代码编写工具推荐

    摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...

  6. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  7. 分享一个discuz touch端的jQuery下拉刷新组件

    在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...

  8. buyexpressv6

    <script type="text/javascript"> var is_enabled = -1; var checkSubmitFlg = false; var ...

  9. JQuery02

    一:JQuery知识点 *:JQuery的dom操作 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用. ...

随机推荐

  1. JVM问题诊断常用命令：jinfo,jmap,jstack

    1.jinfo 描述:输出给定 java 进程所有的配置信息.包括 java 系统属性和 jvm 命令行标记等. 用法: jinfo [ option ] pid jinfo [ option ] e ...

  2. JAVASCRIPT 框架>>

    jQuery jQueryjQuery 是目前最受欢迎的 JavaScript 框架 jQuery 是为处理 HTML 事件而特别设计的<script type="text/javas ...

  3. logrotate日志轮转配置文档

    转自:http://blog.163.com/bull_linux/blog/static/2138811422013101334544349/ 使用:    logrotate CONF_FILE+ ...

  4. java反射机制（访问私有字段和私有方法）

    来自:http://tutorials.jenkov.com/java-reflection/private-fields-and-methods.html 尽管我们通常认为通过JAVA的反射机制来访 ...

  5. validator验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. java URL编程

    一.URL编程技术 URL是统一资源定位器的缩写,它是指向互联网“资源”的指针.URL表示了Internet上某个资源的地址.URL支持http,file,ftp等 多种协议.通过URL标识,可以直接 ...

  7. applicationContext.xml 配置（扫描）

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  8. robotframework+seleniumlibrary自动化测试：测试环境搭建

    robotframework是由python编写的自动化测试框架,使用robotframework需要安装 python库 python 和 robotframework 的下载地址都可百度到 环境搭 ...

  9. 《Windows驱动开发技术详解》之驱动程序的基本结构

    驱动对象 每个驱动程序会有唯一的驱动对象与之对应,并且这个驱动对象是在驱动加载的时候被内核中的对象管理程序所创建的.驱动对象用DRIVER_OBJECT数据结构表示,它作为驱动的一个实例被内核加载,并 ...

  10. Internet History, Technology and Security (Get Started)

    Abstract 课程名称:互联网的历史.技术和安全 coursera地址 制作方:密歇根大学(University of Michigan) 教师:Charles Severance, Associ ...