HTMLCSS

CSS (Cascading Style Sheets) 用來(lái)渲染HTML元素標(biāo)籤的樣式。例如我們前面所學(xué)的給<body>加一個(gè)背景色。給<p>標(biāo)籤裡面的文字改變顏色，這些都是用css做到的

如何使用CSS

##CSS 是在HTML 4 開(kāi)始使用的,是為了更好的渲染HTML元素而引入的.

CSS 可以透過(guò)以下方式添加到HTML中:

內(nèi)聯(lián)樣式- 在HTML元素中使用"style"?屬性
內(nèi)部樣式表 -在HTML文檔頭部<head> 區(qū)域使用<style>?元素?來(lái)包含CSS
##外部引用
- 使用外部CSS?文件

在本站的HTML教程中我們使用了內(nèi)聯(lián)CSS樣式來(lái)介紹實(shí)例，這是為了簡(jiǎn)化的例子，也使得你能更容易在線編輯程式碼並在線運(yùn)行實(shí)例。

你可以透過(guò)本站的CSS教學(xué)?CSS 教學(xué)學(xué)習(xí)更多的CSS知識(shí).

內(nèi)聯(lián)樣式#

內(nèi)嵌樣式就是在HTML 標(biāo)籤內(nèi)部直接使用style 屬性直接定義，我們前面的課程也有提到，看下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p style="color: red; margin-left: 20px">
    我是內(nèi)聯(lián)樣式
</p>
</body>
</html>

上面的css樣式是將<p>標(biāo)籤裡的文字變成黑色，然後文字往左邊移動(dòng)20px，px指的是像素

程式碼運(yùn)行結(jié)果：

內(nèi)部樣式表

當(dāng)單一檔案需要特別樣式時(shí)，例如將兩個(gè)<P>標(biāo)籤設(shè)為紅色，如果用內(nèi)嵌樣式定義的話，需要在兩個(gè)<P>標(biāo)籤都要寫(xiě)上css樣式，如果是5,10<P>標(biāo)籤呢，是不是很麻煩，這就要用的我們的內(nèi)部樣式表。你可以在<head> 部分透過(guò)<style>標(biāo)籤定義內(nèi)部樣式表，像下面這樣：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
    <style type="text/css">
        p{color: red}
    </style>
</head>
<body>
<p>
    我的顏色是在 head 標(biāo)簽里面定義的
</p>
<p>
    我的顏色是在 head 標(biāo)簽里面定義的
</p>
<p>
    我的顏色是在 head 標(biāo)簽里面定義的
</p>
</body>
</html>

##程式碼運(yùn)行結(jié)果：

外部樣式表

當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候，外部樣式表將是理想的選擇。 ######

外部樣式表是用<link>標(biāo)籤引入一個(gè)外部css文件，#使用外部樣式表，你就可以透過(guò)更改一個(gè)文件來(lái)改變整個(gè)網(wǎng)站的外觀。

例如一個(gè)css檔案裡面定義的是把<body>的背景色變成黃色，<h1>標(biāo)題變成紅色，<p> ;變成藍(lán)色，css檔案如下

body{background-color:yellow;}
p{color: blue;}
h1{color: red;}

在HTML檔案引入用<link>引入css檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
    <link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>
<h1>外部樣式表</h1>
<p>
    我的顏色是用外部樣式表定義的
</p>
<p>
    我的顏色是用外部樣式表定義的
</p>
</body>
</html>

################ ###程式運(yùn)行結(jié)果：##################################

HTML 樣式標(biāo)籤

#HTML 樣式標(biāo)籤? 標(biāo)籤? ? ? #說(shuō)明#? ? <style>? ??定義文字樣式

	? ?

#########? ??<link>######? ??定義資源參考位址# ###########

我們前面學(xué)的<a>連結(jié)標(biāo)籤，下面是帶著底線的，我們用css樣式把底線去掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<a href="http://www.miracleart.cn/" style="text-decoration:none;">訪問(wèn) php.cn!</a>
</body>
</html>

#程式運(yùn)行結(jié)果：

##################################

訪問(wèn)我們的 CSS 教學(xué)課程，學(xué)習(xí)更多關(guān)於樣式的知識(shí)。

繼續(xù)學(xué)習(xí)

新建檔案

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p style="color: red; margin-left: 20px"> 我是內(nèi)聯(lián)樣式 </p> </body> </html>

提交重置程式碼

自動(dòng)運(yùn)行