二、視覺設計
三、分欄布局的欄個數
四、簡寫和展開式屬性合理使用
總結
巧用em單位
padding
: .3em .8em;
border如果是em會在極端情況下變得極粗，不美觀
border
: 1px solid #446d88;
background
: #58a linear-gradient
(#77a0bb, #58a)
;border-radius
: .2em;
box-shadow
: 0 .05em .25em gray;
color
: white;
text-shadow
: 0 -.05em .05em #335166;
字型大小是父元素字型的1.25倍
font-size
: 125%;
行高是字型大小的1.5倍
line-height
: 1.5
日後需要修改就要改多條邊
border-width
: 10px 10px 10px 0;
雖然多了**量，但是要修改只需要在後面新增**即可而不會造成混亂
border-width
: 10px;
border-left-width
: 0;
通過新增新的樣式使其擁有某個功能，而不需要分別寫兩個冗餘度極高的按鈕樣式.button
.button .cancel
.button .ok
currentcolor顧名思義是當前顏色，更準確的說是當前文字的顏色。
這種方式有超級都的應用場景，在你開發的時候只要想起有這個變數就一定有幫到你的地方
button
/*修改後*/
button
子元素繼承父元素相同樣式的值
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=, initial-scale=1.0"
>
>
documenttitle
>
>
.parent
.child
style
>
head
>
>
class
="parent"
>
123class
="child"
>
456div
>
div>
body
>
html
>
因為文字的高度與文字長度往往不相同，如果使用相同的內邊距會不美觀
所以需要減少頂部和底部的內邊距
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
.button
style
>
head
>
>
class
="button"
>
yolobutton
>
body
>
html
>
應由column-width決定每個欄的寬度從而決定有多少個欄要明確地去覆蓋某個具體的展開式屬性並保留其他相關樣式，那就需要用展開式屬性background
: rebeccapurple;
background-color
: rebeccapurple;
/*背景不一定是rebeccapurple，可能是倍background-image覆蓋*/
background
:url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;
/*寬高和平鋪方式重複了*/
background
:url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size
: 2em 2em;
background-repeat
: no-repeat;
CSS揭秘之《小技巧》
1 在增強網頁設計效果時，應該使用生成性內容，而不是依賴冗餘的標籤和。2 要把表單元素的字型設定為與頁面的其他部分相同，你並不需要重複指定字型屬性，只需利用 inherit 的特性即可 3 利用 css 自身的機制來組織回退樣式，而不是依賴 css hack 來實現 eg 正確的 組織方式應該是先寫...
css 揭秘 CSS編碼技巧
喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時，應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...
css 揭秘 CSS編碼技巧
喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時，應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中，而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...