複習和總結H5 CSS3常見的知識點
阿新 • • 發佈：2018-12-25
常用標籤
塊級元素
div form table ul li ol dl dt dd h1-6 p header footer nav figure section addres aside hgroup hr br
行內元素
span a strong b i em time audio label
行內塊級元素
img input select textarea video
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
合併單元格:colspan rowspan
<form action="後臺程式(jsp php aspx)" method="get/post">
<input type="#" name="" value="">
#:
text
password
radio
checkbox
file
hidden
button
submit
reset
image
email
url
search
tel
date(month week time datetime datetime-local)
color
range
number
<select>
<option value="" selected></option>
</select>
<textarea cols="" rows=""></textarea>
</form>
表單元素屬性
checked:radio checkbox
selected:option
disabled:input
enabled:
readonly:
maxlength:
placeholder:
multiple:select input="file"
max
min
step
autofocus
autocomplete
formaction
formmethod
list和datalist和option
<input type="text" list="chengjinrui">
<datalist id="chengjinrui">
<option value="">文字</option>
</datalist>
<a href="" target="_blank/_self/_parent" title=""></a>
<img src="路徑" width height alt title>
路徑：
相對路徑
絕對路徑
本地：
網路：
所有標籤的共同屬性
class:
id:
style:
title:
css屬性
樣式表
1、行內樣式表 <p style=""></p>
2、內部樣式表 <style></style>
3、連結式
<link href="css的路徑" rel="stylesheet">
4、匯入式
<style>
@import url(路徑)；
</style>
樣式表的優先順序
就近原則
選擇器：
基本選擇器
*
id
class
element(標籤選擇器)
層次選擇器也叫關係選擇器
群組選擇器： ，
後對選擇器： 空格
子元素選擇器： >
緊鄰的兄弟選擇器： +
相鄰的兄弟選擇器： ~
偽類選擇器：
:first-child
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type
:link
:visited
:hover
:active
:focus(可以應用到input text上 input:focus{background:red;})
:target
:not
屬性選擇器
[attribute]([type] img[width])
[attribute=value]([type="text"])
[attribute^=value]
[attribute$=value]
[attribute*=value]
偽元素選擇器
::first-line
::first-letter
::after
::before
萬能清除浮動
選擇器的優先順序
！important>行內>id>class>element>*
選擇器的權重
行內>id>class>element>*
1000 100 10 1 0
css屬性
文字屬性
font-family:
font-size:
font-weight:
font-style:
color
font-face:伺服器端字型
段落屬性
text-align:center left right
text-indent:2em
text-decoration:underline/none
text-transform:第一個字母大寫uppercase lowercase capitalize
white-space:nowrap
line-height:
text-shadow:
text-overflow:
letter-spacing:
word-spacing:
word-break:
背景屬性(background)
background-color
background-image:url
background-image:linear-gradient()
background-repeat:
background-position:
background-size:
background-clip:
background-origin:
background:url(),url()
列表屬性
list-style:none;
邊框屬性
border:
border-top/left/bottom/right；
border-radius:
外邊框
margin:
margin-top/left/bottom/right:
內邊距
padding:
padding-top/left/bottom/right:
box-shadow
尺寸屬性
width
height
佈局屬性
float
clear
定位屬性
position:relative/absolute/fixed
z-index
變形屬性
transform:scale/rotate/translate/skew
過渡屬性
transtion:all 3s linear 3s
動畫屬性
animation:name 3s linear 3s infinite alternate/reverse/revers-alternate
box-sizing:border-box;
resize:none;
outline:none;
chrome
-webkit-text-fill-color
-webkit-text-stroke
塊級元素
div form table ul li ol dl dt dd h1-6 p header footer nav figure section addres aside hgroup hr br
行內元素
span a strong b i em time audio label
行內塊級元素
img input select textarea video
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
合併單元格:colspan rowspan
<form action="後臺程式(jsp php aspx)" method="get/post">
<input type="#" name="" value="">
#:
text
password
radio
checkbox
file
hidden
button
submit
reset
image
url
search
tel
date(month week time datetime datetime-local)
color
range
number
<select>
<option value="" selected></option>
</select>
<textarea cols="" rows=""></textarea>
</form>
表單元素屬性
checked:radio checkbox
selected:option
disabled:input
enabled:
readonly:
maxlength:
placeholder:
multiple:select input="file"
max
min
step
autofocus
autocomplete
formaction
formmethod
list和datalist和option
<input type="text" list="chengjinrui">
<datalist id="chengjinrui">
<option value="">文字</option>
</datalist>
<a href="" target="_blank/_self/_parent" title=""></a>
<img src="路徑" width height alt title>
路徑：
相對路徑
絕對路徑
本地：
網路：
所有標籤的共同屬性
class:
id:
style:
title:
css屬性
樣式表
1、行內樣式表 <p style=""></p>
2、內部樣式表 <style></style>
3、連結式
<link href="css的路徑" rel="stylesheet">
4、匯入式
<style>
@import url(路徑)；
</style>
樣式表的優先順序
就近原則
選擇器：
基本選擇器
*
id
class
element(標籤選擇器)
層次選擇器也叫關係選擇器
群組選擇器： ，
後對選擇器： 空格
子元素選擇器： >
緊鄰的兄弟選擇器： +
相鄰的兄弟選擇器： ~
偽類選擇器：
:first-child
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type
:link
:visited
:hover
:active
:focus(可以應用到input text上 input:focus{background:red;})
:target
:not
屬性選擇器
[attribute]([type] img[width])
[attribute=value]([type="text"])
[attribute^=value]
[attribute$=value]
[attribute*=value]
偽元素選擇器
::first-line
::first-letter
::after
::before
萬能清除浮動
選擇器的優先順序
！important>行內>id>class>element>*
選擇器的權重
行內>id>class>element>*
1000 100 10 1 0
css屬性
文字屬性
font-family:
font-size:
font-weight:
font-style:
color
font-face:伺服器端字型
段落屬性
text-align:center left right
text-indent:2em
text-decoration:underline/none
text-transform:第一個字母大寫uppercase lowercase capitalize
white-space:nowrap
line-height:
text-shadow:
text-overflow:
letter-spacing:
word-spacing:
word-break:
背景屬性(background)
background-color
background-image:url
background-image:linear-gradient()
background-repeat:
background-position:
background-size:
background-clip:
background-origin:
background:url(),url()
列表屬性
list-style:none;
邊框屬性
border:
border-top/left/bottom/right；
border-radius:
外邊框
margin:
margin-top/left/bottom/right:
內邊距
padding:
padding-top/left/bottom/right:
box-shadow
尺寸屬性
width
height
佈局屬性
float
clear
定位屬性
position:relative/absolute/fixed
z-index
變形屬性
transform:scale/rotate/translate/skew
過渡屬性
transtion:all 3s linear 3s
動畫屬性
animation:name 3s linear 3s infinite alternate/reverse/revers-alternate
box-sizing:border-box;
resize:none;
outline:none;
chrome
-webkit-text-fill-color
-webkit-text-stroke