CSS 之基础

CSS --- Cascading Style Sheets 层叠样式表

Cascading 层叠: 一种样式叠加在另一种样式的一种方式

Style Sheets 样式表: 控制网页文档外观和感观.

CSS 和HTML是工作在一起的:

HTML: 构建出网页的结构

CSS: 定义HTML元素如何显示

问题: 样式表的作用?

答案: 控制网页文档外观和感观.

为什么使用CSS?

CSS 允许你对指定的HTML元素应用指定的样式.

CSS的主要好处是允许你把样式和内容分离。

只使用HTML, 所有的样式和格式都在一起,随着页面的内容增加，将增加维护难度.

所有格式可以(应该可以)从HTML文件中移除并存储在单独的CCS文件中.

内联CSS

使用内联样式是其中一种插入样式表的方式,使用内联样式,独有的样式被应用在单一的HTML元素上.

为了使用内联样式,可以在相关的表签上添加style属性.

下面的例子展示如何使 P元素获得灰色的背景和白色的文本:

这是一个内联样式的例了

嵌入/内部CSS

内部样式是被定义在

这是我的第一个段落

这是我的第二个段落

12.PNG

外部 CSS

使用这种方法,所有样式规则被包含在一个文本文件中,这个文本文件的扩展名为.css.
这个CSS文件在HTML文件使用表签来引用,元素被包含在head部分.
下面是个例子:
HTML文件:

    



    
这是我的第一个段落
    
这是我的第二个段落
    
这是我的第三个段落

CSS文件:

p {
    color: white;
    background-color: gray;
}

A.PNG

层级

一个网页的最终呈现是各种样式规则的结果.
形成层级样式信息的主要三种来源:
---来自网页作者创建的样式
---来自浏览器默认的样式
---来自用户指定的样式
CSS是Cassading Style Sheets的首字母缩写.

Inheritance 继承

继承是指属性在网页中的流动行式, 除非有指定定义外,一个子元素通常会具有其父级元素的特征.
例如:

    


    
这是在段落中的文本

A.PNG

因为 P标签(子元素)在body标签的内部(父级元素),它具有body标签中所有的样式.

阶段小结

三种样式来源中，哪一种是网站最优的选择? (A)
A: 外部
B: 内联
C: 内部

当使用内部样试的时候,"style"属于以下哪种性质? (C)
A: value 值
B: property 属性
C: tag 标签

样式的定义规则包含:选择器, 属性和值

补充空格上的内容使得P元素具有白色文本的样式
p {___ #FFF;}------答案： color: