《The Book of CSS3》學習筆記

時間 2019-12-12

標籤 book css3 css 學習筆記欄目 CSS 简体版

原文原文鏈接

一.瀏覽器前綴

E{
    -moz-name : value;      /* Firefox */
    -ms-name : value;       /* IE */
    -o-name : value;        /* Opera */
    -webkit-name : value;   /* WebKit */
    name : value;           /* 適應將來標準方式 */
}

二.媒體查詢

1.使用媒體查詢的3種方式

head部分css

<link href="css.css" rel="stylesheet" media="mediaType and (expr)" />

css文件首行html

@import url("css.css") mediaType and (expr);

樣式規則內部前端

@media mediaType and (expr) {
    /* styles */
}

2.mediaType的取值

只有all（沒有意義，不如不加）、screen和print是瀏覽器廠商普遍支持的，可選值還有：jquery

braille：盲文css3
embossed：盲文打印git
handheld：手持設備，並很差用github
projection：投影設備web
speech：演講spring
tty：顯示等寬字體的設備，好比電傳打字機瀏覽器
tv：電視

因此算上前三個普遍支持的，一共有10個可選值

3.expr的取值

最經常使用的是min-[device-]width和max-[device-]width，例如：

@media screen and (min-width : 800px) {
    /* 當瀏覽器窗口寬度>=800px時應用該樣式 */
}
/* 
 * 通常分界值：
 * 480px如下 ~ 手機瀏覽器
 * 800px以上 ~ 桌面瀏覽器
 * 480px到800px ~ 平板上的瀏覽器
 */

此外還有orientation方向、device-aspect-radio寬高比、device-pixel-radio像素比等等其它屬性，更多信息請查看前端觀察：media type與media query

4.構造複雜表達式

用and和only能夠構造複雜表達式

(expr1) and (expr2)：與
only (expr)：用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表，更多信息請查看博客園：Media Queries詳解
mediaType1 (), mediaType2 ()：或

5.支持性

[IE9+]支持CSS3標準，但對於非標準的屬性，好比device-pixel-ratio，IE11都只是部分支持，更多支持性差別請查看Can I use

三.使用網絡字體

最安全的字體引入方式：

@font-face {
    font-family : "font";
    src : url("font.eot");
    src : local(" "),   /* 注意引號包裹了一個空格，也能夠是其它單個字符 */
          url("font.woff") format("woff"),
          url("font.ttf") format("truetype"),
          url("font.svg#font") format("svg");
}

還有相似的方式，請查看Fontspring

有好用的@font-face生成器，能夠轉字體格式並生成CSS代碼，請查看Fontsquirrel

四.文字效果

1.立體效果

主要用text-shadow屬性實現，[IE10+]支持，語法以下：

text-shadow : xOffset yOffset blur-radius color;

具體代碼：

.shadow1 {
    text-shadow : 
        0 -2px 3px #fff,
        0 -4px 3px #aaa,
        0 -6px 6px #666,
        0 -8px 9px #000;
}

.shadow2 {
    color : #fff;
    text-shadow : 
        0 2px rgba(0, 0, 0, 0.4),
        0 4px rgba(0, 0, 0, 0.4),
        0 6px rgba(0, 0, 0, 0.4),
        0 8px 0 rgba(0, 0, 0, 0.4);
}

.shadow3 {
    background-color : #565656;
    color : #333;
    text-shadow : 0 1px 0 #777, 0 -1px 0 #000;
}

示例：

shadow1：黯羽輕揚 shadow2：黯羽輕揚 shadow3：黯羽輕揚

P.S.超大號的字體立體效果比較好，小字陰影效果看不清

2.控制文字溢出

text-overflow : clip/ellipsis ~ 截斷/省略號（...），例如：

p {
    /* 要想在一行顯示省略號，下面3個屬性缺一不可 */
    text-overflow : ellipsis;
    white-space : nowrap;
    overflow : hidden;
}

支持性：[IE8+]支持

3.控制長單詞自動換行

word-wrap : normal/break-word ~ 不換行，會頂破容器/自動換行

支持性：[IE6+]都支持，固然，只對英文單詞有效，中文無效

五.邊框樣式

border-radius：[IE9+]支持
border-image：效果很誘人，[IE11+]支持，雖然能夠用JQ插件勉強支持，但效果也很勉強，更多信息請查看張鑫旭博客：CSS3 border-image詳解、應用及jQuery插件
box-shadow：[IE9+]支持，具體用法請查看W3School：CSS3 box-shadow 屬性