【第一阶段】
【学习目标】
- 掌握css的作用与基本使用
- 了解常用属性
- 掌握css选择器。
css介绍
1. css是什么
CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
2. css作用
- 样式表解决了html的内容与表现分离
- 使用样式表极大的提高了工作效率。
3. css书写规则
基本语法
Css规则主要由两部分组成 1.选择器2.一条或多条声明
选择器主要作用是为了确定需要改变样式的HTML元素
每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开
如图:
值的单位
书写注意事项
- 如果值为若干单词，则要给值加引号
- 多个声明之间使用分号(;)分开
- css对大小写不敏感,如果涉及到与html文档一起使用时，class与id名称对大小写敏感
导入css ★★★
我们介绍以下几种导入css方式:
内联样式表
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
例如:
<div style=”border:1px solid black”>这是一个DIV</div> 注意:慎用这种方式，它将内容与显示混合在一起，损失了样式表的优势。一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用
内部样式表
我们可以使用<style>标签在html文档的<head>中来定义样式表。
例如:
这种方式，样式只适合应用于一个页面
外部样式表
如果想要在多个页面使用同一个样式表，可以使用外部样式表来导入。
我们可以在html页面上使用<link>标签来导入外部样式表。
例如:
浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。
外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑。
下面是mystyle.css文件的内容:
@import导入
这种方式也是外部导入。
使用方式如下：
关于@import与引用外部样式表的区别:
- @import这种方式只有firefox支持，而ie不支持。
- @import这种方式导入的css，会在整个页面加载后，才会加载样式。如果网络不好情况下，会先看到无样式修饰的页面，闪烁一下后，才会看到有样式修饰的页面。 而使用外部样式表，会先装载样式表，这样看到的就是有样式修饰的页面。
- @import不支持通过javascript修改样式，而link支持。
优先级问题
内联样式表>内部样式表>外部样式表
css选择器
css选择器主要是用于选择需要添加样式的html元素。
对于css来说，它的选择器有很多，我们主要介绍以下几种:
id选择器
Id选择器使用#引入，它引用的是id属性中的值。
类选择器
类选择器使用时,需要在类名前加一个点号(.)
元素选择器
这是最常见的选择器，简单说，文档中的元素就是选择器
属性选择器
如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器
伪类
css伪类用于向某些选择器添加特殊效果。
下面我们介绍一下锚伪类。
在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。
css属性
字体
Css字体属性定义文本的字体系列，大小，加粗，风格(如斜体)和变形(如小型大写字母)
常用属性:
font:简写属性，作用是把所有针对字体的属性设置在一个声明中。
font-family:定义字体系列
font-size:定义字体的尺寸
font-style:定义字体风格文本
CSS文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
常用属性
color:定义文本颜色
text-align:定义文本对齐方式
letter-spacing:定义字符间隔
word-spacing:定义字间隔背景
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在 HTML之上。
常用属性:
background:简写属性，作用是将背景属性设置在一个声明中
background-color:定义背景颜色
background-image:定义背景图片
background-position:定义背景图片的起始位置
background-repeat:定义背景图片是否及如何重复。尺寸
CSS 尺寸 (Dimension)属性允许你控制元素的高度和宽度。
常用属性:
width:设置元素的宽度
height:设置元素的高度列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
常用属性:
list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image:定义列表项标志为图象
list-style-position:定义列表项标志的位置
list-style-type:定义列表项标志的类型。表格
CSS 表格属性可以帮助您极大地改善表格的外观
常用属性:
border-collapse:定义是否把表格边框合并为单一的边框。
border-spacing:定义分隔单元格边框的距离
caption-side:定义表格标题的位置轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
常用属性:
outline:在一个声明中设置所有的轮廓属性
outline-color:定义轮廓的颜色
outline-style:定义轮廓的样式
outline-width:定义轮廓的宽度定位
CSS定位 (Positioning)属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS有三种基本的定位机制：普通流、浮动和绝对定位。
常用属性:
position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。分类
CSS分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
常用属性
clear:设置一个元素的侧面是否允许其它的浮动元素
float:定义元素在哪个方向浮动
cursor:当指向某元素之上时显示的指针类型
display:定义是否及如何显示元素
visibility:定义元素是否可见或不可见。CSS框模型
盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
边框
元素的边框(border)是围绕元素内容和内边距的一条或多条线。
CSS border属性允许你规定元素边框的样式、宽度和颜色。
常用属性:
border:简写属性，用于把针对于四个边的属性设置在一个声明。
border-color:简写属性，定义元素边框中可见部分的颜色，或为四个边分别设置颜色。
border-style:用于定义所有边框的样式，或者单独为各边设置边框样式。
border-width:简写属性，用于为元素的所有边框设置宽度，或则单独地为各边边框设置宽度
border-top:简写属性，用于把上边框的所有属性设置到一个声明中
border-right:简写属性，用于把右边框所有属性设置到一个声明中
border-bottom:简写属性，用于把下边框的所有属性设置到一个声明中
border-left:简写属性，用于把左边框的所有属性设置到一个声明中。外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin属性，这个属性接受任何长度单位、百分数值甚至负值。
常用属性:
margin:简写属性，在一个声明中设置所有外边距属性
margin-top:定义元素的上外边距
margin-right:定义元素的右外边距
margin-bottom:定义元素的下外边距
margin-left定义元素的左外边距注意:在使用margin来定义所有外边距时，可以使用值复制。
- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding属性。
CSSpadding 属性定义元素边框与元素内容之间的空白区域。
常用属性:
padding:简写属性，作用是在一个声明中设置元素的所有内边距属性
padding-top:定义元素的上内边距
padding-right:定义元素的右内边距
padding-bottom:定义元素的下内边距
padding-left:定义元素的左内边距。
【笔试面试题】
1. css基本语法是什么
2. css导入方式有几种
3. 外部导入与@import有什么区别
4. Css选择器的作用是什么,并说出常见三种选择器。
5. display=none与visibility=hidden有什么区别
【重点总结】
1. css是什么及其作用
2. css导入方式
3. css选择器及基本语法
4. 可以查询帮助文档，看懂css代码就可以
【第二阶段】
【学习目标】
掌握css样式，可以完成简单的css样。
【内容:HTML+CSS综合案例】
显示商品信息
案例分析 :
在设置各部分样式前，我们需要对页面上的元素进行一些整体设计，如整个页面的字体，文本对齐方式，背景等。
.main{
/*设置外边距，下面有30px距离*/
margin:0px0px 30px 0px;
/*背景色*/
background-color:#ffffff;
/*字体大小*/
font-size:12px;
/*文字颜色*/
color:#000000;
/*文本对齐方式*/
text-align:center;
/*垂直对齐方式*/
vertical-align:top;
/*设置行高*/
line-height:150%;
/*设置字体*/
font-family:Arial, Helvetica, sans-serif;
}
/*设置a标签字体12px 颜色 #0066FF*/
a {
font-size:12px;
color:#0066FF; /*#1E33F7*/
}
/*设置未访问的超连接无下划线*/
a:link {
text-decoration:none;
}
/*设置访问后的连接颜色为#0066ff 也无下划线*/
a:visited {
text-decoration:none;
color:#0066FF;
}
/*设置鼠标移到超连接上无下划线颜色为#990099*/
a:hover {
text-decoration:none;
color:#990099; /*颜色变换*/
}
/*设置选定的超连接无下划线，颜色为#0066ff*/
a:active {
text-decoration:none;
color:#0066FF;
}
/*设置所有td标签*/
td{
text-align:left;
vertical-align:top;
font-size:12px;
}
/*设置所有的hr标签*/
hr{
/*颜色*/
color:#cccccc;
/*高度*/
height:1px;
/*上外边距5px*/
margin-top:5px;
/*下外边距5px*/
margin-bottom:5px;
/*分隔线如果超出框架部分隐藏*/
overflow:hidden;
}
/*设置h1*/
h1{
font-size:14px;
color:#000000;
margin-bottom:5px;
font-weight:bold;
display:inline;
text-align:left;
}设置head部分样式
#head{
/*设置head这个div宽度为100%*/
width:100%;
}
.headtab{
width:100%;
}
.headta td{
/*设置td内边距上10px 右50px 下25px 左135px*/
padding:10px 50px 25px 135px;
} Html代码
<div id="head">
<table class="headtab">
<tr>
<td align="left">
<img src="images/logo.png">
</td>
<td style="text-align:right">
<imgsrc="images/cart.gif">
<a>购物车</a>
<a>帮助中心</a>
<a>我的帐户</a>
<a>新用户注册</a>
</td>
</tr>
</table>
</div>设置menu部分样式
#menu{
width:100%;
background-color:#1c3f09;/*设置背景色*/
border-top-width:4px;/*设置上边框宽度4px*/
border-top-style:solid;/*设置上边框样式 实线*/
border-top-color:#82b211;/*设置上边框的颜色#82b211*/
text-align:center;
font-size:14px;
padding:10px 0px 10px 0px;
}
/*#menu下的a标签样式设置*/
#menu a{
font-size:14px;
color:#ffffff; /*超连接文字颜色*/
font-weight:bold; /*超连接字体加粗*/
padding:10px 10px 10px10px; /*超连接内边距*/
}
#menu a:link {
text-decoration: none;
font-weight: bold;
}
#menu a:visited {
text-decoration: none;
color:#FFFFFF;
font-weight: bold;
}
#menu a:hover {
text-decoration: none;
color: #999999; /*颜色变换*/
font-weight: bold;
}
#menu a:active {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}Html代码
<div id="menu">
<table width="100%">
<tr>
<td>
<a href="#">文学</a>
<a href="#">生活</a>
<a href="#">计算机</a>
<a href="#">外语</a>
<a href="#">经管</a>
<a href="#">励志</a>
<a href="#">社科</a>
<a href="#">学术</a>
<a href="#">少儿</a>
<a href="#">艺术</a>
<a href="#">原版</a>
<a href="#">科技</a>
<a href="#">考试</a>
<a href="#">生活百科</a>
<a href="#" style="color:yellow">全部商品目录</a>
</td>
</tr>
</table>
</div>设置search部分样式
/*设置search样式*/
#search{
width:100%;
text-align:center;
color:#ffffff;
font-weight:bold;
padding:5px 0px 5px0px;
background-color:#b6b684;
}
/*设置search中的文本框样式*/
.inputtxt{
width:130px;
height:18px;
border:1px solid#999999;
}Html代码
<div id="search">
<table width="100%">
<tr>
<td style="text-align:right;padding-right:220px">
Search
<input type="text" class="inputtxt">
<input type="image"src="images/serchbutton.gif" style="margin-bottom:-4px;">
</td>
</tr>
</table>
</div> 设置content部分样式
/*content整体设置*/
#content{
width:900px; /*宽度900px*/
margin-top:10px; /*上外边距*/
/*左右外边浏览器默认*/
margin-right:auto;
margin-left:auto;
}
.contentlist{
background-color:#fcfdef;
border:1px solid #cccccc;
width:99%;
margin-left:5px;
}
.contentlist td{
padding:20px;
}
.booklist{
width:100%;
}
.booklist td{
text-align:center;
width:25%;
padding:10px;
} Html代码
<div id="content">
<table width="100%">
<tr>
<td>
<div align="right" style="text-align:right;margin:5px 10px 5px 10px;">
<a href="#">首页</a>
>
旅游 >
图书列表
</div>
<table width="100%" class="contentlist">
<tr>
<td>
<h1>商品目录</h1>
<hr>
<h1>计算机类</h1>共xxx种商品
<hr>
<div>
<img src="images/productlist.gif" width="100%">
<div>
<table class="booklist">
<tr>
<td>
<div>
<img src="bookcover/101.jpg" width="130"
height="197">
</div>
<div>
书名:xxx<br>
售价:xxx
</div>
</td>
<td> <div>
<img src="bookcover/102.jpg" width="130"
height="197">
</div>
<div>
书名:xxx<br>
售价:xxx
</div>
</td>
<td> <div>
<img src="bookcover/103.jpg" width="130"
height="197">
</div>
<div>
书名:xxx<br>
售价:xxx
</div>
</td>
<td> <div>
<img src="bookcover/104.jpg" width="130" height="197"></div>
<div>
书名:xxx<br>
售价:xxx
</div>
</td>
</tr>
</table>
<table width="100%" align="center">
<tr>
<td>
<div><img src="bookcover/105.jpg" width="130" height="197"></div>
<div>
书名:xxx<br>
售价:xxx
</div>
</td>
<td>
<div><img src="bookcover/106.jpg" width="130" height="197"></div>
<div>
书名:xxx<br>
售价:xxx
</div>
</td>
<td>
<div><img src="bookcover/107.jpg" width="130" height="197"></div>
<div>
书名:xxx<br>
售价:xxx
</div>
</td>
<td>
<div><img src="bookcover/code.jpg" width="130" height="197"></div>
<div>
书名:xxx<br>
售价:xxx
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
设置foot部分样式
#foot{
width:100%;
background-color:#efeedc;
margin-top:15px;
}
//Html代码
<div id="foot">
<table bgcolor="#efeedc" width="100%" align="center">
<tr>
<td rowspan="2"style="width:10%">
<img src="images/logo.png"width="195" height="50"style="margin-left:175px;">
</td>
<td style="padding-left:50px;padding-top:5px;">
<a><font color="#747556">CONTACT US</font></a>
</td>
</tr>
<tr>
<td style="padding-left:50px;">
<font color="#747556">
copyright 2008©BookStoreAll Rights RESERVED
</font>
</td>
</tr>
</table>
</div> 添加分页条码并设置样式
// Css代码
#pagediv{
width:600px;
text-align:center;
margin:5px;
padding:5px;
}
#pagediv ul{
margin:5px;
padding:5px;
font-size:14px;
}
#pagediv li{
margin:1px;
padding:1px;
display:inline;
list-style-type:none;
}
#pagediv a,#pagediv a:visited {
padding: 5px;
border: 1px solid#9aafe5;
text-decoration:none;
color: #2e6ab1;
}
#pagediv a:hover,#pagediv a:active{
padding: 5px;
border: 1px solid#2b66a5;
color:#000000;
background-color:lightyellow;
}
#pagediv li.currentpage{
font-weight:bold;
padding:5px;
border:1px solidnavy;
background-color:#2e6ab1;
color:#ffffff;
}
#pagediv li.nextpage{
font-weight:bold;
padding:5px;
}
#pagediv li.disablepage{
padding: 5px;
border: 1px solid#929292;
color: #929292;
}Html代码
<div id="pagediv">
<ul>
<li class="disablepage">上一页</li>
<li class="currentpage">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>...</li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li class="nextpage"><ahref="#">下一页</a></li>
</ul>
</div>注册页面
案例分析 :
对于注册页面，我们的headmenu search foot部分内容只需要与显示商品信息页面中一样设置就可以，主要是对content内容进行设置
设置content部分
//Css代码
/*注册页面content部分整体设计*/
#content{
width:900px;
background-color:#fcfdef;
border:1px solid #eeeddb;
margin-right:auto;
margin-left:auto;
}
/*设置边框*/
.upline{
border-bottom-width:1px;
border-bottom-style:dashed;
border-bottom-color:#b0bec7;
padding-top:5px;
padding-bottom:5px;
margin:20px;
}
/*设置文本框样式*/
.txtinput{
margin-left:10px;
font-size:12px;
width:150px;
height:18px;
border:1px solid #a4b4bd;
}
/*设置文本域样式*/
.txtarea{
margin-left:10px;
font-size:12px;
width:350px;
height:75px;
border:1px solid #a4b4bd;
}
Html代码
<div id="content">
<form action="#"method="post">
<table width="850px"border="0" cellspacing="0">
<tr>
<td style="padding:30px;">
<h1>新会员注册</h1>
<table width="70%" border="0" cellspacing="2"class="upline">
<tr>
<td style="text-align:right;width:20%">会员邮箱:</td>
<td><input type="text" name="email"class="txtinput"></td>
<td>
<font color="#999999">请输入有效的邮箱地址</font>
</td>
</tr>
<tr>
<td style="text-align:right;">会员名</td>
<td><input type="text" name="username"class="txtinput"></td>
<td><font color="#999999">用户名至少六位</font></td>
</tr>
<tr>
<td style="text-align:right;">密码</td>
<td><input type="password" name="password"class="txtinput"></td>
<td><font color="#999999">密码至少六位</font></td>
</tr>
<tr>
<td style="text-align:right;">重复密码</td>
<td><input type="password" name="repassword"class="txtinput"></td>
<td> </td>
</tr>
<tr>
<td style="text-align:right;width:20%">性别</td>
<td colspan="2"><input type="radio" name="sex"value="男"checked>男 <inputtype="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td style="text-align:right;width:20%">联系电话</td>
<td colspan="2"><input type="text"name="telephone" class="txtinput"style="width:350px;"></td>
</tr>
<tr>
<td style="text-align:right;width:20%">个人介绍</td>
<td colspan="2"><textarea name="introduce"class="txtarea"></textarea></td>
</tr>
</table>
<h1>注册校验</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align:right;width:20%">输入校验码</td>
<td><input type="text" name="checkcode"class="txtinput"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<imgsrc="" class="txtinput" style="height:30px;">
<ahref="#">看不清换一张</a>
</td>
</tr>
</table>
<table width="70%" border="0" cellspacing="2">
<tr>
<td style="text-align:center">
<input type="image" src="images/signup.gif">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
2949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
