CSS
来源：互联网 发布：商场用什么框架php 编辑：程序博客网 时间：2024/06/06 01:22
【第一阶段】
【学习目标】
- 掌握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>
阅读全文
0 0
