CSS引入方式-入门学习笔记

CSS简介

css英文全称Cascading Style Sheets 层叠样式表,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。当前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发中。

CSS的引入方式

1.内联方式

指的是直接在HTML标签中 style 属性中添加CSS

<div style="background: yellow"></div>

缺点:内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。

2.嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码

<head>
    <style>
     .content {
        background: red;
     }
    </style>
</head>

此时只针对当前页面代码有效,因为代码集中,常用于模板便于一目了然查看代码信息。缺点:同样是页面复杂时会导致代码冗余,也不利于维护。

3.链接方式

指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件

<head>
    <link rel="stylesheet" type="text/css" href="./demostyle.css">
</head>

链接方式是最常采用引入CSS的方式,此时CSS存在单独的页面CSS文件中,便于维护,而且CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。

4.导入方式

指的是使用 CSS 规则引入外部 CSS 文件

<style>
    @import url(./demostyle.css);
</style>

导入方式用于在CSS文件中引入另一CSS文件。


笔记

在使用链接方式时,HTML标签需加入class并命名

<div class = "top"></div>

在CSS文件中的添加属性

.top{
    background:black;
    color:white;
}

注意class的命名前需加上 .
标签添加属性时不需要加点

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容