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