樣式單和CSS選擇器
阿新 • • 發佈：2018-12-11
一、這一節我們先講樣式單
簡單來說，網頁的製作實現分為三種，HTML、CSS和JavaScript
HTML主要用來對網頁進行文字域圖片相結合，對網頁進行分塊（div），而對文字圖片位置進行佈局
而樣式表是專門描述結構文件表現方式的文件。比起傳統方式他更具有優勢。
樣式表有兩種1、級聯樣式單CSS
2、擴充套件樣式單語言XSL
現在我們主要講解下CSS。
CSS可以將顯示邏輯與資料邏輯分離，提高檔案可讀性。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> CSS樣式表</title> </head> <body> <table > <tr> <td>測試1</td> </tr> <tr> <td>測試2</td> </tr><tr> <td>測試3</td> </tr> </table> </body> </html>
執行結果表示沒有樣式，表格未顯示。
CSS樣式單可以放在三個地方，首先
1、放在外部檔案中
用link連結外部檔案地址如下
在<head></head>中新增 <link href ="ceshi.css" rel="stylesheet" type="text/css"/>
然後建立一個名字為ceshi.css的檔案，內容為：
table{ background-color:#003366; width:400px; } td{ background-color:#fff; font-family:"楷體_gb2312"; font-size;20pt; text-shadow:-8px 6px 2px #333; }
執行html檔案
這是table樣式顯現，並且文字樣式也有變化。
除此之外，也可以把css檔案裡面的內容放在htmml檔案中，也就是
2、將CSS放在內部
具體操作為將ceshi.css檔案裡面的內容放在<style type="text/css"></style>中再放在html檔案的<head></head>裡面，具有同樣的效果。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> CSS樣式表</title> <style type="text/css"> table{ background-color:#003366; width:400px; } td{ background-color:#fff; font-family:"楷體_gb2312"; font-size;20pt; text-shadow:-8px 6px 2px #333; } </style> </head> <body> <table > <tr> <td>測試1</td> </tr> <tr> <td>測試2</td> </tr><tr> <td>測試3</td> </tr> </table> </body> </html>
3、使用行內樣式，放在div table等屬性的裡面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> CSS樣式表</title>
</head>
<body>
<table style="width:400px; background-color:#003366;"/>
<tr>
<td style=" background-color:#fff;font-family:"楷體_gb2312";
font-size;20pt;text-shadow:-8px 6px 2px #333;">測試</td>
</tr>
</table>
</body>
</html>執行結果相同。