在外部樣式表檔案內使用。指定該樣式表使用的字元編碼。
該規則後面的分號是必需的,如果省略了此分號,會生成錯誤資訊。
在外部css檔案中寫法如下:
@charset "utf-8";
body
div...
指定匯入的外部樣式表及目標**。
@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 screen and (max-width: 300px)
}
使用@counter-style命令,我們可以自定義列表樣式,可以用在list-style、counter、counters等上。
@counter-style counter名字
詳細使用方法
定義動畫的關鍵幀
使乙個div元素逐漸移動200畫素:
@keyframes mymove
to }
@-webkit-keyframes mymove /* safari and chrome */
to }
使用您需要的字型,當今流行的fontawesome就是用這種方式載入圖示的
新的 @font-face 規則中,您必須首先定義字型的名稱(比如 myfirstfont),然後指向該字型檔案。
如需為 html 元素使用字型,請通過 font-family 屬性來引用字型的名稱 (myfirstfont):
@font-face
div
這個和meta name="viewport"類似,但支援沒有使用meta的好,所以建議使用meta
calc() max() min() clamp() toggle() attr()
calc() 函式用於動態計算長度值。
● 需要注意的是,運算子前後都需要保留乙個空格,例如:width: calc(100% - 10px);
● 任何長度值都可以使用calc()函式進行計算;
● calc()函式支援 "+", "-", "*", "/" 運算;
● calc()函式使用標準的數**算優先順序規則;
用於比較數值的大小並取出最大的那個。
div
div
用於比較數值的大小並取出最小的那個。
div
div
mozilla 上說沒有瀏覽器支援,暫不研究
允許子孫元素使用取值序列中的值迴圈替換繼承而來的值。
在更老的版本中使用的是:cycle()
ul
在上述**中,定義乙個多級的ul,第一級使用disk markers,子孫級依次使用circle, square, box。
attr() 函式返回選擇元素的屬性值。
content和attr()配合使用
attr屬性通常和自定義屬性data-配合使用,因為傳統的其它屬性雖然也能存值,但通常不適合存放表達性文字
div[data-line]:after
鬍子哥的重學前端(筆記)css語法
在外部樣式表檔案內使用。指定該樣式表使用的字元編碼。該規則後面的分號是必需的,如果省略了此分號,會生成錯誤資訊。在外部css檔案中寫法如下 charset utf 8 body div.指定匯入的外部樣式表及目標 import url example.css screen and min width...
重學前端 2 簡單回顧css
css 文字陰影 css3 text shadow 水平位置 垂直位置 模糊距離 陰影顏色 層疊性1 含義 多種css樣式疊加,瀏覽器處理衝突的一種能力 2 原則 一般情況下,若出現樣式衝突,會按照css書寫的順序 以最後的為準,樣式不衝突,不會層疊 繼承性一般文字顏色和字型大小,font 開頭的屬...
《鳥哥的Linux私房菜》重學筆記(七)
正規表示法基本上是一種 表示法 只要工具程式支援這種表示法,那麼該工具程式就可以用來作為正規表示法的字串處理之用。例如 vi,grep,awk sed 等等工具,因為她們有支援正規表示法,所以,這些工具就可以使用正規表示法的特殊字元來進行字串的處理。但例如 cp,ls 等指令並未支援正規表示法,所以...