(1)布局——一行两列:使用width宽度+float浮动即可实现一行显示两列DIV布局。
第一种情况,float浮动相同
让两个div盒子的float值相同,比如都设置float:left或float:right,宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。
.div-a{ float:left;width:49%;border:1px solid #F00}
.div-b{ float:left;width:49%;border:1px solid #000}
第二种情况,float浮动值不同
一个设置为float:left;一个设置为float:right.。
.div-c{ float:left;width:49%;border:1px solid #F00}
.div-d{ float:right;width:49%;border:1px solid #000}
(2)CSS定位: CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
边框
您能够创建圆角边框border-radius 例:border-radius:25px;
向矩形添加阴影box-shadow 例:box-shadow: 10px 20px 20px #888888;
(偏右,偏下,散度,颜色)
使用图片来绘制边框 border-image 例:
border-image:url(/i/border.png) 30 10 round;
背景
background-size: 属性规定背景图片的尺寸 例:
background-size:63px 100px; background-size:45% 10%;()
background-origin:background-origin属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box或 border-box区域。例:background-origin:content-box
多重复背景:body
{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}
文本特性
可向文本应用阴影 text-shadow,例:
h1{text-shadow: 5px 5px 5px #FF0000;}
word-wrap 属性允许您允许文本强制文本进行换行 -即使这意味着会对单词进行拆分:
p.test{width:11em; border:1px solid #000000;word-wrap:break-word;}
字体
CSS3,web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时,可将该字体文件存放到web 服务器上,它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在CSS3 @font-face 规则中定义的。
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过font-family 属性来引用字体的名称(myFirstFont):
实例
<style>
@font-face
{font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */}
div
{font-family:myFirstFont;}
</style>
CSS3 转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。(转换是使元素改变形状、尺寸和位置的一种效果。您可以使用2D 或3D 转换来转换您的元素。)
2D 转换
在本章中,您将学到如下 2D 转换方法:
translate()//元素从其当前位置移动,根据给定的 left(x坐标) 和 top(y坐标) 位置参数:
rotate()//元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转 rotate(30deg);
scale()//元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数,例scale(2,4)把宽度转换为原始尺寸的 2倍,把高度转换为原始高度的 4倍。
skew()//元素翻转给定的角度,根据给定的水平线(X轴)和垂直线(Y轴)参数:skew(30deg,20deg)围绕 X轴把元素翻转 30度,围绕 Y轴翻转 20度。
matrix()//matrix() 方法把所有 2D转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
对于以上几个方法,一般不同的内核,前缀不同,例
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
3D转换
rotateX() 方法,元素围绕其 X轴以给定的度数进行旋转。
rotateY() 方法,元素围绕其 Y轴以给定的度数进行旋转。
例:div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
CSS3 过渡
通过 CSS3,我们可以在不使用Flash 动画或JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
<style>
div{width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */}
div:hover
{width:300px;}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的 div元素上,来查看过渡效果。</p>
<p><b>注释:</b>本例在Internet Explorer 中无效。</p>
如果时长未规定,则不会有过渡效果,因为默认值是 0。
CSS3 动画
CSS3 @keyframes 规则
如需在 CSS3 中创建动画,您需要学习@keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes中规定某项 CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
规定动画的名称
规定动画的时长
@keyframes myfirst
{from {background: red;}to {background: yellow;}}
@keyframes myfirst
{0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}}
CSS3 多列布局
column-count//属性规定元素应该被分隔的列数
column-gap // 属性规定列之间的间隔:
column-rule //属性设置列之间的宽度、样式和颜色规则。
CSS3用户界面
Resize //resize 属性规定是否可由用户调整元素尺寸。
box-sizing // 属性允许您以确切的方式定义适应某个区域的具体内容。
outline-offset //属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:轮廓不占用空间,轮廓可能是非矩形