网页设计之CSS教程

上节内容回顾•CSS选择符小结•CSS的位置•层叠•CSS样式的应用上节内容回顾CSS选择符小结选择符名称定义示例调用示例说明类选择符.style1{}pclass=“style1”/p选择性调用，多次调用标签选择符h1{}h1直接使用原有标签重新定义原有标签ID选择符#footer{}divid=“”/div选择新调用，一个文件调用一次包含选择符的使用h1.s2{}表示仅仅对h1中的s2才有效#toph2表示仅仅对top内部的h2才有效上节内容回顾CSS的位置1.内嵌样式spanstyle=“font-size:20pt;color:red”2.内部样式表内部样式表是写在html中的head/head中间的,跟在title/title的后面。内部样式表只对所在的网页有效。3.外部样式表外部样式表(externalstylesheet)是指CSS定义在html文件的外部，以一个文件的形式存在，文件扩展名为.css。上节内容回顾层叠一个网页中有可能应用到多个外部CSS，并且同时用了内部CSS。但是如果这些CSS的定义中有相同的名字，到底是哪个样式起作用呢？在同一个网页中定义了多个相同名称的css样式的情况叫做重叠(cascading)。对于相同名称的样式，样式的优先级从高到低是内嵌(inline)、内部(internal)、外嵌(external)、浏览器默认。其中内部CSS和外部CSS没有优先级的先后，后定义的样式覆盖前面定义的样式。上节内容回顾应用CSS样式在html中使用css样式，如果是外部css，必须先让css和html文件关联起来。使用dreamweaver关联的方法为在html文件的CSS窗口中单击附加样式表的按钮，按提示进行操作。完成外部样式表的链接以后，就可以使用样式了，即对预先定义好的样式进行调用。如果是标签选择符，无需进行调用。如果是类选择符，需要手工进行调用，可以在网页中选择相应的内容后，按右键根据提示进行操作。而对于ID选择符，它通常是和DIV标签一起使用的，一个网页中只能用一次。第十二章盒模型通过本章的学习，掌握CSS的盒模型，掌握在Dreamweaver中编写和应用盒子的方法。本章的核心有1边框2填充3边界4Div标签第十二章盒模型12.1第一个盒子盒子的三要素:padding(填充)、border(边框)、margin(边界)。padding(填充)是边框到内容的距离border(边框)是指盒子边框，可以对边框的宽度、边框样式、边框颜色进行设置。margin(边界)定义元素周围的空间。第十二章盒模型12.2盒子模型(1)sample12_2代码说明•盒子的名称为banner,在页面中使用divid=“banner”就可以调用该样式•margin用于定义页边距或者其他层之间的距离。可以简写为margin:10px20px30px40px分别代表上右下左四个边界，如果所有边界都为20px,可以直接写成margin:20px。也可以分别写margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px;第十二章盒模型•padding是指盒子的边框到内容之间的距离。和margin一样，可以分别指定上右下左边框到内容之间的距离。如果padding都为0px,可以所写为padding:0px;。分开写的格式为padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;单独指定左边框填充可以写成padding-left:0px;。padding是透明颜色，不能定义颜色。第十二章盒模型•border是指层的边框，border-right:#000000thinsolid;其含义为层的右边框颜色为#000000，宽度为细，边框样式为实线。•color用于定义字体颜色；line-height用于行高•width定义盒子的宽度，可以采用固定值，例如500px,也可以采用百分比，60%,这个宽度仅仅指的是内容的宽度，不包括margin、padding还有border。第十二章盒模型(2)边框边框有边框风格(border-style)属性、边框宽度(border-width)属性、边框颜色(border-color)属性。边框风格用来设定上右下左边框的风格,它的值如下：•none:没有边框•dotted:点线式边框•dashed:破折现式边框•double:双线式边框第十二章盒模型•groove:槽线式边框•ridge:脊线式边框•inset:内嵌效果的边框•outset:突起效果的边框边框宽度属性用于设定上右下左边框的宽度，它的值如下：•medium:默认值•thin:比medium细•thick:比medium粗第十二章盒模型•用长度单位定值。可以用绝对长度单位(cm、mm、in、pt)或者用相对长度单位(em、px)。边框颜色属性用来设定上右下左边框的颜色,例句如下:#d5{border-color:gray;border-style:solid}也可以写:#dt{border:1pxsolidred}1个像素的宽度，实线，红色第十二章盒模型在不指定设定上右下左四个边框中哪一个的时候，则相当于对四个边框设定同样的属性。可以将一个边框的属性放在一起来设定，也可以分开设定，例如对上边框进行设定：可以使用border-top，也可以使用border-top-width、border-top-styleborder-top-color对上边框的每个属性分开来进行设置，如设定上边框为宽度为1个px,实线，红色第十二章盒模型相应的语句为#d5{border-top:1pxsolidred}分开写为#dt{border-top-width:1px;border-top-style:solid;border-top-color:red}第十二章盒模型(3)填充填充属性可以同时设定上右下左填充属性。可以为上右下左填充设置为相同的宽度，示例如下：#p1{padding:1cm}也可以分别设置填充，顺序是上右下左，示例如下：#p1{padding:1cm2cm3cm4cm}第十二章盒模型(4)边界边界属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。margin会在html元素外创建”空白”，”空白”是不能放其他元素的区域，在这个区域中可以看到父元素的背景。设定左边界属性#f1{margin-left:1cm}可以为上右下左边界设置同样的宽度#f1{margin:1cm}第十二章盒模型12.3盒子的宽与高在使用CSS设计盒子的时候，可以设置宽(width)和高(height)，但是这个不是盒子本身的宽和高，而是盒子内容的宽和高。盒子的宽=左边界+左边框+左填充+宽+右填充+右边框+右边界盒子的高=上边界+上边框+上填充+高+下填充+下边框+下边界第十二章盒模型12.4综合示例sample12_3在一个页面中可以放置多个盒子，这样就可以组成完整的页面。同时页面也被分成多个盒子，可以单独的编辑。第十二章盒模型12.5CSS属性的使用•CSS样式与html属性的区别同样对一段文字设置居中对齐，红色显示，我们可以使用palign=“center”fontcolor:red居中对齐，红色显示/font/p也可以使用CSS样式sample12_4sample12_5第十二章盒模型12.6CSS属性的使用•CSS样式可以应用到各个html标签，如果该html元素不能设置此样式，则相应的样式表中的样式无效sample12_6sample12_7第十二章盒模型练习:设计一个盒子满足下面的属性(1)盒子的宽为380px,高为380px。(2)上右下左的padding分别为30px,10px,40px,20px。(3)边框样式为dotted，上下边框的宽分别为4,左右边框的宽为10.(4)左margin和右margin为auto,上margin为20px。(5)有背景图片，背景图片为横向重复。(6)样式名称、边框颜色、背景图片自己定义。第十三章CSS布局表格布局和CSS布局是网页设计中最常用的两种布局方法，它们代表了两种不同的思路和方法。表格布局是传统的网页设计方法，CSS布局是基于Web标准的网页设计方法，经常根据它的实现方法把这种网页设计思想称为DIV+CSS。CSS布局方法逐渐在现实中得到了越来越广泛的应用，各大网站纷纷对网站进行重构，由表格布局转到CSS布局。基于Web标准的网站建设方法将是网页设计技术的主流，它的核心就是CSS的布局方法；掌握了布局方法的之后，就可以轻松的学习DIV+CSS了。第十三章CSS布局13.1绝对定位绝对定位是一种CSS定位方法.绝对定位在css中的写法十position:absolute。它应用top(上)、right(右)、bottom(下)、left(左)进行定位。默认父标签的坐标起始点为原点，对整个网页进行定位布局时父标签为body,其坐标原点在浏览器左上角。如果盒子的宽度和高度确定，那么给定top(或bottom)和left两个属性就可以进行定位了。sample13_1第十三章CSS布局盒子的top属性和left属性可以确定一个盒子在页面中的位置，表13-1给出了计算的过程。表13-1盒子名称宽度高度topleft#top40010000#left200300#top.top+#top.height0100#right200100#top.top+#top.height#left.left+#left.width100200第十三章CSS布局13.2相对定位相对定位(positionrelative)需要知道相对的含义。相对(relative)是指相对与静止定位(positionstatic)时层的位置，也就是不设置position属性时的位置。如果在一个网页中使用多个层，各个层的left和top都需要计算出来。第十三章CSS布局13.3浮动浮动也是一种常用的定位方式，为掌握浮动方法的内涵和页面内容的设计，需要先理解显示(display)属性的块(block)和内嵌(inline)。1.块元素和内嵌元素HTML元素分为两种：块元素(block)和内嵌元素(inline)。对于块元素而言，总是从新行开始；元素的宽、高、padding都可以控制；默认宽度是容器的100%。常见块元素有div、p、h1、form、ul、li、ol、dt、dd和table。与块元素不同，内嵌元素可以和其他元素在同一行上；宽、高、padding、margin等不可改变。常见的内嵌元素有a、label、img、input。第十三章CSS布局用display:inline或display:block可以改变html元素的显示特性。Sample13_3sample13_4【实例说明】display是常用的属性，display:none可以定义html元素不显示，可以完成许多特殊效果的设计。Div的默认display属性为block，在应用多个div进行布局的时候，很多时候需要多个div在同一行，完成一种多列效果的设计。在进行这种多列效果设计的时候还需要保持Div的一些属性，如宽度、高度、padding、margin和border，这就不能简单的改变div标签的display为inline，而需要浮动的方法。第十三章CSS布局2.浮动设置css的float属性，作用是改变块元素(block)对象的默认显示方式。Block对象设置了float属性后，可以在保持block对象特性的基础上，使多个block对象在一行显示。就比方说这几个网站：使用