css學習筆記

標籤：

css相容性問題 http://www.quirksmode.org/css/selectors/
程式員學英文 http://blog.csdn.net/friendbaby/article/details/6937290
關於CSS屬性的瀏覽器安全色性，http://caniuse.com/
瀏覽器頁面渲染過程 http://blog.csdn.net/lihongxun945/article/details/37830667

什麼是table-cell
BFC

//規範
不推薦使用@import 引入其他css檔案他會引起一些頁面渲染的效能問題
分類命名 布局 g- 模組m-
語義命名
屬性的書寫順序
先寫 顯示內容 而後是 自身屬性 在後是 文字屬性和其他屬性
displaywidthfont
visibilityheighttext-align
positionmargintext-decoration
floatpaddingvertical-align
clearborderwhite-space
list-styleoverflowcolor
topmin-widthbackground

大順序是從左至右的順序 而後才是從上到下的順序

hack方式
ie6 _property:value;在屬性名稱前加_只有ie6能識別
ie6/7 *property:value;在屬性名稱前家*只有ie6/7能識別

css模組化

.m-nav {}
.m-nav li,.m-nav a{}
.m-nav li{}
.m-nav a{}
模組擴充就是在原先的類上在添加一個類例子如下
.m-nav-1 {}
.m-nav-1 li,.m-nav a{}
.m-nav-1 li{}
.m-nav-1 a{}

border-radius ie8及以下不支援
box-sizing ie7及以下不支援
box-shadow ie8及以下不支援
outline ie7及以下不支援

選取器

1.標籤選取器 div,h1,p,span
2.類別選取器 (區分大小寫) class=""
3.id選取器 (區分大小寫) id=""
4.屬性選取器
[disabled] {background-color:red;}
[type=button] {color:blue;}
[id=btn]{color:red;} id選取器就是屬性選取器的特例
[class~=sport] 選中類名裡包含sport的元素
[lang|=en] 會選中lang屬性值為en 或者en- 開頭的元素 <p lang="en-us">hello</p>(用的不多)
[href^="#"] 選中href值以#號開頭的元素 如果你的屬性值是一個符號或者裡麵包含空格的話就需要用引號引起來;
[href$=pdf] 選中href值以pdf結尾的元素
[href*=lady] 選中href值中包含lady的元素
5.偽類別選取器(都是以冒號開頭的)
a:link 選中頁面中所有的連結 並且 href 是有值的
a:visited 訪問過的連結
a:hover 滑鼠移上去的時候
a:active 點擊的瞬間的樣式
如果想四個都寫順序必須是這樣的
:enabled 選中可用的元素設定樣式 (input:enabled)
:disabled 選中停用元素設定樣式 ..
:checked 選中被選中的元素設定樣式
li:first-child{}
li:last-child{}
li:nth-child(even){} 選中偶數項
li:nth-child(3n+1){} n從0開始算 n=0:1 1:4 2:7 3:10 就是選中 1 4 7 10 項的元素
li:nth-last-child(even){} 倒著選
:only-child{} 選中那些只有一個子項目的元素 比如說ul下只有一個li
dd:first-of-type{} 選中所有dd元素中的第一個dd元素(當然不僅限於dd,可以是任何元素)
dd:nth-of-type(even) 選中偶數項的dd類型的元素
dd:nth-last-of-type(2n) 倒著選
span:only-of-type{} 選中子項目中只有一個span類型元素的父元素中的這個span類型元素 真繞 跟類型相關
:empty{} 選中沒有子項目的元素 就是其中是空的 就像<div></div>這樣
:root{} 選中的是html標籤
:not(P) 選中不是括弧中選中的元素
:target{} 選中當前正在活動的錨元素 不懂請看 例子 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target
p:lang() 選擇帶有以 "en" 開頭的 lang 屬性值的每個 <p> 元素 是開頭
6.虛擬元素選取器
P::first-letter{} 選中p元素下面的第一個字元設定樣式
p::first-line{} 選中第一行
::before{content:"."} 在選中的元素內容的前面插入content裡的內容 (是內容的前面 不是前面 恩)
::after{content:"."} ..後面..
::selection{} 用於被用於選中的內容
7.後代選取器和子選取器
.main h2{} 選中class為main的元素裡面的所有h2元素
.main>h2{} 選中class為main中第一級的h2元素 (是第一層級裡所有的h2)
h2+p{} 選中一個P這個p的前面(緊跟的前面)必須是一個h2 所謂的兄弟
h2~p{} 選中h2後面(是後面)所有的一級的P元素
8.選取器分組
h1,h2,h3{}
css繼承

子項目可以繼承父元素的樣式

有些樣式是可以自動繼承的 inherited:yes
color font text-align list-style
有些是不可以自動繼承的 inherited:no
background border position

css優先順序
a 行內樣式
b id選取器
c 類 偽類 和屬性選取器
d 標籤選取器和虛擬元素選取器

權重從上往下依次降低

參考以下表

選取器abcdvalue
h1 0 0 0 1 1
p>em 0 0 0 2 2
style:"" 1 0 0 0 1000
.comment p 0 0 1 1 11
div#content 0 1 0 1 101
a:link 0 0 1 1 11

value值越高優先順序越高

css層疊 如果優先順序一樣 後面覆蓋前面

css改變優先順序 如果優先順序一樣
1.可以改變樣式的順序
2.提升選取器的優先順序+一個標籤選取器 比如 .tip 和 .fuck 優先順序一樣 那麼在.tip前加一個標籤選取器 p .tip 他的優先順序就提升了
3.color:blue !important; 在屬性值的後面空一格加上!important; 那麼他的優先順序就會勝出 (山窮水盡的時候才用這種方式)
文本
font-size:[<length>|<percentage>] # (注意後面的#表示可以用,分隔寫多個屬性值)
font-size:2em;
font-size:200%; 參照物都是父元素上字型的大小
font-family:<family-name>|<generic-family>
<generic-family>=serif|sans-serif|cursive|fantasy|monospace

後面三種是不太常用的 前兩種分別是:襯線體,非襯線體 是由瀏覽器或者系統預設指定的,如果瀏覽器預設設定的襯線體是微軟雅黑,那麼我們使用這個值的時候就是微軟雅黑;
如果你英文想用一個字型中文想用一個字型的話可以這樣寫:
font-family:arial,"宋體"; 因為arial不包含中文 所以要用後面的中文字型;

font-weight:bold|noraml; 100|200|......900 吧粗細分成9等 但是絕大多數字型都是不支援9等的

font-style:normal|italic|oblique
italic用的是字型裡的斜體,是字型裡本身帶的斜體, oblique是傾斜; 如果字型裡有斜體即使你的值寫的是oblique那麼他用的也是 italic

line-height:normal|number|length|percentage |1,16px,2em,200%|
預設是normal 是1.14左右
如果是em,100%那麼他的參照物是字型的大小 比如2em 字型是16px 那麼他的line-height=32px;
line-height:值為number的時候比如說是3,那麼他的繼承方式是直接繼承,意思就是他的子項目的line-height也是3 如果父元素的字型是30px子項目的字型是16px那麼父元素的
line-height就是90px而子項目的只有48px;
值為百分比的時候是先計算然後再去繼承,比方說300%按字型是30px來計算,計算出來是line-height是90px,那麼他的子項目的line-height就是90px;就不管子項目的
字型怎麼變都是90px了;

簡寫:font:30px/2 SimSun,SimSim;
font:italic bold 20px/30px SimSun;
font:20px Simsun;

(font-size/line-height)
三種簡寫方式
顏色:color:red|#ffffff|rgb(255,0,0)|rgba(255,0,0,1)|transparent 最後一個添加一個阿爾法通道可以控制透明度 1就是不透明

水平text-align:justify;左右對齊,空格可能會加大 多增加一些間距使左右對齊
垂直 vertical-align:baseline,sub,super,top,text-top,middle,bottom,text-bottom,percentage,length;
百分比的參照物是行高;
在一段文字的中間插入一個表情圖片 可以給這個圖片設定class來設定樣式;
如果值是20px;那麼意思就是以baseline為起點往上走20px;
如果是50%;那就看行高如果行高是60px;那麼就是30px;那麼就是往上走30px;
top行的最高點
text-top文字的最高點
縮排 text-indent:2em|200%|10px;em是文字的大小的幾倍 如果是百分比 那麼參照物就是整個容器的寬度
-9999px;這一行字就沒了可以說跑到螢幕外面去了
我們可以利用這樣的手段去隱藏一些文字,seo裡面

換行要不要保留 空格要不要合并 tab要不要合并 是否要自動換行
white-space:normal|nowrap|pre|pre-wrap|pre-line|
他們的處理方式看下錶

換行空格和tab 超出處理
normal 合并合并 自動換行
nowrap 合并 合并 不換行讓其超出
pre 保留 保留 不換行讓其超出
pre-wrap 保留 保留 自動換行
pre-line 保留 合并 自動換行

上表中的合并就是自動合并 [換行 或者 空格和tab] 為一個空格


word-wrap:normal|break-word|
break-word:長單詞允許自動換行;

word-break:normal|keep-all|break-all
break-all:任意兩個字母之間都可以換行;

text-shadow:文字陰影:length(2~3) && color
text-shadow:1px 2px #f00; 陰影x軸的位移 y軸的位移 陰影顏色
text-shadow:1px 2px 2px #f00; 第三個值就陰影的模糊半徑 陰影沒有顏色的時候就是文字color的顏色;
text-decoration:none;underline,overline,line-through;
overline:上劃線;
line-thought:中劃線
text-decoration:underline overline;值可以寫多個

text-overflow:clip|ellipsis;

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

三個配合使用 一行內文字溢出用...代替;

cursor:[url,]* 自訂滑鼠形狀; cursor:url(xxx.cur),pointer;
auto;自動處理;
help:帶個問號
pointer:手型
zoom-in:放大
zoom-out:縮小
move:移動

inherit強制繼承

盒模型

width:100px|3em|100%;
max-width:
min-width:
max-height:
min-height:
margin合并 毗鄰元素之間的外邊距會合并取較大值; 父元素margin和他的的第一個子項目或最後一個子項目的margin也會合并具體情況具體分析


border-radius:0px 5px 10px 15px/20px 15px 10px 5px;1和5對應 水平半徑 垂直半徑
border-top-left-radius:50%;分別設定

overflow:scoll顯示兩個捲軸 ;auto 自動顯示捲軸
overflow-x:
overflow-y:

預設 width height 設定的是content-box的大小

內容盒子 content-box
邊框以內(以內) border-box

box-sizing:content-box|border-box/用來設定width height指定的地區

同樣的寬高padding border 設定不同的box-sizing 顯示的大小的明顯不同的

box-shadow:可以有多個用,隔開
box-shadow: 4px 0px 0px 0px red
水平便宜 垂直位移 模糊半徑 陰影大小
模糊半徑和陰影大小可以不設定
顏色沒有設定的時候就是文字顏色
box-shadow:inset 0 0 0 ,0 0 0 0 red;內陰影
模糊半徑怎麼理解,比方說模糊半徑是3px;就是在陰影的外邊緣 往外模糊1.5 往內模糊1.5
陰影是不佔空間的
輪廓也是不佔空間的

outline 輪廓 跟 border 類似 color:有一個不一樣的值就是invert就是當前背景顏色的相反色;

背景
background-color: 跟color一樣
background-image:url(),url(); 一個容器裡會顯示兩個背景圖片 先寫的在上層 後寫的在下層 背景顏色在下層;
background-repeat:space;等分空隙 : 平鋪的在平鋪的同時每張圖片之間會流出一些空隙來;
round:縮放壓扁可能:平鋪的在平鋪的同事圖片會進行伸縮
當他是兩個值的
第一個值是x軸的平鋪 第二個軸是y軸的平鋪
background-attachment:scroll,fixed,local;
背景和內容同時滾動用local;
內容滾動用scroll;
fixed 它的參照物是整個viewport
background-position:當用百分比的時候 20% 50%; 這個百分比是圖片的20% 50%同時也是容器的20% 50%

background-image:linear-gradient()線性漸層
linear-gradient(red,green); 唯寫兩個顏色 預設是從上到下所以是 上紅下綠
(to top,red,green); 反向 從下往上 所以是下紅上綠
(to right bottom,red,green) 向一個角 左上方紅 右下角綠
(0deg,red,green); 0度從下往上的方向漸層
(45deg,red,blue); 以0度為標準順時針旋轉45度 方向還是0度時候的方向
(red,blue,green);第一個預設預設的值是0,第三個預設預設的值是100,中間的預設值會平分所以就是50%;
(red,blue 20%,green); 設定中間佔20%;
radial-gradient() 鏡像漸層
extent-keyword closest-side | farthest-side | closest-corner |farthest-corner
離圓心 最近的那條邊 最遠的那條邊 最近的那個角 最遠的那個角
radial-gradient(closest-side,red,blue); 四個邊離圓心都是最近的
(circle,red,blue); circle預設大小是最遠的那個角
(red,blue);沒有寫關鍵字預設的是farthest-corner
(100px 50px,red,blue); x軸半徑是100y軸半徑是50從內網外顏色是red blue
(100px 50px at 0 0,red,blue) 可以對他的圓心進行定位比如說是在 0,0點那麼就是在右上方
(red,green 20%,blue);可設定多個
理解這些見附件
當我們為某一個背景圖片設定 background-position:right bottom;
那麼這個圖片是在padding-box的右下角 為什麼?
就是由background-origin:控制 border-box padding-box content-box
他的預設值就是padding-box

background-clip:border-box padding-box content-box
背景圖片出現的地區裁剪 如果只想讓其出現在content-box那麼就使用content-box這個屬性其他一樣
自行腦補
background-size:auto,
20px 20px; 固定背景圖片的大小
50% 50%; 都是容器的50%,很有可能被展開
cover;撐滿整個容器 可能有些部分超出去
contain;儘可能的大,但是都不能超出容器

簡寫

background:url(red.png) 0 0/20px 20px no-repeat;
position/size
url(green.png) 50% 50%/contain no-repeat content-box green;
第一個box是origin,第二個是clip如果只出現一個那麼他就即是origin也是clip

區塊層級元素 :display:block;
寬度是父元素的寬度,
可設定寬高
換行顯示
行級元素 display:inline;
預設寬度為內容寬度
不可設定寬高
同行顯示
display:inline-block;
預設寬度為內容寬度
可設定寬高
同行顯示
整塊換行 如果超出後面的 就整塊換行
可以為這種元素設定vertical-align:middle;那麼他前後的文本節點都會垂直置中
display:none;
display:none|visibility:hidden;
如果visibility:hidden,只是不顯示位置還佔著
display:none;不顯示並且位置也不佔;

position:fixed;固定定位的元素他的預設寬度為內容寬度 參照物為視窗
遮罩層是固定定位width:100% height:100%;

一個絕對位置的元素 如果給他left top right bottom都設定值的話那麼他額值就會被撐開;
三行調適型配置
.head{position:absolute;top:0,left:0;width:100%;height:100px;}
.body{position:absolute;top:100px;bottom:100px;left:0;right:0;}
.foot{position:absolute;bottom:0,left:0;width:100%;height:100px;}

relative定位的元素不會脫離文檔流

絕對位置的元素是脫離文檔流的 那麼他後面的元素就會佔據他原來的位置

float:
浮動元素的預設寬度為內容寬度
脫離文檔流
脫離文檔流的元素他後面的元素會佔據他的位置

浮動的脫離文檔流和定位的脫離文檔流有些不一樣
float會被邊界擋住 不是完全的脫離

float的元素在同一文檔流中

float對元素是脫離文檔流 對內容來說是在文當流的
float:是半脫離文檔流的

.clearfix:after{
content:"."; display:block;clear:both;height:0;overflow:hidden;visibility:hidden;
}
.clearfix{zoom:1;}
<div class="body clearfix">這麼寫
在父元素上加一個清除浮動 他的後續元素就不會佔據了

置中布局
.child{display:inline-block;}
.parent{text-align:center;}
子項目為inline-block;父元素讓他置中

.child{display:table;margin:0 auto;}
disply:table;的元素的寬度也是跟著內容走 只設定child 不需要設定父元素

.parent{
position:reative;
}
.child{
position:absolute;
left:50%;
trasform:translateX(-50%);
}


垂直置中 table-cell + vertical-align
vertical-align可以作用於inline inline-block table-cell元素

.parent{
position:reative;
}
.child{
position:absolute;
top:50%;
trasform:translateY(-50%);
}

一列定寬 一列自適應
一列不定寬 一列自適應剩餘的寬度
多列的不定寬自適應

一列定寬 一列自適應
.left{float;left;width:100px; _margin-right:-100px;}
.right{margin-left:120px;}
ie6下回有bug

css學習筆記