HTML 引入 CSS 的几种方式

时间：2021-05-02 20:26:37

最近刚开始在学习前端的相关知识，学习新的一门语言确有一定的挑战。尤其学习前端，除了需要了解到一些基础的知识比如 html , css , js ，还要学会使用被广泛使用的一些架构，比如 AngularJS , jQuery , Bootstrap 等。万事开头难，其他废话就不说了，这里记录以下 html 引入 css 的几种方式吧。

一、嵌入式

嵌入式需要在使用这些样式之前，定义你所需要使用的 CSS 样式。 嵌入式也有不同的方式：

1、直接为 html 自带的标签定义样式，比如 header , body , nav 等。这样，整个标签内的内容都会有这种样式。

//定义：
header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
}

//使用：（由于是 html 自带的标签，所以可以直接使用）

<header>我是HEADER</header>

2、自定义类，为该的类添加样式：

//定义：(自定义类名前面加个点)
.mystyle {
  background-color: green;
  color: yellow;
}

//使用：（把定义的 class 用内联的方式 引入到标签中）

<p class="myStyle">
  我的一个段落，样式是myStyle。
</p>

如果想让该类只用于某个单独的标签，比如 p 标签，那么只需要在 . 前面加上 p 就好了,如：

p.mystyle {
  background-color: green;
color: yellow;
}
这样，就只有 p 标签能通过 class=mystyle 引用了。

3、自定义属性，为该属性添加样式

//定义：(属性名前面加个#)
#myAnotherStyle {
  background-color: red;
  color: gold;
}

//使用：（通过id,把定义的样式内联到标签 p ）
<p id="myAnotherStyle">
  我的一个段落，样式是myAnotherStyle
</p>

二、内联式

内联式引用就是在标签里直接定义并使用。每一个标签可以直接定义样式。但所定义的样式只能用于该标签里的内容，对外部的同名的标签是不起作用的。 如

<video width="480" height="320" style="float: right;margin: 80px" controls="controls" >
<source src="http://video.boohee.cn/fit/c20.mp4" type="video/mp4">
</video>

上面就是在 video 标签里内联了 width、 height、style 等属性。

三、外部引用

通过 link 标签从外部引入 css 样式。

<link rel="stylesheet" type="text/css" href="该 css 的路径/url" >

以上就是在学习过程中总结的到的HTML 引入CSS 的几种方式了。或许还有其他的方式，文中也或许有不足和错误，欢迎批评指正。
标签：

相关文章