鬍子哥的重學前端(筆記)css語法

2021-09-12 18:11:10 字數 1978 閱讀 9834

在外部樣式表檔案內使用。指定該樣式表使用的字元編碼。

該規則後面的分號是必需的,如果省略了此分號,會生成錯誤資訊。

在外部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 等指令並未支援正規表示法,所以...