資訊專欄INFORMATION COLUMN
摘要：不允許負值用百分比來定義縮放比例。解決這個很簡單，在父元素中使用即可解決該。列寬度由單元格內容設定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點點。
css/css3常用樣式 CSS修改選中文字的顏色
html代碼：
第一段文字選中效果
第二段文字選中效果
css代碼：
.p1::selection{background:red;color:#fff;}
.p2::selection{background: black;color:red;}
選中文字后的效果如圖所示：
單行顯示語法：white-space:nowrap;
讓一段文字在固定寬度在一行顯示，最后一個字符為省略標記(...)，css樣式如下
div{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
多行文本最后省略號：
div{
display: -webkit-box;
-webkit-line-clamp:2;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
這里用到了文本溢出顯示省略號的，即設置溢出文本顯示為省略標記：
語法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;
clip：表示直接裁切溢出的文本；
ellipsis：表示文本溢出時，顯示省略標記(...)，省略標記代替最后一個字符；
ellipsis-word：表示文本溢出時，也是顯示省略標記(...),不同的是，省略標記代替的是最后一個詞)
zoom:1的原理和作用語法：zoom：normal |
取值：
normal：使用對象的實際尺寸。
兼容性：
例子：
zoom_CSS參考手冊_web前端開發參考手冊系列 zoom:normal
zoom:normalzoom:5
zoom:5zoom:300%
zoom:300%
谷歌與IE瀏覽器結果如圖所示（Firefox不支持）：
參考地址：http://www.css88.com/book/css/properties/user-interface/zoom.htm
Zoom屬性是IE瀏覽器的專有屬性， 它可以設置或檢索對象的縮放比例。
在平常的css編寫過程中，zoom:1能夠比較神奇地解決ie下比較奇葩的bug。
譬如外邊距（margin）的重疊，譬如浮動的清除，譬如觸發ie的 haslayout屬性等等。
（重點）當設置了zoom的值之后，所設置的元素就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。
ie下子元素浮動時候父元素不隨著自動擴大的問題，使用下面的CSS寫法：
.父元素 { overflow: auto; zoom: 1 }
css ie6、ie7中overflow:hidden無效解決辦法
產生原因：
當父元素的直接子元素或者下級子元素的樣式擁有position:relative 屬性時，父元素的overflow:hidden 屬性就會失效。
解決辦法：
我們在IE 6、7 內發現子元素會超出父元素設定的高度，即使父元素設置了overflow:hidden。
解決這個bug很簡單，在父元素中使用 *position:relative; 即可解決該bug。
...
表格位置,置左...
表格位置,置中...
背景圖片的URL=就是路徑網址...
設定表格邊框大小(使用數字)...
設定表格的背景顏色...
設定表格邊框的顏色...
設定表格暗邊框的顏色...
設定表格亮邊框的顏色...
指定內容與格線之間的間距(使用數字)...
指定格線與格線之間的距離(使用數字)...
指定表格的欄數...
設定表格外框線的顯示方式...
指定表格的寬度大小(使用數字)...
指定表格的高度大小(使用數字)
table{table-layout:fixed;}
語法：table-layout:automatic | fixed | inherit
automatic：默認。列寬度由單元格內容設定。
fixed：列寬由表格寬度和列寬度設定。
inherit：規定應該從父元素繼承 table-layout 屬性的值。
合并表格邊框border-collapse:collapsetable{border-collapse:collapse;}
語法：border-collapse:separate | collapse | inherit
separate：默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse：如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit：規定應該從父元素繼承 border-collapse 屬性的值。
例如：
table{border-collapse:collapse;}
table, td, th{border:1px solid black;}
CSS text-transform控制文本的大小寫
描述：text-transform 屬性控制文本的大小寫。
語法：text-transform:none | capitalize | uppercase | lowercase | inherit
none 默認。定義帶有小寫字母和大寫字母的標準的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。
text-stroke[ text-stroke-width ]：設置或檢索對象中的文字的描邊厚度
[ text-stroke-color ]：設置或檢索對象中的文字的描邊顏色
text-stroke(文本描邊)和text-fill-color(文本填充色)注意點：
目前這兩個屬性只有webkit內核的Safari和Chrome支持，例如：
.box{-webkit-text-stroke: 3.3px #2A75BF;}
text-fill-color：顏色值，和color屬性差不多都是文字的樣式；
注意：同時使用text-fill-color和color屬性，text-fill-color將覆蓋color屬性的顏色值；
text-fill-color可以使用透明值，即：text-fill-color：transparent
text-shadow.box{text-shadow:0px 0px 0px #333333;}
屬性值依次：水平方向位移（支持負值）、垂直方向位移（支持負值）、模糊半徑、陰影顏色
text-shadow對同一個text，可設置多個陰影，與box-shadow類似，使用逗號","分割，前一個設置效果在后一個設置效果之上。
box-shadow 參考：http://www.cnblogs.com/lhb25/...
為了兼容各主流瀏覽器并支持這些主流瀏覽器的較低版本，在基于Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。全面的寫法：
.box-shadow-6{
box-shadow:-10px 0 10px red, /*左邊陰影*/
10px 0 10px yellow, /*右邊陰影*/
0 -10px 10px blue, /*頂部陰影*/
0 10px 10px green; /*底邊陰影*/
}
參考地址：http://blog.csdn.net/freshlov...
letter-spacing字符間距letter-spacing 屬性增加或減少字符間的空白（字符間距）。
例如： letter-spacing: 2px;
css中透明度兼容代碼
div{filter: alpha(opacity=80);opacity:0.8;}
根據input的type來控制css樣式
1.用css中的type選擇器
input[type="text"]{ background-color:#FFC;}
2.用css的expression判斷表達式
input{ background-color:expression(this.type=="text"?"#FFC":"");}
3.用javascript腳本實現(覺得沒必要，省略...)
css3設置字體@font-face{
font-family: myFirstFont;
src: url("Sansation_Light.ttf"),
url("Sansation_Light.eot"); /* IE9+ */
}
div{
font-family:myFirstFont;
}
網頁字體設置
font-family:"YourWebFontName";
src:url("YourWebFontName.eot"); /* IE9 Compat Modes */
src:url("YourWebFontName.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("YourWebFontName.woff") format("woff"), /* Modern Browsers */
url("YourWebFontName.ttf") format("truetype"), /* Safari, Android, iOS */
url("YourWebFontName.svg#YourWebFontName") format("svg"); /* Legacy iOS */}
參考地址：《css學習筆記 - 網頁中導入特殊字體@font-face屬性詳解》
css強制性換行div{
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/
}
CSS :first-child 選擇器,:last-child選擇器,nth-child(IE7,8無效，不識別)
:nth-child(2)選取第幾個標簽，“2可以是你想要的數字”
:nth-child(2n)選取偶數標簽，2n也可以是even
:nth-child(2n-1)選取奇數標簽，2n-1可以是odd
:nth-child(3n+1)自定義選取標簽，3n+1表示“隔二取一”
background:-webkit-linear-gradient(top,#FFF,#cb1919); background:-o-linear-gradient(top,#FFF,#cb1919); background:-ms-linear-gradient(top,#FFF,#cb1919); background:-moz-linear-gradient(top,#FFF,#cb1919); background:linear-gradient(top,#FFF,#cb1919);
第一個參數：設置漸變的起始位置
第二個參數：設置起始位置的顏色
第三個參數：設置終止位置的顏色
IE 瀏覽器
IE瀏覽器實現漸變只能使用IE自己的濾鏡去實現
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一個參數：漸變起始位置的顏色
第二個參數：漸變終止位置的顏色
第三個參數：漸變的類型
0 代表豎向漸變 1 代表橫向漸變
其中RGB顏色的原理是通過定義不同的紅綠藍色值來組成一個顏色。color:rgb(254,2,8);
其中HSL是通過色相、飽和度、亮度模式來申明顏色的。color:hsl(359,99%,40%);
如果需要設置透明背景 則可以用到他們：
background-color:hsla(0,0%,100%,0.8); background-color:rgba(255,255,255,0.8);
不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不會。
background-color:rgba(0,0,0,0.5)，此寫法解決opacity帶來的元素也透明問題，但IE8低版本瀏覽器不支持。
em,u{font-style: normal;}
媒體查詢功能
一般寫法：
@media screen and (max-width: 960px){
body{
background: #000;
}
}
應該有人會發現上面這段代碼里面有個screen，他的意思是在告知設備在打印頁面時使用襯線字體，在屏幕上顯示時用無襯線字體。但是目前我發現很多網站都會直接省略screen,因為你的網站可能不需要考慮用戶去打印時，你可以直接這樣寫：
@media (max-width: 960px){
body{
background: #000;
}
}
其中css2的媒體查詢：
我們想知道移動設備是不是縱向放置的顯示屏，可以這樣寫：
我們把第一段的代碼也用CSS2來實現，讓它一樣可以讓頁面寬度小于960的執行指定的樣式文件：
但是上面這個方法，最大的弊端是他會增加頁面http的請求次數，增加了頁面負擔，我們用CSS3把樣式都寫在一個文件里面才是最佳的方法。
下面的寫法是實現尺寸等于480px：
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
/*自己添加的樣式*/
}
其中對于-webkit-min-device-pixel-ratio作如下解釋：
-webkit-min-device-pixel-ratio為1.0
所有非Retina的Mac
所有非Retina的iOS設備
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
-webkit-min-device-pixel-ratio為1.3
Google Nexus 7
-webkit-min-device-pixel-ratio為1.5
Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation
-webkit-min-device-pixel-ratio為2.0
iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X
樣式實現三角形div{
position:absolute;
left:50%;
bottom:0;
margin-left:-10px;
width:0;
height:0;
border-width:10px;
border-style:solid dashed dashed dashed;
border-color:transparent transparent #71151c transparent;
}
css3水平垂直居中
div{
display: box;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
css3屬性 -webkit-filter(改變模糊度 亮度 透明度等方法)
-webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感覺效果很不錯。下面咱們就學習一下filter這個屬性吧。
現在規范中支持的效果有：
grayscale 灰度 值為0-1之間的小數
sepia 褐色 值為0-1之間的小數
saturate 飽和度 值為num
hue-rotate 色相旋轉 值為angle
invert 反色 值為0-1之間的小數
opacity 透明度 值為0-1之間的小數
brightness 亮度 值為0-1之間的小數
contrast 對比度 值為num
blur 模糊 值為length
drop-shadow 陰影
用法是標準的CSS寫法，如：
-webkit-filter: blur(2px);
使用方法：（配合動畫使用）
.jaguar-con-show img.jaguar-con-imglast{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.jaguar-con-show img.jaguar-con-imglast{
-webkit-filter: blur(3px) brightness(.6);
-moz-filter: blur(3px) brightness(.6);
-o-filter: blur(3px) brightness(.6);
-ms-filter: blur(3px) brightness(.6);
filter: blur(3px) brightness(.5);
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
/*border: 3px solid #000;*/
}
CSS pointer-events
pointer-events原本來源于SVG，目前在很多瀏覽器中已經得到體現。不過，要讓任何HTML元素生效還得借助于一點點css。該屬性稱之為pointer-events，基本上可以將它設置為auto，這是正常的行為，而“none”是一個有趣的屬性。
如果你已經設置一個元素的css屬性為pointer-events: none。它將不會捕獲任何click事件，而是讓事件穿過該元素到達下面的元素.
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個CSS3屬性，IE6/7/8/9都不支持，Opera在SVG中支持該屬性但是HTML中不支持。
禁止button按鈕的點擊與禁止a標簽的跳轉pointer-events:none禁止掉鼠標事件（css3屬性）
禁止button按鈕的點擊：
button禁止點擊的樣式：
button{cursor: not-allowed;}
所以button用到了disabled="disabled"與樣式cursor: not-allowed
禁止a標簽的跳轉行為：
鏈接 禁用鏈接
樣式：
a{pointer-events: none;cursor:not-allowed}
參考地址：http://www.runoob.com/try/try.php?filename=bootstrap3-button-disabledstate
但是用到鍵盤tab鍵的時候出現a標簽可以跳轉，實現鍵盤tab也禁止a標簽跳轉 參考地：
http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
首字母大寫：text-transform:capitalize
全部大寫：text-transform:uppercase
全部小寫：text-transform:lowercasecase
