购买

¥ 20.0

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 网页制作css样式(修改版)

网页制作css样式(修改版).ppt

网页制作css样式(修改版)

中小学精品课件
2019-03-05 0人阅读 举报 0 0 暂无简介

简介:本文档为《网页制作css样式(修改版)ppt》,可适用于IT/计算机领域

CSSCSS是CascadingStyleSheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义它是一种设计网页样式的工具。借助CSS的强大功能网页将在您丰富的想象力下千变万化。实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的:选择符{属性:属性值}CSS注释以"*"开头以"*"结尾样式表能为我们做什么可以将格式和结构分离。可以以前所未有的能力控制页面布局。可以制作体积更小下载更快的网页。可以将许多网页同时更新比以前快更容易。浏览器将具有更友好的界面用CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式利用定位可以使页面布局更加规范、好看利用滤镜可以使页面产生多媒体效果。局部引用样式表<HTML><STYLETYPE=“textcss”><!H{color:greenfontfamily:impact}P{background:yellowfontfamily:courier}><STYLE><HEAD><TITLE>局部引用样式表<TITLE><HEAD><BODY><H>局部引用H标记<H><P>局部引用P标记<P><BODY><HTML>定义H标签此H标签会被样式表中的H所替换此P标签会被样式表中的P所替换定义P标签外部链接样式表<HTML><HEAD><TITLE>外部样式表的使用<TITLE><LINKREL=stylesheetHREF="mystylescss"TYPE="textcss"><HEAD><BODY><H>欢迎来到ASP<H><P>这里是动态网页制作<P><BODY><HTML>mystylescss文件内容如下:H{color:greenfontfamily:"黑体"}P{background:yellowfontfamily:"宋体"}Rel指明类型href指明引用文件的名称在行内加入样式<HTML><HEAD><TITLE>在行内加入样式<TITLE><HEAD><BODY><HSTYLE="color:orangefontfamily:宋体">欢迎来到ASP<H><PSTYLE="background:yellowfontfamily:黑体">动态网页<P><BODY><HTML>CSS类选择符用类选择符你能够把相同的元素分类定义不同的样式定义类选择符时在自定类的名称前面加一个点号。假如要两个不同的段落一个段落向右对齐一个段落居中可以先定义两个类:pright{textalign:right}pcenter{textalign:center}然后用不在不同的段落里只要在HTML标记里加入定义的class参数:<pclass="right">这个段落向右对齐<p><pclass="center">这个段落是居中排列的<p>注意:类的名称可以是任意英文单词或以英文开头与数字的组合一般以其功能和效果简要命名。CSS类选择符类选择符还有一种用法在选择符中省略HTML标记名这样可以把几个不同的元素定义成相同的样式:center{textalign:center}(定义center的类选择符为文字居中排列)这样的类可以被应用到任何元素上。下面我们使h元素(标题)和p元素(段落)都归为“center”类这使两个元素的样式都跟随“center”这个类选择符:<hclass=“center”>这个标题是居中排列的<h><pclass=“center”>这个段落也是居中排列的<p>注意:这种省略HTML标记的类选择符是我们以后最常用的CSS方法使用这种方法可以很方便的在任意元素上套用预先定义好的类样式。一个CSS例子<HTML><HEAD><TITLE>这是一个CSS的例子<TITLE><HEAD><BODY><H>WelcomeToASP<H><P>这是一个CSS的例子<P><BODY><HTML>在<HTML>和<BODY>标签之间插入以下代码:<STYLETYPE="textcss"><!H{color:greenfontsize:pxfontfamily:"黑体"}P{textindent:cmbackground:yellowfontfamily:"宋体"}><STYLE>CSS例子<html> <head>  <title>cssword<title>  <style> <!   div{width:filter:blur(add=true,direction=,strengh=)}>  <style> <head> <body> <div> <pstyle="fontsize:fontstyle:boldcolor:red">hongen<p> <div> <body><html>定义DIV范围内的样式包括宽度(width)、模糊滤镜属性(blur)CSS字体属性<pstyle=“fontfamily:宋体”>hongen<p><pstyle=“fontstyle:italic”>hongen<p><pstyle=“fontstyle:obliquefontweight:boldfontsize:pt”>hongen<p>颜色和背景属性属性属性含义属性书写格式属性值color前景色P{color:blue}颜色backgroundcolor背景色Body{backgroundcolor:yellow}颜色Backgroundimage背景图片Body{backgroundimage:url(jpg)}图片路径Backgroundrepeat背景图片重复方式Body{backgroundrepeat:repeatx}RepeatxrepeatynorepeatBackgroundattachment背景图片是否滚动Body{backgroundattachment:fixed}FixedscrollBackgroundposition背景图片的初始位置Body{backgroundposition:}TopleftrightCenterbottom文本属性<pstyle="letterspacing:emtextalign:justifytextindent:emlineheight:pt">…<p>letterspacing设置了字间距为em其中em为一个长度单位textalign设置了对齐方式为两端对齐indent设置了缩进格为emlineheight设置了行高为pt一个CSS例子<html><head><styletype="textcss"><!H{backgroundcolor:#ffff*背景色*color:#ff*文字颜色*textalign:center*文字居中*fontfamily:"*黑体"字体名称*fontsize:pt*字体大小*letterspacing:px*字符间距*wordspacing:cm*文字间距*backgroundrepeat:norepeat*背景图象重复方式*backgroundimage:url(jpg)*背景图象*}><style><head><body><h>welcometoASP<h><body><html>装饰超链接鼠标激活的状态颜色为蓝色(blue),文本装饰属性值为上划(overline)字体大小为pt访问过的状态颜色为红色,文本装饰属性值为没有<html> <title>linkcss<title><head> <!定义伪类元素(a:)大括号内定义了前景色属性和文本装饰属性  hover加上‘fontsize’属性目的是让鼠标激活链接时改变字体> <!未访问时的状态颜色为绿色(green)文本装饰属性(textdecoration)值为没有(none)><!访问过的状态颜色为红色(red)文本装饰属性值为没有> <!鼠标激活的状态颜色为蓝色(blue)文本装饰属性值为上划(overline)字体大小为pt><style> <!  a:link{color:greentextdecoration:none}  a:visited{color:redtextdecoration:none}  a:hover{color:bluetextdecoration:overlinefontsize:pt} > <style> <head> <body> <brstyle="fontfamily:黑体fontsize:pt"> <ahref="html">未访问的链接<a> <!加链接显示三种不同状态并且定义了链接文本的字体和大小> <br><ahref="html">访问过的链接<a> <br><ahref="html">鼠标激活的链接<a> <body><html><html> <head><title>linkcss<title> <style> <!  a:link{color:greentextdecoration:none}  a:visited{color:redtextdecoration:none}  a:hover{color:bluetextdecoration:overlinefontsize:pt} > <style> <head> <body> <brstyle="fontfamily:黑体fontsize:pt"> <ahref="html">未访问的链接<a> <!加链接显示三种不同状态并且定义了链接文本的字体和大小> <br><ahref="html">访问过的链接<a> <br><ahref="html">鼠标激活的链接<a> <body><html>未访问时的状态,颜色为绿色,文本装饰属性(textdecoration)值为没有边距属性边距顺序是上、右、下、左。body{margin:emememem}定义文本的上、右、下、左的边距分别为、、、em鼠标属性鼠标效果演示<html> <head>  <title>changemouse<title> <head> <body>  <hstyle="fontfamily:文鼎新艺体简">鼠标效果<h><!设置字体>  <pstyle="fontfamily:行书体fontsize:ptcolor:red">  请把鼠标移到相应的位置观看效果。<p><!设置字体的名称,大小,颜色>  <divstyle="fontfamily:行书体fontsize:ptcolor:green">  <!设置该区域内的字体名称、大小、绿色>  <p><spanstyle="cursor:hand">手的形状<span><br>  <!设置鼠标属性为手的形状>  <spanstyle="cursor:move">移动<span><br><!设置鼠标属性为移动>  <spanstyle="cursor:neresize">反方向<span><br>  <!设置鼠标属性为反方向>  <spanstyle="cursor:wait">等待<span><br><!设置鼠标属性为等待>  <spanstyle="cursor:help">求助<span><!设置鼠标属性为求助>  <p>  <div> <body><html>空间定位<html><head><title>zindex<title><styletype="textcss"><!pile{position:absoluteleft:intop:inwidth:inheight:in}pile{position:absoluteleft:intop:inwidth:inheight:in}><style><head><body><imgsrc="jpg"class="pile"style="zindex:"><divclass="pile"style="color:#ffffzindex:">这段文字将覆盖在图片上。<div><imgsrc="jpg"class="pile"style="zindex:"><body><html>CSS的滤镜格式:filter:filtername(parameters)filtername是滤镜属性名,详细内容请看下表alpha属性alpha是来设置透明度的。它的表达格式:filter:alpha(opacity=opcityfinishopacity=finishopacitystyle=stylestartX=startXstartY=startYfinishX=finishXfinishY=finishY)Opacity代表透明度等级可选值从到代表完全透明代表完全不透明。Style参数指定了透明区域的形状特征。其中代表统一形状代表线形代表放射状代表长方形。  Finishopacity是一个可选项用来设置结束时的透明度从而达到一种渐变效果它的值也是从到。StartX和StartY代表渐变透明效果的开始坐标finishX和finishY代表渐变透明效果的结束坐标。alpha属性演示<html><head> <title>alpha<title><style><!定义CSS样式> <! div{position:absoluteleft:top:width:} img{position:absolutetop:left:filter:alpha(opacity=,finishopacity=,style=,startx=,starty=,finishx=,finishy=)} > <style> <head> <body>  <div>  <pstyle="fontsize:fontweight:boldcolor:red">  Beautiful<p><!定义字体属性前景色为红色>  <div>  <p><imgsrc="jpg"><p>  <!导入一张图片> <body><html>定义DIV区域内的样式(位置为绝对定位,left、top、width的坐标)定义图片的样式绝对定位滤镜属性是透明度为分别是把Alpha中的Style参数值为和,再看一下效果blur属性<html> <head> <title>filterblur<title><!设置DIV样式滤镜blur属性> <style><!CSS样式定义开始> <!  div{width:filter:blur(add=true,direction=,strength=)} > <style> <head> <body>  <divstyle="width:height:">   <pstyle="fontfamily:黑体   fontsize:ptfontstyle:boldcolor:rgb(,,)">   Welcome<p>   <!定义字体名称、大小、样式、前景色>  <div> <body><html>设置文字的模糊程度设置文字阴影的角度

VIP尊享8折文档

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/22

网页制作css样式(修改版)

¥20.0

会员价¥16.0

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利