中小学网页设计课件css基础公开课教案教学设计课件案例测试练习卷题_第1页
中小学网页设计课件css基础公开课教案教学设计课件案例测试练习卷题_第2页
中小学网页设计课件css基础公开课教案教学设计课件案例测试练习卷题_第3页
中小学网页设计课件css基础公开课教案教学设计课件案例测试练习卷题_第4页
中小学网页设计课件css基础公开课教案教学设计课件案例测试练习卷题_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

这个Style定义里面的文字是20px字体，字体颜色是红色。</P>2、内部样式表(InternalStyleSheet)内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。内部样式表(InternalSytleSheet)要用到Style这个Tag，写法如下：<style

type=“text/css”><!--.样式名1{样式属性1:属性值;样式属性2:属性值;}.样式名2{样式属性1:属性值;样式属性2:属性值;}--></style>内部css<html><head><title>对HTML标记直接定义</title><styletype="text/css">h1{font-family:楷体;color:yellow}h2{font-family:黑体;color:blue}</style></head><body><font><p><h1>此行文字为黄色楷体的字体</h1><p><h2>此行文字为蓝色黑体的字体</h2></font></body></html><html><head><title>第一个CSS</title><styletype="text/css"><!--.s1{font-size:57px;color:green;}.s2{color:red;}--></style></head><body><pclass="s1">应用了s1样式,绿色，字体大小57px</p><spanclass="s2">应用了s2样式，字体为红色</span></body>3.1、引入外部CSS1——link＜head＞

＜linkrel=”stylesheet”href=”*.css”type=”text/css”＞

＜/head＞

3.2引入外部CSS1——import<styletype="text/css">@importurl(“1.css”);</style>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；}注意：如果值为若干单词，则要给值加引号：p{font-family:"sansserif";}<html><head><title>第一个CSS</title><styletype="text/css"><!--.s1{font-size:57px;color:green;}.s2{color:red;}--></style></head><body><pclass="s1">应用了s1样式,绿色，字体大小57px</p><spanclass="s2">应用了s2样式，字体为红色</span></body>自定义样式（类选择符）的命名规则：必须以.开头不能以数字开头不能包含汉字和特殊字符四、常见样式属性

1、CSS字体属性说明属性值字体风格font-stylenormal,italic(oblique)字体变量font-variantnormal,small-caps（小的大写字母）字体浓淡font-weightnormal,bold字体大小font-size字体名称font-family例如：宋体、隶书、Arial等等字体属性font综合以上字体颜色colorred,#FF00002、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尺寸%百分比in英寸cm厘米mm毫米

em1em等于当前的字体尺寸。2em等于当前字体尺寸的两倍。例如，如果某元素以12pt显示，那么2em是24pt。在CSS中，em

是非常有用的单位，因为它可以自动适应用户所使用的字体。ex一个ex是一个字体的x-height。(x-height通常是字体尺寸的一半。)pt磅(1pt等于1/72英寸)pc12点活字(1pc等于12点)

px像素(计算机屏幕上的一个点)颜色(颜色名)颜色名称(比如red)

rgb(x,x,x)RGB值(比如rgb(255,0,0))

rgb(x%,x%,x%)RGB

百分比值(比如rgb(100%,0%,0%))#rrggbb十六进制数(比如#ff0000)3、背景属性说明属性值背景颜色background-colorred，#ff0000背景图片background-imageurl()背景重复background-repeatrepeat-xrepeat-yno-repeat背景附着background-attachmentscroll、fixed背景位置background-position[left][top]背景background综合3、CSSposition属性position属性规定元素的定位类型。定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。3、CSSposition属性absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。3、CSSposition属性relative生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的LEFT位置添加20像素。static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。inherit规定应该从父元素继承position属性的值。3、CSSposition属性<html><head><styletype="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}</style></head><body><h2>这是位于正常位置的标题</h2><h2class="pos_left">这个标题相对于其正常位置向左移动</h2><h2class="pos_right">这个标题相对于其正常位置向右移动</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式"left:-20px"从元素的原始左侧位置减去20像素。</p><p>样式"left:20px"向元素的原始左侧位置增加20像素。</p></body></html>3、CSSposition属性<html><head><styletype="text/css">h2.pos_abs{position:absolute;left:100px;top:150px}</style></head><body><h2class="pos_abs">这是带有绝对定位的标题</h2><p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧100px，距离页面顶部150px。</p></body></html>3、CSSposition属性<html><head><styletype="text/css">p.one{position:fixed;left:5px;top:5px;}p.two{position:fixed;top:30px;right:5px;}</style></head><body><pclass="one">一些文本。</p><pclass="two">更多的文本。</p></body></html>第14章CSS选择符一、class选择符二、标签选择符三、ID选择符一、class选择符class选择符允许重复使用，其命名必须以“.”开头，这样的样式可以与任何标签组合使用1、通用的类选择器例如：定义：.s1{color:green；}调用：<pclass=“s1”>绿色</p><spanclass=“s1”>绿色</span>2、只能与指定标签一起使用例如：定义：p.s1{color:green；}调用：<pclass=“s1”>绿色</p><spanclass=“s1”>绿色</span>这里只有<p>标记显示为绿色。二、标签选择符指以HTML标签作为名称的选择符，通过CSS可以重新定义这些HTML标签的显示样式。这些重新定义的标签会自动按照CSS中重新的定义得样式显示1、单标签选择符例如：定义：p{color:green；}调用：<p>绿色</p><p>大家好</p>这里所有的<p>标记都显示为绿色2、包含选择符定义只有在指定标签内的标签才显示CSS样式例如：定义：pspan{color:green；}调用：<p><span>绿</span>颜色</p><h1><span>大</span>家好</h1><span>hello</span>这里的只有p标记中的span标记才显示为绿色，即字“绿”显示为绿色三、ID选择符ID的含义是标识，ID选择符可以标识网页中的元素，它可以实现的功能和CSS选择符相似。与CLASS选择符不同的是，ID选择符在一个网页中按照规范只能使用一次，并且可以被Javascript在需要的时候调用。例如：定义：#box{color:green；background-color:yellow;}调用：<divid=“box”>这里的文字是绿色的，背景颜色是黄色</div>div标记内的标记的样式例如：定义：#boxspan{color:green；background-color:yellow;}调用：<divid=“box”>大家好<span>这里的文字是绿色的，背景颜色是黄色</span></div>三种定义和调用的方法定义方法调用方法说明

h1(或其他任何存在的标签）<h1>直接使用原有标签重新定义已有标签。#f1{……}<h1id=f1>选择性调用，原则上一个文件中只能用一次。.s1{……}H1.s1{……}<h1class=s1>选择性调用，推荐。群组选择符

定义将多个CSS样式定义为相同的内容，多个CSS样式间用“，”分隔。例如：定义：p,h1,h2{color:green；}调用：<p>绿色</p><h1>大家好</h1><h2>hello<h2>这里的p、h1、h2标记都显示为绿色四、CSS伪类(pseudoclass)超链接伪类,伪类是最常用的伪类。例句：a:link{color:#FF0000}/*未被访问的链接红色*/a:visited{color:#00FF00}/*已被

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论