首頁  >  文章  >  web前端  >  關於前端學習之css

關於前端學習之css

坏嘻嘻
坏嘻嘻原創
2018-09-14 16:43:041346瀏覽

 學完CSS Div的視頻,感覺講的挺清晰的,不看不知道,一看嚇一跳,原來CSS可以為網頁增色不少呢!

一、概述​​


1、格式:

      關於前端學習之css

二、css 屬性

1、文字屬性

(1)font-style:italic(斜體)normal(正常);

(2)font-weight:bold/bolder/lighter(粗細),也可以用數字(100-900);

(3)font-size :20px,一定要帶單位px;

(4)font-family:"楷體」;寫中文要用引號;

  • #備用字體    font-family:"楷體","微軟雅黑";

  • ##中英文分別設定字體     font-family:"Arial","楷體"(英文字體在前,中文字體在後,這裡的中文字體指能夠處理中文的字體)

(5)文字屬性的簡寫:   font:style weight size family

  • style 和weight 可以交換位置,size 和family 可以交換位置,但是size 和family 一定要在最後;

  • ##style 和weight 可以省略不寫,但是size 和family 不能省略;
  • #2、文字屬性

(1)文字裝飾:

text-decoration :underline | overline | line-through | none;

(2)水平對齊:

text-align:center;

(3)文字縮排:

text-indent:2em;3、顏色控制屬性(color)

(1)英文:表達有限,用於調試;

(2 )RGB(red ,green ,blue):取值0到255;三值一樣為灰色;

(3)RGBA:前面和rgb 一樣,最後一個是透明度,取值0到1;

(4)十六進位:原理為rgb;兩位16進位對一位rgb;

(5)十六進位簡寫:

         

          必須是這個形式才能簡寫

關於前端學習之css三、css 選擇器

1、標籤選擇器



  • 所有標籤選取



    2、id 選擇器


  • ## id 唯一;




  • #字母、底線和數字組成,數字不開頭;

  • 3、類別選擇器

  • #class="類別名稱類別名稱"(多類別)

  • 多類別應用程式:分類組合

    4、後代選擇器
  • 格式:tag tag{};
  • #上面的tag 可以是標籤、id 和class 選擇器;

    #可以無限往下發展;
  • 後代包含子和孫;
  • 5、子元素選擇器

    #格式:tag>tag{}
  • #不能有空格

    6、交集選擇器(*)
  • 格式:tagtag{}
  • #二者無任何符號

7、並集選擇器

格式:tag,tag{}

#8、兄弟選擇器

#########相鄰兄弟: 連接;只能選取同級相鄰後面的一個且中間不能隔開#############通用兄弟:~ 連接;同級指定標籤的後面,無論是否隔開# ###########9、序選擇器###### 相關推薦:##########css樣式--- CSS hack################################################## ###css div總結【css div】_html/css_WEB-ITnose#######

以上是關於前端學習之css的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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