css案例学习之继承关系
代码
<html>
<head>
<title>继承关系</title>
<style>
body{
color:blue; /* 颜色 */
text-decoration:underline; /* 下划线 */
}
em{
color:red; /* 颜色 */
}
</style> </head>
<body>
<h1><em>前沿</em>教室</h1>
<p>欢迎来到前沿教室，这里为您提供丰富学习内容。</p>
<ul>
<li>在这里，你可以学习到：
<ul>
<li>HTML</li>
<li>CSS
<ul class="css">
<li>CSS初级</li>
<li>CSS中级</li>
<li>CSS高级</li>
</ul>
</li>
<li>Javascript</li>
</ul>
</li>
<li>你还可以学习到：
<ol>
<li>Flash</li>
<li>Dreamweaver</li>
<li>Photoshop</li>
</ol>
</li>
</ul>
<p>如果您有任何问题，欢迎联系我们</p>
</body>
</html>
说明：body下面的元素都继承了body的属性。然后em中的颜色属性又会被覆盖掉。
后代选择器
代码
<html>
<head>
<title>继承关系</title>
<style>
h1{
color:blue; /* 颜色 */
text-decoration:underline; /* 下划线 */
}
em{
color:red; /* 颜色 */
}
li li{
color:green ;
font-weight:bold;
} </style> </head>
<body>
<h1><em>前沿</em>教室</h1>
<p>欢迎来到前沿教室，这里为您提供丰富学习内容。</p>
<ul>
<li>在这里，你可以学习到：
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>CSS初级</li>
<li>CSS中级</li>
<li>CSS高级</li>
</ul>
</li>
<li>Javascript</li>
</ul>
</li>
<li>你还可以学习到：
<ol>
<li>Flash</li>
<li>Dreamweaver</li>
<li>Photoshop</li>
</ol>
</li>
</ul>
<p>如果您有任何问题，欢迎联系我们</p>
</body>
</html>
说明：li 下面的li会被添加绿色属性 包括孙子，曾孙子
css案例学习之继承关系的更多相关文章
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- css案例学习之全局声明*{} 与body{}的区别
代码 <html> <head> <title>全局声明</title> <style type="text/css"> ...
- CSS 案例学习
1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- css案例学习之按钮超链接
效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...
- css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- css案例学习之float浮动
代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
随机推荐
- java学习一目了然——异常必知
java学习一目了然--异常必知 我们只要学java,异常肯定非常熟悉,该抛的时候抛一下就行.但是这其中还有点小细节需要注意.就用这个小短篇来说一下异常处理中的小细节吧. 异常处理 RuntimeEx ...
- ES5 object的新函数
虽然说现在并不是所有的浏览器都已经支持ECMAScript5的新特性,但相比于ECMAScript4而言ECMAScript5被广大浏览器厂商广泛接受,目前主流的浏览器中只有低版本的IE不支持,其它都 ...
- MediaInfo使用简介（新版本支持HEVC）
MediaInfo 用来分析视频和音频文件的编码和内容信息,是一款是自由软件 (免费使用.免费获得源代码).他除了提供DLL之外,本身也提供GUI工具用于查看视频信息.我使用中发现,新版本的Media ...
- poj3233之经典矩阵乘法
Matrix Power Series Time Limit: 3000MS Memory Limit: 131072K Total Submissions: 12346 Accepted: ...
- Eidtplus常用快捷键
文件 新建普通文本 Ctrl+N 新建普通的文本文档 新建浏览器窗口 Ctrl+Shift+B 新建浏览器窗口 新建 HTML 页 Ctrl+Shift+N 创建一个空白的 HTML 页面 打开 Ct ...
- C# 中的委托和事件[转自张子扬]
文中代码在VS2005下通过,由于VS2003(.Net Framework 1.1)不支持隐式的委托变量,所以如果在一个接受委托类型的位置直接赋予方法名,在VS2003下会报错,解决办法是显式的创建 ...
- 【floyd求最小环】【Vijos 1046】【观光旅游】
标签:图结构 最短路 题目大意:给你一个无向图,至少经过3个节点的简单回路(不能包括其他环) 一开始的思路:用一个NUM[i][j]表示i到j的最短路经过几个节点,显然解法不太优美,而且还是错的 再想 ...
- Web堡垒机
最近研究了一下开源的web堡垒机,涉及两个,一个是gateone(python):一个是Web SSH Proxy(java),简单的对后者进行了改造,使其在登录与linux系统交互的时候,不需要使用 ...
- Android中view的事件
view:top.left.right.bottom,相对于parent的位置参数,获取通过get*()来获取.width=right-left.height=bottom-top.x=left+tr ...
- sql远程连接卡死解决方法
快捷键Win+R 输入CMD 回车 输入 netsh winsock reset 然后重启电脑 问题解决OK