1.選擇器
1.1 寫法
選擇器{屬性:值;}
width,height,background-color,font-size,text-align,text-indent:2em(首行縮進2個字符)
1.2
基礎選擇器:標簽選擇器,類選擇器(重點),ID選擇器,通配符選擇器
復合選擇器:
標簽選擇器
一打一大片
標簽{屬性:值;}
div{
font-size: 20px;
color: red;
background-color: black;
}
<div>
盛開的驕傲的開放和
</div>
顏色的顯示方式:
直接寫顏色的名稱,
十六進制像是顏色#ff00ff,
rgb(120,120,120)
rgba(102,106,180,0.4)
類選擇器:
誰調用誰生效,一個標簽可以調用多個選擇器,多個標簽也可以調用同一個選擇器
類選擇器的命名規則:不能用純數字,或者數字開頭
不建議使用漢字命名
不推薦使用屬性或屬性的值定義
不能使用特殊符號或者特殊符號(_)開頭定義
.box{
font-size: 20px;
color: red;
background-color: black;
}
.miss
{
height: 50px;
}
<p class="box">盛開的驕傲的開放和</p>
<div class="box">
盛開的驕傲的開放和
</div>
<div class="box miss">
盛開的驕傲的開放和
</div>
ID選擇器(只能用一次)
一個ID選擇器在一個頁面只能使用一次,如果使用2次或者使用2次以上不符合位w3c規范,js調用會出錯誤
一個標簽只能調用一個ID選擇器
一個標簽可以同時調用類選擇器和ID選擇器
box{
font-size: 40px;
color: rgb(34,56,76);
background-color: green;
}
#miss{
text-align: center;
}
.box{
text-indent: 2em;
}
<div id="box" class="box"> lalalalalalala</div>
<div > lalalalalalala</div>
<p>sdjflskdjfalkdgjakdk</p>
<p>skdjgadigjdfkgjadkfgjk</p>
通配符選擇器
*{屬性:值;}
所有的標簽都是用相同的樣式
不推薦使用
*{
font-size:100px;
}
<div>藍色短褲趕快</div>
復合選擇器
兩個或兩個以上的選擇器通過不同的方式鏈接在一起
交集選擇器,后代選擇器,子代選擇器,并集選擇器
交集選擇器
div.box{
color:red;
}
div#miss{
color:green;
}
<div class="box">sdlkgjaskg</div>
<div id="miss">lskdjgalksgj</div>
后代選擇器
選擇器+空格+選擇器{屬性:值;}
無限制隔代
只要能代表標簽,標簽,類選擇器,ID選擇器自由選擇
div p span{
color:red;
}
<div>
<p><span>sdkjgakd</span></p>
</div>
div span{
color:red;
}
<div>
<p><span>sdkjgakd</span></p>
</div>//可以隔代選擇
.box span{
color:red;
}
<div class="box">
<p><span>sdkjgakd</span></p>
</div>
子代選擇器
選擇器>選擇器{屬性:值;}
選中直接下一代元素,不能隔代
div>span{
color:red;
}
<div>
<p><span></span></p>
<span></span>{
</div>
并集選擇器
選擇器+,+選擇器+,選擇器{屬性:值;}
.box,#miss,span,h1{
color:red;
}
<div class="box">lsdkjg</div>
<p id="miss">dkjga</p>
<span>lkdgja</span>
<h1>ldkgjal</h1>
2文字
font-size:16px; 文字大小
font-weight:700;文字粗細(bold)不推薦使用,值得范圍100-900,>700開始加粗
font-family:字體
font-style:normal默認值,italic斜體
line-height:行高
文字屬性連寫
font:italic 700 16px/40px 微軟雅黑;
連寫一定要有文字大小和字體
順序:style,weight,size/line-height,family
family直接寫中文名稱
Css書寫位置
◆內嵌
<head>
<style type=”text/css”>
樣式表內容
</style>
</head>
◆外鏈
<link rel=”stylesheet” href=”1.css”>
◆行內樣式表
<div style=”font-size:20px;”></div>
4標簽分類(顯示方式)
4.1塊元素
典型代表
div,h1-h6,p,ul,li
特點:獨占一行,可以設置寬高,子塊元素默認情況下和父級元素一樣
行內元素:
典型代表:span,a,strong,em,del,ins
在一行上顯示,不能直接設置元素
行內塊元素
典型代表:img,input
特點:在一行顯示,可以設置寬度
塊元素,行內元素
塊元素轉換為行內元素:
display:inline
行內元素轉換為塊元素:
display:block;
塊和行內元素轉行內塊元素
5.css三大特性
層疊性
當多個樣式作用于同一個（同一類）標簽時，樣式發生了沖突，總是執行后邊的代碼(后邊代碼層疊前邊的代碼)。和標簽調用選擇器的順序沒有關系。
繼承性
繼承性發生的前提是包含（嵌套關系）
★文字顏色可以繼承
★文字大小可以繼承
★字體可以繼續
★字體粗細可以繼承
★文字風格可以繼承
★行高可以繼承
總結：文字的所有屬性都可以繼承。
◆特殊情況：
h系列不能繼承文字大小。
a標簽不能繼承文字顏色。
優先級 默認樣式<標簽選擇器<類選擇器<id選擇器<行內樣式<!important
◆優先級特點
★繼承的權重為0
★權重會疊加
鏈接偽類
a:link{屬性:值;} 鏈接默認狀態
a:visited{屬性:值;} 鏈接訪問之后的狀態
a:hover{屬性:值;} 鼠標放到鏈接上顯示的狀態 a:active{屬性:值;} 鏈接激活的狀態
：focus{屬性:值；} 獲取焦點
文本修飾
text-decoration: none | underline | line-through
背景
background-color 背景顏色
background-image:url(“1.png”); 背景圖片
background-repeat: repeat | no-repeat | repeat-x | repeat-y
background-position left | right | center | top | bottom
Background -attachment scroll | fixed
行高
◆瀏覽器默認文字大小
瀏覽器默認文字大小：16px
行高：是基線與基線之間的距離
行高=文字高度+上下邊距
一行文字行高和父元素高度一致的時候，垂直居中顯示。
行高的單位
行高 單位 文字大小 值
20px 20px 20px
2em 20px 40px
150% 20px 30px
2 20px 40px
總結:單位除了像素以為，行高都是與文字大小乘積。
行高單位 父元素文字大小 子元素文字大小 行高
40px 20px 30px 40px
2em 20px 30px 40px
150% 20px 30px 30px
2 20px 30px 60px
總結:不帶單位時，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素為單位，就是定義的行高值。
◆推薦行高使用像素為單位。
盒子模型
邊框border
Border-top-style: solid 實線
dotted 點線
dashed 虛線
Border-top-color 邊框顏色
Border-top-width 邊框粗細
◆邊框屬性的連寫
特點：沒有順序要求，線型為必寫項。
◆四個邊框值相同的寫法
特點：沒有順序要求，線型為必寫項。
邊框合并 border-collapse:collapse;
label for id
<label for="username">用戶名:</label> <input type="text" name="username" id="username" value="" class="username" />
.username:focus{
background-color: red;
}
內邊距
◆padding連寫
Padding: 20px; 上右下左內邊距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上內邊距為20px 左右內邊距為30px 下內邊距為40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
◆內邊距撐大盒子的問題
影響盒子寬度的因素
內邊距影響盒子的寬度
邊框影響盒子的寬度
盒子的寬度=定義的寬度+邊框寬度+左右內邊距
◆繼承的盒子一般不會被撐大
包含（嵌套）的盒子，如果子盒子沒有定義寬度，給子盒子設置左右內邊距，一般不會撐大盒子。
外邊距
◆外邊距連寫
Margin: 20px; 上下左右外邊距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外邊距合并
兩個盒子垂直一個設置上外邊距，一個設置下外邊距，取的設置較大的值。
◆嵌套的盒子外邊距塌陷
解決方法: 1 給父盒子設置邊框
2給父盒子overflow:hidden; bfc 格式化上下文
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
fireworks的基本使用
新建文件 ctrl+n
打開文件 ctrl+o
調出和隱藏標尺 ctrl+r
清楚輔助線:視圖-輔助線-清除
放大鏡:z ctrl++
縮小:ctl+alt
放大鏡狀態下alt+鼠標左鍵 縮小
抓手
