好程式設計師web前端分享css常用屬性縮寫
好程式設計師
web前端分享
css常用屬性縮寫
,
使用縮寫可以幫助減少你
CSS檔案的大小,更加容易閱讀。css縮寫的主要規則如下:
顏色
16進位制的色彩值,如果每兩位的值相同,可以縮寫一半,例如:
#000000可以縮寫為#000;#336699可以縮寫為#369;
盒尺寸
通常有下面四種書寫方法
:
property:value1; 表示所有邊都是一個值value1;
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1 value2 value3 value4;
四個值依次表示
top,right,bottom,left
方便的記憶方法是順時針,上右下左。具體應用在
margin和padding的例子如下:
margin:1em 0 2em 0.5em;
邊框
(border)
邊框的屬性如下:
border-width:1px;
1. <p><font size="3"> border-style:solid;</font></p>
2. <p><font size="3"> border-color:#000;</font></p>
縮為一句:
border:1px solid #000;
語法是
border:width style color;
背景
(Backgrounds)
背景的屬性如下:
background-color:#f00;
1. <p><font size="3"> background-image:url(background.gif);</font></p>
2. <p><font size="3"> background-repeat:no-repeat;</font></p>
3. <p><font size="3"> background-attachment:fixed;</font></p>
4. <p><font size="3"> background-position:0 0;</font></p>
縮為一句:
background:#f00 url(background.gif) no-repeat fixed 0 0;
語法是
background:color image repeat attachment position;
你可以省略其中一個或多個屬性值,如果省略,該屬性值將用瀏覽器預設值,預設值為:
color: transparent
1. <p><font size="3"> image: none</font></p>
2. <p><font size="3"> repeat: repeat</font></p>
3. <p><font size="3"> attachment: scroll</font></p>
4. <p><font size="3"> position: 0% 0%</font></p>
字型
(fonts)
字型的屬性如下:
font-style:italic;
1. <p><font size="3"> font-variant:small-caps;</font></p>
2. <p><font size="3"> font-weight:bold;</font></p>
3. <p><font size="3"> font-size:1em;</font></p>
4. <p><font size="3"> line-height:140%;</font></p>
5. <p><font size="3"> font-family:"Lucida Grande",sans-serif;</font></p>
可以縮寫為一句:
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
規則一:必須宣告
font-size 和 font-family 的值。 規則二:所有值必須按如下順序宣告。
1. font-weight、font-style、font-variant 不分先後;
2. 然後是 font-size;
3. 最後是 font-family。
注意,如果你縮寫字型定義,至少要定義
font-size和font-family兩個值。
列表
(lists)
取消預設的圓點和序號可以這樣寫
list-style:none;
list的屬性如下:
list-style-type:square;
1. <p><font size="3"> list-style-position:inside;</font></p>
2. <p><font size="3"> list-style-image:url(image.gif);</font></p>
可以縮寫為一句: list-style:square inside url(image.gif);
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2642144/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端分享CSS屬性組成及作用程式設計師Web前端CSS
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端分享CSS3彈性盒程式設計師Web前端CSSS3
- 好程式設計師web前端培訓分享Javascript中原型屬性程式設計師Web前端JavaScript原型
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- 好程式設計師web前端分享CSS元素型別程式設計師Web前端CSS型別
- 好程式設計師web前端分享CSS基礎篇程式設計師Web前端CSS
- 好程式設計師web前端分享CSS3 漸變程式設計師Web前端CSSS3
- 好程式設計師web前端分享主流CSS image比較程式設計師Web前端CSS
- 好程式設計師web前端技術分享css盒模型程式設計師Web前端CSS模型
- 好程式設計師web前端分享css初始化程式碼程式設計師Web前端CSS
- 好程式設計師web前端培訓分享怎樣學好css?程式設計師Web前端CSS
- 好程式設計師web前端教程分享web中CSS絕對定位程式設計師Web前端CSS
- 好程式設計師web前端教程分享JavaScript簡寫方法程式設計師Web前端JavaScript
- 好程式設計師web前端分享CSS不同元素margin的計算程式設計師Web前端CSS
- 好程式設計師web前端培訓分享CSS定位的教程程式設計師Web前端CSS
- 好程式設計師web前端培訓分享HTML/CSS部分面試題程式設計師Web前端HTMLCSS面試題
- 好程式設計師web前端分享CSS學習:HSLA顏色模式程式設計師Web前端CSS模式
- 好程式設計師web前端分享CSS基礎知識之position程式設計師Web前端CSS
- 好程式設計師web前端分享應該怎樣學好web前端?程式設計師Web前端
- 好程式設計師web前端分享web前端入門知識程式設計師Web前端
- 好程式設計師分享Web前端開發工具程式設計師Web前端
- 好程式設計師web前端分享Cookie知識程式設計師Web前端Cookie
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享HTML/CSS部分常見面試題程式設計師Web前端HTMLCSS面試題
- 好程式設計師web前端分享CSS檔案引用的最優方法程式設計師Web前端CSS
- 好程式設計師web前端分享Css3的概念和優勢程式設計師Web前端CSSS3
- 好程式設計師web前端分享12個CSS高階技巧彙總程式設計師Web前端CSS
- 好程式設計師web前端分享CSS Bug、CSS Hack和Filter學習筆記程式設計師Web前端CSSFilter筆記
- 好程式設計師web前端教程分享web前端基礎知識程式設計師Web前端
- 好程式設計師分享placeholder屬性詳解程式設計師
- 好程式設計師web前端教程分享JavaScript面試題程式設計師Web前端JavaScript面試題
- 好程式設計師分享Web前端效能最佳化程式設計師Web前端
- 好程式設計師web前端分享邏輯運算程式設計師Web前端
- 好程式設計師web前端教程分享js閉包程式設計師Web前端JS
- 好程式設計師分享Web前端知識之HTML程式設計師Web前端HTML
- 好程式設計師web前端分享常見面試題程式設計師Web前端面試題
- 好程式設計師web前端分享HTML 字符集程式設計師Web前端HTML