CSS入门指南 - 第一课：初探CSS

发表时间: 2021-09-25 18:38

网页组成部分

（1）结构 html （2）表现 css （3）行为 js

css 层叠样式表

网页实际是一个多层的结构，通过css可以分别为网页的每一个层来设置央视而最终我们能看到知识网页的最上边一层。总之一句话，css用来设置网页中元素的样式

css三种引用方式

1、第一种方式（内联样式，行内样式）在标签内部通过style属性来设置元素的样式

缺点：使用内联样式，样式只能对一个标签生效如果希望影响多个元素必须在每一个元素中都复制一遍，样式发生改变时，必须要一个个修改不易维护真正开发时绝对不要使用内联样式

<p style="color:red;font-size: 60px;">落霞与孤鹜齐飞秋水共长天一色</p>

2 、第二种方式将样式编写到head中的style标签中（内部样式表）

将样式编写到head中的style标签中，然后通过css样式选择器设置样式，可同时对多个标签设置样式内部样式表更加方便对样式进行复用

缺点：不能跨页面使用样式

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">            // 内部样式表           p{                color:pink;            }        </style>    </head>    <body>        <p>教父</p>        <p>教父2</p>    <span>我看过教父</span>    </body></html>

3、第三种方式（外部样式表）（推荐）

可以将css样式编写到一个外部的css文件中外部样式表需要link标签引用 , 这样就可以在不同页面之间进行复用将样式编写到外部的css文件中，

优点：可以用到浏览器的缓存机制，提高网页加载速度，提升用户体验

    <head>        <meta charset="utf-8">        <title></title>        <!-- 外部样式表需要link标签引用 -->        <link rel="stylesheet" type="text/css" href="./style.css"/>    </head>

CSS入门指南 - 第一课：初探CSS

网页组成部分

css 层叠样式表

css三种引用方式

热门阅读

推荐阅读