CSS简介

阿伏加德罗卓姬

于 2022-08-15 17:45:33 发布

阅读量116

点赞数 1

分类专栏：前端学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_52775879/article/details/126351305

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页分成三个部分：
结构(HTML)
表现(CSS)
行为(JavaScript)

CSS

层叠样式表
网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式

而最终我们能看到只是网页的最上边一层

总之一句话，CSS用来设置网页中元素的样式

1.使用CSS来修改元素的样式

第一种方式(内联样式，行内样式)

在标签内部通过style属性来设置元素的样式
问题：
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中都复制一遍
并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
注意：开发时绝对不要使用内联样式

第二种方式（内部样式表）

将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
内部样式表更加方便对样式进行复用
问题：
我们的内部样式表只能对一个网页起作用，
它里边的样式不能跨页面进行复用

第三种方式（外部样式表）最佳实践

可以将CSS样式编写到一个外部的CSS文件中,
然后通过link标签来引入外部的CSS文件
外部样式表需要通过link标签进行引入，
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
如例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
 	 <p>落霞与孤鹜齐飞，秋水共长天一色</p>
     <p>少小离家老大回，乡音无改鬓毛衰</p>    
</body>
</html>