第3讲CSS基础.ppt

3.1CSS的概念和特点3.2CSS样式表的定义3.3在网页中插入样式表的方法3.4多重样式表的优先级3.5样式表的特殊用法3.6样式表的常用属性,第3讲CSS基础,CSS（CascadingStyleSheets）层叠样式表单，简称样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言（或称为一种技术或工具）。样式就是格式，在网页中，像文字的大小、色彩以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。示例一示例二,3.1CSS的概念和特点一、什么是CSS,CSS（CascadingStyleSheets）可以将网页内容结构和格式控制相分离，使得网页可以仅由内容构成，而将所有网页的格式控制指向某个CSS样式表文件，大大地方便了网页的查看和修改。主要特点有：1、只需要修改一个.css文件，就可以改变所有使用该样式页面的外观和格式。2、可以随意控制页面的布局和外观，能够精确地控制文档中的布局、字体、颜色、背景、图像等效果的显示。3、在所有的浏览器和平台之间具有较好的兼容性。4、精简网页，提高下载速度。外部的样式表会被浏览器保存在缓存里，因而提高了网页的下载速度，也减少了代码数量。,二、CSS的特点,1.为HTML标记定义样式表在HTML文档的标记内插入一个.标记，在其中定义样式。其格式为：/*指明该标记内部嵌入的是以文本形式出现的css样式*/*样式表由放在中的多个“属性:属性值;”组成*/【例3-1】注意：一旦为标记定义了样式表，则此html文档中的所有该标记将以同样的样式进行显示。,3.2CSS样式表的定义一、内部样式表定义(CSS样式表的代码置于HTML文件内部),2.用CLASS（类）名定义样式表用类名能够把相同的标记分类定义为不同的样式。其格式为：【例3-2】注意：用类名定义的样式表在使用时一定要有引用，即：class=类名,3.用ID(标识符)名定义样式表用ID(标识符)名也能够把相同的标记分类定义为不同的样式。格式为：【例3-2】注意：在有些情况下使用ID会与javascript中的ID发生冲突，使得引用可能不起作用或报错，而使用CLASS则不会发生。,外部CSS样式表是指CSS样式表的代码置于HTML文件外部，并以独立于html文件的形式单独保存为扩展名为.css的文本文件中。其优点是可以在网站的每个网页中引用该.css文件中的样式，从而保持整个站点风格上的一致。例：建立文件【mycss.css】,内容如下：.myfontfont-family:楷体_GB2312;color:blue;text-decoration:underline;font-style:italic,二、外部CSS样式表定义,1、CSS文件的编辑和保存可以使用记事本等文本编辑器进行建立和编辑，选择保存为扩展名.css的文件。2、CSS文件的编程规范编写CSS文件代码时，除遵循HTML编程规范外，还应注意：样式分行书写，如：h3font-family:宋体;color:blue;text-decoration:overline;font-style:italic应书写为：h3font-family:宋体;color:blue;text-decoration:overline;font-style:italic,三、外部CSS样式表的基本操作,可以对一个属性定义多个属性值，使用逗号分离：h3font-family:“宋体”,“隶书”,“黑体”执行时浏览器顺序读取属性值，直到遇到一个能够识别的字体，如果没有则以当前默认的字体显示。运用注释语句在源程序的适当位置插入注释语句是一种良好的编程习惯。CSS注释语句的格式为：/*注释语句的具体内容*/（和C语言等的类似）。注释语句会被浏览器忽略，可以包含任何内容。,指在HTML标记中直接插入style属性，即将样式定义直接放在要设定样式的标记后面。用这种方法，可以很简单的对某个标记单独定义样式，但作用范围只可控制该标记。其格式为：【例3-3】注：嵌入式样式表只能够针对具体的标记起作用，没有体现css样式表的优越性，应用比较少。,3.3在网页中插入CSS样式表的方法一、插入内部CSS样式表的方法1、嵌入式方法,2、内联式方法是把样式表定义语句直接写在当前页面的如下位置：【例3-4】注：内联式样式表只针对当前页面的标记起作用。,是指把已经建立好的外部“.css样式表”文件，使用标记链接到当前页面，以便应用其中的样式。此处的标记必须放到页面的.区内。格式为：.,二、插入外部CSS样式表的方法1、外联（链）式,标记的属性说明：rel=stylesheet：指明被链接的外部css文件和当前html文件的关系。type=“text/css”:指明被链接的外部css文件的类型。href=“.css样式表文件URL”：指明被链接的外部css文件的URL地址。【例3-5】,外联式css样式表的使用说明：1、使用外联式样式表的优点：可以通过一个外部css样式文件管理网站中的多个页面，从而使整个站点的所有页面在风格上保持一致，也避免了不同页面的重复设置。2、一般在网站建设期初，就要首先对整个站点的版式样式进行总体的统一规划，并建立独立的css文件；以后如需对整个站点的版面样式做重大调整时，直接修改css文件，非常方便。,导入外部样式表就是当浏览器在读取HTML文件时，复制一份样式表到这个HTML文件中。导入外部样式表是在内部样式表的里使用importurl语句导入一个外部样式表文件。其格式为：【例3-6】,2、导入式方法,前面介绍的在网页中插入CSS样式表四种方法的优先级“从高到低”为：嵌入式、内联式、外联式、导入式。浏览器将按照上述顺序执行样式表的规则。【例3-7】,3.4CSS样式表应用的优先级,伪类是特殊的类，伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，伪类能自动地被支持CSS的浏览器所识别。其语法规则如下：选择符：伪类属性：值举例：定义超级链接（a锚）的伪类，在页面设计中最常用的是4种a标记伪类，分别表示动态链接的4种不同的状态，即link（未访问链接）、visited（已访问的链接）、active（激活的链接）、hover（鼠标停留在上方的链接）a:linkcolor:purple;text-decoration:nonea:visitedcolor:red;text-decoration:nonea:hovercolor:blue;text-decoration:underlinea:activecolor:green;text-decoration:underline【例3-8】,3.5CSS样式表特殊用法一、CSS样式表的伪类,伪元素是特殊的元素，能自动地被支持CSS的浏览器所识别。其语法规则如下：选择符：伪元素属性：值示例：首行伪元素：first-linep:first-linecolor:red首字母伪元素：first-letterh3:first-lettercolor:teal【例3-9】,二、CSS样式表的伪元素,为了减少样式表的重复声明，可以把具有共同属性和属性值的多个标记的声明组合在一起，标记之间用逗号分开。示例：h1,h2,h3,h4color:red;font-family:宋体,三、CSS样式表的标记编组,1.字体类型（font-family）语法：font-family:字体名参数：多个字体名称按优先顺序排列，以逗号隔开。说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”列表中所列出的字体名称。示例：h2font-family:华文新魏,楷体_GB2312;color:red;,3.6样式表的常用属性一、字体属性（FontProperties）,2.字号（font-size）语法：font-size:绝对尺寸|相对尺寸|百分数参数：绝对尺寸根据对象字体进行调节。除可选具体数值，还可选xx-small|x-small|small|medium|large|x-large|xx-large相对尺寸是相对于父对象中字体尺寸进行相对调节（smaller|larger）。百分数取值是基于父对象中字体的尺寸的百分比大小。,3.字体样式（font-style）语法：font-style:italic|oblique|normal参数：italic为斜体。对于没有斜体变量的特殊字体，将应用oblique（倾斜）。normal为正常的字体，声明此值将取消之前设置，是默认值。说明：将文本字体设置为斜体。示例：h3font-style:italic,4.字体的粗细（font-weight）语法：font-weight:bold|bolder|lighter|normal|number参数：bold为粗体，lighter为更细，normal为正常的字体，缺省值为normal，数值可为100-900（普通为400，900为最粗）。说明：设置文本字体的粗细。作用由用户端系统安装的字体的特定字体变量映射决定，系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。示例：Pfont-weight:boldh1font-weight:800,5.字体变形（font-variant）语法：font-variant:normal|small-caps参数：normal为正常；small-caps为小型大写字母，即当文字中字母是大写时，该值会显示比小写字母稍大的大写字母。说明：设置字母的大小写。示例：h1font-variant:normal综合示例【3-10】,1.字间距（word-spacing）语法：word-spacing:length|normal参数：length是由数字和单位标识符组成的长度值。normal恢复为默认间距。说明：设置对象中的单词之间插入的间距数。示例：h3word-spacing:10pxpword-spacing:normal,二、文本属性（TextProperties）,2.字母间距（letter-spacing）语法：letter-spacing:length|normal参数：同上说明：设置对象中的字符之间的间隔。示例：h3letter-spacing:8px,3.行高（line-height）语法：line-height:length|normal参数：length为由百分比数字或由数字、单位标识符组成的长度值。其百分比取值是基于字体的高度尺寸。normal为默认行高。示例：用数字设定行高的时候，浏览器将利用字号来确定行距，它将字号乘以设定的参数值。所以，在下例中，行高将是24points。bfont-size:12pt;line-height:2,4.文本首行缩行（text-indent）语法：text-indent:length参数：length为百分比数字或长度值。说明：设置对象中的文本段落的缩进。示例：ptext-indent:2em/*本段第1行的起始位置比其正常位置缩进了2个字符高度*/,5.文本水平对齐（text-align）语法：text-align:left|right|center|justify参数：left为左对齐，right为右对齐，center为居中，justify为两端对齐。说明：设置对象中文本的水平对齐方式。示例：利用文字对齐属性，可以控制段落的水平对齐。本属性只用于整块的内容，如、和等。h4text-align:center,6.文本转换（text-transform）语法：text-trasform:none|capitalize|uppercase|lowercase参数：none（使用原始值）、capitalize（单词第一个字母大写）、uppercase（单词所有字母大写）、lowercase（单词所有字母小写）。,7.文本修饰（text-decoration）语法：text-decoration:none|underline|overline|line-through|blink参数：none(无)、underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁）。,综合示例【3-11】,三.边框属性（BordersProperties）(1)所有边框宽度（border-width）语法：border-width:medium|thin|thick|length参数：medium为默认宽度，thin为小于默认宽度，thick为大于默认宽度。length由数字和单位组成的长度值，不可为负值。(2)边框样式（border-style）语法：border-style:none（无）|hidden|dotted（虚线点）|dashed（短线组成的虚线）|solid（实线）|double（双线）|groove（凹线）|ridge（3d山脊线）|inset（沉入感）|outset（浮出感）说明：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上、下，第二个用于左、右。如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。,(3)边框颜色（border-color）语法：border-color:color说明：如果border-width等于0或border-style设置为none，本属性失去作用。示例：h4border-color:#ff0033;border-width:thickpborder-color:green;border-width:3px示例3-14,1.颜色（color）语法：color:color说明：设置对象的文本颜色，即设定对象的前景颜色。用颜色名称指定color可能不被一些浏览器接受。示例：pcolor:redbcolor:#333399/*将所有的加重字以设定的颜色显示*/2.背景色（background-color）语法：background-color:color|transparent参数：color指定颜色，transparent使背景色透明。说明：设置对象的背景颜色，即设定对象后面固定的颜色。示例：pbackground-color:silverbodybackground-color:#98ab6f,四、颜色与背景属性,3.背景图像（background-image）语法：background-image:url(url)|none参数：url为使用绝对或相对地址指定背景图像的地址。none无背景图。说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到标记。示例：bodybackground-image:nonebodybackground-image:url(background.gif)bodybackground-image:url(http:/F,4.背景重复（background-repeat）语法：background-repeat:repeat|no-repeat|repeat-x|repeat-y参数：repeat为背景图像在纵向和横向上平铺，no-repeat为背景图像不平铺，repeat-x为背景图像在横向上平铺，repeat-y为背景图像在纵向平铺。说明：设置对象的背