1、行内方式
行内方式是4种样式中最直接最简单的一种,直接对HTML标签适用style=””,例如:
<p></p>
虽然这种方法比较直接,在制作页面的时候需要为很多的标签设置style属性,所以会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。
2、内嵌方式
内嵌方式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
–>
</style>
</head>
<body>
<div id=”div1″><img src=”/images/logo.gif” /></div>
</body>
</html>
运行代码 复制代码 另存代码 <script language=”JavaScript”>ffcod = delpost.runcode7 .value; ffcod = ffcod.replace(/
/g,”); delpost.runcode7 .value = ffcod;</script> 提示:您可以先修改部分代码再运行
内嵌方式,大家应该也能意识到,即使有公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护也大,如果文件很少,CSS代码也不多,这种方式还是很不错的。
3、链接方式
链接方式是使用频率最高,最实用的方式,只需要在<head></head>之间加上
复制代码
代码如下:
<link href=”style.css” type=”text/css” rel=”stylesheet” />
,就可以了,这种方式将HTML文件和CSS文件彻底分成两个
或者多个文件,实现了页面框架HTML代码与美工CSS代码的完全分离,使得前期制作和后期维护都十分方便,并且如果要保持页面风格统一,只需要把这些公共的CSS文件单独保存成一个文件,其他的页
面就可以分别调用自身的CSS文件,如果需要改变网站风格,只需要修改公共CSS文件就OK了,相当的方便,这才是大家xHTML+CSS制作页面提倡的方式。
HTML代码
复制代码
代码如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<link href=”style.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”div1″><img src=”/images/logo.gif” /></div>
</body>
</html>
CSS代码
复制代码
代码如下:
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
4、导入方式
导入样式和链接样式比较相似,采用import方式导入CSS样式表,在HTML初始化时,会被导入到HTML文件中,成为文件的一部分,类似第二种内嵌方式。
具体导入样式和链接样式有什么区别,可以参看这篇文章《CSS:@import与link的具体区别》,不过偶还是建议大家用链接方式!
四种样式的优先级 :
如果这上面的四种方式中的两种用于同一个页面后,就会出现优先级的问题,这里偶就不再举例子来说明了,大家在下面自己证明一下下面的结论
四种样式的优先级别是(从高至低):行内样式、内嵌样式、链接样式、导入样式。
拓展资料
css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
@ 伪类和伪元素的区别在哪?
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。
其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before、:after称为伪类
@ css被固定了的如何设置优先级?
优先级:内联式 > 嵌入式 > 外部式
对于同一个元素大家同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况
1、使用内联式CSS设置“超酷的互联网”文字为粉色。
2、然后使用嵌入式CSS来设置文字为红色。
3、最后又使用外部式设置文字为蓝色(style.css文件中设置)。
@ css3和css一样吗?
CSS3是CSS的子集,CSS3是最新的标准,提供了很多好用的新属性,提升了网页的表现性。
CSS3提供了更好用的选择器
最新的CSS3中,对伪类、伪元素选择器做了严格的规范。有了伪类后,不用在div标签里面添加额外的元素完成一些DOM操作,可以通过::before,::after完成,代码简洁明了。对于鼠标的操作,也可以通过::hover等类似的操作完成。非常高效。还有::first–child等类似的选择器去操作子元素。
CSS3使动画效果越来越方便
css3里面通过animation来完成动画,设置@keyframes即可,一些轻量级的动画不必再通过js完成。
CSS3完成圆角、阴影美化更方便
以前的css完成类似的功能只能通过图片做背景,现在只需要border-radius、boxshadow即可。非常高效简洁。
CSS3提供了全新的盒模型
这个特性十分有用。原来的盒模型width=content.+border+padding。你规定了width.每次都要自己计算,现在有了boder-box不用这么麻烦了。
CSS3的flex布局是最强大的
IE已死,不需要再考虑它的兼容性!!!用flex布局,节省很多时间,节省的时间可以学很多东西,而不是浪费时间去适应落后的ie!!!
还有很多好用的css3特性,这个版本提供了巨大的生产力!!!很感谢它,期待下一个grid布局~
以上是偶的看法~