App下載

HTML怎么引入CSS？

猿友 2021-03-17 11:36:31 瀏覽數(shù) (3492)
反饋

CSS 與 HTML 的結(jié)合能產(chǎn)生非常奇妙的化學(xué)反應(yīng)，CSS 的樣式可以讓 HTML 更美的呈現(xiàn)在用戶眼前，本篇我們來介紹如何把 CSS 嵌入到 HTML 中。

一、嵌入式

第一種方法嵌入式指的是使用 HTML 的 ?<style>? 元素，在?<head>? 內(nèi)添加 ?<style type="text/css">? ，接著在?<style>?內(nèi)定義所指定的 CSS 樣式內(nèi)容。

上代碼：

<head>
    <meta charset="utf-8">
    <title>button - 編程獅(w3cschool.cn)</title>
<style>
    h1{
        color:red;
    } 
    p{
        color:blue;
    }
</style>
</head>

二、內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式就比較直接了，它是在每個 HTML 元素中添加 style 屬性，可以直接定義元素樣式。此時這個 style 樣式只對其元素有效，對于另一個同名或同類型的元素不起任何作用

上代碼：

<p style="background-color: blue">w3cschool</p>
<h1 style="font-size:20px">編程獅</h1>

三、外部引用式

外部引用指的是在 HTML 中不存在嵌入和內(nèi)聯(lián)的 CSS 樣式，而是去動態(tài)得引用外部 CSS 文件來修飾 HTML。

1、樣式表處理指令語句

在 HTML 文檔開頭部分添加樣式表指令語句

上代碼：

<?xml-stylesheet type="text/css" href="w3cschool.css" ?>
<html>
指令語句 
</html>

這種情況是出于使用 xml 語法編寫 html 文檔所支持的指令，大部分瀏覽器要保存城 xhtml 或者 xml 格式才生效，而且 JS 無法處理此類 CSS ，不建議使用。

2、@import 命令

在?<style>?中使用@import 命令導(dǎo)入外部的 CSS 文件

上代碼：

<head>
    <meta charset="utf-8">
    <title>button - 編程獅(w3cschool.cn)</title>
<style>
    <!--下面兩行代碼效果一樣
    @import "w3cschool";
    @import url("w3cschool.css");
    -->
</style>
</head>

3、使用 link 元素（最常用）

上代碼：

<head>
<link rel="stylesheet" href="w3cschool" type="text/css">
</head>

4、HTTP 消息報

使用 HTTP 消息報頭部的 link 字段把它鏈接到一個外部樣式表

上代碼：

link:<mystyle.css>;rel=stylesheet;

以上就是小編總結(jié)的關(guān)于 HTML 如何引入 CSS 的全部內(nèi)容。


HTML CSS

0 人點(diǎn)贊