国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

胡子哥的重學(xué)前端（筆記）css語法

kelvinlee / 2500人閱讀

摘要：規(guī)則在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。上說沒有瀏覽器支持，暫不研究允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值。函數(shù)返回選擇元素的屬性值。

at 規(guī)則 @charset

在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。
該規(guī)則后面的分號(hào)是必需的，如果省略了此分號(hào)，會(huì)生成錯(cuò)誤信息。
在外部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 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。

@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。

當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(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 : 符號(hào); or additive-symbols: 符號(hào)
     prefix  : 前綴;
     suffix  : 后綴;
     pad     : 補(bǔ)零(eg. 01,02,03);
     negative: 負(fù)數(shù)策略;
     fallback: 出錯(cuò)后的默認(rèn)值;
     speakas : 語音策略;
}

詳細(xì)使用方法

@key-frames

定義動(dòng)畫的關(guān)鍵幀

使一個(gè)div元素逐漸移動(dòng)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 元素使用字體，請(qǐng)通過 font-family 屬性來引用字體的名稱 (myFirstFont)：

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

div
{
font-family:myFirstFont;
}
viewport

這個(gè)和meta name="viewport"類似，但支持沒有使用meta的好，所以建議使用meta

CSS 支持一批特定的計(jì)算型函數(shù)：

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

calc()

calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。

 ● 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；

 ● 任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；

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

 ● calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；
max()

用于比較數(shù)值的大小并取出最大的那個(gè)。

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

用于比較數(shù)值的大小并取出最小的那個(gè)。

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);
}

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

attr()

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

attr屬性通常和自定義屬性data-配合使用，因?yàn)閭鹘y(tǒng)的其它屬性雖然也能存值，但通常不適合存放表達(dá)性文字


div[data-line]:after { content: attr(data-line);/* 屬性名稱上不要加引號(hào)！ */ }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117347.html

相關(guān)文章

  • 胡子哥的重學(xué)前端（筆記）css語法

    摘要：規(guī)則在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。上說沒有瀏覽器支持，暫不研究允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值。函數(shù)返回選擇元素的屬性值。 at 規(guī)則 @charset 在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。該規(guī)則后面的分號(hào)是必需的，如果省略了此分號(hào)，會(huì)生成錯(cuò)誤信息。在外部cs...

    Sleepy 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開頭，否則會(huì)被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

    codeKK 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開頭，否則會(huì)被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

    SolomonXie 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開頭，否則會(huì)被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

    HollisChuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<