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

随机推荐

关于Cocos2dx之JS创建项目
环境: cocos2dx -3.10 ndk - r9 sdk 1.进入到指定的项目的目标目录下面去,然后执行cocos new -l js ProjectName 进入对应目录查看:
Java JVM 内存泄漏--全解析和处理办法 [ 转载 ]
Java JVM 内存泄露——全解析和处理办法 [转载] @author 小筐子 @address http://www.jianshu.com/p/bf159a9c391a JA ...
4、Spring+MyBatis增删改查
0.oracle数据库脚本 create table userinfo (id ), name ), password telephone ), isadmin )); --4.2 用户表序列 cre ...
移动端Bug管理工具——Bugtags
Bugtags介绍产品说明 Bugtags是为改善移动产品质量而专门打造的测试平台产品. 产品功能 SDK集成简单一行代码极速集成,完全不影响原有程序结构. 所见即所得提交问题一键截屏,使用标签 ...
Java8 (1)
参考资料: <Java8 in Action> Raoul-Gabriel Urma 一.jdk8 客观的说,Java8是一次有重大演进的版本,甚至很多人认为java8所做的改变,在许多方 ...
Gentoo:Xorg:Failed to load module "……" 问题
错误描述: 安装完xorg-server后,startx启动桌面环境,出现缺少模块错误. Xorg:Failed to load module "--" 查看log: cat /v ...
Openjudge-计算概论（A）-求出e的值
描述: 利用公式e = 1 + 1/1! + 1/2! + 1/3! + ... + 1/n! 求e .输入输入只有一行,该行包含一个整数n(2<=n<=15),表示计算e时累加到1/n! ...
F - 娜娜梦游仙境系列——多民族王国
F - 娜娜梦游仙境系列——多民族王国 Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Othe ...
20_学生选课数据库SQL语句练习题
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...
linux nfs开启
nfs设置: NFS的配置过程很简单.在服务器端中编辑/etc/exports文件,添加如下内容: /home/cotton/data/cotton/zghy 192.168.2.*(rw,s ...

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

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

随机推荐

热门专题