色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css樣式就得這么寫(css參考樣式集合)

如今我們的網站、頁面更加需要注重細節，不論是字體的樣式、還是圖片的分辨率清晰度都會影響到用戶的訪問體驗和 PV，以及用戶以后是否會回訪我們的網站/博客。為了讓我們的網頁變得更加美觀個性化，我們需要了解更多的 CSS 樣式屬性。CSS 不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，CSS 擁有對網頁對象和模型樣式編輯的能力。為了方便大家學習 CSS 樣式，下面大家整理 CSS 樣式知識點及參考樣式合集。


css樣式

一些常見不必要 CSS 樣式

1、與默認 CSS 樣式一致

我們有時候寫的 CSS 樣式會與瀏覽器默認的 CSS 樣式一致，有時候您自己都可能沒有意識到。

常見的例子有：
①

div{width:auto; height:auto;}

對于一些剛使用 CSS 的朋友，有時候，其為了表達這段 div 高度是自動適應于內部元素的，會情不自禁的加上height:auto;的樣式。很顯然，這段樣式是沒有必要的，默認的任何塊狀元素的高度幾乎都是 auto。

我們來看看人人網個人首頁的 CSS 樣式文件（鏈接點這里），在 chrome 瀏覽器下 Ctrl+F 搜索 height:auto，居然顯示了九條（見下圖）。

height:auto

height:auto;的樣式

按照常規來講，height:auto只有在使用 CSS 優先級抹掉之前的height定值的樣式的時候使用，其余情況基本上都是可以去掉的。就像是上面人人網的例子，居然9個height:auto，這里至少有一半是沒有必要的。

②

body,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}

v

上面有關 body,p 等標簽的樣式中有個樣式是無效的，與默認值一致的，這個樣式就是padding:0;，對于body,p,h1~6這些標簽，本身的padding值就是0，所以只需要margin:0就可以了。


在CSS reset中，為了方便，都是一堆標簽直接套個margin:0;padding:0; 了事。還拿人人網的 CSS 樣式文件舉例，人人網個人首頁樣式第一行就是一長串標簽帶個margin:0;padding:0; 先不管其把span,div,em之類的標簽也加進入，就算是沒有這些標簽，也是極不推薦這種寫法，完全的浪費資源，浪費 CSS 的渲染。比較推薦的做法是把ul,ol獨立出來，因為ul,ol還要獨立設置list-style樣式，而且常用的標簽就ul,ol列表元素有默認的 padding 值，所以高效的寫法應該是：

body,p,h1,h2,h3,h4,h5,h6{margin:0;}

ul,ol{list-stype:none; margin:0; padding:0;}

③

span{display:inline; float:left; margin-left:3px;}

這也是常出現的。出現這種情況的原因可能與 IE6 的浮動雙邊距 bug 有關，我們可以用設置display:inline的方法修復 IE6 的這個 bug，但是，如果對這個 bug 理解不夠，對 CSS 的理解不足，就會出現濫用的情況。上面是濫用的情況之一，對于span/a/em/cite/i/b/strong等行內元素默認就是display:inline的，所以給其設置display:inline屬性是多此一舉。


類似的情況還有對本身就是block水平的元素設置display:block屬性，例如：

li{display:block; padding:4px 0;}

上面的情況屢見不鮮，甚至在比較優秀的網站上也會有這類低級的樣式問題。


④其他一些情況

div{margin:auto;}

textarea{overflow:auto;}

img,input,button{vertical-align:baseline;}

div{background-position:0 0;}

css參考樣式集合

一. 字體屬性：(font)

1. 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD

2. 樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)

3. 行高 {line-height: normal;}(正常) 單位：PX、PD、EM

4. 粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)

5. 變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)

6. 大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

7. 修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)


二. 常用字體： (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana


三. 背景屬性： (background)

1. 色彩 {background-color: #FFFFFF;}

2. 圖片 {background-image: none;}

3. 重復 {background-repeat: no-repeat;}repeat-x(水平);repeat-y(垂直)

4. 滾動 {background-attachment: fixed;}(固定) scroll;(滾動)

5. 位置 {background-position: left;}(水平) top(垂直);

簡寫方法 {background:#000 url(..) repeat fixed left top;} /*簡寫·這個在閱讀代碼中經常出現.


四. 區塊屬性： (Block)

1. 字間距 {letter-spacing: normal;} 數值 

2. 對齊 {text-align: justify;}(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

3. 縮進 {text-indent: 數值px;}

4. 垂直對齊 {vertical-align: baseline;}(基線) sub;(下標) sup;(上標) top; text-top; middle; bottom; text-bottom;

5. 詞間距word-spacing: normal; 數值

6. 空格white-space: pre;(保留) nowrap;(不換行)

7. 顯示 {display:block;}(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題) /*display 屬性的了解很模糊*/


css


五. 方框屬性： (Box)

1. width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左


六. 邊框屬性： (Border)

1. border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset; border-width:; 邊框寬度

border-color:#;

簡寫方法border：width style color; /*簡寫*/


七. 列表屬性： (List-style)

1. 類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

2. 位置list-style-position: outside;(外) inside;

3. 圖像list-style-image: url(..);


八. 定位屬性： (Position)

1.Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)


九. CSS文字屬性：

1. color : #999999; /*文字顏色*/

2. font-family : 宋體,sans-serif; /*文字字體*/

3. font-size : 9pt; /*文字大小*/

4. font-style:itelic; /*文字斜體*/

5. font-variant:small-caps; /*小字體*/

6. letter-spacing : 1pt; /*字間距離*/

7. line-height : 200%; /*設置行高*/

8. font-weight:bold; /*文字粗體*/

9. vertical-align:sub; /*下標字*/

10. vertical-align:super; /*上標字*/

11. text-decoration:line-through; /*加刪除線*/

12. text-decoration: overline; /*加頂線*/

13. text-decoration:underline; /*加下劃線*/

14. text-decoration:none; /*刪除鏈接下劃線*/

15. text-transform : capitalize; /*首字大寫*/

16. text-transform : uppercase; /*英文大寫*/

17. text-transform : lowercase; /*英文小寫*/

18. text-align:right; /*文字右對齊*/

19. text-align:left; /*文字左對齊*/

20. text-align:center; /*文字居中對齊*/

21. text-align:justify; /*文字分散對齊*/

vertical-align屬性

22. vertical-align:top; /*垂直向上對齊*/

23. vertical-align:bottom; /*垂直向下對齊*/

24. vertical-align:middle; /*垂直居中對齊*/

25. vertical-align:text-top; /*文字垂直向上對齊*/

26. vertical-align:text-bottom; /*文字垂直向下對齊*/


十. CSS邊框空白

1. padding-top:10px; /*上邊框留空白*/

2. padding-right:10px; /*右邊框留空白*/

3. padding-bottom:10px; /*下邊框留空白*/

4. padding-left:10px; /*左邊框留空白

CSS 樣式表中的樣式覆蓋順序

有時候在寫 CSS 的過程中，某些限制總是不起作用，這就涉及了 CSS 樣式覆蓋的問題，如下所示：

#navigator {  

    height: 100%;  

    width: 200;  

    position: absolute;  

    left: 0;  

     border: solid 2 #EEE;  }    

.current_block {  

     border: solid 2 #AE0;  }  

在一些教材中，只說 CSS 的順序是“元素上的 style” > “文件頭上的 style 元素” >“外部樣式文件”，但對于樣式文件中的多個相同樣式的優先級怎樣排列，沒有詳細說明。經過測試和繼續搜索，得知優先級如下排列：
 
1. 樣式表的元素選擇器選擇越精確，則其中的樣式優先級越高：

id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式
所以上例中，#navigator的樣式優先級大于.current_block的優先級，及時.current_block是最新添加的，也不起作用。
 
2. 對于相同類型選擇器制定的樣式，在樣式表文件中，越靠后的優先級越高：

注意，這里是樣式表文件中越靠后的優先級越高，而不是在元素 class 出現的順序。比如 .class2 在樣式表中出現在 .class1 之后：

.class1 {  

    color: black;  }    

.class2 {  

    color: red;  }

而某個元素指定 class 時采用class="class2 class1"這種方式指定，此時雖然class1在元素中指定時排在class2的后面，但因為在樣式表文件中class1處于class2前面，此時仍然是class2的優先級更高，color的屬性為red，而非black。

 

3. 如果要讓某個樣式的優先級變高，可以使用!important來指定：

.class1 {  

    color: black !important;  }    

.class2 {  

    color: red;  } 

這時 class 將使用 black，而非 red。

 

對于一開始遇到的問題，有兩種解決方案：

1. 將 border 從#navigator中拿出來，放到一個class .block中，而.block放到.current_block之前：

#navigator {  

    height: 100%;  

    width: 200;  

    position: absolute;  

    left: 0;  }    

.block {  

    border: solid 2 #EEE;  }    

.current_block {  

    border: solid 2 #AE0;  }  

 需要默認為#navigator元素指定class="block"

2. 使用!important:

#navigator {  

    height: 100%;  

    width: 200;  

    position: absolute;  

    left: 0;  

    border: solid 2 #EEE;  }    

.current_block {  

    border: solid 2 #AE0 !important;  }  

此時無需作任何其他改動即可生效。可見第二種方案更簡單一些。 

大家都知道CSS的全稱叫做“層疊樣式表”，但估計很多人都不知道“層疊”二字的含義。其實，“層疊”指的就是樣式的覆蓋，當一個元素被運用上多種樣式，并且出現重名的樣式屬性時，瀏覽器必須從中選擇一個屬性值，這個過程就叫“層疊”。樣式覆蓋（這種叫法更大眾化些）遵循一定的規則。


首先需要明確的是，很多情況都會導致一個元素被運用上多種樣式，樣式覆蓋的規則也需要根據不同的情況來定，具體規則如下。


規則一：由于繼承而發生樣式沖突時，最近祖先獲勝。

CSS的繼承機制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況：

<style>

body

 {color:black;}

p

 {color:blue;}

</style>

<p>welcome to <strong>w3cschool</strong></p>

strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍色。

規則二：繼承的樣式和直接指定的樣式沖突時，直接指定的樣式獲勝。

在上面的例子中，假如還指定了strong元素的樣式，如：

strong

 {color:red;}

那么根據規則二，strong中的文字最終顯示為紅色。

規則三：直接指定的樣式發生沖突時，樣式權值高者獲勝。

樣式的權值取決于樣式的選擇器，權值定義如下表。


css選擇器

可以看到，內聯樣式的權值>>ID選擇器>>類選擇器>>標簽選擇器，除此以外，后代選擇器的權值為每項權值之和，比如#nav.currenta”的權值為100 + 10 + 1 = 111。

規則四：樣式權值相同時，后者獲勝。

考慮下面這種情況

<p class="byline">Written by <a class="email" href="mailto:3400982550@qq.com">Jean Graine de Pomme</a></p>

.byline a {color:red;}

p .email {color:blue;}

.byline a與p .email都直接指定了上面的a元素，且權值都為11，根據規則四，最終顯示藍色。

由于樣式表可以是外部的，也可以是內部的，規則四提醒我們要注意外部樣式表引入的順序（及<link>元素的順序），以及外部樣式表與內部樣式表的出現位置。一般來說，內部樣式表出現在所有外部樣式表的引入之后，一般是在</head>之前。


規則五：!important的樣式屬性不被覆蓋。

!important可以看做是萬不得已的時候，打破上述四個規則的”金手指”。如果你一定要采用某個樣式屬性，而不讓它被覆蓋的，可以在屬性值后加上!important，以規則四的例子為例，.byline a {color:red !important;}可以強行使鏈接顯示紅色。大多數情況下都可以通過其他方式來控制樣式的覆蓋，不能濫用!important。

JQuery中操作CSS樣式的方法

//1、獲取和設置樣式

$("#tow").attr("class")獲取ID為tow的class屬性

$("#two").attr("class","divClass")設置Id為two的class屬性。

//2、追加樣式

$("#two").addClass("divClass2")為ID為two的對象追加樣式divClass2

//3、移除樣式

$("#two").removeClass("divClass")移除 ID為two的對象的class名為divClass的樣式。

$(#two).removeClass("divClass divClass2")移除多個樣式。

//4、切換類名

$("#two").toggleClass("anotherClass") //重復切換anotherClass樣式

//5、判斷是否含有某項樣式

$("#two").hasClass("another")==$("#two").is(".another");

//6、獲取css樣式中的樣式

$("div").css("color") 設置color屬性值. $(element).css(style)

//設置單個樣式

$("div").css("color","red")

//設置多個樣式

$("div").css({fontSize:"30px",color:"red"})

$("div").css("height","30px")==$("div").height("30px")

$("div").css("width","30px")==$("div").width("30px")

//7.offset()方法

//它的作用是獲取元素在當前視窗的相對偏移，其中返回對象包含兩個屬性,即top和left 。

//注意：只對可見元素有效。

var offset=$("div").offset();

var left=offset.left;         //獲取左偏移

var top=offset.top;        //獲取右偏移

//8、position()方法

//它的作用是獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節點的相對偏移，與offset()一樣，它返回的對象也包括兩個屬性即top和left。

//9、scrollTop()v方法和scrollLeft()方法

$("div").scrollTop();        //獲取元素的滾動條距頂端的距離。

$("div").scrollLeft();         //獲取元素的滾動條距左側的距離。

//10、jQuery中的 toggle和slideToggle 方法，都可以實現對一個元素的顯示和隱藏。區別是：

//toggle：動態效果為從右至左。橫向動作。

//slideToggle：動態效果從下至上。豎向動作。

//比如想實現一個樹由下至上收縮的動態效果，就使用slideToggle就ok了。

$('input').attr("readonly",true)//將input元素設置為readonly

$('input').attr("readonly",false)//去除input元素的readonly屬性

$('input').attr("disabled",true)//將input元素設置為disabled

$('input').attr("disabled",false)//去除input元素的disabled屬性