首頁 > 開發者 > CSS

CSS+DIV第一天

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
CSS基礎

 引用方法：<link rel=stylesheet href=“style.css”>

   基本語句結構：選擇符{屬性1：屬性值1;屬性2：屬性值2}

   選擇符:可以是HTML中任何的標識符，比如TR、TD、P、DIV、IMG甚至BODY都可以作為選

         擇符。 選擇符中的內容將會以大括弧內屬性值定義的格式來顯示。

  除了選擇符外,css還提供了幾種選取器來讓html調用css:

   群選取器:當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔，：

          p, td, li { font-size : 12px ; }

   id選取器:用CSS布局主要用層"div"來實現，而div的樣式通過"id選取器"來定義。

           例如我們首先定義一個層

           <div id="menubar"></div>
           menubar就是我們要用到的樣式，在樣式表裡是這樣定義的。

           #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

           對，前面加個#即可！

   類別選取器：如果想用class=""來引用樣式的話，那麼就需要一個類別選取器，其做

             法是在定義在選擇符前加一個“.”

             如：.14px {color : #f60 ;font-size:14px ;}

             此時就可以通過<span class="14px"></span>來調用了。

--------------------------------------------------------------------

基本的css調用已經複習完了。只要學會了編寫css，配合上這些個調用方法，就可以玩轉網頁嘍。
css的屬性多的數不勝數，然而和任何一種語言一樣，只要掌握了1/3的常用屬性，就可以實現90%的功能，
所以我們先撿常用的來學。

css的常用屬性：

字型屬性：

這是最基本的屬性，主要包括以下幾個屬性：

因為字型屬性經常用到，駝駝比較熟悉，就暫且滑過。

顏色和背景屬性

用法是這個樣子的

屬性：background 屬性值：<background-color>||<background-image>|| 　　　
　<background-repeat>||<background-attacement>||<background-position>

此處也不多言,會了用法,用到的時候來摳就行了.

文字屬性:

此處不同於上面的字型屬性.它涉及到排版:行間距,字間距,文字裝飾等等,我得承認,這很重要.

裝飾超級連結:

這是比較常見css應用,是的,頁面上永遠都有那麼多超級連結,超級連結的修飾永遠都是很重要,
雖然我今天以前從來沒仔細看過這一塊,但它現在看起來也蠻簡單.

CSS中用四個偽類來定義連結的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上語句分別定義了"連結、已訪問過的連結、滑鼠停在上方時、點下滑鼠時"的樣式。
注意，必須按以上順序寫，否則顯示可能和你預想的不一樣。記住它們的順序是“LVHA”。

下面這段代碼很有趣,可以點擊這裡看到它的效果

　　<html>
　　　<title>link css</title>
　　　<head>
　　　<style>
　　　<!--
　　　//*定義偽類元素（ａ：），大括弧內定義了前景色彩屬性和文本裝飾屬性，
　　　hover加上‘font-size’屬性目的是讓滑鼠啟用連結時改變字型*//
　　　a：link{color：green;text-decoration：none}
　　　//*未訪問時的狀態，顏色為綠色(green)，文本裝飾屬性(text-decoration)值
　　　為沒有(none)*//
　　　a：visited{color：red;text-decoration：none}
　　　//*訪問過的狀態，顏色為紅色(red)，文本裝飾屬性值為沒有*//
　　　a：hover{color：blue;text-decoration：overline;font-size：20pt}
　　　//*滑鼠啟用的狀態，顏色為藍色(blue)， 文本裝飾屬性值為上劃(overline)，
　　　字型大小為20pt*//
　　　-->
　　 </style>
　　 </head>
　　 <body>
　　 <p style=“font-family:行書體；font-size：18pt”>
　　 <a href=“http：//www.hongen.com”>未訪問的連結</a></p>
　　 //*加連結，顯示三種不同狀態，並且定義了連結文本的字型和大小*//
　　 <p> <a href=“http：//www.hongen.com”>訪問過的連結</a></p>
　　 <p> <a href=“http：//www.hongen.com”>滑鼠啟用的連結</a></p>
　　 </body>
　　 </html>

這個例子是從洪恩線上上copy過來的，駝駝以前做過這種咚咚，copy了一大段的js代碼。
這算是種特效吧，而它的原理so easy  駝駝以前不是不會用link的css，只是沒有想到。
所以很多時候創造力和想像力是很重要的。

容器屬性：
蝦米是容器？駝駝到現在還沒找到一個定律一樣的解釋。8過，憑經驗，<body></body>
<div></div>、<tr></tr>......類似的標籤都是容器。這些標籤就像容器，
罐裝了我們的網頁內容。使他們能在正確的位置來體現。
CSS的容器屬性包括邊距、填充距、邊框和寬度、高度、浮動、清除等屬性
邊距屬性

例：body{margin：1em 2em 3em 4em}
　　//*定義文本的上、右、下、左的邊距分別為1、2、3、4em*// 
填充距屬性
例：padding：1em 2em 3em 4em
邊框屬性
看上去很多，實際用起來很方便。
例：P{border：5px double purple}//*定義了四條邊框為一樣的值*//


圖文混排
img{margin-right：2em；float：left}
//*定義圖片的右邊距為2em，圖片浮動在文字的左邊*//
滑鼠屬性 
　在CSS當中，這種樣式是通過“cursor”屬性來實現的。Cursor屬性有很多的屬性值，
  我們來看一下它的詳細列表
例子：<span style=“cursor:hand”>手的形狀</span>

                

                    
本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

                

            


                            
相關關鍵詞：
                    

                                                    css div table generator
                                                    beautiful div box css
                                                    css center div horizontally
                                                    how to make div centered in css
                                                    how to set css class on div in reactjs component
                                                    div division
                                                    div load
                                            

                

                                                                            

                    相關文章
                    

                                                    

                                
                                    css實現滑鼠滑過改變文字(中文變英文)                                
                                
                            

                                                    

                                
                                    selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...                                
                                
                            

                                                    

                                
                                    使用CSS巧妙地製作背景色漸層動畫執行個體                                
                                
                            

                                                    

                                
                                    詳解css display屬性中常見的四個屬性值用法（代碼執行個體）                                
                                
                            

                                                    

                                
                                    CSS修改iframe內的樣式問題                                
                                
                            

                                                    

                                
                                    如何用CSS改變上劃線、底線以及刪除線的顏色呢？                                
                                
                            

                                            

                

                    

        

            

                

                                        

                        

                    

                

                

    

                    
聯繫我們

            
該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

            

                如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：
                info-contact@alibabacloud.com
                進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。
            

            



                

            

            
熱門內容

            
        

    


                                

                    










  
      
  
            
                
                
            
  
      
  








                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •