CSS基礎 {屬性：值;}-css教學-PHP中文網

首頁

web前端

css教學

CSS基礎 {屬性：值;}

高洛峰

Oct 08, 2016 pm 05:23 PM

1.CSS是成疊樣式表（Cascading Style Sheets）的縮寫.它用於定義HTML元素的顯示形式.
2.將CSS引入HTML的方式有三種：
   a.外部樣式表：
      嵌入樣式表：

c.內嵌樣式表：
屬性名稱為style 範例:

3.CSS

值; }
    b:類別選擇器；.類別名稱{ 屬性: 值; } 注意有點。
    c:ID選擇器；#id名 { 屬性: 值; } 注意有一個#，ID選擇器只能被引用一次，而類別選擇器可以被多次引用。
    d:偽類選擇器；（有四個狀態） 1、a:link{ } (未訪問的鏈接)
                             2. a:visited{ }(已訪問的鏈接)
                             3. a:hover{   }(滑鼠在連結上)
                                2,   p:first-letter{   }
4.複合選擇器：
    a:交集選擇器：交集選擇器由兩個選擇器直接連接構成，其結果是選取二者各自元素範圍的交集。
       其中第一個必須是標記選擇器，第二個必須是類別選擇器或ID選擇器。這兩個選擇器之間不能有空格。
         eg:p.special{   }
            h3.cls{

    b:並集選擇器：
              eg: h1,h2,       h2.special,.special,#one{    }

    c:後代選擇器：(繼承最近的)後代選擇器產生的影響不僅限於元素的"直接後代"，而且會影響到它的"各級後代"
5.理解樣式表的層次:
   層次的優先級別從小到大依次為：
外部樣式表
嵌入式樣式表
內聯樣式
如果是同一個樣式表中不同選擇器，優先級別從小到大依次為：
                                                   元素選擇器
類別選擇器
ID選擇器

                                          CSS的基本屬性---文字樣式
1.長度單位 1.px   2.em
2.顏色定義   color
3.設定字型   設定文字的字體   font-family："黑體"; -style ：Italic；
                設定文字加粗效果   font-weight:bold;（粗體)                      font-weight:100(範圍100-900，數位越大字體越粗)

設定英文字母大小寫轉換   text-transform: capitalize; (字首字母大寫)
                 設定控製文字大小     設定文字的裝飾效果   text-decoration: none/ underline/line-through(刪除線)/overline(頂線)；

4.設定段落樣式   設定段落首行縮排 text-indent：..em(..個標準字元大小的距離)/..px ；
                將字詞間距離     letter-spacing(字母):..px;                設定段內部的文字行高   line-height:
               :left/right(右對準)/center（居中）/justify（兩端對位）
               設定文字與背景顏色      設定段落的垂直對齊方式   vertical-align :...;(只對表格單元格中的元素起作用)

css的基本屬性---圖像樣式
1.設定圖片邊框：border-width:(粗細）    ;   border-color:（顏色）     ; border-style:（線性）     ; ; border-style:（線性）     ; ; border-style:（線性）     ; ; border-style:（線性）     ; ; eg:border-left-style、      border-top-width    ....   solid實線
2.圖片的縮放： width   height （百分比，像素）
字 3.圖文環繞文字：
    圖片與文字對齊方式：水平對齊text-align:

<br/>

登入後複製

垂直對齊 vertical-align:
4,。設定背景顏色與影像：background-color:         background-image:url(位址)
      可使用background-repeat：控制平鋪，repeat：水平與垂直方向平鋪，預設值。



5.設定背景影像位置：background-position：（可以設定兩個值 eg:left top）
6.設定背景圖片固定位置：background-attchment:fixed;                  補充：移除無序列表前的小圓點，list-style: none;
                                                               偏移某個距離。 left:..px;
2.相對定位: ( 絕對定位的元素的位置相對於最近的已定位的元素，^{如果元素沒有已定位的元素，那麼它的位置相對於最初的包含塊。                                                                        left:.. px;

                           樣式（les8）
1.控製表格：cellspacing：列間距    cellpadding：列的內邊距
           border：表格邊框          邊框線
           border-spacing : 設定列的間距
   設定表格寬度：table-layout:fixed(自動固定)或auto(自動固定)}

：表示表頭      ：表示表內容       ：表示錶尾  （依序可以不一樣，但一般或依序）

2.設定滑鼠經過時表格的樣式：a:hover
：3.CSS與表像文字一樣的按鈕
   transparent(透明的) 設定背景透明
   border:0px;     eg:
    b:製作多彩下拉選單   select option                               border-bottom: 1px (粗細) dashed(線性) #000000(顏色);
                                   2.CSS3的選擇選擇器：   :nth-of-type(n) 選擇器符合屬於父元素的特定類型的第N 個子元素的每個元素.



1.設定超連結樣式：在HTML中
    在CSS中還可以用偽類選擇器的四個樣式     a:link(未訪問)     a:visited （已造訪）。
                                               a:hover（滑鼠移上去）     a:active（啟用）
2.建立按鈕式超連結：text-decoration: none;      } (可以設定這些)    background: ;
color:   ;
                   border-right: px solid    ; ;

3.製作螢光選單：應用無序列表，
,a:hover,    ( 參考 les9)。
4.控制滑鼠（cursor）指標 . {cursor: } （查詢屬性下的其他 CSS 2.0 中文手冊）。
5.設定項目清單格式：可用有序列表

與無序列表

以 list-style 設定。

6.創建簡單的導航選單:

a:垂直排列選單
🠎 🠎5無序列表前的數字或圓點。

b:橫向選單

實現橫向轉換只需設定float:left即可，同時移除寬度。

7.設定圖片翻轉效果:(指網頁中的一個圖片，在滑鼠指標經過時換成另外一個圖片。) 可以用hover.

補充CSS3的屬性 rotate(角度)

效果：當鼠標移上去的時候，列表可以轉動你設置的角度。（正為順時針，負為逆時針，若是180度，可以看見字是倒立的。不能清楚的看見轉動

transform（轉換): rotate（旋轉；循環使旋轉；使轉動；使輪流）(-20deg) ； deg:程度（degree）

（查看les9-5）

1.盒子的概念：在CSS中，一個獨立的盒子模型content（內容）、border（邊框）、padding（內邊距）和margin（外邊距）4個部分組成。

一個盒子實際所佔用的寬度或高度是由「內容物+內邊距+邊框+外邊距」所組成的。

2.設定邊框，內邊距，外邊距：

a 內邊距（padding） padding屬性可設定1、2、3、4個屬性值，分別如下：

設定且1個屬性值時，以表示上下左右4個padding皆為此值。

位於

b 外邊距（margin） margin

3.盒子之間的關係：

與
之間相當於一個容器，

段落、標題、表格、圖片、甚至章節等各種HTML元素。

而span是內嵌元素，不會換行。

4.盒子在標準流中的定位原則： 2個元素的margin-left。

區塊級元素之間的垂直margin ：當兩個區塊級元素是垂直排列，則情況有所不同。兩個區塊級元素之間的距離不是margin-bottom與margin-top的總和，

{背景定位：background-position:center; 為 background-position 屬性提供值有很多方法。首先，
可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，

不過也不總是這樣。也可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。 )

中，一個塊級元素在水平方向會自動伸展。在垂直方向就不會並排。
CSS中有一個float屬性，默認為none，float屬性的值設置為left或right，元素就會向其父元素的左側或右側靠緊，

position屬性可設定4個數值：
）
fixed：固定定位（當滾動條滑動式其不會改變位置，會一直在那裡。）
2.盒子的定位(static):
盒子的定位(relative) －left、right、top、bottom這四個屬性只有當position屬性設定為absolute、relative或fixed時才有效。