1、第3章 CSS样式表,学习目标了解CSS的定义方式掌握CSS文档的使用方式掌握CSS属性的使用方式掌握CSS的定位方式,DHTML 简介,DHTML,=,HTML,脚本语言JavaScript,+,+,层叠样式表CSS,指定一个网页的元素,决定元素的大小颜色和位置,操纵网页的元素,DHTML 是制作动态 HTML 页面的技术！,DHTML 的功能,设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小,设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容,设计人员可以用 x 座标和 y 座标来指定网页元素的确切位置（绝对位置或相对位置）,设计人员可以将网页中的表格绑定到数据库,设
2、计人员可以将选择的字体和网页一起封装,Web 程序员可以编写脚本以更改网页的样式和内容,在 DHTML 中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程,动态样式,动态内容,定位,数据绑定,可下载字体,脚本,对象结构,CSS定义及功能,CSS是Cascading Style Sheets（层叠样式表单）的简称。通常简称为样式表。顾名思义，它是一种设计网页样式的技术。在制作页面时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。,CSS功能,CSS一个样式表由样式规则组成，以告诉浏览器怎样去呈现一个文档简而言之，CSS就是要对网页的显示效果实现
3、与Word一样的排版控制。一个段落： 字体：红色；背景：黄色；有一个2个像素实线边框；字体大小为4cm;Id class style name,设置属性 这个段落应用了样式这个段落按默认样式显示,什么是样式？,指定显示样式,CSS语言语法,格式属性：值;属性1:值1;属性2.。;属性和值使用冒号“：”， 多个属性之间使用分号“；”单位颜色：#rgb #aaffaa red green rgb(255,0,10)大小：em 2em px pt % pc cm mm inURL (url)注释 /* */ 在其中不要再包含注释,常用的样式属性,上次课的主要内容,框架：嵌套框架，框架内内容的显示DH
4、TMLCSS：属性：值;属性1:值1;属性2.。;属性和值使用冒号“：”， 多个属性之间使用分号“；”,一CSS的四种设置方式,内联样式表：在HTML元素标签中使用style属性内联每个HTML标签都可以加样式嵌入（内嵌）样式表：通过HTML的标签将CSS嵌入到HTML中使用可以控制当前页面的所有样式外部样式表：将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用。多个页面都可以使用输入样式表：可以将一个样式文件输入到另外一个样式文件的中，或将一个样式文件输入到元素中import url(css文件)他们的优先级别：内联的高于其它的， 其它的和加载的
5、顺序有关,内联样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。,/*关键代码-*/ 剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以,应用样式 P font-size:20px; color:blue; text-align:center 我是段落 1我是段落 2我是段落 3我们的样式绝对统一,嵌入（内嵌）样式-1,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所
6、以同类标签都采用统一样式，这时应采用内嵌样式。,用分号隔开,CSS的四种设置方式,内联样式表：在HTML元素标签中使用style属性内联每个HTML标签都可以加样式嵌入（内嵌）样式表：通过HTML的标签将CSS嵌入到HTML中使用可以控制当前页面的所有样式外部样式表：将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用。多个页面都可以使用输入样式表：可以将一个样式文件输入到另外一个样式文件的中，或将一个样式文件输入到元素中import url(css文件)他们的优先级别：内联的高于其它的， 其它的和加载的顺序有关,样式表四种方式的关系,样式表可以分为
7、内联、内嵌、外部和输入四种定义方式，而这几种方法又是互相影响的。内联样式表是将样式信息直接定义在网页中特定的标签和元素上，例如一个表格、一个图片或一段文字，这个样式信息并不会被页面上其它部分的元素使用。内嵌样式表是指将一些样式定义的信息块放在HTML文件内的头部，可以在当前网页中使用这些定义信息外联样式表即将一些样式信息定义在一个单独的外部文件CSS中，可在整个站点的所有文件中链接此文件并使用其中定义的样式；输入样式表：可以将一个样式文件输入到另外一个样式文件的中，或将一个样式文件输入到元素中这四种定义方式又是互相继承的关系，它们的优先级是内联其他三种，另外三种与加入的顺序有关，同时各元素会自
8、动继承上级父元素中定义的样式。,什么是样式选择器,Selector /* Selector 是样式选择器 */property:value; /* color:red; */ property:value; /* font-size:4cm; */Selector:当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。,二 如何定义CSS样式,定义CSS 语法格式1 选择符 属性:属性值; 属性:属性值; . 有六种形式：HTML样式选择器类选择器ID选择器关联选择器组合选择器伪元素选择器,H
9、TML选择器,HTML有标签， CSS就用选择器选择符就是赋予内部或外部样式表的名字HTML的标签，用来改变一个指定标签的样式任何一个元素都可以是一个CSS选择符,/*-关键代码-*/P /*设置样式：字体和背景色*/font-family: System; font-size: 18px;color: #3333CC;H2 background-color: #CCFF33;text-align: center; 品种特征方面： 1、蛋鱼：蛋鱼.。 2、龙睛：龙睛.。 3、高头：高头.。,HTML选择器（内嵌样式）,应用H2样式,应用P样式,类选择器,同一个选择器能有不同的类，因而允许同一个
10、元素有不同的样式定的方法tag.类名 （类名是自定义的,如果不加tag则代表所有HTML元素） （同一个元素可以使用多个类，类名之间使用空格分开）,例：3.htm,css的使用 H2.s1 color: red 这是没有改变的 H2 这是改变为红色的 H2 ,例：4.htm,css的使用 .s2 color:blue 这是蓝色的 P这是蓝色的 H2 ,上次课的主要内容,CSS设置的四种方式：内联样式表，嵌入样式表，外部样式表，输入样式表CSS样式选择器： HTML选择器和类选择器,ID选择器,在HTML页面中， ID属性指定了某个单一元素，id属性就用来对单一元素定义单独样式一个HTML页面中
11、，ID属性值要唯一#idname (idname是自定义的名称),例：5.htm,css的使用 #s3 font-style:bold; color:red; 这是红色的 P这是红色的 H2,关联选择器,关联选择器只不过是一个用空格隔开的两个或更多的单一选择器合成的字符串因为层叠顺序的规则，它们的优先权比单一的选择符大必须按关联关系使用，不能有反顺序只要能保持关联关系就可以，不管是在多少层,组合选择器,为了减少样式表的重复声明，组合是允许的只要使用英文逗号（,）隔开每个选择符就可以了,伪元素选择器,伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义方式目前只有a和p两处HTML元素可
12、以使用使用时的语法标签：伪元素 标签.类名：伪元素a:link 没有任何运作前的状态a:hover 光标移到到超链接上的状态a:active: 选择超链接的状态a:visited 访问过超连接的状态p:first-letter 一个段落中首个字母的状态 P:first-line 一个段落中首行的状态,样式规则的继承,所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。,样式规则的优先级,关联ID选择器CLASS选择器HTML标签选择器,编写CSS的方式,CSS的语句是内嵌在HTML文档内的。所以，编写CSS的方法和编写HTML文档的方法是一样的。可以用任何一种文本编辑工具
13、来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具FrontPage,DW等，都可以用来编辑CSS文档。,CSS代码怎样加入到HTML文档中呢？,1、把CSS代码放到标记中 其中中的type=text/css 的意思是中的代码是定义样式表单的。2、把CSS代码写在HTML的标记行内比如下面的代码： 蓝色14号文字这是采用的格式把样式写在html中的任意行内，这样比较方便灵活。,CSS文件怎样加入到HTML文档中呢？,3、把编辑好的CSS代码保存成“*.CSS”文件，然后在html文件的标记中定义引入该文件定义的格式是这样的： 例如,三、设置CSS属性,样式表的另一个优势在
14、于它可以精确的定义和控制元素的外观。这就要归功于样式表中的定位单位，通常的元素都可以设定相应的内容宽、高、左右边距以及字体尺寸等等。它们都遵循相同的单位格式，一般把单位分为相对单位和绝对单位。,绝对单位,Web页上常用的绝对单位有厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派克(pc)。绝对长度通常不能适应各种浏览器的多样性变化，因此应用的比较少。,相对单位,Web页上常用的单位是相对单位，所谓相对单位是指元素尺寸相对于浏览器的的系统默认值来相应的缩放。包括：像素(px)、em和ex。px是相对于浏览者的计算机屏幕分辨率来显示的，Windows用户一般使用96像素/英寸的分辨率。em
15、则是相对于当前对象中文本M的字体尺寸大小，如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认M字体尺寸。ex是相对于当前对象中文本x的字体尺寸大小，如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认x字体尺寸。,1、设置字体（font）属性,font: | | ,例 6.htm,字体属性的使用 字体属性的使用abcABC字体属性的使用 ,注意：,例子中使用了属性直接定义的方法，这样会简化代码的书写，但要注意属性值的排放顺序。其顺序为“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”，其中
16、没有定义的以默认值显示。,3、文本属性,例9.htm，文字重新排版,文本属性网海茫茫，怎样使自己的网页成为一道亮丽的风景线让人过目不忘？怎样使自己的网页的风格独特一致？怎样免除众多HTML标志属性设置的烦恼？CSS层叠样式单可以助你一臂之力！ ,其中，letter-spacing设置了字间距为1em；text-align设置了对齐方式为居中对齐；text-indent设置了缩进格为4em；line-height设置了行高为17px。,3、CSS的颜色和背景属性,background: | | | | ,例 7.htm ，为文字设置颜色，添加图像背景。,设置颜色和背景属性 pcolor:red;
17、background-image:url(girl.GIF); background-repeat:no-repeat; background-position:top center 颜色和背景属性的使用颜色和背景属性的使用 ,5 边框属性,CSS可以通过border属性设置边框的宽度、样式和颜色，但是border只能使四条边框的属性值是一样的。在例 4-12.htm中已经使用了border属性，“border:2px ridge #FF0000”，定义了边框的宽带、样式、颜色。,边框风格属性,可以通过边框风格属性border-style设定上下左右边框的风格，该属性用于设置一个元素边框的样式
18、，而且必须用于指定可见的边框。可以使用1到4个关键字，如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格,各边的风格使用的属性值,none：没有边框，无论边框宽度设为多大dotted：点线式边框dashed：破折线式边框solid：直线式边框double：双线式边框groove：槽线式边框ridge：脊线式边框inset：内嵌
19、效果的边框outset：突起效果的边框,边框宽度属性,可以通过边框宽度属性border-width设定上下左右边框的宽度，该属性用1到4个值来设置元素的边界，值是一个关键字或长度，不允许使用负值长度。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果只给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了
20、可以使用长度单位定值外，还可以用medium（是默认值）、thin（比medium细）或thick（比medium粗）值。,边框颜色属性,可以通过边框颜色属性border-color设定上下左右边框的颜色，可以使用1到4个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等,略写的边框属性,CSS属性border是边框属性的一个快捷的综合写法，是一个用于设置一个元素边框的宽度、式样和颜色的略写，它包含border-width，border-style和border-color属性。 边框属性bord
21、er只能设置四种边框，也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。,边框属性,6 CSS中常见的控制列表的属性,7 盒子模型 概述,使用“DIV+CSS”对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别。因为现在的网站设计标准中，已经不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。通过使用div盒子模型结构将各部分内容划分到不同的区块，然后用css来定义盒子模型的位置
22、、大小、边框、内外边距、排列方式等。简单地说，div用于搭建网站结构（框架）、css用于创建网站表现（样式/美化）。该标准简化了HTML页面代码，获得一个较优秀的网站结构，有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用div布局，例如数据页面、报表之类的页面，还是使用HTML的表格会比较方便，web标准里并没有说要抛弃table。,DIV+CSS标准的优点,表现和内容相分离代码简洁，提高页面浏览速度易于维护和改版提高搜索引擎对网页的索引效率,盒子模型,每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒
23、子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。,布局中的主要样式,fontline-heightcolormarginpaddingbordertext-alignbackground,width:heightfloat:cleardisplay,上次课的主要内容,字体，颜色和背景，边框，列表框属性盒子模型：margin，padding，z-index，Overflow，float,作业,招生就业网4-6人就业和招生分为：本科，硕士和研究生在线交流参考：辽宁大学招生就业网寻找源代码，然后画出网页的每个网页,定位
24、属性,区块属性(区块模型),区块框浮动,虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。,设置浮动,行框和清理,在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。,使用区块框设计页面布局,区块居中设计高度和宽度固定的区块居中（position）高度和宽度可变的区块居中(margin)布局页面局中设置两列浮动的布局设置三列浮动的布局设置多列浮动的布局,
