css基礎

css指層疊樣式表 (Cascading Style Sheets),樣式定義如何顯示 HTML 元素,樣式通常存儲在樣式表中

css常用屬性

    背景:

        background-color:#F5E2EC; /*背景顏色*/

        background:transparent; /*透視背景*/

        background-p_w_picpath : url(/p_w_picpath/bg.gif); /*背景圖片*/

        background-repeat : repeat; /*重複排列-網頁默認*/

        background-repeat : no-repeat; /*不重複排列*/

        background-repeat : repeat-x; /*在x軸重複排列*/

        background-repeat : repeat-y; /*在y軸重複排列*/

            背景位置

            background-position : 90% 90%; /*背景圖片x與y軸的位置*/

            background-position : top; /*向上對齊*/

            background-position : buttom; /*向下對齊*/

            background-position : left; /*向左對齊*/

            background-position : right; /*向右對齊*/

            background-position : center; /*居中對齊*/



    文本: text、word、direction(文本操作:通過文本屬性,您可以改變文本的顏色、字符間距,對齊文本,裝飾文本,對文本進行縮進,等等。)

    text-indent(縮進文本) text-indent: 5em;

    text-align(水平對齊) text-align:center

    word-spacing(字間隔) word-spacing: 30px;

    text-decoration(文本裝飾)text-decoration: none

    direction(文本方向) direction:rtl;


    框模型:背景應用於由內容和內邊距、邊框組成的區域。

        padding(內邊距)

        padding-top:10px; /*上邊框留空白*/

        padding-right:10px; /*右邊框留空白*/

        padding-bottom:10px; /*下邊框留空白*/

        padding-left:10px; /*左邊框留空白


    margin(外邊距)

    margin-top:10px; /*上邊界*/

    margin-right:10px; /*右邊界值*/

    margin-bottom:10px; /*下邊界值*/

    margin-left:10px; /*左邊界值*/



        border(邊框)可設置值:寬度,樣式,顏色

            框線位置

            border-top : 1px solid #6699cc; /*上框線*/

            border-bottom : 1px solid #6699cc; /*下框線*/

            border-left : 1px solid #6699cc; /*左框線*/

            border-right : 1px solid #6699cc; /*右框線*/


            框線樣式

            solid /*實線框*/

            dotted /*虛線框*/

            double /*雙線框*/


    CSS文字屬性:

        color : #999999; /*文字顏色*/

        font-family : 宋體,sans-serif; /*文字字體*/

        font-size : 9pt; /*文字大小*/


        文字對齊

            text-align:right; /*文字右對齊*/

            text-align:left; /*文字左對齊*/

            text-align:center; /*文字居中對齊*/

            text-align:justify; /*文字分散對齊*/

        vertical-align屬性

            vertical-align:top; /*垂直向上對齊*/

            vertical-align:bottom; /*垂直向下對齊*/

            vertical-align:middle; /*垂直居中對齊*/

            vertical-align:text-top; /*文字垂直向上對齊*/

            vertical-align:text-bottom; /*文字垂直向下對齊*/


    定位:

        position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

        top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

        right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

        bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

        left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

        overflow 設置當元素的內容溢出其區域時發生的事情。

        clip 設置元素的形狀。元素被剪入這個形狀之中,然後顯示出來。

        vertical-align 設置元素的垂直對齊方式。

        z-index 設置元素的堆疊順序。


        相對定位:注意,在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。

            #box_relative {

              position: relative;

              left: 30px;

              top: 20px;

            }


        絕對定位:絕對定位使元素的位置與文檔流無關,因此不佔據空間。

            #box_relative {

              position: absolute;

              left: 30px;

              top: 20px;

            }


    選擇器

        元素選擇器

            爲某個 HTML 元素,比如 p、h1、em、a設置樣式

            html {color:black;}

            h1 {color:blue;}

            h2 {color:silver;}


        選擇器分組

            h2 元素和段落都有灰色。

            h2, p {color:gray;}


        類選擇器

            類選擇器允許以一種獨立於文檔元素的方式來指定樣式。

            該選擇器可以單獨使用,也可以與其他元素結合使用。

            .important {color:red;}

            只有段落顯示爲紅色文本:

            p.important {color:red;}

            假設 class 爲 important 的所有元素都是粗體,而 class 爲 warning 的所有元素爲斜體,class 中同時包含 important 和

             warning 的所有元素還有一個銀色的背景 。就可以寫作:

            .important {font-weight:bold;}

            .warning {font-style:italic;}

            .important.warning {background:silver;}


        ID選擇器

與類不同,在一個 HTML 文檔中,ID 選擇器會使用一次,而且僅一次。

        #intro {font-weight:bold;}


        屬性選擇器

屬性選擇器可以根據元素的屬性及屬性值來選擇元素。

        a[href] {color:red;}

a[href][title] {color:red;}


後代選擇器

後代選擇器來創建一些規則,使這些規則在某些文檔結構中起作用,而在另外一些結構中不起作用。

h1 em {color:red;}


子元素選擇器

選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器

h1 > strong {color:red;}


相鄰選擇器

增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:

h1 + p {margin-top:50px;}




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章