CSSc常用樣式

來源:互聯網
上載者:User

標籤:水平對齊   作用   分享   縮放   指定位置   family   背景色   其他屬性   空白地區   

     一、CSS常用文字屬性
  1、css中的顏色表示方式
   1.1直接使用顏色的單詞表示:red、green、blue

 



    1.2使用顏色的十六進位表示:#ff0000,#00ff00;    六位元,兩兩分組,分別表示紅、綠、藍    1.3使用RGB(0~255,0~255,0~255);三位元,分別表示紅綠藍的配比。

 


    1.4rgba();第四位元表示透明度。

  2、字型
  
2.1 font-weight:字型粗細;400表示norml,700表示加粗;
         bold:加粗;lighter:細體;也可以使用100-900數值。

 

    2.2 font-style:字型樣式;
        italic:傾斜;norml:正常;

 

 


    2.3 font-size:字型大小;可以寫像素單位px;也可以寫%;
        200%表示瀏覽器預設大小(16px)的兩倍=32px;

 

 

    2.4 font-family:字型系列;可以直接寫字型名,也可以寫字型系列名。
         常用子體系列:serif:襯線體;sans-serif:非襯線體;
       可以寫多個值,用多個逗號隔開。表示優先使用第一個,如果沒有這個字型,依次向後使用。通常最後一個放字型系列名。

 


    2.5 font縮寫形式:
      順序必須是:font-weight font-style font-size/ line-height font-family
      不同屬性之間,用空格分隔;
      font-size/line-height必須一組,用/分隔;
      font-family:多個字型之間,用逗號分隔。
3、字型顏色
      color:字型顏色,可以是單詞,RGB,十六進位等。
      opacity:透明度,可選值0-1

 

   3.1 opacity和RGBA的區別
      RGBA本身可以設定顏色,而opacity必須配合其他屬性來用,
      rgba僅僅是當前元素設定的顏色透明;
      opacity會讓當前元素裡面的所有文字,背景,子項目都透明。 
      line-height:行高;可以寫px單位,可以寫數字(表示預設行距的幾倍),可以寫%(表示預設行距的百分比)
      行高的重要作用:讓單行文字在div中垂直置中。
      設定行高=div的高度,既可以讓文字垂直置中。
      text-align:設定地區內行級元素水平對齊,對區塊層級元素無效。

 

   
      letter-spacing:字元間距。字與字之間的距離。
      text-decoration:文本修飾;
      under-line:底線;over-line:上劃線;line-through:刪除線;none:去除底線;

 

   
      text-overflow:設定行末多餘文字的顯示方式;
     clip:多餘文字裁剪掉;ellipsis:多餘文字顯示省略符號(需要配合white-space:nowrap;使用);
     white-sapce:nowrap;設定中文行末,不斷行顯示。
    3.2設定行末顯示省略符號(三行代碼,缺一不可)
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    

 

      text-shdow:2px(水平往右2像素) 2px(垂直2像素) 2px(模糊程度,0表示不模糊) blue;文字陰影,
      水平陰影距離正數表示陰影右移,負數表示陰影左移。
      垂直陰影距離:正數表示陰影下移,負數表示陰影上移。
      text-indent:首行縮排。
      -webkit-text-stroke:0.5px blue;文字描邊。
      -webkit:表示只有webkit核心的瀏覽器生效,常見的chrome,safari

  二、CSS常用背景屬性
     1、background-color: 背景色。

 

     2、background-image:url(  ); 背景圖片.背景圖和背景同時存在時,背景圖覆蓋背景色。

 

      3、background-repeat:背景圖重複方式
     no-repeat:不平鋪;
      repeat-x:X軸平鋪;
      repeat-y:Y軸平鋪;
      repeat:平鋪;
   

 


      4、background-size:背景圖大小;
     指定寬度高度:可以寫px,也可以寫%(父容器寬高的%)
     寫兩個屬性時,分別表示寬度高度
     寫一個屬性時,表示寬度,高度將會等比縮放
     contain: 圖片等比縮放,直到寬或高較大的一邊縮放到100%為止。(可能導致較短的一邊<100%,圖片無法蓋住全部地區)
     cover: 圖片燈筆縮放,直到寬或高較小的一邊縮放到100%為止。(可能導致較長的一邊>100%,導致圖片無法顯示)
  
     5、 background-position:背景圖位移量.
     指定位置: left/center/right     top/center/bottom
     當寫一個值時,另一個預設置中。
     指定座標:兩個屬性分別表示水平位移,垂直位移。
     座標的值可以是像素單位,也可以是%
     當寫像素px單位時:正數右移,負數左移;垂直方向:正數下移,負數上移。
     當寫%時:一般唯寫正數。表示的是,去掉圖片的寬高,剩餘空白地區的分布比例。
     background-position:30%;水平方向去掉圖片寬度,剩餘地區3:7分。

 


   

 

      6、列表
     list-style:修改列表小圓點的樣式。
     none:去掉小圓點

 

      

 

 


     url();可以使用url匯入一個小圖片,作為列表的
     float:浮動,可以實現讓區塊層級元素,在一行顯示.
 

 

      

 

 

        

CSSc常用樣式

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.