css3代码怎么应用到html5中

2024-10-27 23:44:35
推荐回答(4个)
回答1:

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



代码如下:




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.







Tangential Information




Lorem ipsum text blah blah blah.


Lorem ipsum text blah blah blah.


Lorem ipsum text blah blah blah.








尽管这有些勉强,但上面这个实例还是可以说明使用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








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

代码如下:

div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我们再来看看基于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代码,所以我们假定在元素下有个
回答2:

这个需要一个顺理成章的过程,首先你得懂html5和css3和JS开发普通页面,然后再优化调整等,才能更好的应用。CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

回答3:

跟用html4一样的呀 写在css样式文件里

回答4:

用link链过去就行,没什么特别的