一般分为三种方式:内联式样式表
--应用内联样式嵌入到各个网页元素
主要是应用到标签<P><table><h>里面如图。
<html>
<head>
</head>
<body>
<p style="color:red">
</p>
</body>
</html>
嵌入式样式表
--在网页上创建嵌入样式表
特点:
一般css语句写在html文档中,一般写在head标记中。
仅对一个html进行设置,代码是html的一部分,没有使用浏览器的缓存机制。
style一般与div一同使用。
第一个例子
<html>
<head>
<style type="text/css">
body
{
background-color:#ff00ff
background-image:url(images/2.gif);
}
#top
{
width:100%;
height:100%;
background-color:#00ff00
}
#right
{
width:100%;
height:100%;
background-color:#00ff00
float:left;
}
</head>
</style>
<body>
<div id="top"><img src="images/2.gif width=100px height=50px"></div>
<div id ="right"></div>
</body>
</html>
第二个例子
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>
外联式样式表
--将连接到外部样式表
<link>一般写到head标记里面。
base1.html
<html>
<head>
<link href=" base.css" rel ="stylelsheet" type="text/css"/>
</head>
<body>
<h1>we are here</h1>
<table>
<tr class="to">
you
</tr>
</table>
<p class="po">
me
</p>
<p>
they
</p>
</body>
<html>
base.css
h1{
color:red;
margin left:20px;
font-size:2;
}
tr.to
{
color:red;
margin left:20px;
font-size:2;
}
p.po
{
color:blue;
margin left:20px;
font-size:2;
}
下面来了解一下css所涉及到的标签使用
<style>样式定义
<link>资源引用
<div>定义一个块区域
<span>行内的小块区域
1.当应用到多个网页时建议使用外联式样式表
2.选择器
普通选择器
主要是任意html标记
p{color:red }
类选择器
p.po
{
color:blue
}
注:如果只写.类名那么该类名适用于html任何标签的class属性
id选择器
#top
{
width:100%;
height:100%;
}
扩展小知识:
<在html使用<;
>在html使用>;
空格在html中使用 ;
版权在html中使用©;
在css注释中使用的注释为/* */
一个无序列表
<ul type="circle">
<li>一个</li>
<li>两个个</li>
<li>三个</li>
</ul>
一个有序列表
<ol >
<li>一个</li>
<li>两个个</li>
<li>三个</li>
</ul>
常见样式属性
文本:
font-size文本大小
font-family:文本字体
color:颜色
text-align:文本对齐
边框:
boder-style:边框样式
boder-width:边框宽度
boder-color:边框颜色
定位属性
top:
left:
width:
height: