HTML网页设计基础笔记 • 【第4章 CSS3基础】
全部章节 >>>>
本章目录
4.1 CSS 概述
4.1.1 CSS 简介
CSS 是 Cascading Style Sheet 的缩写,翻译为层叠样式表或级联样式表,简称为“样式表”。这里介绍的 CSS 版本是 CSS3。利用 CSS3 样式表定义页面样式,将会大大减少设计工作量。也可以美化页面,精确定制页面的布局。
使用 CSS3 样式表主要有以下优势:
- 丰富的修饰样式
- 内容与修饰分离,利于项目开发
- 实现样式复用,提高开发效率
- 实现页面的精确控制
4.1.2 CSS3 基本语法
一个样式(style)的基本语法由选择器、属性和属性值 3 个部分构成。层叠样式表通常用 <style> 标签来声明样式规则,即告诉浏览器如何显示页面中各类元素。
语法:
<style type="text/css">
选择器 {
属性1:属性值1;
属性2:属性值2;
……
}
</style>
示例:
CSS样式的代码有以下规范:
(1)虽然CSS代码不区分大小写,但推荐全用小写。
(2)每条样式规则用分号“;”隔开,通常写为多行,简单的规则也可以合并为一行。
(3)当CSS代码较多时,可以使用“/*……*/”添加必要的注释,增加代码的可读性。
4.1.3 样式表的分类
根据样式表的书写位置,可以将样式表分为外部样式表、内嵌样式表以及行内样式表。
一、外部样式表
1、链接外部样式:链接外部样式表是指通过HTML的link链接标签,建立样式文件和网页的关联。
语法:
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
</head>
其 中,rel=“stylesheet” 表 示 在 网 页 中 使 用 该 外 部 样 式 表,
type =“text/css” 表 示 文 本 类 型 的 样 式,href=“newstyle.css”指定样式文件,样式表文件规定后缀名为“.css”。
示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接外部样式表</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>通过使用 CSS 来提升工作效率!</p>
<hr>
<p>开始学习 CSS !</p>
</body>
</html>
在上述代码中,定义了水平线的颜色为蓝色,并以虚线的方式呈现,线框宽度为2px。段落文字的颜色为红色,大小为36px,字体为宋体。其中,border属性设置边框样式,color属性设置字体的颜色,font-size属性设置字号、font-family属性设置字体。
2、导入样式表:在网页中,还可以使用@import方法导入样式表。
语法:
<head>
<style type="text/css">
@import "css/style.css";
</style>
</head>
示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接外部样式表</title>
<style type="text/css">
@import "css/style.css";
</style>
</head>
<body>
<p>通过使用 CSS 来提升工作效率!</p>
<hr>
<p>开始学习 CSS !</p>
</body>
</html>
style.css
hr {
border: 2px dashed #5151A2
}
p {
color: red;
font-size: 36px;
font-family: "宋体";
}
二、内嵌样式表
内嵌样式表是将样式表的内容直接放置于 HTML5 文档的 <head> 和 </head> 区域中,通过 style 标签定义。
语法:
<head>
<style type=”text/css”>
选择符 {样式属性:属性值;......}
选择符 {样式属性:属性值;......}
......
</style>
</head>
示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌样式表</title>
<style type="text/css">
hr {border: 2px dashed #5151A2;}
p {color: red;font-size: 36px;font-family: "宋体";}
</style>
</head>
<body>
<p>通过使用 CSS 来提升工作效率!</p>
<hr>
<p>开始学习 CSS !</p>
</body>
</html>
在实际应用中,为了充分利用CSS 3样式表的优势,建议使用“链入外部样式表”或“导入外部样式表”的方式来设置。
三、行内样式表
行内样式是混合在HTML 5标签中定义的,用这种方法可以对某个元素直接定义样式。行内样式的使用是直接在HTML 5标签中加入style属性,其内容即为CSS 3的属性和属性值。
语法:
<标签名 style=”样式属性:属性值;”>......</标签名>
- style属性引号的内容类似于样式表大括号中的内容。每个样式属性之间用分号间隔。
- 行内样式通常用于对页面中某个具体的元素进行单独的修饰。
示例:
<body>
<p style="color:red;font-size:30px;font-family:黑体;">
使用行内样式的段落!
</p>
<p>
没有使用行内样式的段落!
</p>
</body>
<body>
<p style="color:red; font-size:36px; font-family:"宋体";">通过使用 CSS 来提升工作效率!</p>
<hr style="border:2px dashed #5151A2">
<p>开始学习 CSS !</p>
</body>
定义了内嵌样式的标签均有样式效果。由于第二个p标签没有定义内嵌样式,最后以默认样式显示。
4.2 CSS 基本选择器
在 CSS3 中,一个样式的基本语法由选择器、属性和属性值 3 个部分构成。其中,选择器是一种模式,用于选择需要添加样式的元素。根据选择器表示所修饰的内容类别,基本选择器分为标签选择器(元素选择器)、类选择器和 ID 选择器。
4.2.1 标签选择器
当需要对页面内某类标签的内容进行修饰时,采用标签选择器
语法:
<style type="text/css">
标签名 {
属性1:属性值1;
属性2:属性值2;
……
}
</style>
其中,x 代表标签名称。<x> 和 </x> 就如同一组开关:起始标签 <x> 为开启的某种功能,而结束标签 </x>为关闭功能,文字信息便放在两标签之间。
示例:
<body>
<div>
<ul>
<li>诺基亚面对的最大风险是摇摆不定的微软!</li>
<li>真正的移动支付王者竟然是星巴克?</li>
<li>马云再度减持华谊兄弟股份 套现近亿元</li>
<li>报告称苹果在美智能手机市场统治地位继续扩大</li>
<li>戴尔和甲骨文扩大合作:联手开发商用产品</li>
</ul>
</div>
</body>
css
<style type="text/css">
li {
color:blue;/*字体颜色为蓝色*/
font-size:18px;/*字体大小为18px*/
font-family:黑体;/*字体类型为黑体*/
}
</style>
4.2.2 类选择器
使用类选择选择器分以下两步:
1、定义类样式
<style type="text/css">
.类名 {
属性1:属性值1;
……
}
</style>
2、应用类样式。
在标签中使用“class”属性设置标签的类名,即<标签名 class=“类名”>标签内容</标签名>。标签中的类名定义完毕后,就会在标签内容中应用该类名所对应的样式。
<标签名 class=“类名”>标签内容</标签名>
示例:
<div>
<ul>
<li class="red">诺基亚面对的最大风险是摇摆不定的微软!</li>
<li>真正的移动支付王者竟然是星巴克?</li>
<li class="red">马云再度减持华谊兄弟股份 套现近亿元</li>
<li>报告称苹果在美智能手机市场统治地位继续扩大</li>
<li>戴尔和甲骨文扩大合作:联手开发商用产品</li>
</ul>
</div>
css
<style type="text/css">
li {
color:blue;
font-size:18px;
font-family:黑体;
}
.red {
color:red; /*字体颜色为红色*/
}
</style>
4.2.3 ID 选择器
ID属性作为HTML元素的唯一标识,要求页面内不能有重复的ID标识属性。ID选择器中的样式修饰对应ID标识的HTML元素内容,在实际应用中常与<div>标签配合使用,表示修饰对应ID标识的某个div区块。
语法:
<style type="text/css">
#ID标识名 {
属性1:属性值1;
属性2:属性值2;
……
}
</style>
示例:
<div id="news">
<ul>
<li>诺基亚面对的最大风险是摇摆不定的微软!</li>
<li>真正的移动支付王者竟然是星巴克?</li>
<li>马云再度减持华谊兄弟股份 套现近亿元</li>
<li>报告称苹果在美智能手机市场统治地位继续扩大</li>
<li>戴尔和甲骨文扩大合作:联手开发商用产品</li>
</ul>
</div>
css
<style type="text/css">
#news {
background-color:#FFFFAA; /*设置背景颜色为浅黄色*/
font-size:12px; /*字体大小为12px*/
font-family:宋体; /*字体为宋体*/
width:330px; /*内容宽度为330px*/
}
</style>
4.3 CSS 扩展选择器
4.3.1 组合选择器
组合选择器(也称为并集选择器)将同样的定义应用于多个选择符。可以将选择符以逗号分隔的方式并为一个样式组,它的选择范围是各选择器范围的并集。任何形式的选择器都可以作为并集选择器的一部分,使用选择符组时,各选择器用逗号连接。
示例:
p,.red,#header {
color:red;
font-size:12px;
}
4.3.2 包含选择器
包含选择器也称为后代选择器,它主要用于选择元素的后代元素,所谓后代元素即该标签内的元素,经常称外层的标签为父标签,内层的标签为子标签。
示例:
<div id="header">
<ul class="menu">
<li><a href="#">家用电器</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">日用百货</a></li>
</ul>
</div>
后代选择器“#header ul li a”表示选择 id 为“header”标签下的 ul,ul 下的 li 标签,li 标签下的 a 标签。使用后代选择器比较灵活,且能较精确地选择页面元素。
4.3.3 交集选择器
交集选择器由两个选择器之间的连接构成,其结果是选中两者各自元素访问的交集。其中,第一个必须是标签选择器,第二个必须是类选择器或 id 选择器。这两个选择器之间不能有空格,必须连续书写。
示例:
p.red {
color: red;
font-size: 23px;
}
该代码中的“p.red”即为交集选择器,该选择器的范围是选中 p 标签中 class 属性值为 red 的所有元素。
4.3.4 伪类选择器
CSS样式表中还提供了一种伪类选择器,所谓伪类即根据标签处于某种行为或状态时的特征来修饰样式。伪类可以对用户与文档交互时的行为作出响应。
语法:
标签名:伪类名{
属性:属性值;
}
伪类 |
含义 |
应用场景 |
a:link |
未单击访问时的超链接样式 |
常用,超链接主样式 |
a:visited |
单击访问后的超链接样式 |
区分是否已被访问 |
a:hover |
鼠标悬浮在超链接上的样式 |
常用,实现动态效果 |
a:active |
鼠标单击未释放的超链接样式 |
少用,通常与 link 一致 |
示例:
<body>
<h1>This is H1</h1>
<h2>This is H2</h2>
<p class="warning">Real Warning!</p>
<span class="warning">Common Worning</span>
<p id="top">id选择符</p>
<h1><span>包含选择符</span>
<p><a href="#">这里是链接</a></p>
<p id="down">超链接标签的CSS伪类link,visited,hover,active,CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果。</p>
</body>
4.4 CSS 的特性
4.4.1 CSS 继承性
CSS3 的继承性,亦称为样式表的层叠性。样式表的继承规则是,所有在元素中嵌套的元素都会继承外层指定的样式,有时会将很多层样式叠加在一起,但另行更改除外。
示例:
<body>
<p>段落文字</p>
<p id="p1">段落文字</p>
</body>
body {
font-size: 12px;
font-style: italic;
}
#p1 {
font-size: 30px;
}
解释:在该示例中,p元素包含在元素body中,因此标签p中的内容会继承body定义的属性,即示例中的段落文字同样会以斜体的12像素大小的文字显示,除非定义新的样式。
注意:但是在某些特殊的情况下,内部选择符不继承包含它的选择符的属性值。例如,CSS 3上边界属性值是不会继承的。
4.4.2 CSS3 层叠性和优先级
层叠性是指当有多个选择器都作用于同一元素时,即多个选择器中的样式发生了重叠,CSS 会对其进行处理。
CSS 的处理原则如下:
如果多个选择器定义的样式规则不发生冲突,则元素将应用所有选择器定义的样式。
如果多个选择器定义的样式规则发生了冲突,则 CSS 按照选择器的优先级来处理,元素将应用优先级高的选择器定义的样式。
CSS样式优先级从高到低为:
CSS 规定选择器总原则是:越特殊的样式,优先级越高。
示例:
<body>
<p>CSS3 层叠性和优先级</p>
</body>
body { color:red; font-size:12px; }
p { color:blue; }
段落文字会继承 body 定义的 12px 大小,颜色则按照最后 p 定义的蓝色显示。不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级和 CSS 代码的定义优先级。
(1)CSS3 的选择符优先级从高到低依次为:id 选择符优先级最高,其次是类选择符,最后是元素选择符。
(2)CSS3 的定义优先级依照后定义优先的原则,依次为:优先级最高的是内嵌样式,其次是内部样式表,链入外部样式表和内部样式表之间则根据定义的先后顺序评定,即最后定义的优先级高。
示例:
<body>
<div>
<ul>
<li>手机</li>
<li class="sale">电脑</li>
<li class="blue">服装</li>
<li>食品</li>
</ul>
</div>
</body>
<style type="text/css">
div {
font-size:24px;
color:red;
}
.sale {
text-decoration:underline;
}
.blue {
color:blue;
}
</style>
4.4.3 综合案例
做一个商品图像浏览页面,该页面分为 3 个区域,分别是标题区、商品图像展示区和图像导航区。如果点击下面的导航小图像,则会在商品展示区展示该商品对应的大图像。
使用DIV+CSS实现页面布局
<div id="goods">
<h1>三星手机图片展示</h1><!--标题-->
<div id="show"> <!--大图片展示区-->
<ul>
<li></li>
......
</ul>
</div>
<div id="nav_box"><!--图片导航区-->
<ul id="nav">
<li></li>
......
</ul>
</div>
</div>
使用页面布局样式
<style type="text/css">
body, ul, li,h1{
margin:0px;padding:0px;border:0px;list-style-type:none;
}
/*标题栏样式*/
#goods h1 {
text-align:center;font-family:"微软雅黑";color:#808080;
}
/*商品展示框样式*/
#show { margin:0px auto;width:350px;height:500px;border:3px solid #ccc;
overflow:hidden;
}
/*图片导航栏*/
#nav_box {border:1px solid #808080;height:150px;}
</style>
在页面中点击导航栏中的小图像,在展示区内显示该商品的大图像。
<div id="goods">
<h1>三星手机图片展示</h1><!--标题-->
<div id="show"> <!--大图片展示区-->
<ul>
<li><a name="p1"></a><img src="data:images/b1.jpg" alt="手机"/></li>
......
</ul>
</div>
<div id="nav_box"><!--图片导航区-->
<ul id="nav">
<li><a href="#p1"><img src="data:images/b1.jpg" alt="手机"/></a></li>
......
</ul>
</div>
</div>
/*清除图片边框*/
a:hover,img { border:0px; }
/*商品展示区图片大小样式*/
#show img { width:350px;height:500px;}
/*导航*/
#nav {margin:0px auto; /*导航居中*/
height:150px; width:560px;}
#nav li{float:left; /*左浮动*/
width:100px;height:150px;
margin-right:10px; /*小图片右外边距的间隙*/
border:1px solid #ccc;}
/*导航区图片大小样式*/
#nav li img {width:100px;height:150px;}
总结:
- CSS是Cascading Style Sheet的缩写,可以翻译为“层叠样式表”或“级联样式表”,简称为“样式表”,利用CSS样式可以定义页面样式,将会大大减少设计工作量。
- CSS根据样式表的书写位置,可以将样式表分为外部样式表、内嵌样式表以及行内样式表。选择器是一种模式,用于选择需要添加样式的元素。常用的选择器有标签选择器、类选择器、ID选择器、组合选择器、包含选择器、交集选择器以及伪类选择器等。
- CSS规定选择器的优先级从高到低为:行内样式→ID样式→类样式→标签样式。其总原则是:越特殊的样式,优先级越高。
CSS的处理层叠性的原则是:
如果多个选择器定义的样式规则不发生冲突,则元素将应用所有选择器定义的样式。
如果多个选择器定义的样式规则发生了冲突,则CSS按照选择器的优先级来处理,元素将应用优先级高的选择器定义的样式。
HTML网页设计基础笔记 • 【第4章 CSS3基础】的更多相关文章
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- HTML网页设计基础笔记 • 【第6章 背景和阴影】
全部章节 >>>> 本章目录 6.1 背景属性 6.1.1 背景颜色 6.1.2 背景图片 6.1.3 背景图片的重复方式 6.2 背景图片的定位 6.2.1 backg ...
- 学习笔记 第十一章 CSS3布局基础
第11章 CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1 CSS盒模型基础 页面中所有元素基本显示形态为方形 ...
- 《利用python进行数据分析》读书笔记--第四章 numpy基础:数组和矢量计算
http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...
- WCF服务编程 读书笔记——第1章 WCF基础(2)
续:第1章 WCF基础(1) 元数据交换 服务有两种方案可以发布自己的元数据.一种是基于HTTP-GET协议提供元数据, 另一种则是后面将要讨论的使用专门的终结点的方式.WCF能够为服务自动提供基于H ...
- WCF服务编程 读书笔记——第1章 WCF基础(1)
第1章 WCF基础 本章主要介绍WCF的基本概念.构建模块以及WCF体系架构,以指导读者构建一个简单的WCF服务.从本章的内容中,我们可以了解到WCF的基本术语,包括地址(Address).绑定(Bi ...
- HTML网页设计基础笔记 • 【第5章 常用的样式属性】
全部章节 >>>> 本章目录 5.1 字体及文本属性 5.1.1 字体属性 5.1.2 文本属性 5.2 边距和填充 5.2.1 边距 5.2.2 填充 5.3 边框属性 ...
- HTML网页设计基础笔记 • 【第7章 盒子模型】
全部章节 >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...
- HTML网页设计基础笔记 • 【第3章 表单】
全部章节 >>>> 本章目录 3.1 表单 3.1.1 表单概述 3.1.1 表单概述(续) 3.1.2 表单标签 3.1.3 表单数据的提交方式 3.2 输入框和按钮 3 ...
随机推荐
- Java Jar包压缩、解压使用
什么是jar包JAR(Java Archive)是Java的归档文件,它是一种与平台无关的文件格式,它允许将许多文件组合成一个压缩文件. 如何打/解包使用jdk/bin/jar.exe工具,配置完环境 ...
- 在Eclipse中运行OSGI工程出错的解决方案
今天学习OSGI的过程中按照书上所述搭建好第一个helloworld插件工程,运行的过程中出现下面所示的错误: !SESSION 2014-06-09 21:04:49.038 ----------- ...
- Dubbo管控平台
2019年初,官方发布了Dubbo管理控制台0.1版本.结构上采取了前后端分离的方式,前端使用Vue和Vuetify分别作为Javascript框架和UI框架,后端采用Spring Boot框架 一. ...
- Kafaka相关命令
开启zookeeper命令(备注:先进入zookeeper的bin目录) ./zkServer.sh start 关闭zookeeper命令(备注:先进入zookeeper的bin目录) ./zkSe ...
- 封装一个按Key排序的Map工具
Map是集合的存放顺序是按哈希值定的,有时候不是我们需要的,当想要一个按自己规定顺序存放顺序,可以用LinkedHashMap,这里自己把LinkedHashMap封装了一次 package test ...
- maven常用命令(待补充)
1.mvn clean 删除已经编译好的信息 2.mvn compile 编译src/main/java目录下的.java文件 3.mvn test 编译src/main/java和src/test/ ...
- logstash 正则表达式
正则表达式 3. 使用给定好的符号去表示某个含义 4. 例如.代表任意字符 5. 正则符号当普通符号使用需要加反斜杠 正则的发展 6. 普通正则表达式 7. 扩展正则表达式 普通正则表达式 . 任意一 ...
- Alamofire-5.0.0 以上报错
摘要 Alamofire 更新到新版本时,遇到了两个错误和一个警告️,所以记录下来它们,以及如何解决它们.给其他出现类似问题的同道一些解决的方向. 今天新开启一个项目,因为网络请求选择 Alamofi ...
- eslint使用和配置
1.全局安装 $ npm install -g eslint 2.初始化一个配置文件,得到一份文件名为 .eslintrc.js 的配置文件 eslint --init 3.配置.eslintrc.j ...
- 第四届“传智杯”全国大学生IT技能大赛题解
目录 A B C D E F G 今年题目难度普遍偏低.只有 D,F 还好. A 按题目给的公式计算即可.注意应在最后的答案中去掉小数部分. B 按照题意模拟即可.注意答案要与 \(0\) 取 \(\ ...