CSS學習1—-基本

 

7.CSS常用的選擇器：

 

 

說明：

1.類選擇器和ID選擇器的顯示效果是一樣的，但是開發中要求ID必須是唯一的！！

2.通配選擇器我們使用的比較少！

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

下面是常用的屬性和值：(這裡寫的都是常用的！)

 

CSS中唯一的註釋為：/*     */

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1.選擇字型： 

eg.

p{

font-family:”宋體”，“微軟雅黑”；→快捷鍵為：ff

/*說明：可以寫一種字型，或同時寫幾種字型！*/

}

 

2.文字的顏色：

color:red;(或color:#fe8400;) 

 

3.改變字型大小：

font-size:13px; → 快捷鍵：fz

((預設的是16px;網頁中常用的3中字號是：12px 14px 16px)

 

4.斜體：

font-style:italic; → 快捷鍵：fs:i

或 

font-style:oblique;(一般不用) → 快捷鍵：fs:o

font-style:normal; → 表示費斜體！！

 

5.粗體：

font-weight:bold; → 快捷鍵：fw:b

font-weight:normal; → 快捷鍵：fw:n

 

6.大小寫：

大寫：text-transform:uppercase; → 快捷鍵：tt:u

小寫：text-transform:lowercase; → 快捷鍵：tt:l

正常：text-transform:none; → 快捷鍵：tt:n

 

7.裝飾：

下劃線：text-decoration:underline; → 快捷鍵：td:u

上劃線：text-decoration:overline; → 快捷鍵：td:o

刪除線：text-decoration:line-through; → 快捷鍵：td:l

無線   ：text-decoration:none; → td:n

 

組合：text-decoration:underline  overline  linethrough;

 

8.字母和字的間距：

letter-spacing:10px;

 

9.單詞間距：

word-spacing:5px;

 

10.行間距：

line-height:20px; → lh

(說明：一個行的高度大於16px;)

line-height:1.5; → 表示行高是文字大小的1.5倍。

 

11.對齊方式：

左對齊（預設）：text-align:left； → ta:l

右對齊： text-align:right; → ta:r

居中對齊：text-align:center; → ta:c

 

12.首行縮排：

text-indent:2em; → ti

(說明：2em表示是行長的2倍。)

 

13.首字母，首行樣式（偽類選擇器）→時尚雜誌，時尚網站用的多

p:first-letter{

font-size:32px;

}

p:first-line{

color:#997788;

}

 

14.給列表定義樣式：不分ul,ol了！！

<1>.列表的符號型別有以下幾種：

disc → 實心圓專案符合

circle → 空心圓專案符號

square → 實心方型符號

 

<2>.6中數字方案：

decimal → 十進位制

decimal-leading-zero → 十進位制前面置0

upper-alpha → 大寫字母

lower-alpha → 小寫字母

upper-roman → 大寫羅馬字母

lower-roman → 小些羅馬字母

 

eg.

<ul class=”myclass”>

     <li>xx</li>

</ul>

 

.myclass {

list-style-type:square;/*設定專案符號，由上面知有10種可用！*/

 

list-style-position:outside; /*設定專案符號在文字框外；如果是inside,在文字框內*/

 

list-style-image:url(a.gif); /*設定某圖片為專案符號！url中是圖片的路徑*/

list-style-type:none; /*去掉專案符號*/

}

 

注：www.findicons.com → 可以用來找圖示的網站；

 

 

 

 

 

 

 

 

 

 

 

 

 

      本文轉自韓立偉 51CTO部落格，原文連結：http://blog.51cto.com/hanchaohan/927401，如需轉載請自行聯絡原作者