CSS实例教程:CSS放入网页页面的几种方法

2020-10-29 02:53 jianzhan

上1篇详细介绍了CSS英语的语法
大家能够用下列4种方法,将CSS套用入HTML文档中:
行內套用(Inline) 行内套用(Inline) 嵌入套用(Embed) 嵌入套用(Embed) 外界連接套用(External Link) 外界联接套用(External Link) 匯入套用(Import) 汇入套用(Import) 行內套用行内套用
我們能够在HTML 文档內立即宣布樣式。大家能够在HTML文档内立即宣布款式。 舉例來說,举例来讲,

<p style='font-family:verdana; font-size:16;'>This is font size 16.</p> <p style='font-family:verdana; font-size:16;'>This is font size 16.</p>
以上的HTML 文档在瀏覽器上會顯現為:以上的HTML文档在访问器上会呈现为:
This is font size 16. This is font size 16. 嵌入套用嵌入套用
樣式能够嵌入於HTML 文档中(一般是在<head> 內)。款式能够嵌入于HTML文档中(一般是在<head>内)。 舉例來說,举例来讲,

<head>
<style type="text/css"> <style type="text/css">
div { div {
background-color:#FF0000;
}
</style>
</head>
<body>
<div>
情况顏色是紅色情况色调是鲜红色
</div>
</body>
以上的HTML 會顯現出:以上的HTML会呈现出:
情况顏色是紅色情况色调是鲜红色 外界連接套用外界联接套用
在這種方法下,全部的CSS 樣式宣布全是存在此外1個檔案中。在这类方法下,全部的CSS款式宣布全是存在此外1个档案中。 該檔案一般名稱為.css。该档案一般名字为.css。 在HTML 文档的<header> .. </header> 当中,我們將用下列的程式碼將這個.css 檔案連接進入:在HTML文档的<header> .. </header>当中,大家将用下列的程式码将这个.css档案联接进到:
<link rel=stylesheet type="text/css" href="external-stylesheet.css"> <link rel=stylesheet type="text/css" href="external-stylesheet.css">
以上這1行會將在external-stylesheet.css 這個檔案內所宣布的樣式添加HTML 文档內。以上这1行会将在external-stylesheet.css这个档案内所宣布的款式添加HTML文档内。 匯入套用汇入套用
外界的CSS 樣式还可以被匯入進HTML 文档。外界的CSS款式还可以被汇入进HTML文档。 匯入的做法為运用@import 這個命令。汇入的做法为运用@import这个命令。 @import 的語法為: @import的英语的语法为:
<STYLE TYPE="text/css"> <STYLE TYPE="text/css">
<!--
@import url(http://www.mysite.com/style.css); @import url(http://www.mysite.com/style.css);
-->
</STYLE>
@import 命令最开始的作用,是為了能夠針對不一样的瀏覽器而運用不一样的樣式。 @import命令最开始的作用,是以便可以对于不一样的访问器而应用不一样的款式。 不過,現在已經没有這個必要。但是,如今早已沒有这个必要。 現在用@import 的目地,最常是要添加多個CSS 樣式。如今用@import的目地,最常是要添加好几个CSS款式。 當多個CSS 樣式被@import 的方法添加,而不一样CSS 樣式相互之间有衝突時,後被添加的CSS 樣式有優先的順位(詳情請見CSS 串接 )。当好几个CSS款式被@import的方法添加,而不一样CSS款式相互之间有矛盾时,后被添加的CSS款式有优先选择的顺位(详细信息请见CSS串接 )。
下1篇大家将详细介绍新闻媒体种别