鬍子哥的重學前端（筆記）css語法

at 規則

@charset

在外部樣式表文件內使用。指定該樣式表使用的字符編碼。
該規則後面的分號是必需的，若是省略了此分號，會生成錯誤信息。
在外部css文件中寫法以下：

@charset "utf-8";
body{sRules}
div{sRules}
...

@import

指定導入的外部樣式表及目標媒體。

@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

@media

使用 @media 查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式。

@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。

當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

@counter-style

使用@counter-style命令，咱們能夠自定義列表樣式，能夠用在list-style、counter、counters等上。

@counter-style counter名字{
     system  : 算法;
     range   : 使用範圍;
     symbols : 符號; or additive-symbols: 符號
     prefix  : 前綴;
     suffix  : 後綴;
     pad     : 補零(eg. 01,02,03);
     negative: 負數策略;
     fallback: 出錯後的默認值;
     speakas : 語音策略;
}

詳細使用方法

@key-frames

定義動畫的關鍵幀

使一個div元素逐漸移動200像素：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@font-face

使用您須要的字體,當今流行的fontawesome就是用這種方式加載圖標的
新的 @font-face 規則中，您必須首先定義字體的名稱（好比 myFirstFont），而後指向該字體文件。

如需爲 HTML 元素使用字體，請經過 font-family 屬性來引用字體的名稱 (myFirstFont)：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

viewport

這個和meta name="viewport"相似，但支持沒有使用meta的好，因此建議使用meta

CSS 支持一批特定的計算型函數：

calc() max() min() clamp() toggle() attr()

calc()

calc() 函數用於動態計算長度值。

● 須要注意的是，運算符先後都須要保留一個空格，例如：width: calc(100% - 10px)；

 ● 任何長度值均可以使用calc()函數進行計算；

 ● calc()函數支持 "+", "-", "*", "/" 運算；

 ● calc()函數使用標準的數學運算優先級規則；

max()

用於比較數值的大小並取出最大的那個。

div{font-size:max(30px, 3em);}
div{width:max(10% + 20px, 300px);}

min()

用於比較數值的大小並取出最小的那個。

div{font-size:min(30px, 3em);}
div{width:min(10% + 20px, 300px);}

clamp()

mozilla 上說沒有瀏覽器支持，暫不研究

toggle()

容許子孫元素使用取值序列中的值循環替換繼承而來的值。
在更老的版本中使用的是：cycle()

ul {
    list-style-type: toggle(disk, circle, square, box);
}

在上述代碼中，定義一個多級的ul，第一級使用disk markers，子孫級依次使用circle, square, box。

attr()

attr() 函數返回選擇元素的屬性值。
content和attr()配合使用

attr屬性一般和自定義屬性data-配合使用，由於傳統的其它屬性雖然也能存值，但一般不適合存放表達性文字

<div data-line="1"></div>
div[data-line]:after { content: attr(data-line);/* 屬性名稱上不要加引號！ */ }