CSS

CSS层叠样式表与网页布局教师：常艳芬2010-4-10CSS简介CSS——崭新的“老技术”CSS带来的好处：CSS使页面载入更快；CSS可以降低网站的流量费用；CSS使设计师在修改设计时更有效率，而代价更低；CSS使整个站点保持视觉的一致性；CSS使站点可以更好地被搜索引擎找到；CSS使站点对浏览者和浏览器更具亲和力；在世界上越来越多人采用Web标准时，掌握CSS可以提高设计师的职场竞争实力。CSS学习资料推荐学习资料《精通CSS+DIV网页样式与布局》《CSS设计彻底研究》（前沿视频教室）(学习作品)CSS3.0使用手册推荐图书CSS学习推荐图书第1课CSS初步讲课提纲CSS的概念CSS与XHMTL的关系CSS在HTML页面中的使用方法CSS语法CSS的编码规范CSS常用属性（1）CSS3.0使用手册第1课CSS初步CSS初步CSS（CascadingStyleSheet）中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。注意：目前各个浏览器之间对CSS很多细节的处理上存在差异，课程的内容针对的是IE与Firefox两个浏览器。传统HTML的缺陷：维护困难；标记不足；网页过胖；定位困难；第1课CSS概念XHTML与CSS的关系XHTML是TheExtensibleHypertextMarkupLanguage可扩展标识语言的缩写。在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。它实现HTML向XML的过渡。CSS是CascadingStyleSheets层叠样式表的缩写。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。第1课CSS使用方法在HTML中引入CSS的四种方法行内式h1style=color:white;background-color:blueThisisalineofText./h1内嵌式styletype=text/cssh1{color:white;background-color:blue；}/style第1课CSS使用方法在HTML中引入CSS的方法导入式styletype=text/css@importurl(div.css);/style链接式linkhref=mystyle.cssrel=stylesheettype=text/css/外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；内嵌样式行内样式某个HTML标签CSS语法CSS的语法包括3个方面：选择符、属性和值，写法如下：选择符{属性：属性值;}说明：属性必须要包含在{}之中。属性和属性值之间用：隔开。多个属性用；进行区分。多个属性值用空格分开。例：body{color:red;}h1color:red;font-size:25px;{}选择符属性值属性值声明声明CSS语法选择符中常用的是通配选择符、类型选择符、包含选择符、ID选择符、类选择符和选择符分组。一、通配选择符通配选择符的写法是“*”，其含义是所有元素。例：*{font-size:12px;}说明：页面中所有文本的字体大小为12个像素。CSS语法二、类型选择符类型选择符即使用结构中元素名称作为选择符，如body,p,div等。例：div{font-size:12px;}说明：页面中所有div元素包含的内容的字体大小为12个像素。CSS语法三、包含选择符写法如下：选择符1选择符2说明：选择符之间用空格隔开，含义是所有选择符1中包含选择符2例：divp{font-size:12px;}说明：页面中所有被div元素包含的p元素中，文本的字体大小为12个像素。CSS语法四、ID选择符写法如下：#name（名称唯一）说明：ID选择符的语法格式是“#”加上自定义的ID名称。例：#name{font-size:12px;}说明：ID名为name页面元素中，文本的字体大小为12个像素。CSS语法五、类选择符写法如下：.name说明：类选择符的语法格式是“.”加上自定义的类名称。例：.name{font-size:12px;}说明：所有调用类名为name页面元素中，文本的字体大小为12个像素。名称不唯一，可通过定义相同的类名来调用同一个样式。CSS语法六、选择符分组当多个选择符应用相同的样式，可以将选择符用英文逗号分隔的方式，合并为一组。写法如下：选择符1，选择符2，选择符3说明：ID选择符的语法格式是“#”加上自定义的ID名称。例：#name,p,.name{font-size:12px;}说明：ID名为name的元素、p元素、类名.name中，文本的字体大小为12个像素。CSS语法七、同一个元素的多重定义写法如下：.one.two示例：divclass=“onetwo”/div说明：class=“onetwo”这句代码是页面中调用类选择符的代码，其中one和two两个类之间，用空格分开，最终的表现效果是两个类中属性的叠加。好处：在一个元素中使用多个选择符，可以减少自定义选择符的数量。CSS语法伪类和伪元素伪类和伪元素也是一种选择符，在页面元素中，用来定义超出结构所能标识的样式。伪类是能被支持CSS的浏览器自动识别的特殊选择符。语法结构如下：选择符伪类{属性：属性值；}例：a:hover{font-size:12px;}说明：当鼠标经过带有链接的文本上时，文本字体大小12像素。伪类和伪元素的写法，一般以：开头，与类不同的是，伪类和伪元素在CSS中是指定的，不能随意的命名和定义。CSS语法属性说明a:link超链接的普通样式，即正常浏览状态的样式a:visited被点击过的超链接的样式a:hover鼠标指针经过超链接上时的样式a:active在超链接上单击时，即“当前激活”时，超链接的样式a:link,a:visited{text-decoration:none;}a:hover,a:active{text-decoration:underline;}CSS语法属性属性是CSS中最重要的部分，也是最复杂的部分。其中常用的属性有：字体属性，文本属性、背景属性、定位属性、尺寸属性、布局属性、边界属性、边框属性、补白属性、列表项目属性、表格属性。其中，某些属性只有部分浏览器支持，这使得属性的应用变得相当复杂，属性的知识和应用，是CSS的应用主体部分，这节课主要介绍文本属性，其它属性将在以后中详细介绍。CSS代码规范比较通用的CSS书写方法，对样式的本身并没有影响，按照CSS编码规范来书写CSS，会使代码更加便于阅读，便于出现问题时的调试。基本书写规范注释书写方式命名参考样式表书写顺序CSS代码规范基本书写规范建议先书写类型选择符和重复使用的样式，然后是伪类，最后是自定义的选择符。除了重复使用的选择符，其它选择符按照使用的先后书写，这样便于修改时查找。注释在CSS中，合理的使用注释，可以使代码更加清晰易懂，便于自己修改和开发团队中其它人的使用。CSS代码规范书写方式在书写每个属性时，使用换行并使用相同的缩进，示例：body{width:120px;height:120px;background-color:#333333;color:#000000;}注意事项：CSS中所有长度值都要注明单位，当值是0时除外；所有使用十六进制的颜色单位都要在颜色值前加#号；Body元素要设置background-color属性（保持浏览器的兼容性）CSS代码规范命名参考推荐结构化的命名方法，不论内容放在什么样的位置，其命名同样有意义，方便页面中的相同结构，重复使用样式。部分内容习惯命名的方法见下表。结构名称结构名称结构名称主导航mainnav商标label标志logo子导航subnav标题title标语banner页脚footer顶导航topnav子菜单submenu内容content侧栏sidebar登录login头部header左侧栏leftsidebar容器container底部footer右侧栏rightsidebar搜索searchCSS代码规范样式表书写顺序CSS推荐的书写顺序如下：显示属性（display、list-style、position、float、clear）自身属性（widthheihgtmarginpaddingborderbackground）文本属性（colorfonttext-decorationtext-alignvertical-alignwhite-space、othertext、content）注意：以上是推荐写法，方法所有使用CSS的设计者更好的合作作业1、整理字体、文本属性及属性值；2、预习实验七。第2课CSS文本、背景、伪类讲课提纲复习总结上节课内容CSS文本属性及值CSS背景的设置CSS背景属性及值伪类产、文本、背景在页面中的使用CSS背景基本CSS选择符*通配符标签选择符类别选择符ID选择符包含选择符伪类h1color:red;font-size:25px;{}选择器属性值属性值声明声明CSS核心基础复合选择符“交集”选择符div.special{……}div#special{……}“并集”选择符div,h1.first,p.specia{……}后代选择符divh1.firstspan.firstLetter{……}CSS核心基础CSS的继承特性(test.htm)htmlheadbodytitleh1pullipliulolullililililililililiCSS语法-属性CSS文本属性（Text）属性描述CSScolor设置文本的颜色。1direction规定文本的方向/书写方向。2letter-spacing设置字符间距。1line-height设置行高。1text-align规定文本的水平对齐方式。1text-decoration规定添加到文本的装饰效果。1text-indent规定文本块首行的缩进。1text-transform控制文本的大小写。1writing-mode设置文本竖排版文字（值：tb-rl）2white-space规定如何处理元素中的空白。1word-spacing设置单词间距。1CSS语法-属性CSS字体属性（Font）属性描述CSSfont在一个声明中设置所有字体属性。1font-family规定文本的字体系列。1font-size规定文本的字体尺寸。1font-style规定文本的字体样式。1font-weight规定字体的粗细。1font-variant规定文本的字体样式。1font：字体大小｜字体加粗｜字体变形｜行高｜字体选择；每个属性之间用空格分隔开，同时每个属性的位置可以自由变换。字体选择最好放最后，行高加入的方法是在字体大小属性后面加/分隔。CSS语法-属性CSS背景属性（background）属性描述CSSbackground在一个声明中设置所有的背景属性。1background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1background-color设置元素的背景颜色。1