您的位置：首页 > Web前端 > CSS

HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性

2016-03-02 18:02 549 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航