《The Book of CSS3》学习笔记

2023-08-25 18:44:40

一.浏览器前缀

E{

    -moz-name : value;      /* Firefox */

    -ms-name : value;       /* IE */

    -o-name : value;        /* Opera */

    -webkit-name : value;   /* WebKit */

    name : value;           /* 适应未来标准方式 */

}

二.媒体查询

1.使用媒体查询的3种方式

head部分

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

css文件首行

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

样式规则内部

@media mediaType and (expr) {

    /* styles */

}

2.mediaType的取值

只有all（没有意义，不如不加）、screen和print是浏览器厂商广泛支持的，可选值还有：

braille：盲文
embossed：盲文打印
handheld：手持设备，并不好用
projection：投影设备
speech：演讲
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 属性

六.透明度

opacity : 0.0 – 1.0; [IE9+]支持，IE8部分支持
color : rgba(r, g, b, a); [IE9+]支持

七.渐变

线性渐变/放射渐变，[IE10+]支持，具体用法请查看CSS-Tricks

八.变换、过渡、动画

有几个很相似的属性，区别如下：

transform：变换。2D/3D变换、平移、旋转、倾斜、缩放
translate：平移。2D变换的子属性
transition：过渡。由事件触发，如hover、active等等
animation：动画。定义keyframes，再用animation应用动画

用这些东西可以实现常见的酷炫效果，例如：

过渡可以让简单动画平滑进行，比如鼠标悬停时链接文本“飘”向右边，div宽度缓慢增大至指定值等等
3D变换可以显示背面，比如鼠标进入，出现图片翻转效果
变换可以实现绶带效果，比如常见的右上角斜向fork me on githup，具体实现请查看博客园：给你的博客加上“Fork me on Github”彩带

九.flex布局

有一篇非常强大的完整教程：前端开发博客：CSS3弹性盒模型flexbox完整版教程

十.在线资源

Can I Use：[IE8+]以及其它浏览器对CSS/HTML5属性支持性
Modernizr：检测浏览器对HTML5和CSS3特性支持的JS库，优雅降级的不二选择
代码生成工具：
- CSS3Please：自动填充浏览器前缀，还可以在线测试CSS3效果
- CSS Gradient Generator：快速生成渐变
免费字体：Fontsquirrel：大量可以免费下载的英文字体
CSS3教程/文档：CSS3 Info，国外论坛，文章更新得比较慢，好像有点没落了
CSS3新技术：MDN，源码免登录下载

参考资料

《THE BOOK OF CSS3》
前辈博文若干

码农公寓