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）类别选择器

　　　　　　　　.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选择器

　　　　　　　　#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可以对行内元素进行分组或标识. ...

随机推荐

$_SERVER 等超全局数组的用法 $_COOKIE $_GET $_SESSION
$_SERVER 服务器和执行环境信息例如 $_SERVER['SERVER_NAME']; 当前运行脚本所在的服务器的主机名.如果脚本运行于虚拟主机中,该名称是由那个虚拟主机所设置的值决定.$_G ...
Algorithm 算法
http://www.cnblogs.com/baiboy/category/723479.html 记下来,有空去看随笔分类 - Algorithm [项目总结]自然语言处理在现实生活中运用 ...
asp.net学习视频资料地址链接
ASP.NET开发学习视频教程大全(共800集) http://felix520wj.blog.51cto.com/7129746/1548458 http://study.163.com/cours ...
翻扣告诉你外出旅游时实用的一些小tips
很多人出行都会带着大包小包,东西胡乱塞成一团,导致每次要用的时候都翻个遍.所以今天游游君为大家推荐几个出门旅行的小技巧. 收拾行李时,把鞋子放进浴帽里.浴帽很容易洗干净,还可以防止鞋子把干净的衣服弄脏 ...
hellobruce
LeetCode OJ 152. Maximum Product Subarray
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
LeetCode OJ 48. Rotate Image
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
UNIX基础--控制台和终端
虚拟控制台和终端 Virtual Consoles and Terminals: FreeBSD 虚拟控制台的默认配置为8个,但并不是硬性设置, 您可以很容易设置虚拟控制台的个数增多或减少. 虚拟控制 ...
layoutSubview触发时机
layoutSubviews在以下情况下会被调用: 1.init初始化不会触发layoutSubviews 2.addSubview会触发layoutSubviews 3.设置view的Frame会触 ...
android listen
android监听机制,应该是一种观察者模式. 摘抄网上教程,观察者模式的结构如下: 其中涉及的角色有: ● 抽象主题(Subject)角色:抽象主题角色把所有对观察者对象的引用保存在一个聚集(比如A ...

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

HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性的更多相关文章

随机推荐

热门专题