CSS基础-基本概念

This entry is part 1 of the seriesenjoy-css

CSS介绍

众所周知 HTML 是每个网页的基本结构,但它本身在视觉上没有任何吸引力。为了让网页变得美观，我们可以使用CSS来为网页添加样式。

CSS语法解析

在日常开发中我们有三种编写CSS代码的方式

规则集(Rulesets)：
- 内部样式表(Internal Stylesheet)：定义在HTML的<style>标签中
- 外部样式表(External Stylesheet)：定义在独立的.css 文件中, 通过[<link>] 标签引入html
内联样式(Inline styles): 在HTML元素的 style 属性中定义

规则集使用以下语法来选择目标元素并设置样式：

css

/* Start of Ruleset */
selector:pseudo-class::pseudo-element {

  /* Declaration */
  property: value;

}
/* End of Ruleset */

与规则集不同的是，内联样式直接作用于单个元素：

html

<element style="property: value">Hello world!</element>

让我们用👇下面的Demo同时解析下两种方式的语法组成:

规则集:

p {

color:red;

font-size:1.2rem;

}

内联样式:

<p style= '

color : red;font-size: 1.2rem

'>Hello World!</p>

选择器-指向要设置样式的HTML元素

CSS创建

规则集-内部样式表

要创建内部样式表，需要将<style>放置在<head>元素内部

Code Playground

<html>
  <head>
    <style>
      .my-custom-rule {
        color: red;
        font-size: 1.2rem;
      } 
    </style>
  </head>
  <body>
    <p class="my-custom-rule">
      I want to be red color and larger size
    </p>
    <p>
      I want to be default color and normal size
    </p>
  </body>
</html>

规则集-外部样式表

首先我们在styles.css 文件中声明好样式

css

.my-custom-rule {
  color: red;
  font-size: 1.2rem;
}

这样我们就实现了结构(HTML)与样式(CSS)的分离。

然后我们可以使用<link>元素将HTML和CSS连接起来

html

<link href="styles.css" rel="stylesheet">

href: 被链接资源的路径，此处为CSS文件的路径
rel: 此属性命名链接文档与当前文档的关系

Code Playground

<html>
  <head>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <p class="my-custom-rule">
      I want to be red color and larger size
    </p>
    <p>
      I want to be default color and normal size
    </p>
  </body>
</html>

内联样式

Code Playground

<html>
  <body>
    <p style="color: red; font-size: 1.24rem">
      I want to be red color and larger size
    </p>
    <p>
      I want to be default color and normal size
    </p>
  </body>
</html>

Table of Contents

CSS基础-基本概念

CSS介绍

CSS语法解析

CSS创建

规则集-内部样式表

规则集-外部样式表

内联样式

Questions? Let's chat

A TypeScript Full Stack Blog