大家所认为的电子商务行业有哪些途径来赚钱?
第一章 CSS的基本语法 主 讲:龙老师
课程回顾 1,使用css控制页面四种方法 行内样式 内嵌式 链接式 导入样式 2,使用css控制页面四种方法的优先级 行内样式 内嵌式 链接式 导入样式 2,使用css控制页面四种方法的优先级 行内样式>链接式>内嵌式>导入式
学习目标 第2章 css基本语法 了解CSS选择器 了解选择器的声明 CSS的继承
2.1 CSS选择器 选择器(selector) 是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,既可实现各种效果。 1)标记选择器 2)类别选择器 3) ID选择器
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; }
2.1 CSS选择器 1,标记选择器 (0-0.html)
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;
2.1 CSS选择器 2,类别选择器
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>
2.1 CSS选择器 2,类别选择器 h3 .special { color:red; font-size:23px; } <body> <h3>标记选择器</h3> <h3 class="special">标记选择器</h3> </body>
2.1 CSS选择器 2,类别选择器
2.1 CSS选择器 2,类别选择器 2-4.html 同时使用两种class <h4 class="one two">同时使用两种class,同时使用</h4>
2.1 CSS选择器 3,ID选择器 2-4.html #one { font-weight:bold; } #two{ font-size:30px; color:#009900;
2.1 CSS选择器 2,ID选择器
2.1 CSS选择器 2,ID选择器 一个id最多只能赋予一个html标记
2.2 选择器声明 1,集体声明 2-6.html 在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用集体声明的方法,将风格相同的CSS选择器同时声明。 h1,h2,h3,h4,h5,p{ color:purple; font-size:15px; }
2.2 选择器声明 1,集体声明 2-7.html 希望页面中的所有标记都使用同一种CSS样式,但又不希望逐个来加入集体声明列表。这时可以利用全局声明符号 * *{ color:purple; font-size:15px; }
2.2 选择器声明 1,选择器的嵌套 2-8.html 在CSS选择器中,还可以通过嵌套的方式,对特殊的位置的HTML标记进行声明,例如当<p>与</p>之间包含<b></b>标记时,就可以使用嵌套选择器进行相应的控制。 p b{ color:#0C6; text-decoration:underline; }
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;} /*多层嵌套,同样实用*/
2.2 选择器声明 1,选择器的嵌套 选择器的嵌套在css的编写中可以大大减少对class和id的声明。因此在构建页面html框架时通常只给外层标记(父标记)定义class或者id,内层标记(子标记)能通过嵌套表示的则利用嵌套的方式,而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时,才单独进行声明,例如一个<ul>标记中包含多个<li>标记,而需要对其中某个<li>单独设置css样式时才赋给该<li>一个单独id或者类别,而其他<li>同样采用"ul li(...)"的嵌套方式来设置。
2.3 CSS的继承 1,父子关系 (2-9.html)
2.3 CSS的继承 2,CSS继承的运用 2-10.html <ul> <li class="li1">关系1 <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> </ol> </li>
2.3 CSS的继承 2,CSS继承的运用 <style type="text/css"> <!-- .li1 ol li{ /*利用css继承关系*/ font-weight:bold; /*粗体*/ text-decoration:underline; /*下划线*/ } --> </style>
总结 css基本语法 1,css选择器几种类型 1)标记选择器 2)类选择器 3)ID选择器(唯一性)定义、应用
作业 1,写一个页面有p、h1标记的页面(css用标记选择器) 2,抄写课本32页实例 (类别选择器) 2,抄写课本32页实例 (类别选择器) 3,抄写课本34页实例 (Id选择器) 4,写一个页面同时使用三种css选择器(标记选择器、类别选择器、 Id选择器),然后在页面上再加一个大于三层嵌套的css选择器。