CSS筆記及展示（1）（級聯樣式單）
阿新 • • 發佈：2019-01-04
CSS是在HTML結構上進行裝潢，使HTML網頁更富表現力。
一、CSS樣式單的基本使用
CSS樣式單可以控制HTML文件的顯示。但在控制文件的顯示之前，首先應在需要顯示的HTML文件中匯入CSS樣式單，有如下4中使用樣式單的方式。
1.連結外部樣式檔案（最常用）：這種方式將樣式檔案徹底與HTML文件分離，樣式檔案需要額外引入。在這種方式下，一批樣式可控制多份文件。
引入外部樣式檔案應在<head…/>元素中增加如下<link…/>子元素；
<link href="CSS樣式檔案的URL" rel="stylesheet" type="text/css"/>
2.匯入外部樣式檔案：這種方式與上一中方式類似，只是使用@import來引入外部樣式單。
@import url (樣式單地址) sMedia ;
程式碼示例：
HTML中
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <!--<title>連結外部CSS樣式單</title>--> <title>匯入外部CSS樣式單</title> <!--引入 outer.css樣式表單檔案--> <!--<link href="outer.css" rel="stylesheet" type="text/css"/>--> <!--匯入外部樣式單--> <style type="text/css"> @import "outer.css"; </style> </head> <body> <table> <tr> <td>這是練習</td> </tr> <tr> <td>日後會在我的網址</td> </tr> <tr> <td>展示連結</td> </tr> </table> </body>
outer.css中
/*設定整個表格的背景色*/
table{
background-color:#003366;
width:400px;
}
/*設定單元格的背景色、字型等*/
td{
background-color:#fff;
font-family:"楷體_GB2312";
font-size:20pt;
text-shadow:0 6px 2px #333;
}
3.使用內部樣式定義：這種方式是通過HTML文件頭定義樣式單部分來實現的，這種方式下，每批CSS樣式只控制一份文件。
內部CSS樣式需要放在<style…/>元素定義，<style…/>元應放在<head…/>元素內。
<style type="text/css">
樣式單檔案定義
</style>
示例：
<head>
<meta http-equiv="Content-Type" content="text/html";charset="UTF-8"/>
<title>內部樣式單</title>
<style type="text/css">
table{
background-color:#036;
}
td{
background-color:#0ff;
font-family:"楷體_GB2312";
font-size:20pt;
text-shadow:-8px 6px 2px #f00;
}
.title{
font-size:18px;
color:#60C;
height:30px;
width:200px;
border:3px solid #0f0;
}
</style>
</head>
4.使用行內樣式：這種方式將樣式行內定義到具體的HTML元素，通常用於精確控制一個HTML元素的表現，每份CSS樣式只控制單個HTML元素。
這裡就不做示例了。