css摺疊樣式（3）――常用樣式屬性

最後更新：2016-12-28 來源：互聯網

上載者：User

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

要點：

一、顏色屬性

demo.html

<!doctype html>  <html>      <head>          <title>CSS的顏色屬性的四種方式</title>          <meta charset="utf-8">          <style type="text/css">              body{                  color:red              }              .c1{                  color:#ff6600              }                        .c2{                  color:rgb(0,0,255)  /* 紅(R)、綠(G)、藍(B) 每個的取值範圍0~255 */              }                        .c3{                  color:rgba(0,100,0,0.4)    /* RGBA是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha的(色彩空間)透明度(0-1) */              }          </style>      </head>      <body>          <p>這是第一種方式</p>          <p class="c1">這是第二種方式</p>          <p class="c2">這是第三種方式</p>          <p class="c3">這是第四種方式</p>      </body>  </html>

二、字型屬性

demo.html

<!doctype html>  <html>      <head>          <title>CSS的字型屬性</title>          <meta charset="utf-8">          <link rel="stylesheet" type="text/css" href="style.css">        </head>      <body>          <p class="c1">字型大小20px</p>          <p class="c2">楷體</p>          <p class="c3">加粗</p>          <p class="c4">斜體</p>                </body>  </html>

style.css

p.c1{            font-size:50px  }    p.c2{            font-family:KaiTi,SimSun    /* 可以使用“，”隔開，以確保當字型不存在的時候直接使用下一個 */  }    p.c3{            font-weight:bold           /* font-weight 字型加粗,normal(預設值)、bold(粗)、bolder(更粗)、lighter(更細) */                                /*另外一種方式：100、200、300~900，400 = normal，而 700 = bold，只能整百 */  }        p.c4{            font-style:italic    /* normal:標準 italic:斜體 oblique:傾斜 inherit：繼承  */  }

[b]三、背景屬性[/b]

四、文字屬性

五、邊框屬性

（1）邊框風格：

（2）邊框寬度：

（3）邊框顏色：

（4）組合方式（簡寫方式如）

demo.html

<html>      <head>          <title>CSS常見屬性(邊框屬性)</title>          <meta charset="utf-8">          <style type="text/css">              div{                  width:70px;                  height:70px;                  float:left;                     margin-right:20px;                  background-color:rgb(250,128,10);                            }              .div1{                  border:solid 2px green;              }                                }              .div2{                  border-style:dashed;                  border-width:4px;                  border-color:blue;              }                            .div3{                  border-top-style:solid;                  border-bottom-style:dashed;                  border-left-style:dotted;                  border-right-style:double;                  border-top-width:thin;                  border-bottom-width:2px;                  border-color:red green blue yellow;                           }              .div4{              width:40px;              height:40px;              border-width:20px;              border-style:ridge;                }                        </style>      </head>      <body>          <div class="div1"></div>          <div class="div2"></div>          <div class="div3"></div>          <div class="div4"></div>      </body>  </html>

六、列表屬性

demo.html

<html>      <head>          <title>CSS常見屬性(列表屬性)</title>          <meta charset="utf-8">          <style type="text/css">                    ul.ul1{          /* 當圖片list-style-image和標記類型list-style-type同時存在時，一圖片為先，圖片不存在則使用list-style-type*/               list-style-type:square;              list-style-position:inside;                 list-style-image:url(images/arr.gif);                     }                    ul.ul2{              list-style:disc outside url('images/arr.png')          }                              </style>      </head>      <body>          <ul class="ul1">              <li>無序列表1</li>              <li>無序列表2</li>                  <ul class="ul2">                      <li>無序列表1</li>                      <li>無序列表2</li>                      <li>無序列表3</li>                      <li>無序列表4</li>                  </ul>              <li>無序列表3</li>              <li>無序列表4</li>          </ul>      </body>  </html>

以上就是css摺疊樣式（3）――常用樣式屬性的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！



本文章原先以中文撰寫並發佈於 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