CSS學習1—-基本

技術小胖子發表於2017-11-08
CSS
1.Css的主要作用是網頁的佈局和美化。
 
2.概念：CSS是Cascading Style sheets (即層疊樣式表)的簡稱，由W3C指定和維護。
 
3.同html一樣，CSS語言是一種標記語言，它不需要編譯，可以直接由瀏覽器解釋執行。
 
4.css檔案也是一個文字檔案，它包含了一些CSS標記（定義HTML標籤如何呈現的規則）；
CSS檔案必須使用.css作為檔名的字尾，css檔案可以單獨存在，也可以巢狀到HTML文件中，甚至可以嵌入到某個HTML標籤中。
 
5.CSS的分類：
 
<1>.行內樣式表：
eg.
<h1 style=”color:red;font-size:12px;”>文字內容</h1>
 
<2>.內嵌樣式表：（寫在head標籤中） → 常用在某個網頁中。
<style type=”text/css”>
h1{
color:red;
font-size:12px;
}
</style>
 
<3>.外部樣式表：→ 應用在整個網站的！
<link rel=”stylesheet” href=”style.css” type=”text/css”/>  → notepad++快捷鍵：link:css
 
注意：href的值為css檔案的路徑。
 
<4>三種樣式表的優先順序：行內樣式表 ＞　內嵌樣式表　＞外部樣式表

6.CSS的語法結構：
 
 

 

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，如需轉載請自行聯絡原作者


 

 

 

 

 

 

 

 

 

 

 


相關文章