1. 程式人生 > >前端知識學習一 :CSS基礎

前端知識學習一 :CSS基礎

分隔 color html元素 http 方式 瀏覽器 單位 工作 分離

一.CSS概述

    css指的是層疊樣式表,樣式定義如何顯示HTML元素,樣式通常存儲在樣式表中,

  把樣式添加到HTML4.0中,是為了解決內容和表現分離的問題。外部樣式表通常存儲在css文件   中。多個樣式定義可層疊為一。

二.層疊次序

    一般而言,所有的樣式都會根據下面的規則層疊於一個新的虛擬樣式表中,其中4擁有最高的優先權。

  1.瀏覽器的缺省設置

  2.外部樣式表(通過引入的外部.css文件)

  3.內部樣式表(位於<head>標簽內部)

  4.內聯樣式表(在HTML元素內部)

    因此屬性的優先級是內聯樣式表中優先於內部樣式表中的優先於外部樣式表中的,都優先於瀏覽器的缺省設置。

三.CSS基礎語法

    css的規則由兩個主要部分構成 選擇器以及一條或多條聲明。

    選擇器通常是你需要改變樣式的HTML元素

    每條聲明由一個屬性和一個值組成

    屬性(property)是你所希望設置的樣式屬性(style attribute)。每個屬性有一個值,值和屬性之間以:分隔。

    註意:聲明要用花括號包圍起來。不同的聲明之間以分號隔開。

    例如:

    技術分享

    定義的就是改變h1標簽的字體顏色和字體大小

    值得不同寫法和單位

      例如在colr屬性中,我們不僅可以使用英文單詞來進行定義(red),還可以使用十六進    制的顏色值來進行定義(#ff0000)。

      為了節約字節,我們還可以使用css的縮寫形式p{color:#f00}

      同時,我們還可以通過兩種方式來使用RGB值(通過對紅,綠,藍三種顏色的疊加來得到各種不同的顏色)。

       1 p{ color:rgb(255,0,0) }

       2 p{ color:rgb(100%,0%,0%) }

    註意:當使用RGB百分比時,即使當值為0時,也要寫百分比符號,但是在其他,例如說寬度啊,像素啊!在這些後面就不需要使用單位了。

      CSS的空格和大小寫

    css對空格和大小寫,不敏感,是否包含空格不會影響到css在瀏覽器上的工作效果,同樣css對於大小寫也是不敏感的。但如果涉及到和HTML文檔一起工作的話 ,class和id名稱對大小寫是敏感的。

     

    

前端知識學習一 :CSS基礎