CSS样式表
内嵌css的方式:在html标记中添加属性“style”,设置相关属性值。如:“<p style=“font-size:12px”>带你走进科技大世界。</p>”就是给“带你走进科技大世界。”这段文字设置的字体大小为12px。
内嵌CSS样式
外链css方式:建一个css文件,样式集中写在该文件中,在所需页面调用就行了。方法是在“<head>”标记中添加“<link rel=”stylesheet” type=”text/css” href=”xxx/cssName.css” >”,其中“xxx”为路径,“cssName.css”为文件名。外链设置好后,在标记中通过“class”或“id”进行调用,如“<p class=“toptxt”>”或”<p id=”toptxt”>”,这时候样式表中被命名为“toptxt”的样式就应用到这个“<p>”标记中了。样式表中“class”和“id”的写法不一样,“class”前面加“.”,“id”前加“#”。
调用CSS文件
下面来说说使用“class”和“id”的区别,二者之间最大的区别是“class”名称在同一个页面中可以重复使用,而“id”名称是独一无二的。“class”本身就是用来调用样式的,一个页面中有同一个样式效果很正常,用“class”方便省事也更合理。“id”相当于人名,不允许重复出现。因为“id”不仅可用于样式,在写JavaScript时通常也要用“id”指定块。
@ CSS有哪几种方式控制网页页面?
有4种方式,行内方式、内嵌方式、链接方式、导入方式
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设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
@ 不同引入方式的优势与劣势有哪些?
常用的三种:1、页面中引入样式表文件,在单独的样式表css文件中编写样式代码,引入方式如下:然后在style.css文件中编写样式。这种最常用,优点是方便管理,样式统一,代码精简,用于全站统一样式。2、在Html头部(head)中用包起来,在这里面编写样式代码,如下:这种一般用于单页面或单独的专题页面,如果用于全站,增加页面代码,浪费流量,也不利于改版。3、在标签里面直接编写行内样式,这种是最不常用的:
这类最少用,会使页面结构混乱,代码臃肿,后期维护成本增加。
@ css中选择器是什么意思?
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
每一条css样式定义由两部分组成,形式如下:[code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。