如何使用css3,如何使用cs扫描全能王

内容导航：

css3代码怎么应用到html5中

前端小技巧CSS雪碧图

如何使用CSS3伪类

CSS3不能在dreaweaver8里面使用么

一、css3代码怎么应用到html5中

先简单介绍下，也许你很熟悉下面的代码:

代码如下:

Div Soup Demonstration

Posted on July 11th, 2009

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

Tangential Information

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决“

-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的

标签，并同时为CSS的调用提供了”自然”的CSS钩子。下面是 HTML5的解决方案实例: 代码如下:

Div Soup Demonstration

Posted on July 11th, 2009

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

Tangential Information

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的

标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有class和id
的。跟class属性说再见，欢迎整洁的标签
结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！
即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性。像以往的DIV布局，我们在css中可能要这样调用:
div#news {}代码如下: {} {} {} {} {} {}我们再来看看基于HTML5的实例: section {}复制代码代码如下:article
{} header {} footer {} aside {}这是个进步，但仍有一些问题需要解决。在

实例中，我们需要通过class或id属性来调用页面中的元素。这种逻辑将允许我们将样式应用到文档中的任何一个元素上，无论是整体还是个体。例如在

实例中，.section 和
.content元素很容易定位。但是在HTML5实例中，实际文档中会有很多个section元素。其实我们可以添加一些特定的属性选择器来调用那些不同的section元素，不过谢天谢地，我没现在可以用少量的高级CSS选择器来定位不同的section元素。不使用class和id定位HTML-5元素
下面让我们来看看如何在不使用class和id的情况下定位HTML5页面元素的一个实例，我们可以使用三种CSS选择器来定位和辨别实例中的元素。如下:
后代选择器:[CSS 2.1]: EF 兄弟选择器:[CSS 2.1]: E + F 子元素选择器:[CSS 2.1]: E > F
下面让我们来看看如何不使用class和id而完成对文档中的那些section元素的定位吧:定位最外层的元素
考虑到我们的例子并不是一套完整的HTML5代码，所以我们假定在元素下有个元素与元素是兄弟元素。这样的话，我们就可以向下面代码那样定位最外层的了:代码如下:body
nav+section {}定位下一个元素作为最外层元素下的唯一直属子集元素，这个元素也许可以这样定位:复制代码代码如下:section>section
{}定位元素可以定位元素的方法有很多，不过最简单的方法当然就是后代选择器了:代码如下:section section article {}定位、
和元素这三个元素分别在两个地方都出现过，一是在元素中出现，另一是在元素中出现。这种差别能让我们轻松定位每个元素。代码如下:article header {}
article section {} article footer {}或者一起定义:代码如下:section section header {}
section section section {} section section footer
{}到目前为止，我们已经使用CSS2.1选择器排除掉了所有的class和id。那么我们为什么还需要使用CSS3
呢？我很高兴你能这么问…使用CSS3对HTML5元素进行高级定位
虽然我们已经使用CSS2.1选择器排除掉了所有的class和id，显然还会有很多更复杂的情况需要CSS3的高级选择器来解决。让我们通过完成一下的实例来了解一下如何在不使用无用的class和id属性的情况下利用CSS3定位页面元素。使用一个唯一的日志
(post)ID定位所有日志
wordpress提供给我们一种包含了ID的每篇日志的源代码输出。这种信息通常用于导航和/或了解资料的意图，不过CSS3可以利用这些唯一的ID来定义这些日志的样式。当然，你还可以像往常那样为每篇日志添加class=”post”这样的属性，但这就与我们练习的意图相冲突了(再加上它没有一点乐趣所在)。使用”子字符串匹配选择器”，我们就可以像下面这样定位所有日志和它们的不同元素了。代码如下:article[id=post-]
{} / 定位所有日志 / article[id=post-] header h1 {} / 定位所有日志中的h1标签 /
article[id=post-] section p {} / 定位所有日志中的p标签
/我们仍然可以使用同样的方式定位评论的元素和它们的子元素。代码如下:article[id=comment-] {} / 定位所有评论 /
article[id=comment-] header h1 {} / 定位所有评论中的h1标签 / article[id=comment-]
section p {} / 定位所有评论中的p标签 /定位一些指定的区域(section)或文章(article)
有很多博客的日志量和评论量都相当大，HTML 5 会将它们由或元素组成。为了定位哪些指定的 或元素，我们就要转而使用强大的“:nth-
child”选择器了:代码如下:section:nth-child(1) {} / 选择第一个 / article:nth-child(1) {}
/ 选择第一个 / section:nth-child(2) {} / 选择第二个 / article:nth-child(2) {} /
选择第二个 /同样，我们可以使用“:nth-last-child”选择器定位反序的一些元素。代码如下:section:nth-last-child(1)
{} / 选择最后一个 / article:nth-last-child(1) {} / 选择最后一个 /

section:nth-last-child(2) {} / 选择倒数第二个 / article:nth-last-child(2) {} /
选择倒数第二个 /使用更多的方式选择指定元素 另一种选择HTML5中指定元素(如
header、section和footer)的方法就是利用”:only-of-
type”选择器的优势。由于这些HTML5元素通常会在很多地方出现不止一次，所以当我们想定位那种在父元素下仅出现过一次的标签时这种方法很方便。例如，我们要选择的是在某元素中有切仅有的唯一一个元素，如以下代码:代码如下:
定位这个section元素 定位这个section元素 但不定位这个section元素 和这个section元素
我们可以仅使用以下一行选择器:代码如下:section>section:only-of-type
{}再次唠叨，你可以固执的为每个元素添加ID属性，但你会失去代码的可扩展性、维护性和绝对简洁的结构与表现相分离。
CSS3的确能让我们可快速更方便的定位几乎所有没有ID和class属性的页面元素。

二、前端小技巧CSS雪碧图

周一、雾霾、寒冷、堵车、噪声，你悲伤也没用，还好我又准时的来跟你叨逼叨了。

有人的地方就有江湖，有问题的地方就有人解决问题，所以有问题的地方就有江湖，在前端的江湖里面，以前一直有这样一类问题，且听分解。

当在浏览器里输入一个URL地址的时候，你会感觉无数张图片“唰唰唰”的闪出来了。
在这个过程中，浏览器会把这个网站的主资源（就是Html文件）拉取回来，然后开始分析网页中的Js，Img之类的标签，然后再去拉取这些图片和资源，这些后拉取的资源称为「子资源」。

「主资源」和「子资源」只是我们人类对资源定义的不同方式，其实对于浏览器来说，他们的请求方式都是发起一个Http请求，经历三次握手，并把文件拉取回来，一般的浏览器内核只能同时并发4，5个网络请求，所以大量的小图片特别影响性能，不但网页加载完成时间慢，还可能影响一些重要的JS逻辑，使得网页响应也变慢，卡死等等。
对于浏览器来说，发起一个Http请求，来回几百毫秒的耗时，已经是相当高的资源耗费，只是人类不曾感受到，其实浏览器已经无数次喊叫：“太NMD慢了，哪个SB写的代码……”。

例如上图，一个网页的一小块区域，就三张小图标，浏览器要辛辛苦苦三次才能把这些小图标取回来，如果是50张呢，显然不可接受。
面对这样的情况就只能束手就擒吗？显然优化的关键途径就是减少网络请求次数，并且还得把图片都下发下来，并能够灵活使用，那就把所有小图标拼成一张大图吧，如下图。

当前，用一次网络请求就可以下载下来三张图片了，而且文件的大小也较三张图片小一些（因为很多文件的格式信息和头信息已经共用了），大大降低了网络请求和带宽的消耗。
然后呢，如何在Html或CSS中引用这些图片呢？

这就不得不提到一个CSS属性叫做background-
position，利用Ta，可以指定图片的位置，也就能把这张图片作为一个背景放在某个位置了，我们来看两句CSS代码。

利用这个属性，来标识图片相对于容器的位置（图中的坐标分别标识X，Y两个方向的偏移，这些都是示意的值哦，不是真实的值），最后再把这个类选择器应用到相应的容器就好了。

这种技术就称为CSS
Sprite，中文翻译为雪碧图，Ta主要解决的是小图片过多以及耗费网络资源的问题，核心原理就是将图片合并成一张大图下发到客户程序，并利用属性来对其进行定位和切割的技术。

其实在游戏当中，很多也是利用了类似的思想，比如一个小人走路的时候，一共由8张图片组成，那么一般这8张图片会合并为一张大图，每一帧都循环播放这张大图中的不同坐标下的小图片来构建小人的行走动作。

其实在追求高性能的app中，很多也是利用了类似的思想，比如对性能极致要求的话，一个Titlebar上有5个icon，那5个icon是可以合并为一张大图的，这样只会有一次IO，减少了IO次数，会对效率提升比较大，分割图片都是内存操作，会非常迅速。

虽然叫雪碧图，但记得和我们喝的雪碧完全没关系哦！

三、如何使用CSS3伪类

你说的是css3伪类选择器吗?

E:link CSS1 设置超链接a在未被访问前的样式。

E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式。

E:hover CSS1/2 设置元素在其鼠标悬停时的样式。

E:active CSS1/2 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

E:focus CSS1/2 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。

E:lang(fr) CSS2 匹配使用特殊语言的E元素。

E:not(s) CSS3 匹配不含有s选择符的元素E。

E:root CSS3 匹配E元素在文档的根元素。

E:first-child CSS2 匹配父元素的第一个子元素E。

E:last-child CSS3 匹配父元素的最后一个子元素E。

E:only-child CSS3 匹配父元素仅有的一个子元素E。

E:nth-child(n) CSS3 匹配父元素的第n个子元素E。

E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

E:first-of-type CSS3 匹配同类型中的第一个同级兄弟元素E。

E:last-of-type CSS3 匹配同类型中的最后一个同级兄弟元素E。

E:only-of-type CSS3 匹配同类型中的唯一的一个同级兄弟元素E。

E:nth-of-type(n) CSS3 匹配同类型中的第n个同级兄弟元素E。

E:nth-last-of-type(n) CSS3 匹配同类型中的倒数第n个同级兄弟元素E。

E:empty CSS3 匹配没有任何子元素（包括text节点）的元素E。

E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled CSS3 匹配用户界面上处于可用状态的元素E。

E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。

E:target CSS3 匹配相关URL指向的E元素。

@page:first CSS2 设置页面容器第一页使用的样式。仅用于@page规则

@page:left CSS2 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则

@page:right CSS2 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

四、CSS3不能在dreaweaver8里面使用么

答：目前主流浏览器对于CSS3支持情况的依次是：Chrome、safari、firefox、opera＆IE9，firefox甚至连CSS3的选择器都不是全部支持的，而其他的都支持。除了Chrome＆safari以外，其他的对于倒影/翻转等样式的支持都是很有限的，opera甚至不支持背景颜色的渐变和transform动画(太土了)。IE6＼7＼8就不要奢求太多了，即使部分支持CSS3的IE8，支持程度尚不足1/10.CSS3在不支持的浏览器上面就相当于随便写的一组样式表定义：div{haha:huhu;}，对页面样式不会产生作用的。不支持就是不支持没有什么怎么办的，对于CSS3中的圆角、倒影、倾斜(旋转)等定义在不支持的浏览器上面通常直接使用背景图片代替。动画等效果就只能用javascript来实现了。