如何使用CSS

13 iug^

于 2024-09-29 16:43:27 发布

阅读量236

点赞数 3

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2401_87197766/article/details/142578306

版权

CSS（cascading style sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。

一、CSS样式规则

有两部分组成:选择器和声明。

可以分为三种：行内式，内嵌式和外链式

1.行内式：通过指定标签style属性的方式编写CSS样式（任何HTML标签都拥有style属性）

 <h2 style="color: red; font-size: 30px; font-family:楷体 ;">
        引用CSS的方法：行内式
 </h2>

2.内嵌式：通过<style>标签定义样式，将CSS代码集中写在HTML文档的<head>标签中

<head>
    <style>h3{color: brown;font-family: 楷体;}</style>
</head>
<body>
    <h3>引用CSS的方法：内嵌式</h3>
</body>

3.外链式：通过<link>标签将定义了样式的一个或多个CSS文件链接到HTML文档中。

 <link rel="stylesheet" href="F:\Web前端开发技术\css\style.css " >

rel：定义当前文档与被链接文档之间的关系，需要指定为“stylesheet”,表示被链接的文档是一个样式表文件；

href:定义所链接外配样式表文件的URL，可以是相对路径，也可以是绝对路径。

（1）其中CSS文件命名规范：①存放CSS文件的文件夹，一般命名为css或者style；②项目初期为了方便调试，按样式类别编写多个不同的CSS文件；在项目后期从性能考虑会将多个CSS文件整合到一个CSS文件，一般命名为style.css。

（2）外链式的优势：①所有网页都通过<link>链接到同一个CSS文件，从而共用样式表。②CSS文件共享在促进代码重用的同时，有助于简化代码和缩小HTML文件。③若浏览器缓存了CSS样式表，网站其他网页加载会很快。④想调整网站外观时，只需要调整CSS文件即可。

（3）如何理解层叠样式表的“层叠”二字？

层叠是指当在HTML文档中引用多个CSS样式文件时，若多个样式文件所定义的样式之间发生冲突，将依据样式优先级进行处理。若不考虑样式的优先级，一般遵循“后来居上”原则。

关注