《第6章+补充CSS样式表.ppt》由会员分享,可在线阅读,更多相关《第6章+补充CSS样式表.ppt(41页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、临沧师范高等专科学校信息科学与技术系补充:CSS样式表修饰网页信息科学与技术系网页设计与网站建设2010-2011下学期1.CSS样式表概述2.CSS样式表分类3.CSS样式表格式4.新建CSS样式表5.CSS样式属性介绍6.CSS滤镜7.CSS样式表层叠规则学习内容学习内容1 CSS1 CSS样式表概述样式表概述信息科学与技术系网页设计与网站建设2010-2011下学期1 CSS样式表概述概述:CSS是Cascading Style Sheets(层叠样式表)的简称。利用CSS样式可以对网页中的文本、图像、页面背景、表单元素外观等实现更加精确的控制。当网页浏览器读取HTML、XHTML或XM
2、L文档时,同时将加载相对应的CSS样式,即将按照样式描述的格式显示网页内容。信息科学与技术系网页设计与网站建设2010-2011下学期CSSCSS样式表的特点:样式表的特点:CSS真正实现了网页内容和格式定义的分离,通过修改CSS样式表文件就可以修改整个站点文件的风格。1 CSS1 CSS样式表概述样式表概述2 CSS2 CSS样式表分类样式表分类信息科学与技术系网页设计与网站建设2010-2011下学期(1)外部样式表外部CSS是一种独立的CSS样式。其一般将CSS代码存放在一个独立的文本文件中,扩展名为“.css”。(2)内部样式表 内部CSS与内联CSS类似,都是将CSS代码放在HTML
3、文档中。但是内部样式表是放在统一的style标签中。(3)内联样式表内联CSS是利用HTML标签的style属性设置的CSS样式,又称嵌入式样式。2 CSS2 CSS样式表分类样式表分类信息科学与技术系网页设计与网站建设2010-2011下学期CSS的选择器类型类(用于多个标签)ID(用于一个标签)标签(重定义HTML样式)2 CSS2 CSS样式表分类样式表分类3 CSS3 CSS样式表格式样式表格式信息科学与技术系网页设计与网站建设2010-2011下学期CSS样式表采用特定的格式,定义了一组规则,该规则可以包含超过90种的设置来影响网页中的任何元素。3 CSS3 CSS样式表格式样式表格
4、式(1)CSS样式表书写格式:样式表书写格式:一条完整的CSS语句,通常由选择器、属性以及属性值组成。属性和属性值被包含在一对内,形成一组规则。格式一.simpl color:#FF00DD;Font-size:12px;Font-weight:bold;格式二body background-color:#0000FF;color:#FF00DD;margin-top:0px;信息科学与技术系网页设计与网站建设2010-2011下学期3 CSS3 CSS样式表格式样式表格式格式三#bg padding:5px,10px,5px,15px;格式四a:link text-decoration:un
5、derline;格式五Body,th,textarea background-color:#0000FF;color:#FF00DD margin-top:0px;格式六#link1 a:hover color:#ffffff;background:#FF6600;信息科学与技术系网页设计与网站建设2010-2011下学期3 CSS样式表格式格式一.格式二.要让CSS样式表起作用,则必须在HTML标签内引用CSS样式表的选择器。根据选择器的种类,引用方式分为:引用class(类)引用IDDW操作4 4 新建新建CSSCSS样式表样式表信息科学与技术系网页设计与网站建设2010-2011下学期调
6、出CSS面板:【窗口菜单】-【CSS样式】4 4 新建新建CSSCSS样式表样式表信息科学与技术系网页设计与网站建设2010-2011下学期打开新建对话框4 4 新建新建CSSCSS样式表样式表内部样式表外部样式表信息科学与技术系网页设计与网站建设2010-2011下学期编辑规则4 4 新建新建CSSCSS样式表样式表信息科学与技术系网页设计与网站建设2010-2011下学期引用CSS样式4 4 新建新建CSSCSS样式表样式表5 CSS5 CSS样式属性介绍样式属性介绍信息科学与技术系网页设计与网站建设2010-2011下学期19文本样式的定义属性名属性名作用作用属性名属性名作用作用Font
7、-familyFont-family定义文本的字体类型Font-weight定义文本的粗细程度Font-sizeFont-size定义文本的字体大小Font-variant定义文本中所有小写字母为小型大写字母Font-styleFont-style定义文本的字体样式Font-transform转换文本中的字母大小写状态Line-heightLine-height定义段落文本的行高Color定义文本的颜色Text-decorationText-decoration定义文本的描述方式信息科学与技术系网页设计与网站建设2010-2011下学期20背景样式的定义背景样式的定义属性名属性名作用作用属性名
8、属性名作用作用Background-colorBackground-color定义网页容器对象的背景颜色Background-attachmentBackground-attachment定义网页容器对象的背景图像滚动方式Background-imageBackground-image定义网页容器对象的背景图像Background-Background-position(Xposition(X)定义网页容器对象的背景图像水平坐标位置Background-repeatBackground-repeat定义网页容器对象的背景图像重复方式。Background-Background-position
9、(Yposition(Y)定义网页容器对象的背景图像垂直坐标位置信息科学与技术系网页设计与网站建设2010-2011下学期21区块样式的定义区块样式的定义属性名属性名作用作用属性名属性名作用作用Word-spacingWord-spacing定义段落中各单词之间插入的间隔Text-indentText-indent定义段落首行的文本缩进距离Letter-spacingLetter-spacing定义段落中各字母之间插入的间隔White-spaceWhite-space定义段落内空格字符的处理方式Vertical-alignVertical-align定义段落的垂直对齐方式DisplayDisp
10、lay定义网页容器对象的显示方式Text-alignText-align定义段落的水平对齐方式信息科学与技术系网页设计与网站建设2010-2011下学期22方框样式的定义方框样式的定义属性名属性名作用作用属性名属性名作用作用WidthWidth定义网页容器对象的宽度Padding|BottomPadding|Bottom 定义网页容器对象的底部内补丁HeightHeight定义网页容器对象的高度Padding|LeftPadding|Left定义网页容器对象的左侧内补丁FloatFloat定义网页容器对象的浮动方式Margin|TopMargin|Top定义网页容器对象的顶部外补丁ClearC
11、lear定义网页容器对象的禁止浮动方式Margin|RightMargin|Right定义网页容器对象的右侧外补丁Padding|TopPadding|Top定义网页容器对象的顶部内补丁Margin|BottomMargin|Bottom定义网页容器对象的底部外补丁Padding|RightPadding|Right定义网页容器对象的右侧内补丁Margin|LeftMargin|Left定义网页容器对象的左侧外补丁信息科学与技术系网页设计与网站建设2010-2011下学期23边框样式的定义边框样式的定义属性名属性名作用作用典型属性值及解释典型属性值及解释StyleStyle定义边框线的样式no
12、ne(默认值,无边框线)、dotted(点划线)、dashed(虚线)、solid(实线)、double(双实线)、groove(3D凹槽)、ridge(3D凸槽)、inset(3D凹边)、outset(3D凸边)WidthWidth定义边框线的宽度由浮点数字和单位组成的长度值,默认值为0ColorColor定义边框线的颜色以16进制数字为基础的颜色值。可通过颜色拾取器进行选择。信息科学与技术系网页设计与网站建设2010-2011下学期24列表样式的定义列表样式的定义属性名属性名作用作用典型属性值及解释典型属性值及解释List-style-typeList-style-type定义列表的项目符
13、号类型disc(实心圆项目符号,默认值)、circle(空心圆项目符号)、square(矩形项目符号)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)以及none(无项目列表符号)List-style-imageList-style-image自定义列表的项目符号图像none(默认值,不指定图像作为项目列表符号),url(file)(指定路径和文件名的图像地址)List-style-positionList-style-position定义列表项目符号所
14、在位置outside(将列表项目符号放在列表之外,且环绕文本,不与符号对齐,默认值)、inside(将列表项目符号放在列表之内,且环绕文本根据标记对齐)信息科学与技术系网页设计与网站建设2010-2011下学期25定位样式的定义定位样式的定义 【定位】规则多用于CSS布局的网页,可设置各种AP元素、层的布局属性。属性名属性名作用作用PositionPosition定义网页容器对象的定位方式VisibilityVisibility定义网页容器对象的显示方式Z-IndexZ-Index定义网页容器对象的层叠顺序OverflowOverflow定义网页容器对象的溢出设置PlacementPlacem
15、entTopTop定义网页容器对象与父容器的顶部距离RightRight定义网页容器对象与父容器的右侧距离BottomBottom定义网页容器对象与父容器的左侧距离LeftLeft定义网页容器对象与父容器的底部距离ClipClipTopTop定义网页容器对象顶部剪切的高度RightRight定义网页容器对象右侧剪切的宽度BottomBottom定义网页容器对象底部剪切的高度LeftLeft定义网页容器对象左侧剪切的宽度信息科学与技术系网页设计与网站建设2010-2011下学期268 8扩展样式的定义扩展样式的定义 【扩展】规则的作用是设置一些不常见的CSS规则属性,例如打印时的分页设置以及CS
16、S的滤镜等。信息科学与技术系网页设计与网站建设2010-2011下学期练习1 制作多种超链接样式2 制作div+css板块(css方框、边框、定位练习)3 主题网站制作练习(网站至少包含3个网页)个人介绍类 家乡介绍类 体育类 游戏介绍类 电子竞技大赛 网络课程 容器信息科学与技术系网页设计与网站建设2010-2011下学期216网页安全色216网页安全颜色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合,这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。所以使用216网页安全颜色进行网页配色可以避免原有的颜色失真问题。信息科学与技术系网页设计与网站建设2010-
17、2011下学期1 配色技巧网页的配色方案中,体现基色调主要依靠以下几个部分:Banner超链接板块边框文字其中,banner的制作技巧主要使用图像处理超链接的CSS制作技巧:背景颜色(图片)、文字颜色、下划线(有/无)、行高板块的CSS制作技巧:h5的背景、行高、字体大小/颜色;边框颜色;CSSCSS技巧技巧信息科学与技术系网页设计与网站建设2010-2011下学期2 布局技巧目前主流的网页设计方案是:div+CSS方案,div完成板块(容器)设定,利用CSS对其进行修饰。Div的基本布局:一个div占据一整行多个板块(div)并排一行:使用浮动(float)且多个div的宽度总和网页总宽度设
18、置板块(div)的常用属性:方框:宽度、高度、margin、padding、float 边框:style、width、colorCSSCSS技巧技巧信息科学与技术系网页设计与网站建设2010-2011下学期3 复合技巧在div+css的网页设计中,很多时候,都需要复合设置。设计思路:在一个容器的范围以内,设置所包含的h5、a、文本的样式CSSCSS技巧技巧信息科学与技术系网页设计与网站建设2010-2011下学期3 复合技巧复合的css样式CSSCSS技巧技巧6 CSS6 CSS滤镜滤镜信息科学与技术系网页设计与网站建设2010-2011下学期 滤镜是平面设计中的术语。通常滤镜是图像处理软件的
19、插件,用于处理图像或文本的各种特殊效果。CSS和图像处理软件类似,也有滤镜功能。其滤镜功能也可以实现比较多的特殊效果,例如透明、灰度等效果。CSS的滤镜通常可以分为三大类,即界面滤镜、静态滤镜和转换滤镜。6 CSS6 CSS滤镜滤镜信息科学与技术系网页设计与网站建设2010-2011下学期 界面滤镜主要的作用是用于处理网页容器标签的界面,为这些容器标签添加相关的特效。这一类滤镜有两种,即Gradient渐变滤镜和AlphaImageLoader透明背景滤镜。1 1GradientGradient渐变滤镜渐变滤镜 Gradient渐变滤镜的作用是为网页的容器标签填充渐变颜色的背景色。2 2Alp
20、haImageLoaderAlphaImageLoader透明背景滤镜透明背景滤镜 AlphaImageLoader透明背景滤镜的作用是为网页的标签容器提供背景图像,并设置这些背景图像的尺寸。界面滤镜界面滤镜信息科学与技术系网页设计与网站建设2010-2011下学期静态滤镜 静态滤镜是CSS样式表中最常用的滤镜。静态滤镜的使用方法和普通的类属性相似,为网页的标签添加该滤镜即可直接产生效果。361 1AlphaAlpha透明滤镜透明滤镜 Alpha透明滤镜滤镜的作用是设置网页元素的透明度,以及透明度的变化趋势。2 2BlurBlur模糊滤镜模糊滤镜 Blur模糊滤镜滤镜的作用主要是设置各种网页标
21、签内容的模糊效果。3 3ChormaChorma取色滤镜取色滤镜 Chorma取色滤镜滤镜的作用是从网页图像元素中将所有与用户定义符合的色彩删除,使色彩所在位置为透明。信息科学与技术系网页设计与网站建设2010-2011下学期374 4DropShadowDropShadow投影滤镜投影滤镜 DropShadow投影滤镜的作用是设置网页标签的投影效果。5 5FlipHFlipH和和FlipVFlipV翻转滤镜翻转滤镜 这两个滤镜的用途和作用类似,都是用于翻转网页标签的。6 6GlowGlow发光滤镜发光滤镜 Glow发光滤镜的作用是制作发光效果。7 7GrayGray灰度滤镜灰度滤镜 Gray
22、灰度滤镜通常用于渲染网页元素的灰度。8 8BasicImageBasicImage基本图像滤镜基本图像滤镜 BasicImage基本图像滤镜是一个相当强大的滤镜,其可以用于网页标签的色彩处理、图像旋转,以及设置对象内容的透明度,静态滤镜信息科学与技术系网页设计与网站建设2010-2011下学期转换滤镜 这类滤镜和前面两类滤镜的使用方法不同,其是作为JavaScript等脚本语言调用的对象而存在的。使用JavaScript等脚本语言,可以方便地应用这些滤镜,制作动画。381 1BlendTransBlendTrans渐变滤镜渐变滤镜 BlendTrans渐变滤镜用于为转换的图像提供渐隐或渐显的效
23、果。2 2RevealTransRevealTrans图像转换滤镜图像转换滤镜 RevealTrans图像转换滤镜提供了24种图像转换的效果。7 CSS7 CSS样式表层叠规则样式表层叠规则信息科学与技术系网页设计与网站建设2010-2011下学期 由于html的标记大部分都可以嵌套使用,对于某一个标记都可以使用样式表来设置它的外观,那么嵌套在一起的样式表就形成了层叠。多个样式层叠在一起,需要遵循统一的规则去展现所设置的外观。7 CSS样式表的层叠规则一、增加差异,后者优先一、增加差异,后者优先 当对同一个标记使用2个样式时,根据先后顺序,先加载第一个样式的设置,再增加第二个样式中与第一个样式不相同的部分。若第二个样式中出现了与第一个样式相同的设置,那么以第二个样式设置的值为最后的设置。信息科学与技术系网页设计与网站建设2010-2011下学期二、标记为界,控制范围二、标记为界,控制范围 样式表对HTML标记进行外观定义,它必须依附在某个标记上才能体现出它的作用,所以,样式的使用受标记作用范围的严格控制。为了配合特点样式在特定范围内使用,在定义样式时可以采用该规则简化对标记的重定义。例如:在一个网页中使用多种超链接的形式,就可以利用此规则来定义7 CSS7 CSS样式表的层叠规则样式表的层叠规则
限制150内