css初步了解-优快云博客

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

style:任意标签中可添加的属性标签。

那么再认识一下css森严的等级分布，我们叫他为优先级。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1{
        color: red;
    }
    .name{
        color: black;
    }
    #hello{
        color: blue;
    }
</style>
<body>
    <h1 style="color: aqua;" class="name" id="hello">我是标题一</h1>
</body>
</html>

在上面h1标签中添加了style，class，id，可运行的结果，却只显示style定义。

那么换种形象的比喻方式，style是大哥，id是二哥，class是三哥，h1自己就是四弟最小的。

上面style大哥定下了规矩。看看style大哥走了，那么就由id二哥管理。

各位有着不同的脾气自然需要用不同的方法对应，如图#hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1{
        color: red;
    }
    .name{
        color: black;
    }
    #hello{
        color: blue;
    }
</style>
<body>
    <h1 class="name" id="hello">我是标题一</h1>
</body>
</html>

可忘记对应id二哥的方式时，就由class三哥接管.name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1{
        color: red;
    }
    .name{
        color: black;
    }
    hello{
        color: blue;
    }
</style>
<body>
    <h1  class="name" id="hello">我是标题一</h1>
</body>

</html>

最后没有任何管理的h1，想变什么颜色就变什么颜色，但最终变成最后的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1{
        color: red;
    }
    h1{
        color: chartreuse;
    }
    h1{
        color: darkgoldenrod;
    }
</style>
<body>
    <h1>我是标题一</h1>
</body>

</html>

三种引入css

上面，讲述了在标签内设置，在style内引入，共两种。

第三种引入一个css属性的文件

注意在head内添加link标签时，如路径在同一个文件夹内，需要开头写出文件夹名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../HTMl专栏/styles.css">
</head>

<body>
    <h1>我是标题一</h1>
</body>

</html>