CSS3-(初探)基本使用

CSS简介

CSS又叫做层叠样式表，层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步的交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

最基础的CSS元素及属性：（CSS元素几乎可以针对全局的元素）

Style元素

Font-size 设置文本大小的属性
Color 设置文本颜色的属性（需要真彩色值，对应6位十六进制的值）

在使用上有三种样式表分类：分别为元素内嵌样式表，文档内嵌样式表，外部样式表

1.元素内嵌样式表

直接在标签内部，style属性里写入css样式

实例1:

在EmbeddedCSS.html 文件中

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin EmbeddedCSS_Test</title>
</head>

<body>

    <body>
        <a>欢迎来到MelanceXin's CSDN</a>
        <br>
        <a style="font-size:40px">欢迎来到MelanceXin's CSDN</a>
        <br>
        <a style="font-size:30px;color:#4d9b67"  >欢迎来到MelanceXin's CSDN</a>
    </body>
</body>

</html>

以上用到的为元素内嵌样式表，在body标签内部。
而文档内嵌样式表，是在head标签内部进行书写

2.文档内嵌样式表

实例2：

在DocInnerCSS.html 文件中

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin DocInnerCSS_Test</title>
    <style type="text/css">
        a {
            font-size: 40px;
            color: #345cff;
        }
    </style>
</head>

<body>

    <body>
        <a>欢迎来到MelanceXin's CSDN</a>
    </body>
</body>

</html>

3.外部样式表

实例3：

在css/test.css 文件中

a{
    font-size:40px;
    color:#5069cc;
}

在ExternalCSS.html文件中

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin ExternalCSS_Test</title>
    <!-- 引用css -->
    <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
    <a>欢迎来到MelanceXin's CSDN</a>
</body>

</html>

元素内嵌样式表，文档内嵌样式表，外部样式表的适用范围的区别:

作用：在多个地方同时对同一个元素（同一个标签）进行定义。
依次优先级（覆盖）关系：

内嵌样式表>文档内嵌样式表>外部样式表

层叠样式表的由来及含义：由三种样式表进行层层覆盖之前的属性值。
说明：

元素内嵌样式表不同属性值需要用分号分隔开
文档内嵌样式表一般放在 <head>中
外部样式表需要创建一个新的css文档
样式表层叠方式有限考虑元素内嵌样式表，然后是文档样式表，最后才是外部样式表

作用效果优先级：内嵌样式表>文档内嵌样式表>外部样式表