CSS樣式的4種使用方式

來源:互聯網
上載者:User
一、內部內聯樣式 

<html>
<head>
<title>內聯CSS樣式</title>
</head>
<body>

內聯CSS樣式:直接把樣式寫在某個標記內(作為style屬性)
<br/>
<H1  STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1>
</body>
</html>

 

二、內部內建樣式

<HTML>
 <HEAD>
  <TITLE> 嵌入CSS樣式 </TITLE>

 <STYLE TYPE="text/css">
  H1 { color: green; font-family: impact }
 </STYLE>

 </HEAD>

 <BODY>

嵌入CSS樣式:把樣式定義在<head></head>標記中
  <H1>Hello,CSS!</H1>
  <H1>Stylesheets: The Tool of the Web Design Gods</H1>

  <H2>Stylesheets: The Tool of the Web Design Gods</H2>
 </BODY>
</HTML>

 

三、 外部連結樣式

<HTML>
 <HEAD>
  <TITLE> 外部連結CSS樣式 </TITLE>

 <LINK REL="stylesheet" HREF="mystyles.css" TYPE="text/css">
 
 </STYLE>
 </HEAD>

 <BODY>
 <H1>Hello,CSS!</H1>
 <H1>Stylesheets: The Tool of the Web Design Gods</H1>

 <H2>Stylesheets: The Tool of the Web Design Gods</H2>
 </BODY>
</HTML>

-----------------------
mystyles.css ------------------------------------------------------------------

H1 { color: green; font-family: impact }

-----------------------
mystyles.css ------------------------------------------------------------------

 

 

 

四、外部匯入樣式

<HTML>
 <HEAD>
  <TITLE> 外部匯入CSS樣式 </TITLE>
 
<STYLE TYPE="text/css">
<!--
 /* 匯入CSS樣式實際上存在於內部樣式中 */
 @import url(css/mystyles.css);
 @import url(css/mystyles2.css);

 H1 { color: orange; font-family: impact }
-->
</STYLE>
 </HEAD>

 <BODY>
   <H1>Hello,CSS!</H1>
 <H1>Stylesheets: The Tool of the Web Design Gods</H1>

 <H2>Stylesheets: The Tool of the Web Design Gods</H2>
 </BODY>
</HTML>

 

小結:

內部樣式:

    1.內聯樣式(行內樣式)

    2.內建樣式

外部樣式:

    1.連結樣式

    2.匯入樣式

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.