【HTML＋CSS网页设计与布局 从入门到精通】第9章-选择器
2024-04-15 19:04:37
目录
标记选择器+类别选择器
并集选择器+集体声明
后代（嵌套）选择器
继承关系演示
前沿Web开发教室
继承关系演示-选择器1
继承关系演示-选择器2
还可以写成这样批量的整
或者
再或者
or
层叠特性
标记选择器+类别选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选择器.class</title>
<style type="text/css">
p{ /* 标记选择器 */color:blue;
}
p.special{ /* 标记.类别选择器 */color:red; /* 红色 */
}
.special{ /* 类别选择器 */color:green;
}
</style>
</head>
<body><p>普通段落文本（蓝色）</p><h3>普通标题文本（黑色）</h3><p class="special">指定了.special类别的段落文本（红色）</p><h3 class="special">指定了.special类别的标题文本（绿色）</h3>
</body>
</html>
并集选择器+集体声明
<html>
<head>
<title>并集选择器</title>
<style type="text/css">
h1, h2, h3, p{ /*并集选择器*/color:purple; /* 文字颜色 */font-size:15px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */text-decoration:underline; /* 下划线 */
}
</style>
</head>
<body><h1>示例文字h1</h1><h2 class="special">示例文字h2</h2><h3>示例文字h3</h3><p>示例文字p1</p><p class="special">示例文字p2</p><p id="one">示例文字p3</p>
</body>
</html>后代（嵌套）选择器
<html>
<head>
<title>后代选择器</title>
<style type="text/css">
p span{ /* 嵌套声明 */color:red; /* 颜色 */
}
span{color:blue; /* 颜色 */
}
</style>
</head>
<body><p>嵌套使<span>用CSS（红色）</span>标记的方法</p>嵌套之外的<span>标记（蓝色）</span>不生效
</body>
</html>
继承关系演示
<html>
<head><title>继承关系演示</title>
</head>
<body><h1>前沿<em>Web开发</em>教室</h1><ul><li>Web设计与开发需要使用以下技术：<ul><li>HTML</li><li>CSS<ul><li>选择器</li><li>盒子模型</li><li>浮动与定位</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>
前沿Web开发教室
- Web设计与开发需要使用以下技术：
- HTML
- CSS
- 选择器
- 盒子模型
- 浮动与定位
- Javascript
- 此外，还需要掌握：：
- Flash
- Dreamweaver
- Photoshop
如果您有任何问题，欢迎联系我们
继承关系演示-选择器1
<html>
<head><title>继承关系演示</title>
<style>
h1{color:blue; /* 颜色 */text-decoration:underline; /* 下划线 */}
em{color:red; /* 颜色 */}
</style></head>
<body><h1>前沿<em>Web开发</em>教室</h1><ul><li>Web设计与开发需要使用以下技术：<ul><li>HTML</li><li>CSS<ul><li>选择器</li><li>盒子模型</li><li>浮动与定位</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>
继承关系演示-选择器2
<html>
<head><title>继承关系演示</title>
<style>
h1{color:blue; /* 颜色 */text-decoration:underline; /* 下划线 */}
em{color:red; /* 颜色 */}
li{font-weight:bold;}
</style></head>
<body><h1>前沿<em>Web开发</em>教室</h1><ul><li>Web设计与开发需要使用以下技术：<ul><li>HTML</li><li>CSS<ul><li>选择器</li><li>盒子模型</li><li>浮动与定位</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 ul li ul li{font-weight:bold;}
或者
li li{font-weight:bold;}
再或者
ul li{font-weight:bold;}
or
ul ul li{font-weight:bold;}
层叠特性
<html>
<head>
<title>层叠特性</title>
<style type="text/css">
p{ color:green; }
.red{color:red; }
.purple{color:purple; }
#line3{color:blue;}
</style>
</head>
<body><p >这是第1行文本</p><p class="red">这是第2行文本</p><p id="line3" class="red">这是第3行文本</p><p style="color:orange;" id="line3">这是第4行文本</p><p class="purple red">这是第5行文本</p>
</body>
</html>
【HTML＋CSS网页设计与布局 从入门到精通】第9章-选择器相关推荐
- 【HTML＋CSS网页设计与布局 从入门到精通】第4章
目录 超链接 h1,h2,h3... 图片超链接 邮件超链接 图像热区超链接 图像热区超链接-自己作图 图像热区超链接-多热区 插入一个框架-frame(将一个html文件当做一个frame) 插入一 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第13章-块元素div和内联元素span格式布局
目录 块元素背景,边框,颜色等布局 块元素ID选择器 另一个例子 块元素中的图片 盒子模型的演示 块级元素中的文本格式 块级元素div与内联元素span的对比 两个行内元素的margin 两个块级元素 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第10章-CSS
目录 开始 新增设置 英文字母全部小写 字号设置 首字母"大"写-大一点显示 上划线,下划线text-decoration:underline overline; 缩进text-i ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第15章-表格格式：边距/居中/边框/折叠
目录 初始表格 边距.居中.边框 单元格边距cellspacing 边距折叠(两个叠加不会变粗)border-collapse:collapse; 单元格边距border-spacing 初始表格 & ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第14章-float/position/display属性
目录 float属性 float:left float:left-例2 float:left-例3 float:right; 对比father p{clear:right;} 例1 例2 .fathe ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第12章-CSS
目录 开始 背景+颜色 将图片当做背景background-image:url(bg-h.gif); x方向(横向)重复显示图片: y方向(纵向) 不重复显示图片background-repeat:n ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第11章-CSS
目录 图像class选择器 设置图片每个边框的格式:颜色,线型 另一个例子 图文混排 图片左对齐,居中,右对齐 竖直对齐 竖直对齐:具体数值-负数 八大行星:图文混排 图像class选择器 <h ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第8章-CSS
目录 无格式 图文并茂 标题h1格式 图片img格式 正文p格式 body格式 ID选择器的优先级低于标记选择器 无格式 <html> <head> <title> ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第7章-class、ID选择器，CSS格式
目录 class选择器 class选择器-例外 class选择器-同时使用两种class ID选择器不支持两种同时使用 正文字体格式 正文字体格式-另一种"宏"的使用方式 使用CS ...
最新文章
- linux计划任务怎么做,做linux计划任务的步骤
- Nginx容器动态流量管理方案-nginx-upsync-module+nginx_upstream_check_module初体验
- [CodeForces gym 102956 D] Bank Security Unification（位运算优化dp）
- （转） Hibernate注解开发
- matlab脑肿瘤识别与分割程序_车牌识别算法
- 想成为一个怎样的人？
- 《从NLP反作弊技术看马蜂窝注水事件》笔记
- mysql数据库cms数据库文件_PbootCMS 默认数据库转Mysql数据库教程 - 老蒋SEO博客
- 小程序开发流程详细，小程序开发教程
- javascript弹出窗口代码
- [转]2009年河南省高考零分作文：兔子，你就是一个傻B
- 【洛谷P2000】拯救世界
- Linksys玩多了，来看看真正的Cisco~技术帖
- Mysql统计分组后每组数据与每组数量区别
- the mesh is compo…
- 达芬奇发明计算机读后感200,三年级读后感：读《达芬奇》有感200字
- mysql的decimal保留两位小数_C#中的decimal怎么保留两位小数
- 神箭手-云爬虫开发平台
- matlab定位文件,Matlab读写文件时的定位
- 失眠了听什么歌能睡着觉，让人一听就困的歌推荐