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 的几种方式了。或许还有其他的方式,文中也或许有不足和错误,欢迎批评指正。