首頁 > web前端 > css教學 > 詳解css基礎樣式表分類、選擇器分類區別

詳解css基礎樣式表分類、選擇器分類區別

高洛峰
發布: 2017-03-16 11:17:24
原創
1628 人瀏覽過

1 . 樣式表 Cascading Style Sheet

     css優點:

  •     內容與表現分離

  •     網頁的表現統一,容易修正

  •     豐富的樣式,讓網頁佈局更有彈性

  •     減少網頁程式碼量,增加網頁的瀏覽速度,節省網路頻寬

  • #    使用獨立於網頁的CSS,有利於網頁被搜尋索引擎收錄

  •     嵌入ID>外部ID>嵌入class>外部class>嵌入標籤>外部標籤

    1.1  引入方式

           四種

  •    行內樣式表

  • #   行內樣式表

  •    導入方式,
  • 盡量不要使用! ! !

    1.2  引入方式

優先權

  • ##行內>內部>外部>導入
  •     1.3  連結式與導入式的差異:

標籤屬於XHTML,@import屬於CSS2.1;

  使用連結的CSS文件先載入到網頁當中,再進行編譯顯示;

  使用@import導入的CSS文件,客戶端顯示HTML結構,再把CSS檔案載入到網頁中;

   @import是CSS2.1特有的,對於不相容CSS2.1的瀏覽器來說就是無效的;

2.  選擇器

    2.1 哪​​幾種選擇器與它的優先權

         ID選擇器

  #   一個###HTML文件###中只能有一個相同名字的ID###########  器  .  可以有多個############         元素    p  ############      ## ############   ##   2.2 選擇器的優先順序############         ID > CLASS > 元素 > *#######

3 . 基本的幾個樣式(常用於文本,圖片,列表)

background背景
登入後複製
    1.background-color  背景色  (16进制数  rgb  rgba  英文名)
登入後複製
    2.background-image 背景图
登入後複製
    3.background-size 背景大小 (像素、百分比)
登入後複製
    4.background-repeat  (repeat-x  repeat-y  no-repeat)
登入後複製
    5.background-position  (通过方向值来指定,通过百分比指定,通过确切的像素值指定)
登入後複製
    6.background-attachment  是否随着浏览器滚动,使用它图片会相对浏览器固定住(bg-position和bg-attachment不要一起使用)
登入後複製
    7.background复合属性  可以把之前的属性定义在这一个里面,【一般书写顺序:颜色、图片、是否重复、是否固定、位置】
登入後複製

#color顏色

  1. color  規定文字的顏色

  2. opacity  設定元素的透明度  ,1不透明   0完全透明

font字體

  1. font- style 指定文字的字體樣式(正常、斜體

  2. font-variant 指定文字是否為小的大寫字母(對英文起作用)

  3. #font-weight 指定文字的粗細(只有兩種樣式)  bold  粗體

  4. #font-size 指定文字字體大小

  5. #font-family 定義文字使用某個字體

#中文字體font-family常用清單//m.sbmmt.com/ xiazai/sucai/ziti

 font 複合屬性

##   一般順序:字體樣式、是否為小號大寫字、字體粗細、字號、字體

text文字屬性

##############################################################################。 ##        color , text-align , ###line-height### ,  ###letter-spacing### , ###vertical-align### ,###text-indent### ,###vertical-align### ,###text-indent###### #text-decoration### ;############-----【vertical-align----->1. 常用於文字方塊input ,2. 結合{## #display###:table-cell;}可用來將圖片垂直置中】#############-----【valign----->只適用於table中的單元格,例如this is cell 】#############----- 【align----->適用於
,例如:
;############         ,例如:
·············(? ····
;############         ,例如: 文字相對於圖片頂部顯示 ;###########         ·····等等,不再一## ##

以上是詳解css基礎樣式表分類、選擇器分類區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板