css教程剖析

Logo讲师：花倩中软培训中心课程名称web(css)HTML样式单第七章HTML样式单为什么需要CSS样式表HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化样式表的作用相当于华丽的衣服样式表能实现内容与样式的分离，方便团队开发HTML样式单CSS是CascadingStyleSheets（层叠样式表单）的简称CSS的位置：在styletype=text/css/style中CSS语法由三部分构成：选择器、属性、值例如：p{color:red;}h1{border:1pxsolidred;}style…………../style样式表信息必须包含在这对标签之间.这对标签必须放在head/head中styletype=text/css!--H1{color=blue;}--/styleHTML样式单1、内部样式表headstyletype=text/cssh1{color:red}h3{color:blue}/style/head2、行内样式bodyahref=lastpage.htmstyle=text-decoration:noneLINK!/a/body3、连接外部样式表linkhref=styles.css/选择器1.标签选择器2.类选择器3.ID选择器分组使用样式表多个标志相同属性的定义方式：B,I,H1{color:red}B粗体I斜体H11号标题Css样式定义在标签上的css格式H1,H2,H3,H4,H5,H6{Color:red;text-decoration:underline;Font-family:”黑体”;}Css样式设定在ID上的css格式为#id名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}引用的方法：标志ID＝ID名。Css样式直接定义class：.类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}引用：HTML标志CLASS=类名css样式直接定义class：.类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}引用：HTML标志CLASS=类名定义Id：#id名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}引用的方法也相同：标志ID＝ID名。常用的样式属性文本属性文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐使用font-size、font-family、color实现注意：font-style的属性值font-weight属性字体大小16px要实现如下图所示的文本样式，该如何编写？常用的样式属性STYLEtype=text/cssP{font-size:12px;font-family:宋体;text-align:left;}.bigFont{font-size:16px;color:red;}/STYLE/HEADBODY【新闻】[设搜狐为首页]9月1日Pclass=bigFont·世锦赛刘翔12秒95夺冠成就大满贯/PP·我国实施不安全食品召回制度遏制非法出口/P…..查看源代码声明P标签样式声明名称为bigFont类样式,它可被多个标签共享应用类样式用class＝”类名“常用的样式属性背景属性背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复可取值repeat-x、repeat、no-repeat、repeat-y演示示例2：使用不同的背景属性STYLEtype=text/css……table{background-image:url(images/type_back1.jpg);background-repeat:no-repeat;}/STYLE……background-image:url()此处的路劲用绝对路径无效，只能用相对路径设置背景图像为images文件夹下的type_back1.jpg设置背景图像不平铺list-style-type:none;无序列表有序列表都适用常用的样式属性方框属性margin-right右边界margin-left左边界margin-top上边界margin-bottom下边界marginborderpaddingborder-width边框的宽度padding-left左填充padding-bottom下填充常用的样式属性属性CSS名称说明边界属性margin-top设置对象的上边距margin-right设置对象的右边距margin-bottom设置对象的下边距margin-left设置对象的左边距边框属性border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色填充属性padding-top设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离padding-bottom设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离方框属性常用的样式属性要实现下图所示的效果，该如何编写样式规则？线宽2px、虚线框样式dashed、颜色为red使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left来实现行的背景色为yellow常用的样式属性STYLEtype=text/css.tableBorder{border-right-width:3px;border-right-color:red;border-right-style:dashed;padding-top:20px;padding-left:10px;}TR{background:yellow;}TABLETRTDclass=tableBorder手机冲值/TDTDclass=tableBorder电子彩票/TD/TR……查看源代码设置单元格右边框宽度为3像素设置单元格右边框为虚线框设置单元格里文字与左边框的距离为10像素表格行的背景色常用的样式属性特殊样式（超连接）a:link{color:#FF0000}/*未被访问的链接红色*/a:visited{color:#00FF00}/*已被访问过的链接绿色*/a:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/a:active{color:#0000FF}/*鼠标点中激活链接蓝色*/STYLEtype=text/cssA{color:blue;text-decoration:none;}A:hover{color:red;}/STYLE……TRTDAhref=#诺基亚/A|Ahref=#摩托罗拉/A/TDTDAhref=#联想/A|Ahref=#戴尔/A/TD/TR……text-decoration的属性值：none,underline,overline,line-through，查看源代码超链接文本的样式鼠标在超链接上悬停时，超链接文本变为红色如何编写此超链接样式？css链接样式a:link设置链接本来的颜色a:visited设置链接访问过后的颜色a:hover设置链接在鼠标悬停时的颜色a:active设置链接被激活时的颜色注意：为了产生预期的效果，在CSS定义中，a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后！！float属性float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。值：left,right,案例：1.图片浮动2.无序列表浮动display属性元素是否显示。属性值:最常用：none,block,其他属性值参考w3cschool编写如下图所示效果对应的HTML代码小结2细边框solid样式无下划线的超连接样式鼠标在超链接上悬停时，超链接文本变为红色练习答案练习代码页面布局之框架布局使用框架布局如何实现这样的页面布局？框架布局框架布局的优缺点和应用场合优点缺点应用场合支持滚动条，方便导航，节省页面下载时间等兼容性不好，保存时不方便，应用范围有限等小型商业网站、论坛、后台管理、学习教程等页面布局之表格布局使用表格布局如何实现这样的页面布局？表格布局表格布局的优缺点和应用场合优点缺点应用场合方便排列有规律、结构均匀的内容或数据产生垃圾代码、影响页面下载时间、灵活性不大难于修改内容或数据整齐的页面页面布局之DIV布局应用了DIV布局的淘宝网主页如何实现这样的页面布局？DIV层布局优点缺点应用场合代码精简、提高页面下载速度、表现和内容相分离等比较灵活难于控制复杂的不规则页面、业务种类较多的大型商业网站DIV布局的优缺点和应用场合最佳布局如何实现这样的页面布局？head导航块层content内容块层foot版权块层表格表格表格表格表格表格表格表格使用DIV＋TABLE，整体布局用DIV，每个块的内容用表格作业：divlayout.html