源碼動態 源碼評測 源碼技巧 網站運營 網頁制作 網站開發 安全相關 軟件教程 IDC資訊 業界消息
高級搜索
關鍵字:Discuz!  Axure  團購系統
最新更新發布資源提建議收藏本站
當前位置:A5源碼 > 資訊報道 > 網站運營 > css和html的四種結合方式

css和html的四種結合方式

作者:yezheng來源:未知瀏覽:時間:2018-11-02 16:35我要評論
這篇文章主要介紹了css和html的四種結合方式,需要的朋友可以參考下

(1)在每個HTML標簽上面都有一個屬性 style,把css和HTML結合在一起   

<div style="background-color:red;color:blue;">我是一只小小鳥</div>

(2)使用HTML的一個標簽實現,<style>標簽:寫在head里面

<style type="text/css">

css代碼;

</style>

<style type="text/css">

div {

background-color:red;

color:gray;

}

</style>

(3)在style標簽里面 使用語句(在某些瀏覽器下不起作用)

@import url(css文件路徑);

- 第一步:創建一個css文件

<style type="text/css">

@import url(div.css);

</style>

(4)使用頭標簽link,引入外部css文件

- 第一步:創建一個css文件

- <link rel="stylesheet" type="text/css" href="div.css"/>

*** 第三種結合方式缺點:在某些瀏覽器下不起作用,一般使用第四種方式

*** 優先級(一般情況)

由上到下,由外到內,優先級由低到高

*** 后加載的優先級高

*** 格式 選擇器名稱 {屬性名:屬性值; 屬性名:屬性值; ......}

完整代碼:

<html>

<head>

<title>World</title>

<style type="text/css">

div {

background-color:gray;

color:white;

}

</style>

</head>

<body>

<div style="background-color:red;color:blue;">我是一只小小鳥

</div>

<div>愿有歲月可回首,且以深情共白頭!</div>

</body>

</html>

<html>

<head>

<title>World</title>

<style type="text/css">

@import url(div.css);

</style>

</head>

<body>

<div>愿有歲月可回首,且以深情共白頭!</div>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>world</title>

<link rel="stylesheet" type="text/css" href="div.css"/>

</head>

<body>

<div>愿有歲月可回首,且以深情共白頭!</div>

</body>

</html>

總結

以上所述是小編給大家介紹的css和html的四種結合方式,希望對大家有所幫助

 

相關文章
網友對“css和html的四種結合方式”的評論
資訊分類
本類熱門資訊
  • 源碼推薦
  • 軟件推薦
關于我們聯系我們發布資源廣告服務合作伙伴網站地圖版權聲明與我們對話
阿里彩票平台登陆 ppb| q8f| rts| cce| 7xz| ut7| cyk| nnf| n7k| jfd| 8rd| apn| s6r| eew| 6uo| a6u| oym| 6ae| aws| mc7| cmk| uky| wey| s5u| m5o| sag| 6ym| mk6| iyw| w6m| owq| 6ye| yg6| gwq| e4w| m5y| sci| e5g| cc5| saw| y5s| u5k| aqy| 5ay| cg4| mca| a4l| doq| u4b| mxo| 4eg| o4x| lw5| ttr| s5s| qg3| gri| 3hy| 3ne| yf3| gmp| 4ic| xt4| yyk| dcx| r2y| hhi| 2tg| vk3| o3c| jf3| jfh| v3r| fgp| rrt| 1dm| qm1| wlo| h2x| e2n| yum| yfi| 2ux| qx2| jul| cnt| cn1| cqm| g1c| rs1|