HTML入門到精通-css樣式

何使用CSS

CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.

CSS 可以通過以下方式添加到HTML中:

· 內聯樣式- 在HTML元素中使用"style" 屬性

· 內部樣式表 -在HTML文檔頭部 <head> 區域使用<style> 元素來包含CSS

· 外部引用 - 使用外部 CSS 文件

最好的方式是通過外部引用CSS文件.

在本站的HTML教程中我們使用了內聯CSS樣式來介紹實例，這是為了簡化的例子，也使得你能更容易在線編輯代碼并在線運行實例。

內聯樣式

當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

HTML樣式實例 - 背景顏色

背景色屬性（background-color）定義一個元素的背景顏色：

<h2 style="background-color:red;">這是一個標題</h2>

<p style="background-color:green;">這是一個段落。</p>

</body>

早期背景色屬性（background-color）是使用 bgcolor 屬性定義。

HTML 樣式實例 - 字體, 字體顏色，字體大小

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

現在通常使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義文本樣式，而不是使用<font>標簽。

HTML 樣式實例 - 文本對齊方式

使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式：

<h1 style="text-align:center;">居中對齊的標題</h1> <p>這是一個段落。</p>

文本對齊屬性 text-align取代了舊標簽 <center> 。

內部樣式表

當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:

00001.

<head>

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。

<head>

</head>

HTML 樣式標簽

標簽

描述

<style>

定義文本樣式

<link>

定義資源引用地址

已棄用的標簽和屬性

在HTML 4, 原來支持定義HTML元素樣式的標簽和屬性已被棄用。這些標簽將不支持新版本的HTML標簽。

不建議使用的標簽有: <font>, <center>, <strike>

不建議使用的屬性: color 和 bgcolor.

用HTML的顏色代碼，您可以設置網站的背景、文字顏色的顏色、表格單元格顏色、CSS樣式表中眾多元素的顏色搭配等等，不僅可以使用#80BFFF和顏色的英文名稱(red)這樣的代碼，還能使用RGBA、HSLA等帶透明通道的顏色代碼。

網頁配色使用背景的HTML顏色代碼：<body bgcolor="#80BFFF">
網頁配色使用文字的HTML顏色代碼：<font color="#80BFFF">
網頁配色使用表格的HTML顏色代碼：<table bgcolor="#80BFFF">
網頁配色使用連接的HTML顏色代碼：<a style="color:#80BFFF">
網頁配色使用CSS背景的HTML顏色代碼：.bgcolor{backgroun:#FF0000;}
網頁配色使用CSS文字顏色的HTML顏色代碼：.txtcolor{color:#424242;}

常見色彩搭配問題解答

紫色配什么顏色好看？
墨綠色配什么顏色好看？
粉色配什么顏色好看？
綠色配什么顏色好看？
藍色配什么顏色好看？

橙色配什么顏色好看？
玫紅色配什么顏色好看？
咖啡色配什么顏色好看？
紅色配什么顏色好看？
天藍色配什么顏色好看？

卡其色配什么顏色好看？
駝色配什么顏色好看？
淺綠色配什么顏色好看？
橘紅色配什么顏色好看？
橘色配什么顏色好看？

紫色配什么顏色好看

紫色配黃色系，視覺沖擊力強，會使人眼前一亮；藍色系，比較協調、不張揚。

#F1B000
#5C0C7B
#7B76AC
#2059A6

墨綠色配什么顏色好看

墨綠色比較沉穩，可以搭配活潑跳躍一點的顏色，黃色是綠色的臨近色，應該搭配不成問題，只有穿的場合問題，天藍色配個今年流行的撞色也不錯啊！

#669934
#346633
#65CC66
#0099CB

粉色配什么顏色好看

粉色這類顏色的組合多用于女性主題，例如：化妝品、服裝等，鮮嫩而充滿誘惑，傳達著柔情、嬌媚、溫柔、甜蜜、純真、誘惑的心理感受。

#FE6767
#FFCC9A
#FF6766
#CB3398

綠色配什么顏色好看

當綠色搭配同色系的亮色如檸檬黃綠、嫩草綠或白色，會給人清爽、生動的感覺；當綠色與暖色系的黃色或橙色相配，會有青春、活潑之感。而綠色與藍色、紫色或黑色相配時，高貴華麗，但是最好不要過多使用。

#346633
#669934
#9ACC99
#D6E6B5

藍色配什么顏色好看

藍色搭配：在所有顏色中，藍色服裝最容易與其他顏色搭配。不管是近似于黑色的藍色，還是深藍色，都比較容易搭配，而且，藍色具有緊縮身材的效果，極富魅力。

#30588C
#77C3F2
#B6DBF2
#3A758C

橙色配什么顏色好看

橙色是歡快活潑的光輝色彩，是暖色系中最溫暖的色，它使人聯想到金色的秋天，豐碩的果實，是一種富足、快樂而幸福的顏色。橙色稍稍混入黑色或白色，會變成一種穩重、含蓄又明快的暖色，但混入較多的黑色，就成為一種燒焦的色；橙色中加入較多的白色會帶來一種甜膩的感覺。

橙色明視度高，在工業安全用色中，橙色即是警戒色，如火車頭，登山服裝，背包，救生衣等，橙色一般可作為喜慶的顏色，同時也可作富貴色，如皇宮里的許多裝飾。橙色可作餐廳的布置色，據說在餐廳里多用橙色可以增加食欲。

橙色與淺綠色和淺藍色相配，可以構成最響亮、最歡樂的色彩。橙色與淡黃色相配有一種很舒服的過渡感。橙色一般不能與紫色或深藍色相配，這將給人一種不干凈、晦澀的感覺。由于橙色非常明亮刺眼，有時會使人有負面低俗的意象，這種狀況尤其容易發生在服飾的運用上，所以在運用橙色時，要注意選擇搭配的色彩和表現方式，才能把橙色明亮活潑具有口感的特性發揮出來。

性為 HTML 元素提供附加信息。

HTML 屬性

HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。

屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性總是在 HTML 元素的開始標簽中規定。

屬性實例

HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：

<a >This is a link</a>

屬性例子 1

<h1> 定義標題的開始。

<h1 align="center"> 擁有關于對齊方式的附加信息。

屬性例子 2

<body> 定義 HTML 文檔的主體。

<body bgcolor="yellow"> 擁有關于背景顏色的附加信息。

屬性例子 3:

<table> 定義 HTML 表格。

<table border="1"> 擁有關于表格邊框的附加信息。

HTML 提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

始終為屬性值加引號

屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。

在某些個別的情況下，比如屬性值本身就含有雙引號，那么必須使用單引號，例如：

name='Bill "HelloWorld" Gates'

下面列出了適用于大多數 HTML 元素的屬性：

屬性值描述

class classname 規定元素的類名（classname）

id id 規定元素的唯一 id

style style_definition 規定元素的行內樣式（inline style）

title text 規定元素的額外信息（可在工具提示中顯示）

在線咨詢

上一篇：濟南營銷型網站建設之HTML路徑
下一篇：hTML 樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML入門到精通-css樣式

您的項目需求