【知識筆記】CSS
一、CSS文件
引用css文件，放在Head裏面。
一般只使用一個文件，這無關於網站的大小，網站越大，某種意義上這種做法的優勢與潛力就會體現的越明顯。
對於門戶網站那就不適合只用一個文件。對於網頁比較多的系統，公共的CSS放一個文件，不同頁面或者模塊的最好分開放。因為放一起，不需要的樣式也會解析，浪費資源。
文件個數也要盡量少，減少http請求。
二、CSS reset
CSS重設就是由於各種瀏覽器解釋CSS樣式的初始值有所不同，導致設計師在沒有定義某個CSS屬性時，不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值，所以我們要先定義好一些CSS樣式，來讓所有瀏覽器都按照同樣的規則解釋CSS
例如：
body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; background:white; } input,textarea,select{ font-size:12px; font-size:100%; font-family:arial; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ marginView Code:0; } h4,h5,h6{ font-size:1em; } ul,ol{ padding-left:0; list-style-type:none; } /*image with no-border*/ a img{border:0;} img{border:0;}
三、CSS選擇器
- 元素標簽名：比如說$(”a“)會選出所有鏈接元素；
- #id：通過元素id進行選擇，比如說$("#form1")會選擇id為form1的元素；
- .class：通過元素的CSS類來選擇，比如說$(".boldstyle")會選擇class為boldstyle的元素；
- 標簽名#id.class：通過某類元素的id屬性和class屬性來選擇，如：$("a#blog.boldStyle") 會選擇id為blog並且CSS類型 為.boldStyle類型的 鏈接元素( <a id=‘blog‘ class=‘boldStyle‘ href="#" >鏈接</a>)；
- 父標簽名 子標簽名.class：通過選擇父標簽下的某種CSS類型的子元素，如：$("p a.redStyle") 【含空格】會選擇p段落元素中的鏈接子元素a，且其css類型為.redStyle；
四、刪除樣式
1、移除全部 使用removeattr（”style”）；
2、移除單個 使用css（“color””，””）；
$(‘#test‘).css(‘display‘, null); // 不起作用
應該是 $(‘#test‘).css(‘display‘, ‘‘);
也不要設置為： $(‘#test‘).css(‘display‘, ‘block’);
五、在鼠標滾動過程中導航欄保持固定
<ul id="d-tabs"> <li><a href="home">首頁</a></li> <li><a href="life">走進航大</a></li> <li><a href="direction">報考指南</a></li> <li><a href="college">學院介紹</a></li> <li><a href="type">招生類型</a></li> </ul>View Code
.hotel-detail .detail-container .tabs-top {
top: 0px;
position: fixed;
z-index: 1000000;
background: #fff;
width: 100%;
}
js：
//在鼠標滾動後導航欄保持固定 $(function () { var navOffset = $("#d-tabs").offset().top; $(window).scroll(function () { var scrollPos = $(window).scrollTop(); if (scrollPos >= navOffset) { $("#d-tabs").addClass("tabs-top"); } else { $("#d-tabs").removeClass("tabs-top"); } }); });View Code
六、設置圖片背景 陰影
類似效果：
//彈出層，並設置遮罩層
$(".base-room-pic").click(function () {
var baseRoomBox = $(".baseRoomBox");
baseRoomBox.css("display", "block");
baseRoomBox.css(‘background‘, ‘rgba(0, 0, 0, 0.5)‘);
});
七、瀏覽器分辨率問題
不同分辨率經常會導致 有的樣式 寬度 混亂。有些寬度最好動態設置。
Js中：var width = $("#app").css(‘width‘);
$("#d-tabs").css(‘width‘, width);
$("#d-room-filter").css(‘width‘, width);
不同分辨率調試技巧：
Chrome瀏覽器中： 打開這個按鈕， 進而設置不同分辨率測試
八、頁腳如何始終固定在頁面底部顯示
想要達到頁腳固定在頁面底部顯示，也就是當頁面主體高度在瀏覽器高度範圍內時頁腳靠瀏覽器底部，超出瀏覽器高度時頁腳在頁面主體下方，相當於在高度上的自適應。
乍看似乎很簡單，固定在底部，用fixed定位就好啦，但是頁面一屏顯示不下時，頁腳會遮擋頁面內容。
常用做法：
<style> .wrap { min-height: 100%; height: auto !important; } .main { padding-bottom: 80px; /*頁腳高度+頁腳與容器的距離*/ } .footer { height: 60px;/*頁腳高度*/ margin-top: -60px;/*一個頁腳高度的負外邊距*/ } </style> <div class="wrap"> <div class="main"> 在做項目時，想要達到頁腳固定在頁面底部顯示，也就是當頁面主體高度在瀏覽器高度範圍內時頁腳靠瀏覽器底部，超出瀏覽器高度時頁腳在頁面主體下方，相當於在高度上的自適應。 乍看似乎很簡單，固定在底部，用fixed定位就好啦，但是頁面一屏顯示不下時，頁腳會遮擋頁面內容。 現在常用這種方法： <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 哈哈哈 </div> </div> <div class="footer"> 原理是這樣的： 首先無論頁面內容有多少，設置它占有的高度都至少是100%(min-height:100%),然後設置頁面的高度根據容器內容的高度自適應，下面要考慮頁腳的位置，設置一個負的外邊距使頁腳在高度100%範圍內顯示，這樣帶來的問題是與wrap得部門內容重合，於是設置main的padding-bottom使部分內容空出來，這個padding-bottom值的高度就是用來容納頁腳的。 這樣就實現了想要的效果，當然方法不止一種 </div>View Code
原理是這樣的：
首先無論頁面內容有多少，設置它占有的高度都至少是100%(min-height:100%),然後設置頁面的高度根據容器內容的高度自適應，下面要考慮頁腳的位置，設置一個負的外邊距使頁腳在高度100%範圍內顯示，這樣帶來的問題是與wrap得部門內容重合，於是設置main的padding-bottom使部分內容空出來，這個padding-bottom值的高度就是用來容納頁腳的。
這樣就實現了想要的效果，當然方法不止一種。
九、超鏈接的一些常規CSS設置
鏈接的定義主要有三個屬性，顏色（color）、文本修飾（text-decoration）和背景（background）
超鏈接不顯示下劃線：text-decoration：none;
圖片超鏈接：<a><img src="" /></a>
定義鏈接樣式
CSS為一些特殊效果準備了特定的工具，我們稱之為“偽類”。其中有幾項是我們經常用到的，下面我們就詳細介紹一下經常用於定義鏈接樣式的四個偽類，它們分別是：
a:link，定義正常鏈接的樣式；
a:visited，定義已訪問過鏈接的樣式；
a:hover，定義鼠標懸浮在鏈接上時的樣式；
a:active，定義鼠標點擊鏈接時的樣式。
接定義的順序
沒有規矩不成方圓，雖然鏈接定義寫好了，但它也是有規則的，如果這四項的書寫順序稍有差錯，鏈接的效果可能就沒有了，所以每次定義鏈接樣式時務必確認定義的順序，link--visited--hover-active，也就是我們常說到的LoVe HAte原則（大寫字母就是它們的首字母）。
定義局部鏈接樣式
在CSS中寫上a:link{}這樣的定義會使整個頁面的鏈接樣式改變，但有些局部鏈接需要特殊化，這個問題也不難解決，只要在鏈接樣式定義的前面加上指定的id或class就可以了。
示例：
#sidebar a:link, #sidebar a:visited { color:#FF0000; text-decoration:none; } #sidebar a:hover, #sidebar a:active { color:#000000; text-decoration:underline; } 調用方法： <div id="sidebar"><a href="http://www.jb51.net" target="_blank">鏈接到腳本之家<a></div>View Code
十、超出部分影藏，鼠標移動上去顯示
- 超出部分若不允許換行：
width:200px;
overflow: hidden; /*溢出隱藏*/
text-overflow:ellipsis; /*隱藏的部分 顯示省略號*/
white-space:nowrap; /*規定段落中的文本不進行換行*/
使用這種方式的話，盒子一定要是塊級盒子，並且有寬度！
- 若允許換行，則設置個高度，並且不要 white-space:nowrap;
- 鼠標移動上去顯示，需要設置其 title屬性。
更多參考：關於overflow:hidden
【知識筆記】CSS