前端开发 CSS

「前端开发」 -

CSS-Introduction

CSS简介

Posted by eliochiu on October 18, 2022

CSS简介

CSS（Cascading Style Sheet， 层叠样式表），是一个声明式样式语言，主要负责网页的样式。

声明

CSS主要由选择器和声明组成，例如，希望让p元素内的文字变成红色：

1
2
3

p {
    color: red;
}

其中，p {}是一个元素选择器，color: red;是一条声明，声明采取名值对形式。

CSS引入

CSS主要通过三种方式引入到HTML中：外部样式表、内部样式表以及行内样式。

行内样式

如果只想为某个元素提供少量样式，则可以使用行内样式，他通过元素的style属性声明：

1

<p style="color: red">这是一段红色的文字</p>

如果需要给元素指定多个样式声明，声明间需要用分号隔开，例如：

1

<p style="color: red; font-size: 16px;">这是一段红色的文字</p>

通常不建议使用style标签为元素指定样式（因为它违背CSS设计的初衷），这种方式复用性差、可维护性差。

内部样式表

如果想为整个HTML页面制定统一的样式，可以在head标签中通过<style></style>标签指定样式，例如：

1
2
3
4
5
6
7
8
9
10
11

<head>
    <meta charset="utf-8">
    <title>...</title>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>

这种方式一定程度上摒弃了行内样式的缺陷，但复用性仍不够强，只能对当前页面起作用。

外部样式表

通常情况下，CSS样式应该存储在.css文件当中，然后通过link标签引入至HTML页面。

1
2
3
4
5

<head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" href="style.css">
</head>

@import

除了使用link标签，也可以使用@import url(stylesheet)的方法引入外部样式表

1
2
3
4
5

<head>
    <meta charset="utf-8">
    <title>...</title>
    <style>@import url(style.css)</style>
</head>

注意：@import语句必须放在style标签中

CSS空白与注释

CSS对待空白的方式和HTML类似，即连续多个空白会变成一个空白。虽然如此，我们还是要注意CSS的代码风格：

  • 选择器和花括号中间有一个空格。
  • 每一条声明独占一行。
  • 所有声明都要以分号结尾。

CSS只有一种注释/* This is a CSS comment. */，这是一个多行注释。 CSS并没有类似//的单行注释。

CATALOG
    ▲ TOP