CSS基本文法

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More