网页设计课件css基础.ppt

下载文档

ID：48744997

大小：105.50 KB

页数：33页

时间：2020-01-21

上传者：U-3713 收藏

资源描述：

《网页设计课件css基础.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

第13章CSS基础网页设计与制作 CascadingStyleSheet层叠样式表网页包括的内容和样式。CSS就是让内容和样式分离开来，HTML只控制网页的内容，内容的样式由CSS来控制。 CSS的优点可以更加精细的控制网页的内容。比HTML更加丰富。便于重用、修改基于Web标准的网页设计方法的设计基础 CSS样式的优点：只修改一个.css文件就可以改变页数不定的外观和格式（避免了一个一个网页的修改，大大减少了重复劳动的工作量。）可以“随心所欲”地控制页面布局和外观；在所有浏览器和平台之间具有较好的兼容性；精简网页，提高下载速度（简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。 一、CSS分类CSS按其位置可以分成三种：内嵌样式(InlineStyle)内部样式表(InternalStyleSheet)外部样式表(ExternalStyleSheet) 1、内嵌样式(InlineStyle)InlineStyle是写在Tag里面的。内嵌样式只对所在的Tag有效。这个Style定义里面的文字是20px字体，字体颜色是红色。

2、内部样式表(InternalStyleSheet)内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。内部样式表(InternalSytleSheet)要用到Style这个Tag，写法如下： 内部cssh1{font-family:楷体;color:yellow}h2{font-family:黑体;color:blue}

此行文字为黄色楷体的字体

此行文字为蓝色黑体的字体

应用了s1样式,绿色，字体大小57px

应用了s2样式，字体为红色 3.1、引入外部CSS1——link＜head＞＜linkrel=”stylesheet”href=”*.css”type=”text/css”＞＜/head＞ 3.2引入外部CSS1——import@importurl(“1.css”); Import和link的区别两种外部样式表的调用方法虽然有所不同，但它们的效果是一样的，只是嵌入CSS外部表的时候，import把CSS文件的内容复制到HTML文件中，link直接向CSS文件读取所定义的CSS样式。小的CSS文件采用import，大的文件采用link，在实际应用中，CSS文件一般很小，两种方法差别很小。 使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：样式代码可以复用。一个外部CSS文件，可以被很多网页共用。便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。提高网页显示的速度。（外部的样式表会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。 二、层叠(Cascading)CSS第一个字母，是Cascading，意为层叠。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。Cascading的顺序是：内嵌样式表(InlineStyle)(优先级最高)内部样式表(InternalStyleSheet)外部样式表(ExtenalStyleSheet)importlink浏览器缺省(browserdefault)(优先级最低) 三、基本语法一个样式(Style)的语法由三部分构成：Selector(选择符)，属性(Property)，属性值(Value)。selector{property:value；property:value；} 应用了s1样式,绿色，字体大小57px

应用了s2样式，字体为红色自定义样式（类选择符）的命名规则：必须以.开头不能以数字开头不能包含汉字和特殊字符 四、常见样式属性1、CSS字体属性说明属性值字体风格font-stylenormal,italic(oblique)字体变量font-variantnormal,small-caps（小的大写字母）字体浓淡font-weightnormal,bold字体大小font-size字体名称font-family例如：宋体、隶书、Arial等等字体属性font综合以上字体颜色colorred,#FF0000 2、CSS常用文本属性说明属性值文本对齐text-alignleft、right、center、justify(两端对齐)文本修饰text-decorationnone、underline、overline、line-through文本缩进text-indentlength、percentage行高属性line-heightnormal、length、percentage字间距letter-spacingnormal、length大小写text-transformuppercase、lowercase、capitalize;nonelength(长度，可以用绝对单位(cm,mm,in,pt, pc)或者相对单位(em,ex,px))percentage(百分比，相当于父对象宽度的百分比) 相对长度单位em相对于当前对象内文本的字体尺寸ex相对于字符“x”的高度。通常为字体高度的一半px像素（Pixel）%百分比Percentage绝对长度单位pt点（Point）pc派卡（Pica）。相当于我国新四号铅字的尺寸in英寸（Inch）cm厘米（Centimeter）mm毫米（Millimeter）单位换算：1in=2.54cm=25.4mm=72pt=6pc 3、背景属性说明属性值背景颜色background-colorred，#ff0000背景图片background-imageurl()背景重复background-repeatrepeat-xrepeat-yno-repeat背景附着background-attachmentscroll、fixed背景位置background-position[left][top]背景background综合 第14章CSS选择符一、class选择符二、标签选择符三、ID选择符 一、class选择符class选择符允许重复使用，其命名必须以“.”开头，这样的样式可以与任何标签组合使用1、通用的类选择器例如：定义：.s1{color:green；}调用：绿色

绿色2、只能与指定标签一起使用例如：定义：p.s1{color:green；}调用：绿色

绿色这里只有

标记显示为绿色。 二、标签选择符指以HTML标签作为名称的选择符，通过CSS可以重新定义这些HTML标签的显示样式。这些重新定义的标签会自动按照CSS中重新的定义得样式显示1、单标签选择符例如：定义：p{color:green；}调用：

绿色

大家好

这里所有的

标记都显示为绿色 2、包含选择符定义只有在指定标签内的标签才显示CSS样式例如：定义：pspan{color:green；}调用：

绿颜色

大家好

hello这里的只有p标记中的span标记才显示为绿色，即字“绿”显示为绿色 三、ID选择符ID的含义是标识，ID选择符可以标识网页中的元素，它可以实现的功能和CSS选择符相似。与CLASS选择符不同的是，ID选择符在一个网页中按照规范只能使用一次，并且可以被Javascript在需要的时候调用。例如：定义：#box{color:green；background-color:yellow;}调用：这里的文字是绿色的，背景颜色是黄色

div标记内的标记的样式例如：定义：#boxspan{color:green；background-color:yellow;}调用：大家好这里的文字是绿色的，背景颜色是黄色

直接使用原有标签重新定义已有标签。#f1{……}选择性调用，原则上一个文件中只能用一次。.s1{……}H1.s1{……}选择性调用，推荐。 群组选择符定义将多个CSS样式定义为相同的内容，多个CSS样式间用“，”分隔。例如：定义：p,h1,h2{color:green；}调用：

绿色

大家好

hello

这里的p、h1、h2标记都显示为绿色 四、CSS伪类(pseudoclass)超链接伪类,伪类是最常用的伪类。例句：a:link{color:#FF0000}/*未被访问的链接红色*/a:visited{color:#00FF00}/*已被访问过的链接绿色*/a:hover{color:#FFFF00}/*鼠标悬浮在上的链接橙色*/a:active{color:#0000FF}/*鼠标点中激活链接蓝色*/ CSS伪类的语法有两种第一种：selector:pseudo-class{property:value}例如：a:link{color:red}第二种：selector.class:pseudo-class{property:value}例如：a.c1:link{color:red} 其他伪类Selector:first-letter{property:value}Selector:first-line{property:value}例如：p{font-size:30px;color:blue;}p:first-letter{color:red;font-size:200%;float:left;}p:first-line{color:pink;font-variant:small-caps;letter-spacing:200%;} 作业1：用CSS完成下列效果1、文字为粗体，12px，斜体，带删除线（line-through），黑体2、文字中都是大写字母，首行缩进为30px，字符间距为5px，行高为14px，文字水平对齐方式为右对齐。 作业2自己建一个css文件，完成下列样式的定义（1）h1：红色，字体大小12px，bold。（2）#f3:幼圆，水平居中，字符间距：10px，下划线。（3）.s1:绿色，段落行距：8px，首行缩进：25px。在html中调用这个css文件中的这三个样式。