HTML CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式。比如我們前面所學的給<body>加一個背景色。給<p>標簽里面的文字改變顏色,這些都是用css做到的
如何使用CSS
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過以下方式添加到HTML中:
內聯(lián)樣式- 在HTML元素中使用"style" 屬性
內部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style> 元素 來包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通過外部引用CSS文件,css文件指的是以 .css 結尾的文件,我們的html文件是以.html結尾的
在本站的HTML教程中我們使用了內聯(lián)CSS樣式來介紹實例,這是為了簡化的例子,也使得你能更容易在線編輯代碼并在線運行實例。
你可以通過本站的CSS教程 CSS 教程學習更多的CSS知識.
內聯(lián)樣式
內聯(lián)樣式就是在HTML 標簽內部直接使用 style 屬性直接定義,我們前面的課程也有提到,看下面的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p style="color: red; margin-left: 20px"> 我是內聯(lián)樣式 </p> </body> </html>
上面的css樣式是將<p>標簽里的文字變成黑色,然后文字往左邊移動20px,px指的是像素
代碼運行結果:
內部樣式表
當單個文件需要特別樣式時,比如將兩個<P>標簽設成紅色,如果用內聯(lián)樣式定義的話,需要在兩個<P>標簽都要寫上css樣式,如果是5,10<P>標簽呢,是不是很麻煩,這就要用的我們的內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表,像下面這樣:
<!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 標簽里面定義的 </p> <p> 我的顏色是在 head 標簽里面定義的 </p> <p> 我的顏色是在 head 標簽里面定義的 </p> </body> </html>
代碼運行結果:
外部樣式表
當樣式需要被應用到很多頁面的時候,外部樣式表將是理想的選擇。
外部樣式表是用<link>標簽引入一個外部css文件,使用外部樣式表,你就可以通過更改一個文件來改變整個站點的外觀。
比如一個css文件里面定義的是把<body>的背景色變成黃色,<h1>標題變成紅色,<p>變成藍色,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>
程序運行結果:
HTML 樣式標簽
標簽 | 描述 |
<style> | 定義文本樣式 |
<link> | 定義資源引用地址 |
實例
我們前面學的<a>鏈接標簽,下面是帶著下劃線的,我們用css樣式把下劃線去掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <a href="http://ipnx.cn/" style="text-decoration:none;">訪問 php.cn!</a> </body> </html>
程序運行結果:
訪問我們的 CSS 教程,學習更多有關樣式的知識。