您的位置：首页 > Web前端 > CSS

【读书笔记】CSS3学习（一）

2016-03-11 18:19 429 查看
本文转自：

https://github.com/waylau/css3-tutorial/blob/master/SUMMARY.md

CSS介绍

CSS是层叠样式表（cascading style sheet）的缩写，用于争抢控制页样式并允许将样式信息和网页内容分离的一种标记性语言。

语法：

selector{property:value;}
//selector:选择器，表明花括号中的属性设置将应用于哪些HTML元素中；
//property:属性，例如用于设置背景色的属性background-color等。
//value:属性值。


一、引入方式：

三种方式将样式表加入您的网页：

1）内联方式：inline styles

内联定义即在对象的标记内使用对象的style属性定义适用其的样式表属性。

<p style="color:#f00">这一行的字体颜色将显示为红色</p>


2）内部样式块对象embedding a style block

可以在HTML文档的< head>标记里插入一个< style>块对象。

<style>
.div{
color:#c3c3c3;
}
</style>


3）外部样式表linking to a style sheet

可以先建立外部样式文件*.css，然后用HTML的link对象。或者使用@import来引入。

使用link:(推荐使用)
<link rel="stylesheet" type="text/css" href="style.css">

使用@import来引入
<style>
@import url("style.css");
</style>


二、选择器权重

第一等，内联样式，如style=“ ”，权重为1000；

第二等，代表ID选择器，如#content,权值为100；

第三等，代表类，伪类和属性选择器，如.content,权值为10；

第四等，代表类型选择器和伪元素选择器，如div p,权值为1。

优先级：

选择器都有一个权值，权值越大越优先。

当权值相等时，后出现的样式表设置要优先于先出现的样式表设置；

创作者的规则高于浏览者，即网页编写者设置的CSS样式优先权高于浏览器所设置的样式；

在同一组属性设置中标有！important规则的优先级最高。

CSS中！importan的讲解详见：

http://blog.csdn.net/hlinghling/article/details/50817787

[b]******************************[/b]华丽分隔线[b]*****************************[/b]

先看这么多了，下面再讲CSS3的模块。

选择器，框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面。

1.动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes规则：

@keyframes规则是用来创建动画，@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

但是在使用@keyframes规则创建动画时，需要把它捆绑到某个选择器上，否则不会产生动画效果。

通过规定至少以下两项CSS3动态属性，即可将动画绑定到选择器：

规定动画的名称

规定动画的时长

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}


CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数，请用百分比来规定变化的时间，（或者使用关键词from和to，等同于0%（动画开始）和100%（动画完成）的选择器）

常用属性：

TablesAreCool
@keyframes规定动画3
animation所有动画属性的简写属性，除了 animation-play-state 属性3
animation-name规定 @keyframes 动画的名称3
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是 03
animation-timing-function规定动画的速度曲线，默认是 “ease”3
animation-delay规定动画何时开始，默认是 03
animation-iteration-count规定动画被播放的次数，默认是 13
animation-direction规定动画是否在下一周期逆向地播放，默认是 “normal”3
animation-play-state规定动画是否正在运行或暂停，默认是 “running”3

2.边框

css border（边框）主要有以下属性：

1）border-radius(圆角边框)

CSS3圆角只需设置一个属性：border-radius（含义是”边框半径”），为这个属性提供一个值，同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

ps: border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

.box_round {
　　-moz-border-radius: 30px; /* FF1+ */
　　-webkit-border-radius: 30px; /* Saf3+, Chrome */
　　border-radius: 30px; /* Opera 10.5, IE 9 */
}


2）box-shadow（边框阴影）

在CSS3中，box-shadow用于向方框添加阴影：

div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}


3）border-image（边框图片）

通过CSS3的border-image属性，可以使用图片来创建边框：

<!DOCTYPE html>
<html>
<head>
<style>
div{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round{
-moz-border-image:url(/i/border.png) 30 30 round;   /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;     /* Opera */
border-image:url(/i/border.png) 30 30 round;
}

#stretch{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;  /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;   /* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里，图片铺满整个边框。</div><br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img src="/i/border.png">
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航