資訊專欄INFORMATION COLUMN
摘要：規(guī)則在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。上說沒有瀏覽器支持，暫不研究允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值。函數(shù)返回選擇元素的屬性值。
at 規(guī)則 @charset
在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。
該規(guī)則后面的分號是必需的，如果省略了此分號，會生成錯誤信息。
在外部css文件中寫法如下：
@charset "utf-8";
body{sRules}
div{sRules}
...
@import
指定導(dǎo)入的外部樣式表及目標(biāo)媒體。
@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 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計響應(yīng)式的頁面，@media 是非常有用的。
當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
@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 : 補(bǔ)零(eg. 01,02,03);
negative: 負(fù)數(shù)策略;
fallback: 出錯后的默認(rèn)值;
speakas : 語音策略;
}
詳細(xì)使用方法
@key-frames定義動畫的關(guān)鍵幀
使一個div元素逐漸移動200像素：
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
@font-face
使用您需要的字體,當(dāng)今流行的fontawesome就是用這種方式加載圖標(biāo)的
新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 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 支持一批特定的計算型函數(shù)：calc() max() min() clamp() toggle() attr()
calc()calc() 函數(shù)用于動態(tài)計算長度值。
● 需要注意的是，運(yùn)算符前后都需要保留一個空格，例如：width: calc(100% - 10px)； ● 任何長度值都可以使用calc()函數(shù)進(jìn)行計算； ● calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算； ● calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則；max()
用于比較數(shù)值的大小并取出最大的那個。
div{font-size:max(30px, 3em);}
div{width:max(10% + 20px, 300px);}
min()
用于比較數(shù)值的大小并取出最小的那個。
div{font-size:min(30px, 3em);}
div{width:min(10% + 20px, 300px);}
clamp()
mozilla 上說沒有瀏覽器支持，暫不研究
toggle()允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值。
在更老的版本中使用的是：cycle()
ul {
list-style-type: toggle(disk, circle, square, box);
}
在上述代碼中，定義一個多級的ul，第一級使用disk markers，子孫級依次使用circle, square, box。
attr()attr() 函數(shù)返回選擇元素的屬性值。
content和attr()配合使用
attr屬性通常和自定義屬性data-配合使用，因為傳統(tǒng)的其它屬性雖然也能存值，但通常不適合存放表達(dá)性文字
div[data-line]:after { content: attr(data-line);/* 屬性名稱上不要加引號！ */ }
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117347.html
摘要：規(guī)則在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。上說沒有瀏覽器支持，暫不研究允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值。函數(shù)返回選擇元素的屬性值。 at 規(guī)則 @charset 在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。該規(guī)則后面的分號是必需的，如果省略了此分號，會生成錯誤信息。在外部cs...
摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個中劃線開頭，否則會被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...
摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個中劃線開頭，否則會被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...
摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個中劃線開頭，否則會被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...
閱讀 942·2021-09-07 09:58
閱讀 1493·2021-09-07 09:58
閱讀 2887·2021-09-04 16:40
閱讀 2508·2019-08-30 15:55
閱讀 2415·2019-08-30 15:54
閱讀 1373·2019-08-30 15:52
閱讀 437·2019-08-30 10:49
閱讀 2609·2019-08-29 13:21
