CSS （Cascading Style Sheet）
層疊樣式表，控制HTML的佈局和樣式。
使用方法
- 三種使用方式
- 內聯樣式：在標籤內使用屬性stype
- 頁內樣式：在
<head>標籤中使用<stype type='text/css'></style> - 外部樣式：使用CSS文件，使用
<link rel="stylesheet" type="text/css" href="mystyle.css"
- 優先級從高到低。
基本語法
selector {property1:value1,...,propertyN:valueN}
- 例如：
a {color:red;text-decoration:line-through},將連接標籤文字顏色變成紅色且有橫線穿過。
- 顏色寫法
p { color:#ff0000;} /**大小寫無所謂**/
p { color:#f00;} /**FF0000的縮寫**/
p { color: rgb(255,0,0);} /****/
選擇器
-
標籤選擇器
- 例如：
body {text-align:center}
- 上例直接使用HTML標籤的選擇器，就是標籤選擇器，元素選擇器。
- 注意：如果將標籤改爲，表示匹配所有HTML標籤。*
- 例如：
-
id選擇器
- id指的是HTML標籤內的屬性id,例如
<div id="menu">。
#menu { background-color:rgb(255,255,255); width:100%; border-bottom:#f0f0f0 solid 1px; margin:0px 0px 5px 0px; } - id指的是HTML標籤內的屬性id,例如
-
類選擇器
- 類，指的是標籤中的class屬性，例如：
<div class='main center'>
.center { width:80%; margin:auto; } - 類，指的是標籤中的class屬性，例如：
-
選擇器分組
- 分組的選擇就可以使用同樣的樣式聲明
h1,h2,h3,h4,h5,h6 { color:green; } -
層次選擇器
-
後代選擇器
- 所有div任意層次下的li標籤
div li { /**所有div任意層次下的li標籤**/ display:inline; }- div中id是menu下的li標籤
div#menu li { display:inline; } -
子選擇器
- ul標籤下的直接子標籤li(中間不能間隔其他標籤)
ul > li { display:inline; }- div中id爲menu 下的ul標籤，並且ul下的直接子標籤li
div#menu ul > li { display:inline; } -
相鄰兄弟選擇器
- class爲detail的div標籤下任意層下的近鄰標籤的下一個p標籤
div.detail p + p{ color:green; }
-
僞類 pseudo-classes
- 僞類能增加樣式，類似於class
- 錨僞類，鏈接標籤a的四種狀態
a:link {color:red} /* 未訪問的鏈接 */
a:visited {color: green} /* 已訪問的鏈接 */
a:hover {color: blue} /* 鼠標移動到鏈接上 */
a:active {color: black} /* 選定的鏈接 */
- 僞類可以和css類配合使用
a.red:visited {color:#ff0000} /**a標籤中帶有屬性red的標籤，修改已訪問的鏈接顏色**/
a:hover { color:red;} /** 定義所有a標籤，鼠標移動到鏈接上後a標籤中的顏色 **/
a {
color:chartreuse;
text-decoration-line:none;
}
<a class = "red" href="css_syntax.asp">CSS Syntax</a>
注意，僞類和前面部分中間不要有空格。
僞元素pseudo-element
-
僞元素能增加元素
:before，:after可以在元素前後插入內容
#homepage:after { content:url(http://www.xdd.com/abc.png); } a:before { content:"這是鏈接~~~~~~"; }
屬性選擇器
| 語法 | 含義 |
|---|---|
| E[attr]{sRules} | 具有某屬性 |
| E[attr=value]{sRules} | 具有某屬性且等於value |
| E[attr ~= value]{sRules} | 具有某屬性且屬性值中的一個是value |
| E[attr |= value]{sRules} | 具有某屬性且屬性值使用了-，且-之前的部分是value的才匹配*[class|="main"]能和<div class='main-center'>減號之前的部分匹配 |
/*鏈接具有href屬性*/
a[href]{
color:blue;
text-decoration:line-through
}
/*圖片alt屬性爲xdd*/
img[alt=xdd]{
height:20px;
}
/*所有標籤中class完全等價於“main center”的標籤*/
*[class="main center"]{
color:black
}
/* 對所有標籤中，具有center屬性的標籤*/
*[class~="center"]{
color:black
}
繼承
body{
text-align:center;
color:red;
}
- 觀察整個頁面文字顏色，幾乎變成了紅色。
- 頁面中父元素中使用的樣式。通過css繼承，子孫元素將繼續並使用祖先元素的屬性，除非子元素重新定義了該屬性。
常見樣式
-
背景backgroud複合屬性http://www.w3school.com.cn/css/css_background.asp
-
表格border
table {
border-collapse:collapse;
}
table,td {
border:1px solid black;
}
- margin外邊距和padding內邊距
margin: top right bottom left
padding: top right bottom left
padding:10px 2px 15px 20px; /**順時針上右下左**/
padding:10px 5px 15px; /*上10px、左右5px、下15px*/
padding:10px 5px; /*上下10px、左右5px*/
padding:10px /*4個方向全是10px*/
margin:auto /*瀏覽器自動計算邊距*/
- 內外邊距都是順時針設置4個方向，也可以單獨設置。
測試用HTML
<html>
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css"> </style>
</head>
<body>
<div class='main center'>
<div id="menu">
<ul>
<li><a id="homepage">主頁</a></li>
<li><a>Linux</a></li>
<li><a>Python</a></li>
</ul>
</div> <a href="http://www.magedu.com" target="_blank" title="abc">請點擊</a><span>inline span</span>
<p> <span>biggest title</span>
<img src="http://www.magedu.com/wp-content/uploads/2017/09/logo.png" alt="magedu_logo"> </p>
<div id='detail' name='detail' class="detail">
<p>title</p>
<p>content</p>
</div>
<div>
<form action="" method="POST">
<table>
<tr>
<td>用戶名<input name='h' type="hidden" value="001111256"></td>
<td><input name='username' type="text" value="abc"></td>
</tr>
<tr>
<td>密碼</td>
<td><input name='pwd' type="password"></td>
</tr>
<tr>
<td>性別</td>
<td><input name=gender type="radio" checked value="M">男<input name=gender type="radio"
value="F">女</td>
</tr>
<tr>
<td>愛好</td>
<td> <input name="interest" type="checkbox" checked value="music">音樂 <input name="interest"
type="checkbox" checked value="movie">電影 </td>
</tr>
<tr>
<td>其他</td>
<td> <textarea> line1 line2 </textarea> </td>
</tr>
<tr>
<td colspan="2"> <input name=submit type="submit" value="提交"> <input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>