In W3C
Web Standards Way
Job is Good

在Dreamweaver中使用CSS样式表 part 2

下面 有点高难度, 却是最实用:

   # 代表是 id      . 代表是 class


这个选项有两个功能:

1 对具有一定 关联组合 标签的对象使用指定的样式,例如设置 tocenter p.blue

.tocenter p.blue {
text-align: center;
margin-right: auto;
margin-left: auto;
font-size: 2em;
color: black;
}

<div class="tocenter"><p class="blue">Welcome to Cool Dog site</p></div>

例如 footer区内 的东西都置中对齐, 与上面content区内 靠左对齐不同, 就可以定义to center范围

下面例子 请比较其差异

<style type="text/css">
<!--
.tocenter {
text-align: center;
margin-right: auto;
margin-left: auto;
}
.blue {
color: blue;
}
.tocenter p.blue {
text-align: center;
margin-right: auto;
margin-left: auto;
font-size: 2em;
color: black;
}
#footer {
background-color: #EDEAE4;
position: relative;
width: 100%;
height: 2.2em;
}
#orangle {
color: #FF6600;
font-size: 1em;
margin-top: 1.1em;
margin-bottom: 0.1em;
}
#next {
position: absolute;
top: 0px;
left: 281px;
width: 44px;
font-size: 1em;
}
#previ {
position: absolute;
left: 146px;
top: 0px;
width: 85px;
font-size: 1em;
}
-->
</style>
</head>
<body>
<div class="tocenter"><p class="blue">Welcome to Cool Dog site</p></div>
<p class="blue">Be mercy on us that the friends and servants of human</p>
<br />
<br />
<div id="footer">
<span class="tocenter" id="previ">Previous</span><span class="tocenter" id="next">Next</span>
<p class="tocenter" id="orangle">Copyright : If you dare to steal my stuff , I will bite you</p>
</div><!-- End footer -->
</body>

注意 <p class="tocenter" id="orangle">这种组合是国外常用

多看些例子 比较清楚, 如 右图 灰色注解区

<div class="floatright" id="grayzone"><code class="orange smallem">

.floatright {
float: right;
}
#grayzone {
background-color: #F1F1F1;
width: 250px;
margin-right: 2em;
margin-bottom: 1em;
padding: 0.5em;
margin-left: 0.5em;
}

.orange {
color: #FF6600;
}
.smallem {
font-size: 0.7em;
}



1 在页面空白处 点击鼠标右键

2 汇出 Export CSS Style

汇入方法 如下图步骤 1

步骤 2 点选 连结link比汇入import 有更多浏览器支援support

点选 确定 就会在<head>区看到代码<link href="cooldog.css" rel="stylesheet" type="text/css" />

别忘了 Delete  代码<head>区内   原来的CSS定义<style type="text/css">
<!--  ..........-->