HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性
1.基本CSS选择器
（1）标记选择器
<style>
h1{ color:red; font-size:25px;}
</style>
例：
<html>
<head>
<title>标记选择器</title>
<style type="text/css">
h2{background-color:red;color:blue;text-align:center;}
p{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
</head>
<body>
<h2>这是标记选择器</h2>
<p>标记选择器的段落</p>
</body>
</html>
（2）类别选择器
<style type="text/css">
.p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
例：
<html>
<head>
<title>类别选择器</title>
<style type="text/css">
h2{background-color:red;color:blue;text-align:center;}
.p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
.p2{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
</head>
<body>
<h2>这是类别选择器</h2>
<p class="p1">类别选择器的段落！</p>
<p class="p2">段落！</p>
</body>
</html>
（3）ID选择器
<style type="text/css">
#p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
例：
<html>
<head>
<title>id选择器</title>
<style type="text/css">
h2{background-color:red;color:blue;text-align:center;}
#p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
#p2{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
</head>
<body>
<h2>这是id选择器</h2>
<p id="p1">段落</p>
<p id="p2">这是一个段落</p>
</body>
</html>
2.复合CSS选择器
（1）“交集”选择器
h3.class{color:red;font-size:25px;}
例：
<html>
<head>
<title>交集选择器</title>
<style type="text/css">
p.p1{color:yellow;}
p{color:green;font-size:10px;}
.p1{color:blue;}
h2{color:red;font-size:14px;}
</style>
</head>
<body>
<h2>这是标题</h2>
<p class="p1">段落1</p>
<p>段落2</p>
</body>
</html>
（2）“并集”选择器
.class,h3{color:red;fon-size:25px;}
例：
<html>
<head>
<title>并集选择器</title>
<style type="text/css">
h3{color:yellow;font-size:30px;}
p{color:blue;font-size:20px;}
.p1,h3{color:red;font-size:16px;}
</style>
</head>
<body>
<h3>这是并集选择器</h3>
<p class="p1">这是段落</p>
<p>段落</p>
</body>
</html>
（3）“后代”选择器
.class h3{color:red;fon-size:25px;}
例：
<html>
<head>
<title>后代选择器</title>
<style type="text/css">
p strong{color:red;}
ul .li1{color:red;font-size:16px;}
ul li ul #li2{color:green;}
</style>
</head>
<body>
<p>
<strong>加粗</strong>
</p>
<ul>
<li>a</li>
<li class="li1">b</li>
<li>
<ul>
<li>c</li>
<li id="li2">d</li>
</ul>
</li>
</ul>
</body>
</html>
3.CSS继承性
例：
<html>
<!--
1. 给整个页面填一个一个背景
2. 给em添加一个样式样倾斜效果消失
3. 改变第一层UL的样式为蓝色，16px
4. 改变第二层的UL的样式为红色 14px
5. 改变body下面的ul下面的li下面的ol下面的li为#f8f8f8
--> <head>
<title>css继承结构</title>
<style type="text/css">
body{background-color:#89C869;}
ul{color:blue;font-size:16px;}
ul ul{color:red;font-size:14px;}
ul li ol li{color:#f8f8f8;}
h2 em{font-style:normal;}
ul li ul li ul{color:black;;}
</style>
</head>
<body>
<h2><em>网页设计课程</em></h2>
欢迎大家学习网页设计课程
<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>fireworks</li>
<li>flash</li>
<li>dreamweaver</li>
</ol>
</li>
</ul>
如果您有任何问题及时提问
</body>
</html>
HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性的更多相关文章
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
- 后端码农谈前端（CSS篇）第三课：选择器
一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...
- css样式表---样式表分类、选择器
一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...
- CSS选择器和jQuery选择器的区别与联系之一
到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
- css样式表：样式分类，选择器。样式属性，格式与布局
样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
- CSS选择器，CSS3选择器
CSS选择器 ------->CSS选择器优先级 1>通配符选择器(CSS2) 选择所有元素,所有浏览器都支持. *{ margin:0; padding:o; } 2>元素选择器( ...
- 精通CSS高级Web标准解决方案（1-1选择器）
设计代码的结构 使用有意义的标记 css可以控制页面的外观并将表现与内容分隔开. 在分配ID与类名时尽量保证有意义且与表现无关. div可以对块级元素进行分组,而span可以对行内元素进行分组或标识. ...
随机推荐
- Rancher安装使用
官网 http://docs.rancher.com/rancher/latest/en/quick-start-guide/#add-hosts 安装步骤: 1 Start up a Linux m ...
- git上传代码到github
git上传代码到github [root@bigdata-hadoop- ~]# git init [root@bigdata-hadoop- ~]# git add zeppelin [root@b ...
- LeetCode OJ 63. Unique Paths II
Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...
- digitalocean纽约机房最先开通IPv6
DigitalOcean是一家位于美国的云主机服务商,总部位于纽约,成立于2012年.DigitalOcean的服务器全部采用KVM架构,具体高性能处理能力,并且配备SSD固态硬盘,速度优异.每台设备 ...
- 第二题 已知有十六支男子足球队参加2008 北京奥运会。写一个程序，把这16 支球队随机分为4 个组。采用List集合和随机数 2008 北京奥运会男足参赛国家： 科特迪瓦，阿根廷，澳大利亚，塞尔维亚，荷兰，尼日利亚、日本，美国，中国，新西 兰，巴西，比利时，韩国，喀麦隆，洪都拉斯，意大利
import java.util.ArrayList; import java.util.List; import java.util.Random; public class List1 { pub ...
- 关于oracle数据库（10）函数
分析函数,用于统计排名 语法:函数名() over(order by 排序字段 asc | desc) row_number() 无论值是否相等,生成连续的行号 -- 1,2,3,4, select ...
- 关于oracle数据库（9）
内连接:从多张表中获取综合数据 inner join on select 表1.字段,表2.字段 from 表1 inner join 表2 on 关系; select 表1.*,表2.* from ...
- li浮动时ul高度为0，解决ul自适应高度的几种方法
网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...
- SPI模式下MCU对SD卡的控制及操作命令（转）
源:SPI模式下MCU对SD卡的控制及操作命令 一.前言 SD 卡有两个可选的通讯协议:SD 模式和 SPI模式 SD 模式是SD 卡标准的读写方式,但是在选用SD 模式时,往往需要选择带有SD 卡控 ...
- 《LYFvs2013转vs2010》
<LYFvs2013转vs2010>1.修改解决方案文件(**.sln) 将-------------------------------------------------------- ...