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>