如今我們的網站、頁面更加需要注重細節,不論是字體的樣式、還是圖片的分辨率清晰度都會影響到用戶的訪問體驗和PV,以及用戶以後是否會回訪我們的網站/博客。
為了讓我們的網頁變得更加美觀個性化,我們需要了解更多的CSS樣式屬性。
CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化,CSS擁有對網頁對象和模型樣式編輯的能力。為了方便大家學習css樣式,下面大家整理css樣式知識點及參考樣式合集。
一些常見不必要CSS樣式
1、與默認CSS樣式一致
我們有時候寫的CSS樣式會與瀏覽器默認的CSS樣式一致,有時候您自己都可能沒有意識到。
常見的例子有:
01、
div{width:auto; height:auto;}
對於一些剛使用CSS的朋友,有時候,其為了表達這段div高度是自動適應於內部元素的,會情不自禁的加上height:auto;的樣式。很顯然,這段樣式是沒有必要的,默認的任何塊狀元素的高度幾乎都是auto。
我們來看看人人網個人首頁的CSS樣式文件。
人人網個人首頁的CSS樣式文件下載地址如下:
鏈接: https://pan.baidu.com/s/1mnksRei7XGRrKUqK4oVvAw
密碼: xng6
在chrome瀏覽器下Ctrl+F搜索height:auto,居然顯示了九條(見下圖)。
按照常規來講,height:auto只有在使用CSS優先級抹掉之前的height定值的樣式的時候使用,其餘情況基本上都是可以去掉的。
就像是上面人人網的例子,居然9個height:auto,這里至少有一半是沒有必要的。
02、
body,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
上面有關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-type:none; margin:0; padding:0;}
03、
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;}
上面的情況屢見不鮮,甚至在比較優秀的網站上也會有這類低級的樣式問題。
04、其他一些情況
div{margin:auto;}
textarea{overflow:auto; span>}
img,input,button{vertical-align:baseline;}
div{background-position:0 0;}
css參考樣式集合< /h2>
一. 字體屬性:(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;}
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屬性的了解很模糊*/
五. 方框屬性: (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的繼承機制使得元素可以從包含它的祖先元素中繼承樣式,考慮下面這種情況:
<html><head< /span>><title>rule 1</title><style>body {color:black; }p {color:blue;}</style></head><body> << span class='hljs-name' >p>welcome to <strong>w3cschool</ strong></p></body></ html>
strong分別從body和p中繼承了color屬性,但是由於p在繼承樹上離strong更近,因此strong中的文字最終繼承p的藍色。
規則二:繼承的樣式和直接指定的樣式衝突時,直接指定的樣式獲勝。
在上面的例子中,假如還指定了strong元素的樣式,如:
strong {color:red;}
那麼根據規則二,strong中的文字最終顯示為紅色。
規則三:直接指定的樣式發生衝突時,樣式權值高者獲勝。
樣式的權值取決於樣式的選擇器,權值定義如下表。
可以看到,內聯樣式的權值>>ID選擇器>>類選擇器>>標籤選擇器,除此以外,後代選擇器的權值為每項權值之和,比如”#nav .current a”的權值為100 + 10 + 1 = 111。
規則四:樣式權值相同時,後者獲勝。
考慮下面這種情況
<pclass='byline'>Written by <aclass='email'href='mailto:3400982550@qq.com'>Jean Graine de Pomme</a>< ;/p>.byline a {color:red;}p .email {color:blue;}
< p >“.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) span>//設置單個樣式$('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()方法和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屬性< /span>
本文完~
文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/This%20is%20how%20CSS%20styles%20should%20be%20writtenCSS%20Reference%20Style%20Collection.html
评论列表(196条)
测试