css简介

css简介

背景

什么是CSS?

CSS(Cascading Style Sheets) 层叠样式表的简称。CSS语言是一种标记语言，他不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）。在标准网页设计中CSS负责网页内容的表现。

  • 样式定义如何显示HTML元素

  • 样式通常存储在样式表中

  • 将样式添加到HTML4.0中是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在CSS文件中

  • 多个样式定义可以层叠为一个

css和html有什么区别

html是超文本表级语言，可以定义网页的元素；css定义网页元素的样式；js使网页具有动态性。

我的第一个CSS程序

示例一： 内部样式

css代码和html代码可以合二为一，css代码写在 head中style标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个CSS文件</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>

示例二： 外部样式

css代码剥离出来，在htmlhead中的link标签中链接进去

/*css/style.css */
h1 {
    color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个CSS文件</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>一级标题</h1>
</body>
</html>

示例三： 行内样式和内部样式比行内样式优先级更高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个CSS文件</title>
        <style>
            h1 {
                color: blue;
            }
        </style>
    <!--    <link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<h1 style="color:red">一级标题</h1>
</body>
</html>

样式四： 外部样式：导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个CSS文件</title>
    <style>
        @import "css/style.css";
    </style>
    <!--    <link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
posted @ 2022-03-29 17:08  Oh,mydream!  阅读(172)  评论(0)  编辑  收藏  举报