CSS详细经典速成教程

上传人：d*** IP属地：广东上传时间：2023-04-15 格式：PPT 页数：62 大小：2.88MB 积分：30 举报 版权申诉

已阅读5页，还剩57页未读，继续免费阅读

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

文档简介

CSS专题CSS在页面风格设计中的作用CSS语法基础用DIV+CSS的方式来写HTML页面用CSS设置图像样式扮靓网页CSS与XML的综合运用CSSCSS详细经典速成教程一、CSS简介CSSCascadingStyleSheet层叠样式表样式格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置以及段落、列表等，都是网页显示的样式。层叠HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优选原则”。CSS详细经典速成教程二、CSS在页面风格设计中的作用网页的标准——网页主要由3个部分组成：结构（Structure）表现（Presentation）行为（Behavior）在一个网页中，分若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。网页各组成部分的字号、字体和颜色等属性就构成了它的“表现”。网页与用户的交互CSS详细经典速成教程二、CSS在页面风格设计中的作用网页标准的涵义：“结构”决定了网页“是什么”“表现”决定了网页看起来是“什么样子”“行为”决定了网页“做什么”网页标准对应的技术：(X)

HTML——决定网页的结构和内容CSS——设定网页的表现样式JavaScript——控制网页的行为CSS的核心目的：实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。CSS详细经典速成教程三、CSS语法基础CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。CSS规则的构造对象属性值CSS详细经典速成教程三、CSS语法基础样式表规则的组成：选择符（selector）决定哪些因素要受到影响声明（declaration）一个或多个属性值对组成基本语法：selector{属性:属性值[[;属性:属性值]…]}语法说明：selector表示希望进行格式化的元素；声明部分包括在选择器后的大括号中；用“属性:属性值”描述要应用的格式化操作；声明中的多个属性值对之间必须用分号隔开。CSS详细经典速成教程三、CSS语法基础选择器（selector）

CSS的对象是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）类型：普通选择器复合选择器标签CSS详细经典速成教程三、CSS语法基础普通选择器——标签选择器标签<styletype="text/css">p{font-size:16px;color:red;}</style>CSS详细经典速成教程三、CSS语法基础普通选择器——类别选择器<styletype="text/css">.biaoti{font-size:16px;color:red;}</style><body><p>普通文字</p><pclass=biaoti>赋于标记符类所产生的格式</p><spanclass=biaoti>类选择器所定义的格式</span></body>CSS详细经典速成教程三、CSS语法基础普通选择器——ID选择器<styletype="text/css">#biaoti{font-size:16px;color:red;}</style><body><p>普通文字</p><pid=biaoti>赋于标记符id所产生的格式</p><spanid=biaoti>ID选择器所定义的格式</span></body>CSS详细经典速成教程三、CSS语法基础复合选择器——交集选择器p{/*标记选择器*/ color:blue;}p.Special{/*标记.类别选择器*/ color:red;}.special{/*类别选择器*/color:green;}</style></head><body><p>普通段落文本（蓝色）</p><h3>普通标题文本（黑色）</h3><pclass="special">指定了.special类别的段落文本（红色）</p><h3class="special">指定了.special类别的标题文本（绿色）</h3></body></html>CSS详细经典速成教程三、CSS语法基础复合选择器——并集选择器<html><head><title>并集选择器</title><styletype="text/css">/*并集选择器*//*集体声明*/h1,h2,h3,h4,h5,p{ color:purple; font-size:15px; }h2.special,.special,#one{ text-decoration:underline;}</style></head><body><h1>示例文字h1</h1><h2class="special">示例文字h2</h2><h3>示例文字h3</h3><h4>示例文字h4</h4><h5>示例文字h5</h5><p>示例文字p1</p><pclass="special">示例文字p2</p><pid="one">示例文字p3</p></body></html>CSS详细经典速成教程三、CSS语法基础复合选择器——后代选择器<html><head><title>后代选择器</title><styletype="text/css">/*嵌套声明*/pspan{ color:red; }span{color:blue;}</style></head><body><p>嵌套使<span>用CSS（红色）</span>标记的方法</p>

嵌套之外的<span>标记（蓝色）</span>不生效</body></html>CSS详细经典速成教程三、CSS语法基础继承继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。<html><head><title>CSS的继承性</title><styletype="text/css"></style></head><body><p>CSS的<strong>继承性</strong></p></body></html>

CSS详细经典速成教程三、CSS语法基础样式表的定义与使用直接定义标记的style属性定义内部样式表嵌入外部样式表链接外部样式表<styletext="text/css"></style><styletype="text/css">@importurl("style.css")；</style><linkrel="stylesheet"type="text/css"href="style.css"><p

style=“font-size:14px”>一段话</p>CSS详细经典速成教程三、CSS语法基础——示例<html><head><title>ID和类的定义</title><styletype="text/css"></style></head><body><divid="divdemo"> <p>此段文字以默认方式显示</p><pclass="p1">此段文字以16像素大小，红色字体显示</p><pclass="p2">此段文字以26像素大小，玫红色字体显示

</div></body></html>CSS详细经典速成教程三、CSS语法基础——字体color——字体颜色font-size——字号

font-family——字体font-style——字体样式normal|italic|oblique(歪斜体)font-weight——字体加粗normal|bold|bolder|lighter|100|200|300font-variant——字体变体font-variant:normal|small-caps(小型的大写字母)text-decoration——文字效果属性none|underline|blink|overline|line-throughfont——综合字体属性font-stylefont-weightfont-variantfont-size/line-heightfont-familyCSS详细经典速成教程三、CSS语法基础——字体排版text-indent——首行缩进属性normal|长度单位letter-spacing——字符间距属性normal|长度单位line-height——行距属性normal|比例|长度单位|百分比text-align——水平对齐属性left|right|center|justifytext-transform——转换英文大小写uppercase|lowercase|capitalize|noneCSS详细经典速成教程三、CSS语法基础——背景颜色background-color：关键字|RGB值|transparentCSS则有四种定义颜色的方法：十六进制数RGB函数（整数）RGB函数（百分比）颜色名称CSS详细经典速成教程三、CSS语法基础——背景颜色<html><head><title>背景颜色的属性</title><styletype="text/css"></style></head><body><pclass="p1">此行文字以红色背景显示n</p><pclass="p2">此行文字以黄色背景显示</p></body></html>

CSS详细经典速成教程三、CSS语法基础——背景颜色CSS详细经典速成教程三、CSS语法基础——背景图片background-image：插入背景图片background-attachment:插入背景附件background-repeat:设置重复背景图片background-position:设置背景图片位置CSS详细经典速成教程background-image插入背景图片background-image设置背景图片基本语法：background-image:url|none语法说明：url表示要插入背景图片的路径，路径可以是绝对路径也可以是相对路径，none表示不加载图片。CSS详细经典速成教程background-attachment插入背景附件background-attachment背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。基本语法：background-attachment：scroll|fixed语法说明：scroll表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。CSS详细经典速成教程background-repeat设置重复背景图片background-img属性设置网页的背景图片重复显示方式。基本语法：background-repeat：repeat|repeat-x|repeat-y|no-repeat语法说明：repeat表示背景图片在水平和垂直方向平铺，是默认值；repeat-x表示背景图片在水平方向平铺；repeat-y表示背景图片在垂直方向平铺；no-repeat表示背景图片不平铺。CSS详细经典速成教程background-position设置背景图片位置当在网页中插入背景图片时，每一次插入的位置，都是位于网页的左上角，所以通过background-position属性来改变图片的插入位置。基本语法：background-position：百分比|长度|关键字语法说明：利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right，关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。CSS详细经典速成教程三、CSS语法基础——盒子的概念与使用盒子模块设置边界设置元素边框设置元素内边界CSS详细经典速成教程盒子模块在CSS中，将样式调用在每一个元素上，都以一个假想的矩形格式模型看待.一般使用矩形模块的时候，搭配margin属性、border属性以及padding属性，可以更好的控制元素的样式。CSS详细经典速成教程设置边界margin的四个属性主要是控制元素边界与文件其他内容的空白距离，四个边界一般按顺时针方向上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）属性。四个边界的设置语法一样。基本语法：margin-(top、right、bottom、left):长度单位|百分比单位|autoCSS详细经典速成教程设置元素边框border-style边框样式属性border-width边框宽度属性border-color边框色彩属性border属性的综合设置CSS详细经典速成教程border-style边框样式属性利用边框样式属性不仅可以设置单位边框样式属性，还可以对单位边框进行设置，而且也可以利用复合边框样式属性来统一设置四条边框的样式。基本语法：border-style:样式值border-top-style:样式值border-bottom-style:样式值border-left-style:样式值border-right-style:样式值CSS详细经典速成教程border-style边框样式属性语法说明：border-style是一个复合属性，复合属性的值有四种设置方法，其他4个都是单个边框的样式属性，只能取一个值。样式值属性的具体说明见表10-8。设置一个值：四条边框宽度均使用一个值。设置两个值：上边框和下边框宽度调用第一个值，左边框和右边框宽度调用第二个值。设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框调用第三个值。设置四个值：四条边框宽度的调用顺序为上、右、下、左。CSS详细经典速成教程border-width边框宽度属性border-width属性，是控制元素边框的宽度的一个综合属性，和border-style一样也有四种单独的设置方法，分别来定义四条边框的宽度，设置方法和边框样式一样。基本语法：CSS详细经典速成教程border-width边框宽度属性语法说明：thin、medium、thick分别表示细、中等、粗，length表示长度单位CSS详细经典速成教程border-color边框色彩属性border-color属性是用来控制边框显示的颜色，和边框宽度、边框样式的设置方法一样，也可以分别来设置每个边框的颜色.基本语法：border-color:颜色关键字|RGB值border-top-color:颜色关键字|RGB值border-bottom-color:颜色关键字|RGB值border-left-color:颜色关键字|RGB值border-right-color:颜色关键字|RGB值CSS详细经典速成教程border属性的综合设置在CSS中，border属性用来同时设置边框的样式、宽度和颜色，也可以另外对每个边界属性单独进行设置基本语法：border:边框宽度|边框样式|边框颜色

border-top:上边框宽度|上边框样式|上边框颜色

border-bottom:下边框宽度|下边框样式|下边框颜色border-left:左边框宽度|左边框样式|左边框颜色border-right:右边框宽度|右边框样式|右边框颜色语法说明：每一个属性都是一个复合属性，都可以同时设置边框的样式、宽度和颜色，每个属性的值中间用空格隔开，在这5个属性中，只有border可以同时设置四条边框的属性，其他的只能设置单边框的属性。CSS详细经典速成教程设置元素内边界元素内边界主要是指边框和内部元素之间的空白距离，利用padding属性设置元素内的边界时，也包括5个属性，同样也有四种设置方法。基本语法：padding:长度|百分比padding-top:长度|百分比padding-bottom:长度|百分比padding-left:长度|百分比padding-right:长度|百分比语法说明：长度包括长度值和长度单位，百分比是相对于上级元素宽度的百分比，不允许用负数，padding作为复合属性的四种取值方法请参考边框样式的取值方法。CSS详细经典速成教程三、CSS语法基础——列表列表list-style-type列表样式list-style-image图像列表list-style-position列表符号的缩进CSS详细经典速成教程三、CSS语法基础——列表list-style-type属性，可用于设置列表的符号或编号，此属性通常搭配<ol>或<ul>标记使用。基本语法：list-style-type:属性值CSS详细经典速成教程三、CSS语法基础——列表利用css还可以把列表的符号设置成喜欢的图片基本语法：list-style-image:url|none语法说明：url是指定要载入的图片路径，在使用上与插入图片<img>的用法差不多；none表示不使用图片式的列表符号。CSS详细经典速成教程三、CSS语法基础——列表list-style-position列表符号缩进属性，主要是设置每个列表项目的符号或图片，是否向外凸出。基本语法：list-style-position:inside|outside语法说明：inside表示列表符号不向外凸出，也可以理解成列表项上的第二行文字与列表符号对齐；outside表示列表符号向外凸出，也是默认值。CSS详细经典速成教程三、CSS语法基础——设置网页链接属性设置伪类选择器得到不同的超链接属性CSS详细经典速成教程三、CSS语法基础——设置滚动条属性利用CSS制作滚动条的颜色效果CSS详细经典速成教程三、CSS语法基础——设置光标属性设置变化的光标图形——cursor:属性值CSS详细经典速成教程四、用DIV+CSS的方式来写HTML页面一列居中样式margin-right:auto;margin-left:auto;width:px;两列并列样式定义固定宽度、左对齐浮动两列并列居中样式用一个大容器容纳两个列，即以上两种技术的综合三列并列样式定义固定宽度、左对齐浮动工字型布局结合三列并列样式，版权区设定清除浮动clear:both;CSS详细经典速成教程div标记的使用在写HTML文件时，要定义区域间不同样式时，可以使用<div>标记达到这个效果，除此以外，通过设置<div>的z-index属性还可以设置层次的效果。基本语法：<divstyle="position:absolute;left:29px;top:12px;width:200px;height:100px;background-color:#33CC99;float:none;clear:none；z-index:1></div>CSS详细经典速成教程div标记的使用语法说明：用style来表示层的样式，因为如果没有定义层的样式的话，在浏览网页的时候是看不到效果的。其中：position属性主要是来定义层的定位方式；left和top是用来定位层的位置，与它并列的还有right和bottom，这四个属性主要是用来设置层的位置，分别表示对象与其他对象的左部、顶部、右部和底部的相对位置；width和height用来定义层的宽度和高度；float是层的浮动属性，用来设置层的浮动位置，当然这个属性不仅可以用在图像和表格上，还可以用到其他任何元素上；clear是层的清除属性，表示是否充许在某个元素的周围有浮动元素，它和浮动属性是一对相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素；z-index主要是设置区域的上下层关系，利用此属性设置可以让区域更多层次的效果，相当于三维空间的z坐标，z-index越大，区域在堆中的位置就越高。CSS详细经典速成教程<span>标记的使用<div>标记主要用来定义网页上的区域，通常用于比较大范围的设置，而<span>标记被用来组合文档中的行内元素。基本语法：<spanid="指定样式名称">…</span>或者<spanclass="指定样式名称">…</span>语法说明：如果不对span应用样式，那么span元素中的文本与其他文本不会有任何视觉上的差异，只有对它应用样式时，它才会产生视觉上的变化。CSS详细经典速成教程<div>与<span>的区别基本上<div>与<span>标记在网页上的使用，都可以用来产生区域范围，以定义不同的文字段落，且区域间彼此是独立的。不过，两者在使用上还是有一些差异。区域内是否换行：<div>标记区域内的对象与区域外的上下文会自动换行，而<span>标记区域内的对象与区域外的对象不会自动换行。标记相互包含：<div>与<span>标记可以同时在网页上使用，一般在使用上建议用<div>标记包含<span>标记；但<span>最好不包含<div>标记，否则会造成<span>标记的区域不完整，而形成断行的现象。CSS详细经典速成教程小实例页面布局设计始终是网页设计中的一个核心问题，它包括技术和美学两个方面的问题，两者结合的非常紧密。页面布局的主要工具是<frame>、<table>、<div>和Flash文件。对于框架<frame>，一般而言应尽量避免使用；表格<table>作为可以在上面布置元素的二维网格，它的优点在于在所有浏览器中几乎都可以无差错的运行，而只有微不足道的差异，而且，对于像切割图像这样的问题可以非常容易的用表格实现；但是过度使用表格所带来的页面无序，会给后期的维护带来极大的困难；<div>技术虽然难以全部代替<table>，但是它的位置、尺寸、背景、边框等都可以很好的设计，更重要的是它所依赖的内容和样式分离的思想使得页面代码更为简洁，样式的更改更为方便。CSS详细经典速成教程五、用CSS设置图像样式扮靓网页为图像设置边框border:样式颜色宽度;样式：dotted(点线)、dashed（虚线）、solid（实线）、double（双线）groove：根据border-color的值绘制3D凹槽ridge：根据border-color的值绘制3D凸槽inset：根据border-color的值绘制3D凹边outset：根据border-color的值绘制3D凸边为图像设置背景background:url();为图形设置阴影background:whiteurl(渐变背景.gif)repeat-xbottomleft;filter：Shadow(Color=?,Direction=?).y1{ position:absolute; padding:12px; filter:Shadow(Color=#000000,Direction=135);}CSS详细经典速成教程五、用CSS设置图像样式扮靓网页滤镜静态滤镜alpha、blur、Motionblur、shadow、dropshadow、wave、glow、gray、flipv、fliph、invert、xray、emboss、engrave、mask动态滤镜必须与javascript配合才能发挥作用对象.滤镜数组名[i].apply();对象.滤镜数组名[i].play();对象.滤镜数组名[i].stop();filter:BlendTrans(duration=秒数)filter:RevealTrans(Transition=变化方式duration=秒数)filter:lightCSS详细经典速成教程五、用CSS设置图像样式扮靓网页通道（alpha）——设置透明度filter:alpha(Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)Opacity：透明等级，0——100，0表示完全透明，100表示不透明；FinishOpacity：结束时的透明度，取值同上；Style：透明区域的形状特征0：统一形状1：线性2：放射性渐变3：矩形渐变当Style为2或3时，startX等参数没有意义，都是以图片中心开始向四周结束CSS详细经典速成教程五、用CSS设置图像样式扮靓网页模糊（blur）——设置模糊度filter:progid:DXImageTransform.Microsoft.blur(pixelradius=?,makeshadow=?)pixelradius：设置模糊效果的作用深度；makeshadow：设置是否制作成阴影；makeshadowopacity:设置使用makeshadow制作成的阴影的透明度.blur1{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}.blur2{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=true,makeshadowopacity=10;);}CSS详细经典速成教程五、用CSS设置图像样式扮靓网页运动模糊（Motionblur）——设置运动模糊度filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=？,direction=？,add=？);stregth：设置模糊效果的作用深度，代表有多少像素受到模糊影响；direction：模糊方向，0度表示垂直向上，；add:true|false,是否叠加原图；.motionblur1{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=false); }.motionblur2{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=true); }CSS详细经典速成教程五、用CSS设置图像样式扮靓网页阴影shadow——在指定方向上建立物体的连续投影filter:shadow(color=？,direction=？);dropshadow——下落阴影filter:dropshadow(color=？,offx=？,offy=？,positive=？) .shadow{

filter:shadow(color=#CCCCFF,direction=135); /*阴影效果*/}.drop{

filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true); /*下落阴影*/}CSS详细经典速成教程五、用CSS设置图像样式扮靓网页波形filter:wave(add=?,freq=?,lightstrength=?,phase=?,strength=？)Add:1——显示原来对象，0——不显示原来对象Freq:波形的频率，参数值1—100，完整波纹的个数Lightstrength：波纹增光效果，参数值1—100Phase:正弦波开始的偏移量，数值0—100，开始时偏移量占波长的百分比Strength:振幅的大小.three{filter:flipvalpha(opacity=80)wave(add=0,freq=15,lightstrength=30,phase=0,strength=4); /*同时使用三个滤镜*/ /*竖直翻转、透明、波浪效果*/}CSS详细经典速成教程五、用CSS设置图像样式扮靓网页发光filter:glow(color=？,strength=？); 灰度filter:gray;翻转filter:fliph; /*水平翻转*/filter:flipv; /*竖直翻转*/filter:flipvfliph; /*水平、竖直同时翻转*/反色filter:invert; /*底片效果*/X光filter:xray; /*X光效果*/浮雕纹理filter:progid:DXImageTransform.microsoft.emboss(bias=？);凹陷浮雕效果filter:progid:DXImageTransform.microsoft.engrave(bias=？);凸出浮雕效果bias:取值范围-1——1遮罩filter:mask(color=？); /*遮罩效果*/CSS详细经典速成教程图片淡入淡出filter:BlendTrans(duration=秒数)五、用CSS设置图像样式扮靓网页<scriptlanguage="javascript">functionimg1(x

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

CSS详细经典速成教程

文档简介

温馨提示

最新文档

评论

CSS详细经典速成教程

文档简介

温馨提示

最新文档

评论

相关文档