HTML + CSS 连载 | 04 - CSS 基础

RiemannHypo
VIP.5 如鱼得水
119 阅读4分钟

html+css.jpeg

一、认识 CSS

前面我们了解了 h 元素、p 元素、div 元素和 span 元素等，其中 h 元素和 p 元素都是语义化元素，即包含了特定的样式，而 div 和 span 是不包含特定的样式的

image.png

image.png

当然我们也可以通过添加样式将 span 元素变成 div，将 div 变成 h1

image.png

image.png

我们也可以通过浏览器的检查工具来查看样式

image.png

h1元素本身自带的样式是浏览器添加的，但是我们通过 CSS 来实现同样的效果。

CSS 即 Cascading Style Sheet，表示层叠样式表，也称为串样式列表、级联样式表、串接样式表或者阶层式样式表，是用来为网页添加样式的代码。

CSS 不是真正的变成语言，甚至不是标记语言，它只是一门样式表语言。

CSS 的出现是为了美化 HTML 的，并且让结构（HTML）与样式（CSS）分离，我们可以为 HTML 添加各种样式，如颜色、字体、大小或者下划线等，也可以对 HTML 进行布局，按照某种结构显示。

CSS 样式的编写规则

声明一个单独的 CSS 规则时，需要包含属性名和属性值，属性名为要添加的 CSS 规则的名称，属性值则为 CSS 规则的值，如添加一个颜色的 CSS 样式为 color: red，但是 CSS 应该放在哪里呢？

CSS 提供了 3 种书写方式将 CSS 应用到元素上，分别是：

  • 内联样式 inline style
  • 内部样式表 internal style sheet、文档样式表 document style sheet、内部样式表 embed style sheet
  • 外部样式表 external style sheet

这三种书写方式在以后的开发中都会用到。

内联样式

内联样式存在于 HTML 元素的 style 属性之中，上一节我们讲到 style 属性是 HTML 元素的全局属性，即所有的 HTML 元素都具有 style 属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 内联样式 -->
  <div style="color: red; font-size: 30px">这是包含内联样式的 DIV 元素</div>
  <h1 style="color: aquamarine; font-size: 100px;">这是包含内联样式的 h1 元素</h1>
</body>
</html>

在浏览器中打开 HTML 文件，设置的样式效果如下：

image.png

多个 CSS 样式之间使用 ; 分隔开，建议每条 CSS 样式后面都加上 ;，内联样式的写法在原生 HTML 编码过程中是不推荐的，但是在 Vue 框架中的 template 中某些动态的样式是会使用内联样式的。

内部样式

将 CSS 样式放在 HTML 文件的 <head> 元素的 style 元素中，在 Vue 的开发过程中，每个组件也会有一个 style 元素，和内部样式非常相似，但是两者原理并不相同。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 内部样式 -->
  <style>
    /* CSS 选择器，选择 div 元素设置样式 */
    div {
      color: red;
      font-size: 20px;
      background-color: orangered;
    }
  </style>
</head>
<body>
  <div>DIV 元素</div>
  <p> P 元素</p>
  <h1> h1 元素</h1>
</body>
</html>

image.png

外部样式

外部样式表是将 CSS 编写在一个独立的文件中，并且通过 <link> 元素引入到 HTML 文件中；使用外部样式表主要分为两个步骤，首先将 CSS 样式在一个独立的文件中编写，然后在通过 <link> 元素引入到 HTML 中。

在 HTML 文件同级目录下创建一个 css 文件夹，在该文件夹下创建 style.css 文件，用来编写样式，具体代码如下：

div {
  color: red;
  font-size: 20px;
  background-color: aqua;
}

HTML 文件中的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--引入外部的 CSS 文件-->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div>DIV 元素</div>
</body>
</html>

在 style.css 文件中设置的样式生效，效果如下：

image.png

在定义 CSS 的时候，我们也可以将相同的 CSS 样式进行抽取，当 CSS 文件比较多的时候，可以在一个 CSS 文件中通过使用 @import 关键字引入另外一个 CSS 文件，在 css 文件夹中创建一个 index.css 文件，在该文件中引入 style.css，代码如下：

@import url(./style.css);

在 HTML 中引入 index.css，样式同样能够生效，通过引入的方式可以更方便的管理多个 CSS 文件。

CSS 注释

CSS 中的注释和 HTML 中的注释是不一样的，CSS 中通过以下方式来表示

/*CSS注释内容*/

二、CSS 相关文档

CSS 开发中最常用的属性包含以下几个类别，分别是：

  • 定位和布局
  • 展示和可见
  • 盒模型
  • 背景
  • 字体、文本
  • 其他

具体的可以通过 CSS 官网文档查看，除此之外 MDN 上也有相关的 CSS 文档。

需要注意的是由于浏览器版本或者 CSS 版本的问题，可能会导致某些 CSS 在某些版本的浏览器中无法使用，可以通过查询 caniuse 这个网站来查看适用的版本。

avatar
文章
阅读
粉丝