CSS 之基础

2019-12-16 本文已影响0人 victorivy

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: