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. ...
随机推荐
- Words-specialty
1-100 101-200 community n.社区; 共同体; 社会团体; [生态] 群落 overview n.概观; 总的看法; 回顾,复习 transforming vi.改变,使 ...
- Dependency Walker使用说明
Dependency Walker使用说明 标签: dllexewindowsvbqq工具 2010-03-29 11:10 25175人阅读 评论(22) 收藏 举报 分类: 基本常识(45) ...
- 解决CentOS(RedHat)中sendmail和sm-client启动慢故障(转)
Starting sendmail: Starting sm-client: 刚才发了修改主机名那篇文章后,我意外发现重新启动CentOS的时候系统会卡在sendmail和sm-client那里将近3 ...
- C#线程间通讯
using System;using System.Text;using System.Windows.Forms;using System.Threading; namespace 线程间通讯{ ...
- cf459C Pashmak and Buses
C. Pashmak and Buses time limit per test 1 second memory limit per test 256 megabytes input standard ...
- hdu 1754 I Hate It_线段树
题意:略 思路:套hdu1166模版改改就行了,要注意的是,网上有的代码是错的,还贴出来... #include <iostream> #include<cstdio> #in ...
- thecorner.com.cn - Customer Care
thecorner.com.cn - Customer Care 所有主题 帮助 关于我们 thecorner.com 是通过专业的"迷你商店"形式荟萃最新男士.女士精选时尚商品和 ...
- linux学习方法之六
相信不少想学习linux的新手们正愁不知道看什么linux学习教程好,下面小编给大家收集和整理了几点比较重要的教程,供大家学习,如需想学习更多的话,可到wdlinux学堂寻找更多教程. 1.linux ...
- Eidtplus常用快捷键
文件 新建普通文本 Ctrl+N 新建普通的文本文档 新建浏览器窗口 Ctrl+Shift+B 新建浏览器窗口 新建 HTML 页 Ctrl+Shift+N 创建一个空白的 HTML 页面 打开 Ct ...
- MVC3.0修改jquery.validate.unobtrusive.js实现气泡提示mvc错误
CSS部分 <style type="text/css"> .hide {display:none;} .poptip { position: absolute; to ...