项目四商品分类页面的设计.docVIP

项目四 商品分类页面设计---常用样式结构 项目任务： 1、制作“商品分类”版块 2、制作背景为圆角矩形的效果 目标： 1、掌握CSS的基本语法 2、使用文本和字体样式美化网页 3、使用背景样式美化网页 4.1 CSS基本语法 4.2.1. CSS 的基本概念 级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的使用表格进行页面布局会带来很多问题： 把格式数据混入的内容中。这使得文件的大小无谓地变大。这使得重新设计现有的站点和内容极为消耗劳力。这还使我们保持整个站点的视觉的一致性极难，花费也极高。CSS布局页面的优势”text/csss” 选择器{ 对象的属性1：属性值1； 对象的属性2：属性值2； } /style 其中选择器表示被修饰的对象。属性是希望改变的样式，如颜色color。属性和属性值用冒号（:）隔开。 注意： （1）虽然CSS代码不区分大小写，但推荐使用小写。 （2）每条样式规则用分号（；）隔开，一般写为多行，简单的规则也可以合并为一行 （3）当CSS代码较多时，可以使用/*...........*/添加毕业的注释，增加代码的可读性。 2、CSS选择器规范化命名 规范的命名也是Web标准中的重要一项，标准的命名可以更好的看懂代码，CSS命名法，和其他的程序命名差不多，也是有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。 （1）骆驼命名法：第一个字母要小写，后面的词的第一个字母就要用大写，如下： #headerBlock .navMenuRedButton （2）帕斯卡命名法 这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下 #HeaderBlock .NavMenuRedButton （3）匈牙利命名法 匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如： #head_navigation .red_navMenuButton 以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则就可以，就是“容易理解，容易认，方便协同工作” 以下为于页面模块的常用命名 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 有哪些信誉好的足球投注网站：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 4.2.3 Css样式加载 加载css样式有以下四种:外部样式、内部样式、行内样式、导入样式。 1、外部样式 link href=layout.css rel=stylesheet type=text/css / 这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。 2、内部样式 style type=”text/csss” h2 { color:#f00;} /style 这种形式是内部样式表，它是以style和/style结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。 3、行内样式 p style=font-size:18px;内部样式/p 这种在标签内以style标记的为内部样式，内部样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。 4、导入样式 @import url(/css/global.css); 链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个 global.css的文件中，然后在layout.css中以@import url(/css/global.css)的形式链接全局样式，这样就使代码达到很好的重用性。 4.2.4 选择器的分类 选择器表示所修饰的内容类别，选择器又分为标签选择器、类选择器、ID选择器。 1、标签选择器 当需要对页面内某类标签的内容进行修饰时，则采用标签选择器。使用方法： 标签