H5 CSS樣式 小結
阿新 • • 發佈:2019-02-08
如何查詢相關文件
第一行程式碼
div {
width: 500px;
height: 500px;
background-color: red;
}
<!-- 定義了一個長度和高度為500的正方體 背景顏色紅色 -->
<div>我是div</div>
css樣式的繼承
body {
color: blue;
}
如果不給標籤新增額外的字型顏色 頁面所有的文字顏色都會設定為藍色
CSS 常用屬性舉例
屬性 | 描述 |
---|---|
width | 設定長度 單位px |
height | 設定高度 單位px |
float | float: left / right/ none; 讓元素浮動起來 用於佈局 |
position | absolute/relative/fixed 元素定位 |
font | 字型格式 |
background | 背景顏色 / 背景圖象 / 背景重複 / 背景附件 / 背景位置 |
border | width /style /color 邊框樣式 |
list-style | 列表樣式 |
margin | 外邊距 |
padding | 內邊距 |
cursor | 游標樣式 |
css float屬性
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="left"></div>
<div class="right"></div>
div 本身是塊級標籤 使用兩個div同級時候 兩個div會緊緊相鄰 使用浮動屬性後可以發現兩個div重合
這裡可以認為第一個div浮起來了 之前緊靠的div發現之前的div不見了就佔領了第一個div的位置
使用浮動會造成的一些問題
.box{
width: 800px;
border: 4px red solid;
margin: 50px auto;
}
.left{
width: 200px;
height: 200px;
background: blue;
float: left;
}
.right{
width: 200px;
height: 200px;
background: gold;
float: right;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
一個父級div中有兩個子div 父級沒有設定高度 兩個子div分別使用了左浮動和有浮動 這時會造成父級的高度塌陷
解決方法:
使用 clear: both;
在新增一個div < div style=”clear: both;”>< /div> 這樣就恢復正常了
表單樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"></style>
</head>
<body>
<!-- 換行 -->
<!-- <br/> -->
<!-- action 表單要提交的伺服器介面 -->
<!-- methid 表單提交的方式 預設是GET 一般用POST -->
<form id="first" action="" method="">
<!-- 輸入框 placeholder 佔位符 給使用者提示 value 最終要傳送給伺服器的值
name傳送給伺服器的-->
<label for="name">使用者名稱: </label>
<input id="name" type="text" placeholder="請輸入使用者名稱" name="username" value="">
<br/>
<input type="password" placeholder="請輸入密碼">
<br/>
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="radio" name="gender" value="3">
<br/>
<input type="checkbox" name="inster" value="work">
<input type="checkbox" name="inster" value="play">
<input type="checkbox" name="inster" value="watch">
<br/>
<!-- multiple 上傳多個檔案 -->
<input type="file" multiple>
<br/>
<input type="email" >
<br/>
<input type="date" >
<br/>
<input type="search" >
<br/>
<input type="button" value="不要按">
<br/>
<!-- 隱藏屬性 收集一些使用者不需要填寫的資訊-->
<input type="hidden" name="type" value="Mac">
<br/>
<input type="submit" value="註冊">
<br/>
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- 清空 -->
<br/>
</form>
<!-- 如果提交按鈕/重置按鈕在form外 點選按鈕是無效 可以通過 屬性關聯起來 -->
<input form="first" type="reset">
</body>
</html>
表格樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
/* collapse 合併邊框
separate 不合並邊框
*/
border-collapse: collapse;
border: 1px blue solid;
/*不合並邊框的時候 可以讓空的單元格隱藏*/
/*empty-cells: hide;*/
text-align: center;
}
tbody{
/*改變表格垂直居中方式*/
vertical-align: top;
}
</style>
</head>
<body>
<!-- 這裡的 border 和 css中的不一樣 cellspacing 單元格間距 cellpadding 單元格內邊距-->
<table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
<!-- 標題 -->
<!-- <caption></caption> -->
<!-- <thead></thead> -->
<!-- tbody 可以省略 -->
<!-- <tbody> -->
<tr>
<th width="100" height="200">1</th>
<th width="250">2</th>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<!-- </tbody> -->
</table>
<table border="1" width="280" height="280">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<!-- <td>1</td> -->
<td colspan="2">2</td>
<!-- <td>3</td> -->
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2" rowspan="2">3</td>
<!-- <td>4</td> -->
</tr>
<tr>
<td>1</td>
<td>2</td>
<!-- <td colspan="2">3</td> -->
<!-- <td>4</td> -->
</tr>
</table>
</body>
</html>