Download presentation
Presentation is loading. Please wait.
1
大家所认为的电子商务行业有哪些途径来赚钱？
2
第一章 CSS的基本语法 主 讲：龙老师
3
课程回顾 1，使用css控制页面四种方法 行内样式 内嵌式 链接式 导入样式 2，使用css控制页面四种方法的优先级
行内样式 内嵌式 链接式 导入样式 2，使用css控制页面四种方法的优先级 行内样式>链接式>内嵌式>导入式
4
学习目标 第2章 css基本语法 了解CSS选择器 了解选择器的声明 CSS的继承
5
2.1 CSS选择器 选择器（selector) 是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，既可实现各种效果。 1）标记选择器 2）类别选择器 3） ID选择器
6
2.1 CSS选择器 1，标记选择器 html{ border-bottom:0px; border-left:0px; overflow-y:scroll;width:100%;border-top:0px;border-right:0xp;padding-bottom:0px; margin:0px; padding-left:0px; padding-right:0px; padding-top:0px;} body{ padding-bottom:0px; margin:0px; padding-left:0px; padding-right:0px;} h1{ color:red; font-size:25px; }
7
2.1 CSS选择器 1，标记选择器 （0-0.html）
8
2.1 CSS选择器 2，类别选择器 2-1.html 2-2.html .one{ color:red; font-size:18px;
} .two{ color:green; font-size:20px; .three{ color:cyan; font-size:22px;
9
2.1 CSS选择器 2，类别选择器
10
2.1 CSS选择器 2，类别选择器 （ 2-3.html ） <html> <head>
<title>标记选择器.class</title> <style type="text/css"> h3{ /* 标记选择器 */ color:blue; font-size:18px; } h3.special{ /* 标记.类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ .special{ /* 类别选择器 */ color:green; </style> </head> <body> <h3>标记选择器.class1</h3> <h3>标记选择器.class2</h3> <h3 class="special">标记选择器.class3</h3> <h3>标记选择器.class4</h3> <h3>标记选择器.class5</h3> <p class="special">使用于别的标记</p> </body></html>
11
2.1 CSS选择器 2，类别选择器 h3 .special { color:red; font-size:23px; }
<body> <h3>标记选择器</h3> <h3 class="special">标记选择器</h3> </body>
12
2.1 CSS选择器 2，类别选择器
13
2.1 CSS选择器 2，类别选择器 2-4.html 同时使用两种class
<h4 class="one two">同时使用两种class，同时使用</h4>
14
2.1 CSS选择器 3，ID选择器 2-4.html #one { font-weight:bold; } #two{
font-size:30px; color:#009900;
15
2.1 CSS选择器 2，ID选择器
16
2.1 CSS选择器 2，ID选择器 一个id最多只能赋予一个html标记
17
2.2 选择器声明 1，集体声明 html 在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以利用集体声明的方法，将风格相同的CSS选择器同时声明。 h1,h2,h3,h4,h5,p{ color:purple; font-size:15px; }
18
2.2 选择器声明 1，集体声明 html 希望页面中的所有标记都使用同一种CSS样式，但又不希望逐个来加入集体声明列表。这时可以利用全局声明符号 * *{ color:purple; font-size:15px; }
19
2.2 选择器声明 1，选择器的嵌套 html 在CSS选择器中，还可以通过嵌套的方式，对特殊的位置的HTML标记进行声明，例如当<p>与</p>之间包含<b></b>标记时，就可以使用嵌套选择器进行相应的控制。 p b{ color:#0C6; text-decoration:underline; }
20
2.2 选择器声明 1，选择器的嵌套 嵌套选择器的使用非常广泛，不只是嵌套的标记本身，类别选择器和ID选择器都可以进行嵌套。下面是一些典型的嵌套语句。 .special i{ color:red;} /*使用了属性special的标记里面包含的<i>*/ #one li{padding-left:5px;} /*ID为one的标记里面包含的<li>*/ td.top .top1 strong { font-size:16px;} /*多层嵌套，同样实用*/
21
2.2 选择器声明 1，选择器的嵌套 选择器的嵌套在css的编写中可以大大减少对class和id的声明。因此在构建页面html框架时通常只给外层标记（父标记）定义class或者id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时，才单独进行声明，例如一个<ul>标记中包含多个<li>标记，而需要对其中某个<li>单独设置css样式时才赋给该<li>一个单独id或者类别，而其他<li>同样采用"ul li(...)"的嵌套方式来设置。
22
2.3 CSS的继承 1，父子关系 (2-9.html)
23
2.3 CSS的继承 2，CSS继承的运用 2-10.html <ul> <li class="li1">关系1
<li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> </ol> </li>
24
2.3 CSS的继承 2，CSS继承的运用 <style type="text/css"> <!--
.li1 ol li{ /*利用css继承关系*/ font-weight:bold; /*粗体*/ text-decoration:underline; /*下划线*/ } --> </style>
25
总结 css基本语法 1，css选择器几种类型 1）标记选择器 2）类选择器 3）ID选择器（唯一性）定义、应用
26
作业 1，写一个页面有p、h1标记的页面（css用标记选择器） 2，抄写课本32页实例 （类别选择器)
2，抄写课本32页实例 （类别选择器) 3，抄写课本34页实例 （Id选择器) 4，写一个页面同时使用三种css选择器（标记选择器、类别选择器、 Id选择器），然后在页面上再加一个大于三层嵌套的css选择器。
Similar presentations
