《网页设计之CSS》PPT课件

网页设计之CSS,教学内容与目标,内容：CSS(CascadingstyleSheet:层叠样式表)目标：掌握web开发中的CSS,CSS优势,Css可以对页面元素进行精细的设置，从而美化页面。样式主要描述元素的字体颜色、背景颜色、边框等。使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。,CSS代码语法,css样式由选择符和声明组成，而声明又由属性和值组成。选择符：又称选择器，指明网页中要应用样式规则的元素。声明：在英文大括号“”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：pfont-size:12px;color:red;,CSS代码语法,最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。为了使样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：pfont-size:12px;color:red;,CSS注释,就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。就像下面代码：,内联式css样式，直接写在现有的HTML标签中,CSS样式可以写在哪些地方呢？从CSS样式代码插入的位置看可以分为以下3种：内联式、嵌入式和外部式三种。内联式css就是把css代码直接写在标签中，如文字是红色。注意要写在元素的开始标签里，是错误的。并且css样式代码要写在style=“”双引号中，如果有多条css样式代码可以写在一起，中间用分号隔开，如文字是红色。,嵌入式css样式，写在当前文件中,嵌入式css样式，就是把css样式写在标签之间。如下面代码实现把三个标签中的文字设置为红色：spancolor:red;嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。样式可以复用，减小页面体积。,外部式css样式，写在单独一个文件中,外部式css样式(也可称为外联式)，就是把css代码写一个单独的外部文件中，文件以“.css”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到HTML文件内，如下面代码：css样式文件名称以有意义的英文字母命名，如main.css。rel=stylesheettype=text/css是固定写法不可修改。标签位置一般写在标签之内。适用于多个页面共享css，使用最频繁。,Css选择器,每一条css样式定义由两部分组成，形式如下：选择器样式;在之前的部分就是“选择器”，“选择器”指明了中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。bodyfont-size:12px;color:red;“body”就是选择器。,标签选择器,标签选择器就是html代码中的标签。例如下面代码：pfont-size:12px;line-height:1.6em;样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。为标题h1，文字“勇气”添加样式，把h1标签默认的粗体样式去掉并将字体颜色设置为红色h1font-weight:normal;color:red;,类选择器,语法：.类选择器名称css样式代码;英文圆点开头类选择器名称可以任意起名（但不要起中文）步骤：（1）使用合适的标签把要修饰的内容标记起来，如胆小如鼠（2）使用class=类选择器名称为标签设置一个类，如胆小如鼠（3）设置类选器css样式，如.stresscolor:red;,ID选择器,公开课#setGreencolor:green;ID选择器类似于类选择符，但也有一些重要的区别：为标签设置id=ID名称，而不是class=类名称。ID选择符的前面是井号（#）号，而不是英文圆点（.）。,类和ID选择器的区别,相同点：可以应用于任何元素。不同点：在一个HTML文档中，ID选择器只能使用一次，而且仅一次，而类选择器可以使用多次。代码是正确的：三年级时，我还是一个胆小如鼠的小女孩，。就一直没有这个勇气来回答老师提出的问题。而下面代码是错误的：三年级时，我还是一个胆小如鼠的小女孩，。就一直没有这个勇气来回答老师提出的问题。,类和ID选择器的区别,我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的。.stresscolor:red;.bigsizefont-size:25px;到了三年级下学期时，我们班上了一节公开课.下面的代码是不正确的#stressidcolor:red;#bigsizeidfont-size:25px;到了三年级下学期时，我们班上了一节公开课.,子选择器,子选择器，用于选择指定标签元素的子元素。把“我还是一个胆小如鼠的小女孩”加入红色边框。三年级时，我还是一个胆小如鼠的小女孩.firstspanborder:1pxsolidred;,包含(后代)选择器,包含选择器，加入空格,用于选择指定标签元素下的后辈元素。三年级时，我还是一个胆小如鼠的小女孩.firstspancolor:red;这行代码会使文字内容中的“胆小如鼠”字体颜色变为红色。注意这个选择器与子选择器的区别，子选择器仅是指它的直接后代，可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“”进行选择。作用于元素的第一代后代，空格作用于元素的所有后代。,使用后代选择器进行嵌套定义,css嵌套定义Css样式为td.top.top1strongfont-size:16px;选择器的嵌套可以减少对class和id的声明，在构建页面HTML框架时通常只给外层标记（父标记）定义class或id，只有当子标记无法利用此规则时，才单独进行声明。,通用选择器,通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中任意标签元素。例如下面代码使得html中任意标签元素字体颜色全部设置为红色：*color:red;,伪选择器,为标签的不同状态设定不同的样式A:visited：超链接点击过的样式；A:active：选中超链接时的状态；A:link：超链接未被访问时的状态；A:hover：鼠标移动到超链接时的状态A:visitedtext-decoration:none;color:red;A:activetext-decoration:noneA:linktext-decoration:noneA:hovertext-decoration:underline,分组选择符,当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为h1、span标签同时设置字体颜色为红色：h1,spancolor:red;它相当于下面两行代码：h1color:red;spancolor:red;,CSS的继承,CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如代码：pcolor:red;颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。我还是一个胆小如鼠的小女孩。p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1pxsolidred;pborder:1pxsolidred;代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。,CSS的特殊性,有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?如下面的代码：pcolor:red;.firstcolor:green;三年级时，我还是一个胆小如鼠的小女孩。p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。,CSS的特殊性,权值规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。如下面的代码：pcolor:red;/*权值为1*/pspancolor:green;/*权值为1+1=2*/.warningcolor:white;/*权值为10*/pspan.warningcolor:purple;/*权值为1+1+10=12*/#footer.notepcolor:yellow;/*权值为100+10+1=111*/,CSS样式优先级,内联样式表（标签内部）嵌入样式表（当前文件中）外部样式表（外部文件中）。,文字排版-字体,可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面来看一个例子，为网页中的文字设置字体为宋体。bodyfont-family:宋体;这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。现在一般网页喜欢设置“微软雅黑”，如下代码：bodyfont-family:MicrosoftYahei;这种字体即美观又可以在客户端安全的显示出来。,文字排版-字号、颜色,可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：bodyfont-size:12px;color:#666。,文字排版粗体、斜体、下划线、删除线,设置文字以粗体样式显示pspanfont-weight:bold;我还是一个胆小如鼠的小女孩。设置文字以斜体样式显示pafont-style:italic;我还是一个胆小如鼠的小女孩。设置下划线patext-decoration:underline;我还是一个胆小如鼠的小女孩。设置删除线.oldPricetext-decoration:line-through;,文字排版缩进,中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：ptext-indent:2em;1922年的春天，一个想要成名名叫尼克卡拉威的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。注意：2em的意思就是文字的2倍大小。,文字排版对齐,想为块状元素中的文本、图片设置居中样式，可以使用text-align样式代码。h1text-align:center;了不起的盖茨比h1text-align:left;了不起的盖茨比h1text-align:right;了不起的盖茨比,段落排版-行间距,行间距属性（line-height），如下代码实现设置段落行间距为1.5倍。pline-height:1.5em;菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为爵士乐时代吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。,段落排版-字间距,如果想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing来实现，如下面代码：h1letter-spacing:50px;了不起的盖茨比,CSS标签元素类型,在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。常用的块状元素有：、.、常用的内联元素有：、常用的内联块状元素有：、,元素分类-块级元素,在html中、和就是块级元素。设置display:block将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素。adisplay:block;块级元素特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行。元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。,元素分类-块级元素,例如div,pbackground:pink;div1div2段落1段落1段落1段落1段落1,元素分类-行内元素,在html中，、和就是典型的行内元素（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。行内元素特点：和其他元素都在一行上；元素的高度、宽度、行高及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。,元素分类行内元素,a,span,embackground:pink123333344444555555,元素分类-内联块状元素,内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。inline-block元素特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。,元素分类-内联块状元素,adisplay:inline-block;width:20px;/*在默认情况下宽度不起作用*/height:20px;/*在默认情况下高度不起作用*/background:pink;/*设置背景颜色为粉色*/text-align:center;/*设置文本居中显示*/1234,标准盒子模型,对于块级元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是块级只能排列在它的上面或者下面。,盒子模型边框,盒子模型的边框就是围绕着内容及补白的线，可以设置它的粗细、样式和颜色(边框三个属性)。为div设置边框粗细为2px、样式为实心的、颜色为红色的边框：divborder:2pxsolidred;上面是border代码的缩写形式，可以分开写：divborder-width:2px;border-style:solid;border-color:red;border-style（边框样式）常见样式有：dashed（虚线）|dotted（点线）|solid（实线）。border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;/前面的井号不要忘掉。border-width（边框宽度）中的宽度也可以设置为：thin|medium|thick（但不是很常用），最常见的还是用象素（px）。,盒子模型边框,如果想为p标签单独设置边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：divborder-bottom:1pxsolidred;可以使用下面代码实现其它三边上、右、左边框的设置：border-top:1pxsolidred;border-right:1pxsolidred;border-left:1pxsolidred;。,盒子模型-宽度和高度,盒子模型宽度和高度和我们平常所说的物体的宽度和高度是不一样的，css内定义的宽（width）和高（height），指的是填充以外的内容范围，因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度也是同理。,盒子模型边界,元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：divmargin:20px10px15px30px;也可以分开写：divmargin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px;,盒子模型边界,如果上右下左的边界都为10px;可写：divmargin:10px;如果上下边界为10px，左右为20px，可以写：divmargin:10px20px;为id名称为box1的div元素加入30象素的下边距box1box2#box1margin-bottom:30px;,盒子模型填充,元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。如下代码：divpadding:20px10px15px30px;顺序一定不要搞混。可以分开写上面代码：divpadding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px;,实验1行内元素之间的水平margin,当两个行内元素紧邻时，它们之间的距离为第一个元素的margin-right加上第2个元素的margin-left,实验2块级元素之间的竖直margin,两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。,实验3嵌套盒子之间的margin,当一个块包含在另一个块中时，便形成了典型的父子关系，其中子块的margin以父块的content为参考。,实验4将margin设置为负值,设为负值时，会使被设为负值的块向相反方向移动，甚至覆盖到另外的块上。当块之间是父子关系时，通过设置子块的margin参数为负值，可以将子块从父块中分离出来。,css布局模型,在网页中，元素有三种布局模型：1、流动模型（Flow）2、浮动模型(Float)3、层模型（Layer）,流动模型,流动（Flow）是默认的网页布局模式。默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个典型的特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。box3标题文本段,流动模型,在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。如标签a、span、em、strong都是内联元素。百度强调重点强调,浮动模型,如果想让两个块状元素并排显示，怎么办呢？设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。divwidth:200px;height:200px;border:2pxredsolid;float:left;div1div2当然也可以设置两个元素右浮动也可以实现一行显示。divwidth:200px;height:200px;border:2pxredsolid;float:right;,实验5设置浮动的div,初始代码和效果如果三个子div都没有设置浮动属性，在父盒子中，4个盒子各自向右伸展，竖直方向依次排列。,实验5设置浮动的div,设置Box1为左浮动注意：设置Box1为左浮动后，Box1的宽度不再伸展，而是能容纳下内容的最小宽度。此时，Box2的左边框与Box1的左边框重合，因为此时Box1已经脱离标准流，标准流中的Box2会顶到原来Box1的位置，而文字会围绕Box1排列。,实验5设置浮动的div,设置Box2为左浮动此时，Box2也变为根据内容确定宽度，并使Box3的文字围绕Box2排列。Box3的左边框仍与Box1的左边框重合，可以从Box1和Box2之间的背景色看出。Box1和Box2之间的空白是由两者的margin构成的。,实验5设置浮动的div,设置Box3为左浮动文字围绕盒子排列,实验5设置浮动的div,改变浮动的方向Box3移动到最右端，文字段落盒子的范围没有改变，但文字变成了夹在Box2和Box3之间。此时，如果把浏览器窗口调整变窄，Box2和Box3之间的距离就会越来越小，直到二者相接触。如果继续把浏览器窗口调整变窄，浏览器窗口就无法在一行中容纳Box1到Box3，Box3会被挤到下一行中，但仍保持向右浮动，这时文字会自动布满空间。,实验5设置浮动的div,再次改变浮动的方向将Box2改为向右浮动，Box3改为向左浮动，可以看到，但是Box2和Box3交换了位置。将浏览器窗口调整变窄，当浏览器窗口无法在一行中容纳Box1和Box3时，Box3会被挤到下一行，这时因为在HTML中，写在后面的，会被挤到下一行。,实验5设置浮动的div,全部向左浮动此时，把浏览器窗口调整变窄，结果将会怎样？,实验5使用Clear属性清除浮动的影响,清除文字围绕浮动的盒子Clear可以设置为左清除和右清除，分别表示段落的左侧不再围绕浮动框排列。Clear:left|right|both注意：对clear属性的设置要放到文字所在的盒子里，例如一个p段落的css设置中，而不要放到对浮动盒子的设置里面。,层模型,层布局模型就像是PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。CSS定义了一组定位(positioning)属性来支持层布局模型。层模型有三种形式：绝对定位(position:absolute)相对定位(position:relative)固定定位(position:fixed),层模型相对定位,要设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。如下代码实现相对于以前位置向下移动50px，向右移动100px;#div1width:200px;height:200px;border:2pxredsolid;position:relative;left:100px;top:50px;,层模型相对定位,Div设置为相对定位后的效果注意当position属性设置为relative时，left、right、top、bottom的值表示各个边界与原来位置的距离。使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子都没有任何影响。,层模型绝对定位,要为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离，即它们对其后的兄弟盒子的定位没有影响。,层模型绝对定位,如下代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。Divwidth:200px;height:200px;border:2pxredsolid;position:absolute;left:100px;top:50px;div1使用绝对定位的例子使用绝对定位的盒子以它的最近的一个已经定位的祖先元素为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。已经定位的含义是position属性被设置。,Relative与Absolute组合使用,使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位。那么可不可以相对于其它元素进行定位呢？答案是肯定的。使用position:relative。1.参照定位的元素必须是相对定位元素的前辈元素：相对参照元素进行定位box1是box2的父元素2.参照定位的元素必须加入position:relative;#box1width:200px;height:200px;position:relative;3.定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。#box2position:absolute;top:20px;left:30px;,Relative与Absolute组合使用,把box4定位到图片(box3)的底部当我还是三年级的学生时是一个害羞的小女生。#box3width:200px;height:200px;position:relative;#box4width:99%;position:absolute;top:160px;left:0px;,层模型固定定位,fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。以下代码可以实现相对于浏览器视图向右移动300px，向下移动200px。并且拖动滚动条时位置固定不变。#div1width:200px;height:200px;border:2pxredsolid;position:fixed;left:300px;top:200px;,层模型固定定位,实现浏览器视图右下角定位div层#div1width:200px;height:200px;border:2pxredsolid;position:fixed;bottom:0;right:0;,z-index空间位置,使用定位后，网页上的同一块区域可能放置多个元素，z-index属性用于调整定位时重叠块的上下位置。Z-index值大的页面位于值小的上方。在默认情况下，各元素的顺序为它们在HTML文档中出现的顺序。即后出现的元素堆叠在早出现的元素上面。Z-index属性的值为整数，可以是正数也可以是负数。默认的Z-index值为0。,盒模型代码简写,如果top、right、bottom、left的值相同，如：margin:10px10px10px10px;可缩写为：margin:10px;如果top和bottom值相同、left和right的值相同，如：margin:10px20px10px20px;可缩写为：margin:10px20px;如果left和right的值相同，如：margin:10px20px30px20px;可缩写为：margin:10px20px30px;padding、border的缩写方法和margin是一致的。,颜色值的简写,关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。例子1：pcolor:#000000;可以缩写为：pcolor:#000;例子2：pcolor:#336699;可以缩写为：pcolor:#369;,字体的简写,网页中的字体css样式也有缩写方式，下面是给网页设置字体的代码：bodyfont-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:宋体,sans-serif;这么多行的代码其实可以缩写为一句：bodyfont:italicsmall-capsbold1em/140%LucidaGrande,sans-serif;,css图像样式,基本设置：边框、大小、内外边距背景图像设置控制图像平铺方向：默认情况下，图像会自动向水平和竖直两个方向平铺，如果不希望平铺，或只希望沿着一个方向平铺，可以使用background-repeat属性来控制。改属性可以设置为4种平铺方式。Repeat:沿水平和竖直两个方向平铺No-repeat：不平铺Repeat-x：只沿水平方向平铺Repeat-y：只沿竖直方向平铺,同时设置背景图像和背景颜色,可以同时设置背景图像和背景颜色，这样，背景图像覆盖的地方就显示背景图像，背景图像没有覆盖的地方就显示背景颜色。将背景颜色设置为背景图像中最下面一排像素的颜色，这样可以绘制非常自然的渐变色背景，而且可以保证，无论页面多高，颜色都可以一直延伸到页面最下端