CSS基本文法

來源:互聯網
上載者:User
CSS基本文法:

CSS樣式主要由三部分組成:
.選取器
.屬性名稱
.屬性值例:

<html>
        <head>
                <title>CSS基本文法</title>
                <style type="text/css">
                        p{color:#aa66cc}
                        h2{text-align:center;color:red}
                        p.mystyle1{font-size:20px;color:blue}
                        p.mystyle2{font-style:italic;font-size:40px;
                               color:#00ffff;text-align:center}
                        h1,h3,h4,h5,h6,p.mystyle3{text-align:center;color:green}
                        .mystyle{text-align:right;color:#ff00ff}
                </style>
        </head>
        <body>
                <h2>h2標題文字</h2>
                <h5>h5標題文字</h5>
                <p class="mystyle1">第一段文字</p>
                <p class="mystyle2">第二段文字</p>
                <p class="mystyle3">第三段文字</p>
                <p>第四段文字</p>
                <p class="mystyle">第五段文字</p>
                <h4 class="mystyle">h4標題文字</h4>
                <div class="mystyle">DIV塊內文字</div>
         </body>
</html>

CSS注釋:
/*與java中一種注釋一樣,可以跨行*/CSS字型屬性:
主要字型屬性包括:
.font-family
        設定字型類型,如"Arial","宋體"等
.font-size
        設定字型大小,常用度量單位pt和px
.font-style
        設定字型風格,可選值normal,italic和oblique
.font-weight
        設定字型“重量”,常用值為normal和bold
.font
        綜合設定上述各種字型屬性
例:<html>
        <head>
                <title>CSS字型屬性</title>
                <style type="text/css">
                        p.mf1{fon-size:20px}/*courier等距*/
                        p.mf2{font:normal italic bold 20pt 黑體}
                </style>
        </head>
        <body>
                <p class="mf1">The first paragrah</p>
                <p class="mf2">第二段文字</p>
        </body>
</html>CSS常用文字屬性:
.text-align
        設定文本對齊,可選值left,center,right,justify(左右對齊)
.text-indent
        設定首行縮排,其值可採用絕對或相對的長度單位及百分比
.line-height
        設定行高,其值可採用絕對或相對的長度單位及百分比
.letter-spacing
        設定字元間距,其值可採用絕對或相對的長度單位
.color
        設定文字顏色例:
<html>
        <head>
               <title>CSS常用文字屬性</title>
               <style type="text/css">
                       .t1{text-align:left;text-indent=1cm;line-height=20px;letter-spacing=150%;color=red}
                       .t2{text-align:center;text-indent=0;letter-spacing=1em;color=blue;font-weight:bold}
                       /*em為一個字元的距離*/
                </style>
        </head>
        <body>
                <p class="t1">古希臘有一句民諺說:“聰明的人,藉助經驗說話;而更聰明的人,根據經驗不說話。”西方還有一句著名的話:雄辯是銀,傾聽是金。中國則流傳著“言多必失”和“訥於言而敏於行”這樣的濟世名言。    </p>
                <p class="t2">沉舟側畔千帆過,病樹前頭萬木春</p>
        </body> 
</html>CSS的長度單位:
在CSS樣式表中,長度單位分為兩類:
1).絕對長度單位
        絕對長度單位         說明
        in                               英寸Inches(1英寸=2.54厘米)
        cm                             厘米Centimeters
        mm                            毫米Millimeters
        pt                               點Points(1點=1/72英寸)
        pc                              皮卡Picas(1皮卡=12點)
2).相對長度單位:
        相對長度單位         說明
         em                     元素的字型高度
         ex                      字母x的高度
         px                      像素Pixels
         %                       百分比Percentage

 

相關文章

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.