全部章节   >>>>


本章目录

4.1 CSS 概述

4.1.1 CSS 简介

4.1.2 CSS3 基本语法

4.1.3 样式表的分类

4.2 CSS 基本选择器

4.2.1 标签选择器

4.2.2 类选择器

4.2.3 ID 选择器

4.3 CSS 扩展选择器

4.3.1 组合选择器

4.3.2 包含选择器

4.3.3 交集选择器

4.3.4 伪类选择器

4.4 CSS 的特性

4.4.1 CSS 继承性

4.4.2 CSS3 层叠性和优先级

4.4.3 综合案例

总结:


4.1 CSS 概述

4.1.1 CSS 简介

CSS 是 Cascading Style Sheet 的缩写,翻译为层叠样式表或级联样式表,简称为“样式表”。这里介绍的 CSS 版本是 CSS3。利用 CSS3 样式表定义页面样式,将会大大减少设计工作量。也可以美化页面,精确定制页面的布局。

使用 CSS3 样式表主要有以下优势:

  • 丰富的修饰样式
  • 内容与修饰分离,利于项目开发
  • 实现样式复用,提高开发效率
  • 实现页面的精确控制

4.1.2 CSS3 基本语法

一个样式(style)的基本语法由选择器、属性和属性值 3 个部分构成。层叠样式表通常用 <style> 标签来声明样式规则,即告诉浏览器如何显示页面中各类元素。

语法:

  1. <style type="text/css">
  2. 选择器 {
  3. 属性1:属性值1;
  4. 属性2:属性值2;
  5. ……
  6. }
  7. </style>

示例:

CSS样式的代码有以下规范:

(1)虽然CSS代码不区分大小写,但推荐全用小写。

(2)每条样式规则用分号“;”隔开,通常写为多行,简单的规则也可以合并为一行。

(3)当CSS代码较多时,可以使用“/*……*/”添加必要的注释,增加代码的可读性。

4.1.3 样式表的分类

根据样式表的书写位置,可以将样式表分为外部样式表、内嵌样式表以及行内样式表。

一、外部样式表

1、链接外部样式:链接外部样式表是指通过HTML的link链接标签,建立样式文件和网页的关联。

语法:

  1. <head>
  2. <link rel=”stylesheet” type=”text/css” href=”style.css”/>
  3. </head>

其 中,rel=“stylesheet” 表 示 在 网 页 中 使 用 该 外 部 样 式 表,

type =“text/css” 表 示 文 本 类 型 的 样 式,href=“newstyle.css”指定样式文件,样式表文件规定后缀名为“.css”。

示例:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>链接外部样式表</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <p>通过使用 CSS 来提升工作效率!</p>
  10. <hr>
  11. <p>开始学习 CSS !</p>
  12. </body>
  13. </html>

在上述代码中,定义了水平线的颜色为蓝色,并以虚线的方式呈现,线框宽度为2px。段落文字的颜色为红色,大小为36px,字体为宋体。其中,border属性设置边框样式,color属性设置字体的颜色,font-size属性设置字号、font-family属性设置字体。

2、导入样式表:在网页中,还可以使用@import方法导入样式表。

语法:

  1. <head>
  2. <style type="text/css">
  3. @import "css/style.css";
  4. </style>
  5. </head>

示例:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>链接外部样式表</title>
  6. <style type="text/css">
  7. @import "css/style.css";
  8. </style>
  9. </head>
  10. <body>
  11. <p>通过使用 CSS 来提升工作效率!</p>
  12. <hr>
  13. <p>开始学习 CSS !</p>
  14. </body>
  15. </html>

style.css

  1. hr {
  2. border: 2px dashed #5151A2
  3. }
  4. p {
  5. color: red;
  6. font-size: 36px;
  7. font-family: "宋体";
  8. }

二、内嵌样式表

内嵌样式表是将样式表的内容直接放置于 HTML5 文档的 <head> 和 </head> 区域中,通过 style 标签定义。

语法:

  1. <head>
  2.   <style type=”text/css”>
  3.    选择符 {样式属性:属性值;......}
  4. 选择符 {样式属性:属性值;......}
  5. ......
  6.   </style>
  7. </head>

示例:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>内嵌样式表</title>
  6. <style type="text/css">
  7. hr {border: 2px dashed #5151A2;}
  8. p {color: red;font-size: 36px;font-family: "宋体";}
  9. </style>
  10. </head>
  11. <body>
  12. <p>通过使用 CSS 来提升工作效率!</p>
  13. <hr>
  14. <p>开始学习 CSS !</p>
  15. </body>
  16. </html>

在实际应用中,为了充分利用CSS 3样式表的优势,建议使用“链入外部样式表”或“导入外部样式表”的方式来设置。

三、行内样式表

行内样式是混合在HTML 5标签中定义的,用这种方法可以对某个元素直接定义样式。行内样式的使用是直接在HTML 5标签中加入style属性,其内容即为CSS 3的属性和属性值。

语法:

  1. <标签名 style=”样式属性:属性值;”>......</标签名>
  • style属性引号的内容类似于样式表大括号中的内容。每个样式属性之间用分号间隔。
  • 行内样式通常用于对页面中某个具体的元素进行单独的修饰。

示例:

  1. <body>
  2. <p style="color:red;font-size:30px;font-family:黑体;">
  3. 使用行内样式的段落!
  4. </p>
  5. <p>
  6. 没有使用行内样式的段落!
  7. </p>
  8. </body>

  1. <body>
  2. <p style="color:red; font-size:36px; font-family:"宋体";">通过使用 CSS 来提升工作效率!</p>
  3. <hr style="border:2px dashed #5151A2">
  4. <p>开始学习 CSS !</p>
  5. </body>

定义了内嵌样式的标签均有样式效果。由于第二个p标签没有定义内嵌样式,最后以默认样式显示。

4.2 CSS 基本选择器

在 CSS3 中,一个样式的基本语法由选择器、属性和属性值 3 个部分构成。其中,选择器是一种模式,用于选择需要添加样式的元素。根据选择器表示所修饰的内容类别,基本选择器分为标签选择器(元素选择器)、类选择器和 ID 选择器。

4.2.1 标签选择器

当需要对页面内某类标签的内容进行修饰时,采用标签选择器

语法:

  1. <style type="text/css">
  2. 标签名 {
  3. 属性1:属性值1;
  4. 属性2:属性值2;
  5. ……
  6. }
  7. </style>

其中,x 代表标签名称。<x> 和 </x> 就如同一组开关:起始标签 <x> 为开启的某种功能,而结束标签 </x>为关闭功能,文字信息便放在两标签之间。

示例:

  1. <body>
  2. <div>
  3. <ul>
  4. <li>诺基亚面对的最大风险是摇摆不定的微软!</li>
  5. <li>真正的移动支付王者竟然是星巴克?</li>
  6. <li>马云再度减持华谊兄弟股份 套现近亿元</li>
  7. <li>报告称苹果在美智能手机市场统治地位继续扩大</li>
  8. <li>戴尔和甲骨文扩大合作:联手开发商用产品</li>
  9. </ul>
  10. </div>
  11. </body>

css

  1. <style type="text/css">
  2. li {
  3. color:blue;/*字体颜色为蓝色*/
  4. font-size:18px;/*字体大小为18px*/
  5. font-family:黑体;/*字体类型为黑体*/
  6. }
  7. </style>

4.2.2 类选择器

使用类选择选择器分以下两步:

1、定义类样式

  1. <style type="text/css">
  2. .类名 {
  3. 属性1:属性值1;
  4. ……
  5. }
  6. </style>

2、应用类样式。

在标签中使用“class”属性设置标签的类名,即<标签名 class=“类名”>标签内容</标签名>。标签中的类名定义完毕后,就会在标签内容中应用该类名所对应的样式。

<标签名 class=“类名”>标签内容</标签名>

示例:

  1. <div>
  2. <ul>
  3. <li class="red">诺基亚面对的最大风险是摇摆不定的微软!</li>
  4. <li>真正的移动支付王者竟然是星巴克?</li>
  5. <li class="red">马云再度减持华谊兄弟股份 套现近亿元</li>
  6. <li>报告称苹果在美智能手机市场统治地位继续扩大</li>
  7. <li>戴尔和甲骨文扩大合作:联手开发商用产品</li>
  8. </ul>
  9. </div>

css

  1. <style type="text/css">
  2. li {
  3. color:blue;
  4. font-size:18px;
  5. font-family:黑体;
  6. }
  7. .red {
  8. color:red; /*字体颜色为红色*/
  9. }
  10. </style>

4.2.3 ID 选择器

ID属性作为HTML元素的唯一标识,要求页面内不能有重复的ID标识属性。ID选择器中的样式修饰对应ID标识的HTML元素内容,在实际应用中常与<div>标签配合使用,表示修饰对应ID标识的某个div区块。

语法:

  1. <style type="text/css">
  2. #ID标识名 {
  3. 属性1:属性值1;
  4. 属性2:属性值2;
  5. ……
  6. }
  7. </style>

示例:

  1. <div id="news">
  2. <ul>
  3. <li>诺基亚面对的最大风险是摇摆不定的微软!</li>
  4. <li>真正的移动支付王者竟然是星巴克?</li>
  5. <li>马云再度减持华谊兄弟股份 套现近亿元</li>
  6. <li>报告称苹果在美智能手机市场统治地位继续扩大</li>
  7. <li>戴尔和甲骨文扩大合作:联手开发商用产品</li>
  8. </ul>
  9. </div>

css

  1. <style type="text/css">
  2. #news {
  3. background-color:#FFFFAA; /*设置背景颜色为浅黄色*/
  4. font-size:12px; /*字体大小为12px*/
  5. font-family:宋体; /*字体为宋体*/
  6. width:330px; /*内容宽度为330px*/
  7. }
  8. </style>

4.3 CSS 扩展选择器

4.3.1 组合选择器

组合选择器(也称为并集选择器)将同样的定义应用于多个选择符。可以将选择符以逗号分隔的方式并为一个样式组,它的选择范围是各选择器范围的并集。任何形式的选择器都可以作为并集选择器的一部分,使用选择符组时,各选择器用逗号连接。

示例:

  1. p,.red,#header {
  2. color:red;
  3. font-size:12px;
  4. }

4.3.2 包含选择器

包含选择器也称为后代选择器,它主要用于选择元素的后代元素,所谓后代元素即该标签内的元素,经常称外层的标签为父标签,内层的标签为子标签。

示例:

  1. <div id="header">
  2. <ul class="menu">
  3. <li><a href="#">家用电器</a></li>
  4. <li><a href="#">手机数码</a></li>
  5. <li><a href="#">日用百货</a></li>
  6. </ul>
  7. </div>

后代选择器“#header ul li a”表示选择 id 为“header”标签下的 ul,ul 下的 li 标签,li 标签下的 a 标签。使用后代选择器比较灵活,且能较精确地选择页面元素。

4.3.3 交集选择器

交集选择器由两个选择器之间的连接构成,其结果是选中两者各自元素访问的交集。其中,第一个必须是标签选择器,第二个必须是类选择器或 id 选择器。这两个选择器之间不能有空格,必须连续书写。

示例:

  1. p.red {
  2. color: red;
  3. font-size: 23px;
  4. }

该代码中的“p.red”即为交集选择器,该选择器的范围是选中 p 标签中 class 属性值为 red 的所有元素。

4.3.4 伪类选择器

CSS样式表中还提供了一种伪类选择器,所谓伪类即根据标签处于某种行为或状态时的特征来修饰样式。伪类可以对用户与文档交互时的行为作出响应。

语法:

  1. 标签名:伪类名{
  2. 属性:属性值;
  3. }

伪类

含义

应用场景

a:link

未单击访问时的超链接样式

常用,超链接主样式

a:visited

单击访问后的超链接样式

区分是否已被访问

a:hover

鼠标悬浮在超链接上的样式

常用,实现动态效果

a:active

鼠标单击未释放的超链接样式

少用,通常与 link 一致

示例:

  1. <body>
  2. <h1>This is H1</h1>
  3. <h2>This is H2</h2>
  4. <p class="warning">Real Warning!</p>
  5. <span class="warning">Common Worning</span>
  6. <p id="top">id选择符</p>
  7. <h1><span>包含选择符</span>
  8. <p><a href="#">这里是链接</a></p>
  9. <p id="down">超链接标签的CSS伪类link,visited,hover,active,CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果。</p>
  10. </body>

4.4 CSS 的特性

4.4.1 CSS 继承性

CSS3 的继承性,亦称为样式表的层叠性。样式表的继承规则是,所有在元素中嵌套的元素都会继承外层指定的样式,有时会将很多层样式叠加在一起,但另行更改除外。

示例:

  1. <body>
  2. <p>段落文字</p>
  3. <p id="p1">段落文字</p>
  4. </body>
  1. body {
  2. font-size: 12px;
  3. font-style: italic;
  4. }
  5. #p1 {
  6. font-size: 30px;
  7. }

解释:在该示例中,p元素包含在元素body中,因此标签p中的内容会继承body定义的属性,即示例中的段落文字同样会以斜体的12像素大小的文字显示,除非定义新的样式。

注意:但是在某些特殊的情况下,内部选择符不继承包含它的选择符的属性值。例如,CSS 3上边界属性值是不会继承的。

4.4.2 CSS3 层叠性和优先级

层叠性是指当有多个选择器都作用于同一元素时,即多个选择器中的样式发生了重叠,CSS 会对其进行处理。

CSS 的处理原则如下:

如果多个选择器定义的样式规则不发生冲突,则元素将应用所有选择器定义的样式。

如果多个选择器定义的样式规则发生了冲突,则 CSS 按照选择器的优先级来处理,元素将应用优先级高的选择器定义的样式。

CSS样式优先级从高到低为:

CSS 规定选择器总原则是:越特殊的样式,优先级越高。

示例:

  1. <body>
  2. <p>CSS3 层叠性和优先级</p>
  3. </body>
  1. body { color:red; font-size:12px; }
  2. p { color:blue; }

段落文字会继承 body 定义的 12px 大小,颜色则按照最后 p 定义的蓝色显示。不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级和 CSS 代码的定义优先级。

(1)CSS3 的选择符优先级从高到低依次为:id 选择符优先级最高,其次是类选择符,最后是元素选择符。

(2)CSS3 的定义优先级依照后定义优先的原则,依次为:优先级最高的是内嵌样式,其次是内部样式表,链入外部样式表和内部样式表之间则根据定义的先后顺序评定,即最后定义的优先级高。

示例:

  1. <body>
  2. <div>
  3. <ul>
  4. <li>手机</li>
  5. <li class="sale">电脑</li>
  6. <li class="blue">服装</li>
  7. <li>食品</li>
  8. </ul>
  9. </div>
  10. </body>
  1. <style type="text/css">
  2. div {
  3. font-size:24px;
  4. color:red;
  5. }
  6. .sale {
  7. text-decoration:underline;
  8. }
  9. .blue {
  10. color:blue;
  11. }
  12. </style>

4.4.3 综合案例

做一个商品图像浏览页面,该页面分为 3 个区域,分别是标题区、商品图像展示区和图像导航区。如果点击下面的导航小图像,则会在商品展示区展示该商品对应的大图像。

使用DIV+CSS实现页面布局

  1. <div id="goods">
  2. <h1>三星手机图片展示</h1><!--标题-->
  3. <div id="show"> <!--大图片展示区-->
  4. <ul>
  5. <li></li>
  6. ......
  7. </ul>
  8. </div>
  9. <div id="nav_box"><!--图片导航区-->
  10. <ul id="nav">
  11. <li></li>
  12. ......
  13. </ul>
  14. </div>
  15. </div>

使用页面布局样式

  1. <style type="text/css">
  2. body, ul, li,h1{
  3. margin:0px;padding:0px;border:0px;list-style-type:none;
  4. }
  5. /*标题栏样式*/
  6. #goods h1 {
  7. text-align:center;font-family:"微软雅黑";color:#808080;
  8. }
  9. /*商品展示框样式*/
  10. #show { margin:0px auto;width:350px;height:500px;border:3px solid #ccc;
  11. overflow:hidden;
  12. }
  13. /*图片导航栏*/
  14. #nav_box {border:1px solid #808080;height:150px;}
  15. </style>

在页面中点击导航栏中的小图像,在展示区内显示该商品的大图像。

  1. <div id="goods">
  2. <h1>三星手机图片展示</h1><!--标题-->
  3. <div id="show"> <!--大图片展示区-->
  4. <ul>
  5. <li><a name="p1"></a><img src="data:images/b1.jpg" alt="手机"/></li>
  6. ......
  7. </ul>
  8. </div>
  9. <div id="nav_box"><!--图片导航区-->
  10. <ul id="nav">
  11. <li><a href="#p1"><img src="data:images/b1.jpg" alt="手机"/></a></li>
  12. ......
  13. </ul>
  14. </div>
  15. </div>
  1. /*清除图片边框*/
  2. a:hover,img { border:0px; }
  3. /*商品展示区图片大小样式*/
  4. #show img { width:350px;height:500px;}
  5. /*导航*/
  6. #nav {margin:0px auto; /*导航居中*/
  7. height:150px; width:560px;}
  8. #nav li{float:left; /*左浮动*/
  9. width:100px;height:150px;
  10. margin-right:10px; /*小图片右外边距的间隙*/
  11. border:1px solid #ccc;}
  12. /*导航区图片大小样式*/
  13. #nav li img {width:100px;height:150px;}

总结:

  • CSS是Cascading Style Sheet的缩写,可以翻译为“层叠样式表”或“级联样式表”,简称为“样式表”,利用CSS样式可以定义页面样式,将会大大减少设计工作量。
  • CSS根据样式表的书写位置,可以将样式表分为外部样式表、内嵌样式表以及行内样式表。选择器是一种模式,用于选择需要添加样式的元素。常用的选择器有标签选择器、类选择器、ID选择器、组合选择器、包含选择器、交集选择器以及伪类选择器等。
  • CSS规定选择器的优先级从高到低为:行内样式→ID样式→类样式→标签样式。其总原则是:越特殊的样式,优先级越高。

CSS的处理层叠性的原则是:

如果多个选择器定义的样式规则不发生冲突,则元素将应用所有选择器定义的样式。

如果多个选择器定义的样式规则发生了冲突,则CSS按照选择器的优先级来处理,元素将应用优先级高的选择器定义的样式。

HTML网页设计基础笔记 • 【第4章 CSS3基础】的更多相关文章

  1. HTML网页设计基础笔记 • 【目录】

    持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...

  2. HTML网页设计基础笔记 • 【第6章 背景和阴影】

    全部章节   >>>> 本章目录 6.1 背景属性 6.1.1 背景颜色 6.1.2 背景图片 6.1.3  背景图片的重复方式 6.2 背景图片的定位 6.2.1 backg ...

  3. 学习笔记 第十一章 CSS3布局基础

    第11章   CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1  CSS盒模型基础 页面中所有元素基本显示形态为方形 ...

  4. 《利用python进行数据分析》读书笔记--第四章 numpy基础:数组和矢量计算

    http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...

  5. WCF服务编程 读书笔记——第1章 WCF基础(2)

    续:第1章 WCF基础(1) 元数据交换 服务有两种方案可以发布自己的元数据.一种是基于HTTP-GET协议提供元数据, 另一种则是后面将要讨论的使用专门的终结点的方式.WCF能够为服务自动提供基于H ...

  6. WCF服务编程 读书笔记——第1章 WCF基础(1)

    第1章 WCF基础 本章主要介绍WCF的基本概念.构建模块以及WCF体系架构,以指导读者构建一个简单的WCF服务.从本章的内容中,我们可以了解到WCF的基本术语,包括地址(Address).绑定(Bi ...

  7. HTML网页设计基础笔记 • 【第5章 常用的样式属性】

    全部章节   >>>> 本章目录 5.1 字体及文本属性 5.1.1 字体属性 5.1.2 文本属性 5.2 边距和填充 5.2.1 边距 5.2.2 填充 5.3 边框属性 ...

  8. HTML网页设计基础笔记 • 【第7章 盒子模型】

    全部章节   >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...

  9. HTML网页设计基础笔记 • 【第3章 表单】

    全部章节   >>>> 本章目录 3.1 表单 3.1.1 表单概述 3.1.1 表单概述(续) 3.1.2 表单标签 3.1.3 表单数据的提交方式 3.2 输入框和按钮 3 ...

随机推荐

  1. Java Jar包压缩、解压使用

    什么是jar包JAR(Java Archive)是Java的归档文件,它是一种与平台无关的文件格式,它允许将许多文件组合成一个压缩文件. 如何打/解包使用jdk/bin/jar.exe工具,配置完环境 ...

  2. 在Eclipse中运行OSGI工程出错的解决方案

    今天学习OSGI的过程中按照书上所述搭建好第一个helloworld插件工程,运行的过程中出现下面所示的错误: !SESSION 2014-06-09 21:04:49.038 ----------- ...

  3. Dubbo管控平台

    2019年初,官方发布了Dubbo管理控制台0.1版本.结构上采取了前后端分离的方式,前端使用Vue和Vuetify分别作为Javascript框架和UI框架,后端采用Spring Boot框架 一. ...

  4. Kafaka相关命令

    开启zookeeper命令(备注:先进入zookeeper的bin目录) ./zkServer.sh start 关闭zookeeper命令(备注:先进入zookeeper的bin目录) ./zkSe ...

  5. 封装一个按Key排序的Map工具

    Map是集合的存放顺序是按哈希值定的,有时候不是我们需要的,当想要一个按自己规定顺序存放顺序,可以用LinkedHashMap,这里自己把LinkedHashMap封装了一次 package test ...

  6. maven常用命令(待补充)

    1.mvn clean 删除已经编译好的信息 2.mvn compile 编译src/main/java目录下的.java文件 3.mvn test 编译src/main/java和src/test/ ...

  7. logstash 正则表达式

    正则表达式 3. 使用给定好的符号去表示某个含义 4. 例如.代表任意字符 5. 正则符号当普通符号使用需要加反斜杠 正则的发展 6. 普通正则表达式 7. 扩展正则表达式 普通正则表达式 . 任意一 ...

  8. Alamofire-5.0.0 以上报错

    摘要 Alamofire 更新到新版本时,遇到了两个错误和一个警告️,所以记录下来它们,以及如何解决它们.给其他出现类似问题的同道一些解决的方向. 今天新开启一个项目,因为网络请求选择 Alamofi ...

  9. eslint使用和配置

    1.全局安装 $ npm install -g eslint 2.初始化一个配置文件,得到一份文件名为 .eslintrc.js 的配置文件 eslint --init 3.配置.eslintrc.j ...

  10. 第四届“传智杯”全国大学生IT技能大赛题解

    目录 A B C D E F G 今年题目难度普遍偏低.只有 D,F 还好. A 按题目给的公式计算即可.注意应在最后的答案中去掉小数部分. B 按照题意模拟即可.注意答案要与 \(0\) 取 \(\ ...