CSS概览

最新推荐文章于 2024-10-09 20:00:56 发布

_老杨_

最新推荐文章于 2024-10-09 20:00:56 发布

阅读量233

点赞数

分类专栏：前端入门知识整理文章标签： css html 内联样式内部样式表外部样式表

本文链接：https://blog.csdn.net/evanyanglibo/article/details/121306983

版权

前端入门知识整理专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、什么是CSS

CSS (Cascading Style Sheets 层叠样式表) 用于给网页内容加样式，比如改变标题和链接的颜色及大小，它也可用于创建布局，比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。

2、内联样式

内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素：

 <p style="color:black;font-size: 16px;">这是一段黑色的文字，文字尺寸16像素</p>

以上style属性可以设置段落文字显示为黑色，且文字尺寸为16像素。

如果页面中有多个元素需要设置相同的样式时，按照上述写法代码如下：

<p style="color:black;font-size: 16px;">这是第一段黑色的文字，文字尺寸16像素</p>
<p style="color:black;font-size: 16px;">这是第二段黑色的文字，文字尺寸16像素</p>
<p style="color:black;font-size: 16px;">这是第三段黑色的文字，文字尺寸16像素</p>
<p style="color:black;font-size: 16px;">这是第四段黑色的文字，文字尺寸16像素</p>
<p style="color:black;font-size: 16px;">这是第五段黑色的文字，文字尺寸16像素</p>

这里只举例了5个段落设置相同的样式，可以发现每个段落都设置了相同的属性 style="color:black;font-size: 16px;"，实际项目中更多的情况是元素的style属性有很多的参数需要设置，这就会导致我们的代码看起来非常冗长。

3、内部样式表

为了解决上述代码冗长的问题，HTML提供了<style>标签，可以将多个元素通用的样式提取出来进行统一设置，再设置元素的class属性与统一设置的样式类名进行关联生效。

<html>
<head>
    <meta charset="utf-8">
    <title>CSS概览</title>
    <style type="text/css">
        .p-black {
            color: black;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p class="p-black">这是第一段黑色的文字，文字尺寸16像素</p>
    <p class="p-black">这是第二段黑色的文字，文字尺寸16像素</p>
    <p class="p-black">这是第三段黑色的文字，文字尺寸16像素</p>
    <p class="p-black">这是第四段黑色的文字，文字尺寸16像素</p>
    <p class="p-black">这是第五段黑色的文字，文字尺寸16像素</p>
</body>
</html>

其中<style>标签的type="text/css"属性，说明标签内部书写的内容是标准的 CSS。

<p>标签的 class="p-black" 属性指定了它的样式类名为 p-black

CSS中使用的选择器除了类名选择器外还有更多其他的选择器，这部分内容后续单独开篇说明。

4、外部样式表

为了让多个页面能够共享一些通用的样式，减少代码冗余，方便后续修改维护，推荐采用外部样式表的方式为页面设置样式。

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并通过<link>标签进行引用。

本例中可以将以下代码保存在单独的index.css文件中：

.p-black {
      color: black;
      font-size: 16px;
 }

然后再通过<link>标签进行引用：

<html>
<head>
    <meta charset="utf-8">
    <title>CSS概览</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p class="p-black">这是第一段黑色的文字，文字尺寸16像素</p>
    <p class="p-black">这是第二段黑色的文字，文字尺寸16像素</p>
    <p class="p-black">这是第三段黑色的文字，文字尺寸16像素</p>
    <p class="p-black">这是第四段黑色的文字，文字尺寸16像素</p>
    <p class="p-black">这是第五段黑色的文字，文字尺寸16像素</p>
</body>
</html>

其中<link>标签的属性 rel="stylesheet" 表示链接关联的是样式文件

属性 href="index.css" 表示链接文件相对的文件路径为index.css，直接的文件名表示index.css文件与网页文件位于同一目录下。

如果样式文件位于一个叫style的文件夹下 href属性值应该为： "style/index.css"

相对的文件路径需要向上级目录跳转时可以用 ../ 表示向上一级目录跳转，对应的href属性值可以为： "../style/index.css"

本篇介绍了CSS的使用方式，为了代码规范及维护方便一般都推荐采用引用外部样式表的方式进行样式设置。