CSS文法總結

最後更新：2016-11-22 來源：互聯網

上載者：User

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

在學習CSS的過程中，瞭解並掌握CSS的文法是至關重要的，在這裡總結一下相關的文法。

一、CSS寫法：

css 代碼

選取器{    屬性名稱：屬性值 }

二、寫在什麼地方：

有三種方式，分別為：行內樣式，內部樣式，外部樣式。

行內樣式

直接寫在HTML標籤內，寫於style屬性當中

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div style="background:red;width:15px;height:15px;"></div></body></html>

內部樣式

寫在頭部標籤內，置於style標籤內部

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .exp{            height: 150px;            width: 200px;            background-color: #123456;            box-shadow: 0 0 8px #132478;        }    </style></head><body>    <div></div></body></html>

外部樣式

在head中用link標籤引入，置於CSS檔案中

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <div></div></body></html>

css 代碼

.exp{    height: 30px;    width: 20px;    background-color: #123456;    box-shadow: 0 0 1px #132478;}

三、注釋：

css 代碼

.exp{    background: #123444;    /*背景色，注釋用此符號*/    height: 90px;    width: 80px;    //CSS中的注釋不能用此符號，和HTML有所不同}

註：

在寫法上，瀏覽器的私人屬性放在前面，標準屬性放在後面。私人屬性需要加首碼：<chrome/safari>加-webkit-，<firefox>加-moz-，<ie>加-ms-，<opera>加-o-。

四、屬性值文法：

五、組合符號：

1、空格數量與順序必須保持一致

 <'font-size'> <'font-family'> 合法值： 12px arial 不合法值： 12px   或者 arial 12px

2、&& 數量必須一致，順序隨意

 <length>&&<color> 合法值： green 2px  或者  2em blue 不合法值： blue  或者  5em

3、|| 必須出現一個，順序無關

 underline||overline||linethrough||blink 合法值： underline  或者  overline underline

4、| 只能出現一個

 <color>|transparent 合法值： #123456  或者  transparent 不合法值： #aabb33 transparent

5、[] 分組作用，作為整體

 bold [thin||<length>]     合法值： bold thin  或者  bold 3px

七、數量符號：

1、無

 <length>    只能出現一次 合法值： 1px  或者  10em 不合法值： 1px 3em 5px

2、+ 可以出現一次或多次

 <color-stop>[,<color-stop>]+ 合法值： #fff,red,yellow  或者  blue,red 50%,black 不合法值： #123456

3、？可出現，也可不出現

 inset？&&<color> 合法值： inset #123445  或  #abcd33

4、{} 基本元素可以出現幾次（最少出現幾次，最多出現幾次）

 <length>{2,4}    最少出現兩次，最多出現四次 合法值： 1px 3em  或者  1px 3px 5em 不合法值： 3px

5、* 可以出現0次，1次或者多次

 <time>[,<time>]* 合法值： 1s     出現0次 1s,5ms    出現1次

6、# 出現1次或多次，中間用”,"隔開

 <time>#    相當於    <time>[,<time>]* 合法值： 2s,4s,8s 不合法值： 2s 4s

八、@規則文法：

1、@標識符 xxx;

2、@標識符 xxx{}

常用的：

@media 響應式布局
@keyframe 描述動畫的中間步驟
@font-face 引入外部字型



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