JavaScript學習(8)使用樣式表

1.定義和使用CSS樣式

1.1定義樣式

可以使用<style>標籤在HTML文檔中定義CSS樣式表。起始<style>標籤指定樣式表的類型，給出文檔中的樣式表。</style>是結束標識，如下：

H1<color:blue;1>

</style>

因爲樣式表本身不會再頁面上產生任何輸出，因此應該把<style>標籤防止在HTML文檔的<head>部分。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 樣式表簡單示例 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style></mce:style><style mce_bogus="1"> h1{color:red} h2{color:gray} h3{color:blue} </style> </HEAD> <BODY> <h1>巴女詞</h1> <h2>李白</h2> <h3>巴水急如箭，巴船去若飛</h3> <h3>十月三千里，郎行幾歲歸</h3> </BODY> </HTML> </span>

1.2使用樣式

使用分組的手段可以縮短樣式表的規模，以減少頁面的大小，這樣有利於提高網頁的下載速度。分組的方式有兩種：一種是把屬性相同的選擇符放在一起，中間用逗號隔開，然後給出樣式定義，這個樣式就會作用在所有列出的選擇符上；另一種是可以同時爲一個屬性指定多個值。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 樣式定義簡寫演示 </TITLE> <mce:style type = "text/css"></mce:style><style type = "text/css" mce_bogus="1"> h1,h2,h3{color:blue}//選擇符分組 h1//屬性值分組 { font-weight:bold; font-size:30; font-family:宋體; } h2 { font:bold 24 宋體; } </style> </HEAD> <BODY> <h1>塞上曲</h1> <h2>王昌齡</h2> <h3>闡明空桑林，八月蕭關道</h3> <h3>出塞復入塞，處處黃蘆草</h3> <h3>從來幽並客，皆向沙場老</h3> <h3>莫學遊俠兒，矜誇紫騮好</h3> </BODY> </HTML> </span>

2.樣式的屬性

CSS支持多種屬性，不同的HTML頁面元素支持不同的屬性，不同的屬性頁具有不同的取值範圍。常用的有字體、顏色和背景、文本、方框以及分類屬性。

2.1顏色屬性

顏色值的表達方式有4種。這些表達方式又可以分爲兩類：一類直接使用顏色名，特點是便於記憶；另一類使用數值表示顏色值，特點是可以表達各種顏色。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 顏色演示 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style></mce:style><style mce_bogus="1"> body{background-color:red} h1{color:#AAMMDD;} h2{color:rgb(255,255,0);} p{color:white;} </style> </HEAD> <BODY> <font size = "+1"> <h1>登幽州臺歌</h1> <h2>陳子昂</h2> <p>前不見古人<br>後不見來者<br>念天地之悠悠<br>獨愴然而涕下<br><p> </BODY> </HTML> </span>

2.2字體屬性

在現代系統往往安裝了大量的字體，但一般情況下，還是要選用大多數系統中都已經安裝的字體。比如宋體。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 字體演示 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style></mce:style><style mce_bogus="1"> body{background-color:orange;} h1{color:yellow;font-size:x-large;font-family:華文行楷,華文細黑,宋體;} h2{color:lightgreem;font-size:large;font-family:黑體;} h3{color:black;font-size:medium;font-family:隸書;} p{color:white;font-size:25;font-style:italic;font-family:新宋體;} </style> </HEAD> <BODY> <font size = "+2"> <h1>相思</h1> <h2>王維</h2> <h3>紅豆生南國，春來發幾枝</h3> <p>願君多采擷，此物最相思</p> </BODY> </HTML> </span>

2.3文字屬性

文字是網頁中的必需元素，在書寫標題時，有時需要插入一些空格來實現一些對其方式；也就是網頁上的文字也需要美化以達到好的視覺效果。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 文字屬性 </TITLE> <mce:style></mce:style><style mce_bogus="1"> #title{word-spacing:10;letter-spacing:4;text-decoration:underline;text-align:center;font-size:22;font-family:arial;font-weight:bold;}} h2{color:red;font-size:large;font-family:黑體;text-align:center;} p{line-height:2;text-indent:6%;font-family:arial;font-size:18;} </style> </HEAD> <BODY bgcolor = "lightblue"> <p id = title>標題</p> <h2>作者</h2> <p>第一段</p> <p>第二段</p> </BODY> </HTML> </span>

3.4背景和圖像

不同的網站具有不同的特徵的背景，在網站中背景起到了渲染氣氛、活脫環境的效果。在javascript中，樣式表提供了幾種控制背景圖片的方式。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 背景和圖像 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:style></mce:style><style mce_bogus="1">body{background-color:"violet";background-image:url(湖南大學.jpg);repeat-x}; h1{font-size:56;text-indent:25%;color:moccasin;margin-top:16%;font-family:隸書;}</style> <BODY> <h1>前不見古人</h1> <h1>後不見來者</h1> <h1>念天地之悠悠</h1> <h1>獨愴然而涕下</h1> </BODY> </HTML> </span>

3.5空白與邊框

樣式表可用於控制頁面的一般佈局，而顯示在瀏覽器中的文檔由一組容器組成。<body>標記是一個容器，它可以包含標題、段落、表格等。也可以把每一個元素想象成一個容器，在它的四周可有一些空白，容器之間的空白稱作填充，容器也可以由一個環繞它的邊框。很多情況下，邊框是默認不顯示的。可以根據需要改變空白的大小，指定不同的邊框，增加或減少區域的寬度。

<span style="font-size: medium;" mce_style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 空白與邊框 </TITLE> <mce:style></mce:style><style mce_bogus="1"> body{margin-top:1.5cm;margin-left:2cm;margin-bottom:2cm;margin-right:3cm;border-width:thick;border-style:solid;border-color:violet moccasin darkviolet darkhaki;padding:15} h1{font-weight:bold;font-size:36;font-family:隸書;} h2{border-style:dashed;border-color:purple;font:bold 24 黑體} </style> </HEAD> <BODY bgcolor = lightgrey> <h1>塞上曲</h1> <h2>蟬鳴空桑林，八月蕭關道。</h2> <h3>出塞復入塞，處處黃蘆草。</h3> </BODY> </HTML> </span>

3.使用樣式表的其他方式

在文檔中可用以下三種方式來定義樣式表。

嵌入方式：嵌入方式就是直接在<HTML>和<BODY>標記之間使用<style>標記定義樣式表

行內方式：這種方式就是在對象的標記內使用對象的style屬性定義樣式規則

外部方式：樣式表定義在外部的文件中

4.使用類

如果希望多個標籤使用同一樣式，則應使用class屬性。它可以根據不同的風格需要對某一類型的標記設置幾種不同的CSS屬性，也可以將整個風格分成幾個類而不是隻針對某一特定類型的標記。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> CSS樣式類 </TITLE> <mce:style></mce:style><style mce_bogus="1"> p{margin-right:10%;margin-left:10%;font-family:宋體;font-size:18;color:red;} .bigfont{font-size:x-large;color:darkblue;font-style:bold;} teenyhfont{font-size:small;font-style:italic;color:black;} </style> </HEAD> <BODY> <p>這段文字顯示爲紅色，字體大小爲18，字體家族爲<em>宋體</em> <p class = "bigfont">這段文字從用大號字體顯示，顏色爲深藍色。字體樣式指定爲名稱<em>.bigfont</em>樣式類。 <h1 class = "bigfont">應用樣式類<em>.bigfont</em>後的h1標記顯示效果</h1> <p class = "teenyfont">這段文字顯示的字體小一些 <p>現在開始一個新段落。它採用樣式表中定義的p規則：字體爲宋體，字體大小爲18，顏色爲紅色 </BODY> </HTML>

5.使用id屬性

id選擇符是創建獨立於特定HTML標記的另一條途徑。通過id選擇符，可以HTML元素指定該選擇符定義的規則。其定義規則爲：

#idselector{declaration;}

其中，idselector是id選擇符，由任何合適的標識符組成。在定義id選擇符規則時，選擇符前面要叫一個磅符號(#)，大括號中是定義的規則，它由屬性和屬性值對組成，如：

#note{font-size:14;width:120;color:blue}

Yalishizhude 博客專家

發佈了41 篇原創文章 · 獲贊 16 · 訪問量 6萬+

私信關注

JavaScript學習(8)使用樣式表

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

【2024-05-21】以茶會友

Linux Fedora13，Windows 7 and Windows XP的多系統安裝

HTML學習(5)集成多媒體

JavaScript學習(7)利用表單獲取數據

HTML學習(4)圖像

JavaScript學習(5)DOM對象

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結