CSS語法總結

godlong_X 發布于2019-08-30 13:09 / 3127人閱讀

摘要：在學習的過程中，了解并掌握的語法是至關重要的，在這里總結一下相關的語法。一寫法代碼選擇器屬性名屬性值二寫在什么地方有三種方式，分別為行內樣式，內部樣式，外部樣式。

在學習CSS的過程中，了解并掌握CSS的語法是至關重要的，在這里總結一下相關的語法。

一、CSS寫法：

css 代碼

選擇器{
    屬性名：屬性值 
}

二、寫在什么地方：

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

行內樣式

直接寫在HTML標簽內，寫于style屬性當中




    
    Document

內部樣式

寫在頭部標簽內，置于style標簽內部




    
    Document

外部樣式

在head中用link標簽引入，置于CSS文件中




    
    Document

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有所不同
}

注：

在寫法上，瀏覽器的私有屬性放在前面，標準屬性放在后面。
私有屬性需要加前綴：加-webkit-，加-moz-，加-ms-，加-o-。

四、屬性值語法：

五、組合符號： 1、空格數量與順序必須保持一致

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

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

 &&
 合法值：
 green 2px  或者  2em blue
 不合法值：
 blue  或者  5em

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

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

4、| 只能出現一個

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

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

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

七、數量符號： 1、無

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

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

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

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

 inset？&&
 合法值：
 inset #123445  或  #abcd33

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

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

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

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

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

 #    相當于    [,]*
 合法值：
 2s,4s,8s
 不合法值：
 2s 4s

八、@規則語法： 1、@標識符 xxx; 2、@標識符 xxx{} 常用的：

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

GPU云服務器云服務器年終總結網絡總結方法總結函數總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115346.html

CSS語法總結

摘要：在學習的過程中，了解并掌握的語法是至關重要的，在這里總結一下相關的語法。一寫法代碼選擇器屬性名屬性值二寫在什么地方有三種方式，分別為行內樣式，內部樣式，外部樣式。在學習CSS的過程中，了解并掌握CSS的語法是至關重要的，在這里總結一下相關的語法。一、CSS寫法： css 代碼選擇器{ 屬性名：屬性值 } 二、寫在什么地方：有三種方式，分別為：行內樣式，內部樣式，外部...

changfeng1050 2019-08-01 15:59 評論0 收藏0
『總結』常見開發問題解決

摘要：移動端開發標簽中的屬性，在去除跳轉需求，事件選用而不是，使用會失效。或者此外注意的地方有兩點在用寫事件相關代碼時，要使用事件委托的形式的時效要比要快。老版本語法老版本語法混合版本語法新版本語法待續移動端開發 a標簽中的href屬性，在去除跳轉需求，事件選用click而不是tap，tap使用會失效。 $(document).on(click, .J_Remove, function(...

Wildcard 2019-08-21 16:21 評論0 收藏0
『總結』常見開發問題解決

摘要：移動端開發標簽中的屬性，在去除跳轉需求，事件選用而不是，使用會失效。或者此外注意的地方有兩點在用寫事件相關代碼時，要使用事件委托的形式的時效要比要快。老版本語法老版本語法混合版本語法新版本語法待續移動端開發 a標簽中的href屬性，在去除跳轉需求，事件選用click而不是tap，tap使用會失效。 $(document).on(click, .J_Remove, function(...

xiaoxiaozi 2019-08-29 13:22 評論0 收藏0
CSS 高度(css height)

摘要：同時也無需使用來實現高度自適應。通常默認情況下不用再設置高度值為，對象高度即是自適應高度。高度不能設置百分比高度如設置百分比的高度無效。擴展閱讀寬度最小高度最大高度轉載來源網址DIV+CSS height高度知識教程篇 DIV CSS高度簡介這里的CSS高度是指通過CSS來控制設置對象的高度。使用CSS屬性單詞height。單位可以使用PX，em等常用使用PX（像素）為html單位。 he...

sf_wangchong 2019-04-23 13:13 評論0 收藏0