07css样式表

CSS样式表页面完成后，还要对网页中文字大小、表格样式、段落编排、背景、边框等有关的页面风格进行系统的设计，使所有网页保持相同的风格。下面我们介绍如何创建并设置CSS属性。《网页设计与制作》学习要点CSS基本语法2新建CSS样式3在页面中引用CSS4设置CSS属性5什么是CSS1《网页设计与制作》一、什么是CSSCSS（CascadingStylesheet）由W3C于1997年第一次颁布相关标准，中文名叫做级联风格页或层叠样式表。使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色与背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。《网页设计与制作》CSS的作用（1）将格式和结构分离（2）更容易控制页面的布局（3）可以制作出体积更小下载更快的网页（4）可以更快更容易地维护及更新大量的网页（5）良好的浏览器兼容性《网页设计与制作》学习要点CSS基本语法2新建CSS样式3在页面中引用CSS4设置CSS属性5什么是CSS1《网页设计与制作》二、CSS基本语法CSS的定义由三个部分构成：选择符（selector），属性(properties)和属性的取值(value)。基本格式如下：selector{property:value;property:value;…}选择符{属性：值；属性：值；…}例如：A{color:red}效果：把所有的链接都变成红色Body{color:black}效果：使页面的文字为黑色《网页设计与制作》选择符selectorCSS中主要有三种选择符：超文本标记选择符htmlselector类选择符classselectorID选择符IDselector1、超文本标记选择符例如：P{color:black}A{color:red}《网页设计与制作》注意：可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式的重复定义。例如：p,table{font-size:9pt}（段落和表格里的文字尺寸为9号字）效果完全等效于：p{font-size:9pt}table{font-size:9pt}《网页设计与制作》2、类选择符1)相关Classselector示例如：font.html{color:#191970}font.css{color:#4b0082}2)独立Classselector如：.note{font-size:small}注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。每个选择符只允许有一层类，font.html.proprietary是无效的。《网页设计与制作》2、类选择符假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：.right{text-align:right}.center{text-align:center}然后用于不同的对象，只要在HTML标记里加入你定义的class参数：pclass=“right”这个段落向右对齐的/ph2class=“center”这个h2是居中排列的/h2示例《网页设计与制作》3、ID选择符根据ID个别地定义每个元素的样式属性，这种选择符应尽量少用，因为它具有一定的局限性。假设页面中有段落pID=ident3em文本缩进3em/p定义样式#ident3em{text-indent:3em}，可使页面中ID为indent3em的段落具有文本缩进3em的效果。《网页设计与制作》选择器类型为【复合内容】时，有4个选项（均与链接有关）：A:active正在链接时的样式。A:hover鼠标移到链接上但未按下。A:link链接文字的样式。A:visited已被访问过的链接文字样式。设置超链接风格《网页设计与制作》思考题：使用CSS样式实现以下超链接变化效果：鼠标移至链接文字时，其下划线消失，链接文字变为红色，链接文字背景变为黄色，且文字右移10px。a:hover{color:#F00;text-decoration:none;background-color:#FF0;margin-left:10px;}《网页设计与制作》学习要点CSS基本语法2新建CSS样式3在页面中引用CSS4设置CSS属性5什么是CSS1《网页设计与制作》三、新建CSS样式使用菜单“窗口”-“CSS样式”打开“CSS样式”面板，单击“新建CSS规则”按钮。《网页设计与制作》学习要点CSS基本语法2新建CSS样式3在页面中引用CSS4设置CSS属性5什么是CSS1《网页设计与制作》四、在页面中引入CSS内联式样式单例如：pstyle=“color:red”这里显示红色字/p嵌入式样式单使用style/style标记装载，置于head/head之间示例外部式样式单linkrel=stylesheethref=style.csstype=text/css示例《网页设计与制作》学习要点CSS基本语法2新建CSS样式3在页面中引用CSS4设置CSS属性5什么是CSS1《网页设计与制作》五、设置CSS属性——文本属性1.词间距word-spacing（对中文不起作用）2.字间距letter-spacing（可应用于中文）3.文本修饰text-decoration取值包括：none,underline,overline,line-through,blink4.垂直对齐vertical-align5.文字转换text-transform取值包括：capitalize（首字母大写）,uppercase（大写）,lowercase（小写）,none《网页设计与制作》五、设置CSS属性——文本属性6.文本对齐text-align取值包括：left,right,center,justify7.文字缩进text-indent8.行间距line-height《网页设计与制作》五、设置CSS属性——颜色及背景属性颜色color、背景色background-color、背景图像background-image当指定背景图片之后，可以通过以下属性对其状态进行改变：背景重复background-repeat取值包括：repeat,repeat-x,repeat-y,no-repeat图片依附位置background-attachment取值包括：scroll,fixed图片定位属性background-position取值包括：百分比，长度，top/center/bottom,left/center/right《网页设计与制作》五、设置CSS属性——方框1.宽（width）和高（height）2.漂浮（float）和清除（clear）3.填充（padding）4.边界（margin）《网页设计与制作》五、设置CSS属性——边框、列表边框：1.样式（border-style）2.宽度（border-width）3.边框颜色（border-color）列表：1.类型（list-style-type2.项目符号图像（list-style-image）3.位置（list-style-position）《网页设计与制作》五、设置CSS属性——定位、扩展定位：定位属性包括类型、溢出、Z轴、宽、高、位置、剪辑的等，主要用来设置AP元素的风格。事实上，在对AP元素的属性进行定义时，就是在AP元素的代码行中加入了CSS代码。扩展：1.分页（page-break）：目前无浏览器支持。2.光标：多达13种鼠标形状供选择。《网页设计与制作》五、设置CSS属性——CSS滤镜1、Alpha滤镜Alpha滤镜是把一个目标元素与背景混合，可以指定数值来控制混合的程度，通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)2.Blur滤镜Blur滤镜产生模糊效果。Blur(Add=?,Direction=?,Strength=?)《网页设计与制作》五、设置CSS属性——CSS滤镜3.DropShadow滤镜DropShaow是设置对象的阴影效果。DropShadow(Color=?,OffX=?,OffY=?,Positive=?)4.Shadow滤镜利用Shadow属性可以在指定的方向建立物体的投影。Shadow(Color=?,Direction=?)5.Glow滤镜当对一个对象使用glow属性后，这个对象的边缘就会产生类似发光的效果。Glow(Color=?,Strength=?)《网页设计与制作》五、设置CSS属性——CSS滤镜6.Gray,Invert,Xray滤镜Gray滤镜是把一张图片变成灰度图。Invert滤镜将对象的可视化属性全部翻转。Xray滤镜是反映出对象的轮廓并将其加亮。7.FlipH和FlipV滤镜FlipH和FlipV滤镜分别是水平反转和垂直反转，这两个滤镜没有参数。8.Wave滤镜Wave属性把对象在垂直的方向按波纹样式打乱。Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)《网页设计与制作》五、设置CSS属性——CSS滤镜9.RevealTrans滤镜RevealTrans滤镜能产生23种动态效果，可在其中随机抽用其中的一种。RevealTrans(Duration=?,Transition=?)metahttp-equiv=“Page-enter”content=“RevealTrans(Duration=3,Transition=12)”Dreamweaver提供了方便的CSS属性操作和应用功能的同时，还提供了大量现成的CSS应用模板，可以在制作网页时直接使用。《网页设计与制作》思考题1.什么是CSS？使用CSS定义网页的风格有什么好处？2.在文档的BODY标志、CSS和HTML代码中都定义了字体的颜色，它们的优先级如何确定？3.DIV标志和CSS结合起来会使网页控制更灵活多变，那么使用CSS可以在哪些方面控制DIV所定义的层次的效果。4.比较外部CSS文件和文件头CSS的优缺点？5.在Dreamweaver中有几种方法可以设置CSS属性？