使用CSS
使用CSS
color：blue
Selector
{
property:value；
property2:value2
}
.leftColumn
{
height:28px;
text-align:center;
width:30%;
background-color:burlywood;
}
//创建内联样式
<p style="font-weight:bold; font-style:italic;color:#FF0000">
//创建内部CSS样式
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML 4.0 CSS Element Style Example</titel>
<style type="text/css">
h1{text-align:center;color:blue;}
</style>
</head>
<body>
<h1>This text is centered and blue</h1>
</body>
</html>
//创建外部级联样式表
<link href="~/Styles/Site.csss" rel="stylesheet" type="text/css"/>
//添加页面元素
<div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="Selector">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sedenim lorem, fringilla eget, nonummy sed,llamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sedenim lorem, fringilla eget, nonummy sed,llamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p>
</div>
视图：应用样式 管理样式
应用样式 -新建样式 -选择器(可列出当前选定内容使用的样式)
视图菜单，应用样式 --应用多个现有样式规则，每次单击要应用的样式时按住CTRL键
--按顺序分类，按类型分类
新建样式对话框
状态栏位于“设计”视图窗口的底部
1>在设计视图中应用样式
在设计视图中，单击标题区部分中的标题文本 AdventureWorks Styling Page
选中部分以蓝色框包围并有一个标签指示h1元素已选中 h1.cssdemo
在样式应用工具栏的目标规则列表中,单击应用新样式
2>设置标题区文本的格式
选择器 列表中单击 h1
定义范围 列表设置为 当前页面。
字体系列 列表中，选择 Impact
字号
框中，输入或选择 xx-large
字体变体
框中，输入或选择 小型大写字母
将指针放在显示为 Making CSS Styling Easier in Design View 的标题中，该标题是 h2 元素
打开
新建样式 对话框
选择器 值设置为 h2
字体系列 设置为 comic Sans MS
字号 设置为 small
3>选择页面元素(Esc-选中)
使用 Esc 键上移元素的层次结构
若要选择整个 div 元素，单击 h1 元素
第一次按 Esc 键时，会突出显示 h1 元素，并显示该元素的填充和边距
再次按 Esc 键时，则会选中整个 div 元素。选中该元素后，标记显示“div#banner”
4>调整标题区的大小 -拖动右下角的大小调整句柄
选定 h1 文本-按两次 Esc 键(选择包含它的元素/名为 banner 的 div 元素)
调整该元素的大小宽度780像素 高度125像素
格式 - 边框和底纹-- 底纹-- 背景色
选择 form 元素-表单宽度为 780像素
/**模板页和自己的标题不一样
加类
<h1 class="cssdemo">AdventureWorks Styling Page</h1>
<style type="text/css">
h2
{
font-family: "comic Sans MS";
font-size: small;
font-variant: normal;
}
h1.cssdemo
{
font-family: Impact;
font-size: xx-large;
font-variant: normal;
text-transform: uppercase;
height: 31px;
width: 673px;
}
</style>
**/
5>定位标题区中的标题元素
选择标题区 h1 元素
格式-段落-对齐-居中
选择 h2 元素，然后重复上述步骤
h2 选择2个实例
选择器 h2.cssdemo
6>定位标题区中的搜索 div 元素
选择搜索 div 元素（div#search）格式--绝对 拖动搜索 div 元素定位到希望的位置
7>创建灵活的三列布局
调整左右侧栏 div 元素拖动左侧栏 div 元素(div.column#leftsidebar)右边缘宽度大约为 200 像素
格式-位置-左
选择右侧栏 div 元素宽度大约为 290 像素 格式-位置
-右
8>设置居中列的样式
选择 div 元素
-按住 Ctrl 键的同时-拖动 div 元素的右边距-设置为 290 像素-左边距拖至 210 像素
#leftsidebar
{
float:left;
width:190px;
}
#rightsidebar
{
float:right;
width:290px;
}
#maincontent
{
margin-right:290px;
margin-left:200px;
}
选择主要内容 div 元素 格式-边框和底纹
-自定义
-单色-预览下-单击左右边框按钮
-宽度:1px
-填充下的左和右框中:10px
9>调整页脚
选择页脚 div 元素-格式-新建样式
-选择器- #footer在类别列表中-布局
-清除-两者both
应用样式-新建样式-footer 布局：cler-both
10>创建和使用样式表
直接在页中操作元素并将设置保存在 style 元素（在页的 head 元素中）中，以创建样式定义
样式设置仅应用于当前页
使用 CSS 的一个有效方法是将样式规则放入样式表中
所有页面都可以引用这些样式
创建样式表的技术与创建新页面相同
11>创建一个样式表
解决方案资源管理器，添加新项，样式表 Layout.css
编辑器将打开，其中显示一个包含空 body 样式规则的新样式表
管理样式窗口，附加样式表，添加 Layout.css 文件
移动：Site.Master
h2.cssdemo
h1.cssdemo
#search
#leftsidebar
#rightsidebar
#maincontent
#footer
#searchbox
<link href="Styles/Layout.css" rel="stylesheet" type="text/css"/>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
使用管理样式窗口为页分配样式表
也可以将文件从解决方案资源管理器拖动到源视图中页的 head 元素
或将文件从解决方案资源管理器拖放到设计视图中页上的任何位置
12>将样式规则从页面移到样式表
管理样式-当前页面-所有样式（可以使用 Shift+单击选择它们）
-拖到管理样式窗口的Layout.css选项卡中
样式规则从页中移除，并移到了 Layout.css
-
在源视图中查看，切换到Layout.css 页
-使用管理样式窗口更改样式表中样式的顺序
<style type="text/css">
h2.cssdemo
{
background-color:Blue;
font-family: "comic Sans MS";
font-size: small;
font-variant: normal;
}
h1.cssdemo
{
font-family: Impact;
font-size: xx-large;
font-variant: normal;
text-transform: uppercase;
height: 99px;
width: 673px;
text-align: center;
}
#search
{
top: 193px;
left: 753px;
position: absolute;
height: 24px;
width: 200px;
}
#leftsidebar
{
height: 180px;
width: 180px;
float:left;
position: relative;
}
#rightsidebar
{
width: 180px;
float: right;
}
#maincontent
{
margin-left: 200px;
margin-right: 200px;
border-left-style: solid;
border-right-style: solid;
padding-left: 10px;
padding-right: 10px;
}
#footer
{
clear: both;
}
#searchbox
{
width: 138px;
}
</style>
6:25 2012/3/29
