第9章 CSS核心基础.pptx

1、第9 章 CSS 核心基础,赵海燕 ,1. CSS简介,1.1 内容、结构和表现,内容就是页面实际要传达的真正信息，包含数据、文档或者图片等，不包含辅助的信息，如装饰性的图像等。 例如，下面这段文字就是一个页面要表现的内容。 这段文字的内容是完整的，但是没有分段，层次不清。,1.1 内容、结构和表现,结构使内容更加具有逻辑性，易用性。标题、章、节、段落和列表都是结构。 例如，为上页的文字设置结构。,1.1 内容、结构和表现,虽然定义了结构，但是样式没有改变，例如字体、颜色没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。 下面是对上页文本用表现处理过的效果。,1

2、.2 结构和表现的分离,去掉了CSS样式表的页面,应用了CSS样式表的页面,1.2 结构和表现的分离,HTML=内容、结构 CSS=表现,1.3 传统HTML的缺点,实例：9-1.html CSS标记1 CSS标记2 CSS标记3 CSS标记4 当我们要同时修改每个h2标记中的字体颜色等样式时，必须逐个进行修改。,1.3 传统HTML的缺点,相比CSS为基础的页面设计方法来说，传统HTML的主要缺点有以下几点： 维护困难：为了修改某个特殊标记的格式，需要花费很多时间，尤其对于整个网站而言，后期修改和维护的成本很高。 标记不足：HTML本身的标记十分的少，很多标记都是为网页内容服务的，而关于美工

3、样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。 网页过“胖”：由于没有统一对各种风格样式进行控制，HTML的页面往往体积过大，占用了很多宝贵的带宽。 定位困难：在整体布局页面时，过多的标记导致页面的复杂和后期维护的困难。,1.4 CSS的引入,实例：9-2.html h2 font-family:幼圆; color:blue; CSS标记1 CSS标记2 只需要修改标记中的样式就可以同时控制所有的h2标记。,1.5 CSS的概念,CSS（Cascading Style Sheet）译为“层叠样式表”，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。利用CSS可以

4、控制多篇文档的格式，使用CSS样式表定义页面样式，将会使工作量大大减小。 一些好的CSS样式表的建立，可以更进一步地对页面进行美化，对文本格式进行精确定制。,1.6 CSS样式表的功能,灵活控制网页中文字的字体、颜色、大小、间距、风格等。 随意设置一个文本块的行高、缩进、三维效果的边框等。 更方便地为网页中的任何元素设置不同的背景颜色和背景图片。 精确控制网页中各元素的位置。 为网页中的元素设置各种滤镜效果。 可以与脚本语言相结合，使网页中的元素产生各种动态效果。,1.7 CSS带来的好处,CSS可以减少图形文件的使用，使页面载入更快； CSS可以降低网站的流量费用； CSS集中管理样式信息，

5、使整个站点保持视觉的一致性； CSS可以使多个网页共享样式信息，使设计师在修改设计时更有效率，代价更低； CSS使站点可以更好地被搜索引擎找到； CSS使站点对浏览者和浏览器更具亲和力； 在世界上越来越多人采用 Web 标准时，掌握CSS可以提高设计师的职场竞争实力。,1.8 CSS经典案例展示, CSS禅意花园由加拿大设计师Dave Shea创建，向全世界征集作品。 使用完全相同的HTML内容和结构，仅仅依靠CSS文件的不同来使网页具有截然不同的表现形式。,211号作品,163号作品,1.8 CSS经典案例展示,195号作品,144号作品,2. CSS的引入方法,2.1 行内式,行内式即在标

6、记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，通常在设定一个单独的特殊样式时使用。 实例：9-3.html 这是一行文本。 以上代码直接在h1标记的style属性中设定了CSS样式，将文字颜色设置为白色，背景颜色设置为蓝色。,2.2 嵌入式,嵌入式将页面中各种元素的设置集中写在和之间，对于单一的网页，这种方式很方便。 实例：9-4.html 嵌入式 h1 color: white; background-color: blue 这种方式可以对页面中所有的h1标记都设置相同的样式。 标记内的h1就称为“选择器”，即选中某些特定的元素进行样式设置。,2.3 导入式,导入

7、式是将一个独立的CSS文件引入HTML文件中。通常在一个包含很多页面的网站中使用这类方法。 实例：9-5.html 导入式 import mystyle.css; 对应的CSS文件后缀名为.css，内容如下： h1 color: white; background-color: blue; ,2.4 链接式,链接式与导入式类似，也是将一个独立的CSS文件引入HTML文件中。二者最大的区别是导入式使用CSS规则引入外部CSS文件，链接式则使用HTML的标记引入外部CSS文件。 实例：9-6.html 链接式 注意，导入式和链接式都是在标记内部添加相应代码。,2.5 练习CSS的引入方法,分别用4

8、种不同的方式引入CSS，实现红色的文字效果： CSS的引入方法,3. 基本CSS选择器,3.1 标记选择器,一个HTML页面由很多不同的标记组成，CSS标记选择器用来声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。 例如： h1 color: red; font-size: 25px； 这段CSS代码声明了HTML页面中所有的h1标记。文字的颜色都采用红色，大小都为25px。,3.1 标记选择器,每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格。,3.2 类别选择器,上面提到的标记选择器

9、一旦声明，那么页面中所有的该标记都会相应地产生变化。 例如当声明了标记为红色时，页面中所有的标记都将显示为红色。但是如果希望其中的某一个 标记不是红色，而是蓝色，仅依靠标记选择器是不够的，还需要引入类别（class）选择器。 类别选择器的名称可以由用户自定义，而且任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可。,3.2 类别选择器,实例：9-7.html .red color:red;/* 红色 */ font-size:18px;/* 文字大小 */ .green color:green;/* 绿色 */ font-size:20px;/* 文

10、字大小 */ 这段CSS代码定义了两个类别选择器，分别设置了不同的字体颜色和大小。,3.2 类别选择器,实例：9-7.html（续） class选择器1 class选择器2 h3同样适用 两个标记分别用class属性声明了类别，并且同一个类别“.green”也可以同时用于标记和标记。,3.2 类别选择器,如果页面中几乎所有的标记都使用相同的样式风格，只有很少数特殊的标记需要使用不同的风格，这时可以通过类别选择器和标记选择器配合来实现。 实例：9-8.html 在HTML标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。这样做往往可以适当减少

11、代码的长度。 实例：9-9.html .onecolor:blue; .twofont-size:22px; 同时使用两种class,3.3 ID选择器,ID选择器的使用方法与class选择器基本相同，不同点在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。,3.3 ID选择器,实例：9-10.html #one font-weight: bold; #two font-size:30px; color:#009900; ID选择器1 ID选择器2 ID选择器3 /*不能使用相同ID*/ ID选择器3 /* 错

12、误写法*/ ,注意：ID选择器本身也可以用于多个标记，但是JavaScript等其他脚本语言也可以调用id属性，所以不要将ID选择器用于多个标记，否则会出现错误。 另外，ID选择器不支持class选择器那样的多风格同时使用，类似 id=“one two”这样的写法是完全错误的语法。,3.4 练习CSS选择器,分别用3种不同的选择器，实现红色的文字效果： CSS的引入方法,4. 复合选择器,4.1 “交集”选择器,复合选择器是以3种基本选择器为基础，通过组合产生更多种类的选择器，实现更强、更方便的选择功能。 “交集”选择器是由两个选择器直接连接而成，结果是选中二者各自元素范围的交集。其中第一个必

13、须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。 例如：p.special 、p#special ,4.1 “交集”选择器,实例：9-11.html p color:blue; /* 标记选择器 */ p.special color:red; /* 标记.类别选择器 */ .special color:green; /* 类别选择器 */ 普通段落文本 普通标题文本 指定了.special类别的段落文本 指定了.special类别的标题文本 ,4.2 “并集”选择器,“并集”选择器可以同时选中各个基本选择器所选择的范围，任何形式的选择器都可以作为

14、并集选择器的一部分。 “并集”选择器是多个选择器通过逗号连接而成的。如果某些选择器的样式是完全相同的，或者部分相同，这时便可以利用并集选择器同时声明。 例如： h1, h2.first, p.specia, #one 实例：9-12.html、9-13.html（全局选择器“*”） h1, h2, h3, h4, h5, p/*并集选择器*/ color:purple;/* 文字颜色 */ font-size:15px;/* 字体大小 */ h2.special, .special, #one/* 集体声明 */ text-decoration:underline;/* 下划线 */ ,4.3

15、 “后代”选择器,“后代”选择器就是通过嵌套的方式，对特殊位置的HTML标记进行声明，例如标记之间包含标记时，就可以使用后代选择器进行相应的控制。 后代选择器的写法是把外层单独标记写在前面，内层的标记写在后面，之间用空格分隔。 实例：9-14.html p spancolor:red; /* 嵌套声明 */ spancolor:blue; 嵌套使用CSS标记的方法 嵌套之外的标记不生效 ,4.3 “后代”选择器,后代选择器的使用非常广阔，不仅标记选择器可以组合，类别选择器和ID选择器都可以进行嵌套。 例如： .special i #one li td.top .top1 strong 第三种使

16、用了三层嵌套，其对应的HTML可能为： 其他内容css控制的部分其他内容 ,4.4 练习CSS选择器,现有如下代码： CSS选择器 立 春 自秦代以来，我国就一直以立春作为春季的开始。 在人们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。 请使用不同的CSS选择器，实现以下效果： 1.将所有文字都设为红色； 2.将第2句文字单独设为绿色； 3.将第3句文字单独设为蓝色。,5. CSS的继承特性,5.1 继承关系,实例：9-15.html,5.2 CSS继承的运用,实例：9-16.html h1 color:blue; text-decoration: underline;/* 下划线 */

17、 em color:red; ,5.2 CSS继承的运用,利用巧妙的继承关系，可以大大缩减代码的编写量，并提高可读性，尤其是在页面内容很多且关系复杂的情况下。 例如，如果要使嵌套最深的第3级列表文字显示为红色，那么增加如下样式设置： li color: red; 效果如图： 可以看到，所有的li标记内容 都变成了红色。,5.3 思考,如果只把最底层的三个项目设置为红色，该怎么设置呢？,5.3 思考,一种方法是设置单独的类别，比如定义一个“.red”类，然后将该类别赋予需要变为红色的项目，但这样设置显然很麻烦。 可以利用继承的特性，使用“后代”选择器： ul li ul li ul li color: red; 也可以简化为： li li li color: red; 实例：9-17.html 如果将设置改为： li li color: red; 那么，现在红色显示的文字一共有几行？,6. CSS的层叠特性,6.1 CSS的层叠特性,CSS叫做“层叠样式表”，“层叠”是什么意思呢？ 千万不要