1）px
2) em
2.css的選擇器
1）常用選擇器
*標籤 span
*id#id
*類 .class
*關聯 #div1 span div1中的span標籤
*組合 div,h1,p,apan 關聯的都選，逗號隔開
2）基本選擇器
:first-child
:first-letter
:first-line
:last-child
:nth-child
3）層級選擇器
a b (a中孩子b)
a>b (a下的b1)
a+b (a下的第乙個b)
4）偽類選擇器
:hover (滑鼠經過)
:focus (獲得焦點)
::selection (滑鼠選中的元素)
5）屬性選擇器
[id] 所有有id屬性的元素
[id=user] 所有id=user的元素
2. 樣式
1）字型與顏色
font-family 字型型別（宋體|楷體|黑體）
font-size 字型大小 （30px|2em）
font-style 字型樣式 (normal|italic)
font-weight 字型加粗 (bold)
用於在**中載入字型
@font-face
2）背景屬性
background:#ccc url('x.png') no-repeat fixed 50% 50%;
background-color
background-image
background-repeat:no-repeat
background-attachment:fixed|scroll;只能用在body上
background-position
(1)left center right top center bottom
(2)50px 50px
(3)-50px -50px
(4)50% 50%
3）文字屬性
letter-spacing 字間距
word-spacing 詞間距
text-decoration 下劃線
text-align 對齊
text-indent 縮排
line-height 行高
color 顏色
word-break：break-all 折行可以有半個單詞
text-shadow：1px 1px 5px #ccc 文字陰影
word-wrap:break-word折行沒有半個單詞
4）邊框屬性
border:2px solid #f00;
border-style:none|hidden|dotted|solid|double|groove|ridge|inset|outset
border-width:30px
border_color:#f00;
overflow:auto;
5）滑鼠游標屬性
cursor:pointer
crosshair 十字形狀
pointer 小手形狀
text文字形狀
wait 等待形狀
default 預設形狀
help 幫助形狀
6）列表樣式(list-style-type):
none
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
uldiv>
1px' width='1000px' cellspacing='0'>
border-collapse:collpase;
border-spacing:10px;
7）定位屬性
position:absolute;絕對定位
left:200px;
top:200px;
position:relative;相對定位
z-index:的高度
（父定位，子絕對就可以實現子的絕對定位）
塊標籤螢幕居中
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
8）內外邊距
margin
padding
9）浮動和清除浮動
float:left|right
clear:left
clear:right
clear:both防止盒子回縮
10）滾動條
overflow:hidden;
overflow:auto;
11）顯示和隱藏
display:block|inline|none
visibility:visible|hidden
12)邊框樣式
border-radius:50px；邊框圓角上左下右
box-shadow：5px,5px,5px,5px #999 inset;前兩個定位，三個模糊，四向外擴充，五顏色，內陰影。
border-image：url('b.png') 30
30 stretch|round|repeat;
13）背景樣式
background-size:100%;
background-origin:padding-box|content-box|border-box;
14）2d樣式
transform:translate(10px,20px);
transform:rotate(30deg);
transform:scale(2,4);
15）3d樣式
transform:roatex(100deg);
transform:roatey(100deg);
16) 多欄樣式
column-count:3;
column-gap:40px;
column-rule:3px outset #ff0000;
17)過渡動畫
18）輪廓樣式
outline:2px solid red;
outline-offset:15px;
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS 學習筆記
當同乙個html元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此，內聯樣式 在html 元素內部 擁有最...