第四章CSS3使用

2017-03-25

HTML5和CSS3学习笔记

CSS特性：

特性	用法
nth-of-type	[p:nth-of-type(2n+1){color: red;}]
first-child	[p:first-child{color:blue;}]
nth-child	[p:nth-child(2n+1){color:red}]
last-child	[p:last-child{color:blue;}]
nth-last-child	[p:nth-last-child(2n+1){color:red}]
first-of-type	[p:first-of-type{color:blue}]
last-of-type	[p:last-of-type{color:blue}]
after	与content一起使用，在指定元素后加内容
对列的支持	将内容区域分成多列
媒体查询	基于设备设置应用样式

多列布局

\#content{
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-gap: 20px;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-rule: 1px solid #ddccb5;
    -moz-column-rule: 1px solid #ddccb5;
    -webkit-column-rule: 1px solid #ddccb5;
}

媒体查询

CSS3的媒体查询允许开发人员根据方可的屏幕尺寸大小来调整整个页面的渲染效果，媒体查询可以查询一下内容：
分辨率，方向，设备的宽高，浏览器窗口的宽高如：
在样式表结束添加：

@media only screen and (max-device-width: 480px) {
    body{
        width: 460px;
    }
    section#sidebar, section#posts{
        float: none;
        width: 100%;
    }
}

也可以在关联样式表时，使用媒体查询，然后将移动设备的样式表放入单独的文件中

1	<link rel = "stylesheet" type = "text/css" href = "CSS/monile.css" media = "only screen and (max-device-width: 480px)">

实例：
1.优化的付款清单