1. CSS定义
级联样式表(Cascading Style Sheet)简称”CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页样式设计的。通过设立样式表,可以统一地控制HMTL中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
2. CSS如何使用
当读到CSS时,浏览器会根据它来格式化HTML文档,插入CSS的方法有三种:
2.1 外部样式表当样式需要多页面重复利用时,要用外部样式表实现。这样可以通过改变一个文件来改变整个站点的外观。
具体用法:
创建后缀为css的文件(这里我创建的文件为StyleSheet1.css),在css文件中编写css代码,保存。
最后在每个要用到此样式文件的页面中使用<link>标签链接到样式文件中的样式表。<link>标签应写在<head>标签内。实现代码如下:
<head>
<link href="http://www.cnblogs.com/style/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
2.2 内部样式表
当单个页面需要特殊的样式时,使用内部样式表。
具体用法:
在 <style> 标签内写内部样式表,<style>标签要写在<head>标签内部。示例代码如下:
}
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
}
#header
{
96%;
height: 40px;
background: #efdfed;
font-weight: bold;
font-size: 16px;
padding: 15px 0 0 50px;
margin: 0px 2px;
color: Red;
}
#nav
{
96%;
height: 30px;
background: #efdfed;
font-weight: bold;
font-size: 16px;
padding: 12px 0 0 50px;
margin: 5px 2px;
color: Red;
}
#content
{
96%;
height: 42%;
background: #efdfed;
font-size: 16px;
font-weight: bold;
padding: 17% 0 0 50px;
margin: 5px 2px;
color: Red;
}
#footer
{
96%;
height: 30px;
background: #efdfed;
font-weight: bold;
font-size: 16px;
padding: 15px 0 0 50px;
margin: 5px 2px;
color: Red;
}
</style>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
2.3 内联样式
内联样式将表现和内容混杂在一起,这样会损失掉样式表的许多优势,所以一般当样式仅需要在一个元素上应用一次时采用这种方法。
具体用法:
在标签内使用style属性。示例如下:
<div id="header" style="background: yellow; height: 100px; margin: 5px; line-height: 100px;padding: 5px; float: left;">
header</div>