当前位置: 首页 > 互联网 > 正文

《HTML5揭秘》笔记三(CSS3)

使用CSS3有几个选择:用能用的,将CSS功能作为增强(如border-radius属性),用Modernizr,还有就是选择特定于浏览器样式(带浏览器前缀的样式)。-moz-对应Firefox;-webkit-对应Chrome和Safari;-ms-对应Internet Explorer;-o对应Opera。

自定义字体

用@font-face加载一个Web字体,或是自定义字体。@font-face语法中,font-family表示字体名称,src:url()引入字体的文件位置,src:local()本地字体名称,如果本地没有,再链接到其它可替换的字体格式地址,后面的src:开头的定义会覆盖之前的定义,除非浏览器无法识别后面的字体格式或定义。定义之后,那种这个font-family对应的名称就可被其它样式的font-family所引用。因而@font-face的定义要放在引用它的样式之前。

[code lang=”css”]
@font-face {
font-family: ‘Pacifico’;
src: url(‘Pacifico.ttf’);
src: local(‘Pacifico),
url(‘Pacifico.woff’) format(‘woff’),
url(‘Pacifico.svg’) format(‘svg’);
}
[/code]

使用google的web字体。把谷歌字体的样式链接添加到网页中,如下列字体Metrophobic引入后就可以在样式表中使用了:

[code lang=”html”]
<link rel="stylesheet" href="http://fonts.gooleapis.com/css?family=Metrophobic" />
[/code]

多栏文本

用column-count来设置想要的栏数,示例代码:

[code lang=”css”]
article{
text-align: justify;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
[/code]

同样的,可以不指定栏数,指定栏的宽度,这样随着浏览器的缩放,栏位数会自动增加与减少,有自适应的效果。注,em单位是与当前字体大小相匹配的,如果用户调大字体,刚栏宽也会按比例增加。具体来说,1em等于两倍的字体大小,因此对于12像素的字体,1em就是24像素。当然可以设置栏间间距(column-gap)及分隔线(column-rule)。同样的,这两个样式对有的浏览器仍需要指定浏览器样式,带前缀。示例代码:

[code lang=”css”]
article{
text-align: justify;
-moz-column-width: 10em;
-webkit-column-width: 10em;
column-width: 10em;
}
[/code]

适用不同的设备

CSS3新功能:媒体查询,就是能根据不同的设备和浏览设置选择不同的样式表。语法如下:

[code lang=”css”]
@media(media-query-property-name: value){
/*这里是新样式*/
}
[/code]

比如当浏览器的宽度小于480px时,下列article与aside的样式定义方法如下,需要注意的时,这个查询定义需在默认定义之后,否则,就会被默认定义覆盖:

[code lang=”css”]
@media(max-width: 480px){
article{
float:none;
width:auto;
}
aside{
position:static;
float:none;
background:pink;
margin-left:5px;
}
}
[/code]

有时候,我们需要让样式更加有针对性,因此就要使用多个条件,而因为样式的覆盖可能会用到多组条件,比如:

[code lang=”css”]
@media(max-width: 600px) and (max-width: 700px){
/*窗口宽度介于600像素至700像素之间时,覆盖相应的样式*/
}

@media(max-width: 400px) and (max-width: 599.99px){
/*窗口宽度介于400像素至600像素之间时,覆盖相应的样式*/
}

@media(max-width: 399.99px){
/*窗口宽度小于400像素时,覆盖相应的样式*/
}
[/code]

感觉小数点比较笨的话,可以使用not的关键字,比如:

[code lang=”css”]
@media(not max-width: 600px) and (max-width: 700px){
/*窗口宽度介于600像素至700像素之间时,覆盖相应的样式*/
}

@media(not max-width: 400px) and (max-width: 600px){
/*窗口宽度介于400像素至600像素之间时,覆盖相应的样式*/
}

@media(max-width: 400px){
/*窗口宽度小于400像素时,覆盖相应的样式*/
}
[/code]

像上面的情况,每到特定的媒体定义,都会考虑覆盖一次样式,因为每条@media规则都会以常规的非媒体查询的规则为基础。因为我们可以考虑将媒体查询与外部样式表结合起来,替换整个样式表:

[code lang=”html”]
<head>
<link rel="stylesheet" media="(min-width: 480.01px)" href="standard_styles.css" />
<link rel="stylesheet" media="(max-width: 480px)" href="small_styles.css" />
<!–[if lt IE 9]>
<link rel="stylesheet" href="standard_styles.css" />
<!–[endif]–>
</head>
[/code]

通过max-device-width来区别普通计算机与移动设备。

[code lang=”html”]
<head>
<link rel="stylesheet" media="(max-device-width: 480px)" href="mobile_styles.css" />
</head>
[/code]

现在很多手机的分辨率已经大于480像素,但浏览告诉你的最大宽度值仍是480像素。它们的真实像素与报告像素之前有个比率,叫做像素比。对于iphone4来说,每个CSS像素等于两个物理像素,因此像素比是2。所以,iphone4的媒体查询你可以这样写:

[code lang=”html”]
<head>
<link rel="stylesheet" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="iphone4.css" />
</head>
[/code]

ipad则比较复杂,因为可以旋转它,水平或坚直浏览。会改变其max-width值,但max-device-width值不会变都是768像素。还好有一个orientation属性,组合使用max-device-width和orientation来切换样式表。所以,iPad的媒体查询你可以这样写:

[code lang=”html”]
<head>
<link rel="stylesheet" media="(max-device-width: 768px) and (orientation: portrait)" href="iPad_portrait.css" />
<link rel="stylesheet" media="(max-device-width: 768px) and (orientation: landscape)" href="iPad_landscape.css" />
</head>
[/code]

多变的盒子

透明盒子:rgba()函数增加半透明背景,或使用opacity属性。如下示例中,要区分opacity是整个元素(包含内部的文字,背景,图片等)的半透明化,而rgba只是背景的半透明化,。

[code lang=”css”]
.semitransparentBox {
background: rgb(170,240,0);
background: rgba(170,240,0,0.5);
/* 或增加 opacity 属性 */
}
[/code]

圆角盒子:border-radius属性:四个值分别对应四个角。还可以(用border-top-left-radius这样的属性)单独设置每一个角的圆弧。

[code lang=”css”]
.roundBox{
background: blue;
border-radius: 25px 50px 25px 85px;
}
[/code]
[code lang=”css”]
.roundBox{
background: blue;
border-top-left-radius: 25px 50px
border-top-right-radius: 125px 50px
}
[/code]

背景盒子:一个元素上应用一个或多个背景图片:

[code lang=”css”]
.decorateBox{
margin:50px;
padding:20px;
background-image:url(‘top-left.png’), url(‘bottom-right.png’);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}
[/code]

阴影盒子:盒子box-shadow属性与文本阴影text-shadow属性。

[code lang=”css”]
.decorateBox{
box-shadow: 2px 2px 2px gray;
text-shadow: 2px 2px 2px gray;
}
[/code]

渐变盒子:线性渐变linear-gradient属性,放射性渐变radial-gradient属性,示例代码分别如下:

[code lang=”css”]
.colorBlendBox{
background: -moz-linear-gradient(top, white, blue, yellow);
background: -ms-linear-gradient(top, red 0%, orange 20%, blue 80%, yellow 100%);
background: linear-gradient(top, white, blue, yellow);
}
[/code]
[code lang=”css”]
.colorBlendBox{
background: -moz-radial-gradient(circle, white, lightblue);
background: -ms-radial-gradient(circle, red 0%, orange 20%, blue 80%, yellow 100%);
background: radial-gradient(circle, white, lightblue);
}
[/code]

创建过渡效果

基本的颜色过度:transition属性,指定某个属性的变化过渡,及过渡的时间:

[code lang=”css”]
img {
position: absolute;
-webkit-transition: opacity 10s;
transition: opacity 10s;
}
[/code]

变换:transform属性,下列代码表示将鼠标放到图片上,图片会放大,并旋转10度。

[code lang=”css”]
.gallery img {
margin: 5px;
padding: 5px;
width: 75px;
border: solid 1px black;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
background: white;
}

.gallery img:hover {
-webkit-transform: scale(2.2) rotate(10deg);
transform: scale(2.2) rotate(10deg);
}
[/code]

小结

主要有4点:自定Web字体@font-face定义;多栏文本column-count属性;媒体查询及样式指定@media写法及link引用写法;盒子的变化:透明,圆角,阴影及盒子渐变效果;过渡效果:颜色过渡,形状变换效果。不得不感叹CSS3带来的新的功能与活力,这些也是我之前所不太理解的知识。

本文固定链接: http://www.byhard.com/?p=1348 | 海纳百川

该日志由 byhard 于2015年04月15日发表在 互联网 分类下,
原创文章转载请注明: 《HTML5揭秘》笔记三(CSS3) | 海纳百川
关键字: ,

《HTML5揭秘》笔记三(CSS3):目前有2 条留言

  1. 沙发
    脑精:

    感觉好牛的样子,我都不好意思说我是真正的中国人了

    2015-04-15 18:21
    • byhard:

      这个还真没关系。呵呵,谢谢支持啦。

      2015-04-16 08:54