首頁  >  文章  >  web前端  >  CSS基礎 {屬性:值;}

CSS基礎 {屬性:值;}

高洛峰
高洛峰原創
2016-10-08 17:23:251790瀏覽

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.設定項目清單格式:可用有序列表


與無序列表

  1.      以  list-style   設定。

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


  •       a:垂直排列選單

    🠎 🠎5無序列表前的數字或圓點。

  •       b:橫向選單

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

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

  •                                          


  •                                          補充CSS3的屬性  rotate(角度) 


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


  •           

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

  •                  (查看les9-5)

  •                      

  •                                               CSS的盒子模型 (les 10)

  • 1.盒子的概念:在CSS中,一個獨立的盒子模型content(內容)、border(邊框)、padding(內邊距)和margin(外邊距)4個部分組成。

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

  • 2.設定邊框,內邊距,外邊距:

  •     a 內邊距(padding)  padding屬性可設定1、2、3、4個屬性值,分別如下:

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


  •                       位於


  •                       ,


  •                      ,


  •     


  •     b  外邊距(margin)   margin  


  • 3.盒子之間的關係:    


  •                         

  • 標記與標記:p簡單而言為區塊容器標記,即
  • 之間相當於一個容器,

  •                          段落、標題、表格、圖片、甚至章節等各種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,元素就會向其父元素的左側或右側靠緊,


  •             使用clear清楚浮動的影響

  •             clear屬性除了可設定為left和right之外,也可設定為both,表示同時清除左右兩邊的影響。

  •             position屬性可設定4個數值:

  •          
  •                            )
  •                                                                
    fixed:固定定位(當滾動條滑動式其不會改變位置,會一直在那裡。)

  • 2.盒子的定位(static):
  •             盒子的定位(relative) -left、right、top、bottom這四個屬性只有當position屬性設定為absolute、relative或fixed時才有效。

  •          


  • 3.z-index  :z-index屬性用於調整定位時重疊塊的上下位置,z-index值大的元素位於值小的上方。 (預設的z-index值為0,當兩個區塊的z-index值相同時,

  •                      inline兩個值,一個代表區塊層級顯示,一個代表內嵌顯示。 display還有個值為none,當設定為none時,

  •                        此隱藏表示該元素會徹底從頁面上消失。


  •                            

    1.overflow(溢出):有四個值:  visible(預設值。不剪下內容也不增加捲軸)   

  •             

  •                              auto (                   scroll(總是顯示捲軸)

  • 2.display(顯示):常用的數值:  none   :此元素不會顯示。

  •                             block                    inline  :此元素顯示為內聯元素,且元素前後沒有換行符號。

  •                             inline-block 而言時的以內區塊元件為元件。

  • 3.clip(剪切):兩個值:  auto :  對象無剪切

  •              的順序提供自對象左上角為(0 ,0)座標計算的四個偏移數值,

  •                                         其中任一數值均可使用auto替換,即這邊不剪切。注意:檢索或設定物件的可視區域。

  •                               必須將position的值設為absolute,此屬性方可使用。

  •  

  •                           8.29(複習)

  • 1.height:auto

  •       overflow:hidden        這是一個組合件,其作用是:將自動變成與內部方框(或最高的那個方框)一樣高。必須一起使用。

  • 2.定位 (position)   這裡的left是指:離左邊多遠。 top是指離上邊多遠。

  •                  

  •       相對定位:(position:relative;)其參考點是:本身原位置的左上角。移動後原來的位置會被佔據。

  •       絕對定位:(position:absolute;)其參考點為:其父元素有position的左上角。移動後原來的位置會空出來。

  • 3.清除(clear)   只影響清除的本身。其意思是:想讓哪塊動,就在哪塊上用clear。通常使用clear:left;    clear:both;        

  • 4.display(顯示):           display:none;          display:none;

  •                             之後使用中隱藏者中與隱藏。

  •       display:inline;此元素會顯示為內聯元素,且元素前後沒有換行符號。

  •       display:block; 此元素將顯示為區塊級元素,此元素前後會帶有換行符號。

  • 5.用iframe實現框架結構:

  •      

🎜🎜🎜🎜🎜🎜🎜🎜

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn