一个美观、大方、简约的页面和高访问量的网站,是网页设计者的追求。然而,仅通过HTML5实现是非常困难的,HTML仅定义了网页结构,对于文本样式没有过多涉及。这就需要一种技术对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制,这种技术就是CSS3。
1、编辑和浏览CSS
css基本语法:
每一条样式规则由三部分构成:选择符(selector)、属性(properties)和属性值(value),基本格式如下:
selector{property:value}
下面给出一条样式规则,如:
p{color:red;font-size:40px}
2、编写CSS
选中标签内的文字,右击并在弹出的快捷菜单中选择【CSS样式】<【新建】命令,然后根据提示操作。
3、在HTML5中使用CSS3的方法
CSS样式表能很好的控制页面显示,以达到分离网页内容和样式代码。CSS样式表控制HTML5页面达到好的样式效果,其方式通常包括行内样式、内嵌样式、链接样式和导入样式。
行内样式:
即直接在HTML标记中使用style属性,该属性的内容就是CSS的属性和值。例如:
<p style="color:red;font-size:20px">此段落使用行内样式修饰</p>
总结:如果需要每一个标记都设置style属性,后期维护成本高,网页容易过胖,故不推荐使用。
内嵌样式:
即将CSS样式代码添加到<head></head>之前,并且用<style></style>标记进行声明。
其格式如下:
<head>
<style type="text/css">
p{
color:orange;
text-align:center;
}
</style>
</head>
总结:如果一个网站,拥有很多页面,对于不同页面的<p>标记都希望采用同样的风格时,内嵌演示就显得有点麻烦。此方式只适用于特殊页面设置单独的样式风格。
链接样式:
链接样式是CSS中使用频率最高也是最实用的方法。它很好地将“页面内容”和“样式风格代码”分离成两个或多个文件。
链接样式是指在外部定义CSS样式表并形成以.css为拓展名的文件,然后在页面中通过<link>链接标记链接到页面中,而且该链接语句必须放在页面的<head>标记区,如下:
<link rel="stylesheet" type="text/css" herf="1.css">
总结:链接样式最大优势就是将CSS代码和HTML代码完全分离,并且同一个CSS文件能够被不同的HTML所链接使用。
导入样式:
导入样式和链接样式基本相同,都是创建一个单独CSS文件,然后再引入到HTML文件中。只不过语法和运作方式有差别。
导入样式是指在内部样式表<style>标记中,使用@improt导入一个外部样式表,例如:
<head>
<style type="text/css">
"1.css"
</style>
</head>
总结:导入方式与链接方式相比较,最大的优点就是可以一次导入多个CSS文件,其格式如下:<style>
@inport "3.6.css"
@inport "test.css"
</style>
4、优先级问题
如果同一个页面,同时采用了上面四种方式,就会出现优先级问题,他们的优先级如下:
行内样式>内嵌样式>链接样式>导入样式