CSS --- Cascading Style Sheets 层叠样式表
Cascading 层叠: 一种样式叠加在另一种样式的一种方式
Style Sheets 样式表: 控制网页文档外观和感观.
CSS 和HTML是工作在一起的:
HTML: 构建出网页的结构
CSS: 定义HTML元素如何显示
问题: 样式表的作用?
答案: 控制网页文档外观和感观.
为什么使用CSS?
CSS 允许你对指定的HTML元素应用指定的样式.
CSS的主要好处是允许你把样式和内容分离。
只使用HTML, 所有的样式和格式都在一起,随着页面的内容增加，将增加维护难度.
所有格式可以(应该可以)从HTML文件中移除并存储在单独的CCS文件中.
内联CSS
使用内联样式是其中一种插入样式表的方式,使用内联样式,独有的样式被应用在单一的HTML元素上.
为了使用内联样式,可以在相关的表签上添加style属性.
下面的例子展示如何使 P元素获得灰色的背景和白色的文本:
<!DOCTYPE html>
<html lang="zh-cn">
<body>
<p style = "color: white; background-color:gray;">
这是一个内联样式的例了
</p>
</body>
</html>
嵌入/内部CSS
内部样式是被定义在<style>元素内的,在HTML页面中的head部份.
例如:下面的代码应用在所有的P元素中:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<p>这是我的第一个段落</p>
<p>这是我的第二个段落</p>
</body>
</html>
12.PNG
外部 CSS
使用这种方法,所有样式规则被包含在一个文本文件中,这个文本文件的扩展名为.css.
这个CSS文件在HTML文件使用<link>表签来引用,<link>元素被包含在head部分.
下面是个例子:
HTML文件:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>这是我的第一个段落</p>
<p>这是我的第二个段落</p>
<p>这是我的第三个段落</p>
</body>
</html>
CSS文件:
p {
color: white;
background-color: gray;
}
A.PNG
层级
一个网页的最终呈现是各种样式规则的结果.
形成层级样式信息的主要三种来源:
---来自网页作者创建的样式
---来自浏览器默认的样式
---来自用户指定的样式
CSS是Cassading Style Sheets的首字母缩写.
Inheritance 继承
继承是指属性在网页中的流动行式, 除非有指定定义外,一个子元素通常会具有其父级元素的特征.
例如:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>这是在段落中的文本</p>
</body>
</html>
A.PNG
因为 P标签(子元素)在body标签的内部(父级元素),它具有body标签中所有的样式.
阶段小结
三种样式来源中，哪一种是网站最优的选择? (A)
A: 外部
B: 内联
C: 内部
当使用内部样试的时候,"style"属于以下哪种性质? (C)
A: value 值
B: property 属性
C: tag 标签
样式的定义规则包含:选择器, 属性和值
补充空格上的内容使得P元素具有白色文本的样式
p {___ #FFF;}------答案： color:
网友评论