CSS01：样式分类

CSS（Cascading Style Sheets），称为层叠样式表

CSS的功能：美化网页（文字、颜色、边距、高度、宽度、背景、定位、浮动、阴影、超链接、列表、渐变......）、浮动、定位、网页动画（特效）

优点：内容和样式分离、网页结构表现统一、可以复用、样式丰富、利于SEO

CSS样式分类

行内样式、内部样式表、外部样式表

生效优先级：最近原则

行内样式最优先；如果没有行内样式，内部样式表和外部样式表谁离的更近谁优先

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>我的网页</title>

    <!--内部样式表-->
    <!--样式标签-->
    <!--
    选择器名 {
        声明（属性名: 属性值）;
        声明（属性名: 属性值）;
    }
    -->
    <style>
        h1{
            color: red;
        }
    </style>

    <!--外部样式表-->
    <!--link标签-->
    <!--为了实现内容和样式分离，在单独的css文件中编写样式，然后通过link标签链接外部样式表-->
    <!--
    rel：指定链接的是样式表
    href：样式表文件路径
    -->
    <link rel="stylesheet" href="./CSS.css">

</head>

<body>

<h1>一级标题</h1>

<!--行内样式-->
<!--
style：标签内样式属性
-->
<h2 style="color: blue">二级标题</h2>

</body>

</html>

h1{
    color: red;
}

拓展：外部样式表两种写法

  • link标签链接式（link是HTML标签，只能在HTML源代码使用）
<link rel="stylesheet" href="./CSS.css">
  • @import导入式（CSS2.1特有的，不常用了）
<style>
    @import "./CSS.css";
</style>
posted @ 2022-03-17 17:48  振袖秋枫问红叶  阅读(143)  评论(0)    收藏  举报