CSS详解javaweb入门.ppt

《CSS详解javaweb入门.ppt》由会员分享，可在线阅读，更多相关《CSS详解javaweb入门.ppt（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、+1996年初诞生了层叠样式表CSS技术。+CSS是层叠样式表CascadingStyleSheet+是用于实现对布局、字体、颜色、背景和其它网页效果实现更加精确的控制，其主旨就是将显示内容和显示的样式定义分离。+CSS样式表既可以定义在HTML文档内部，也可以作为附加文档定义在文档外部。+一个样式表可以作用于多个页面，甚至整个站点，一个HTML文件也可以引用多个CSS样式表中的样式定义。因此，样式表具有更好的易用性和扩展性。+改变浏览器的默认显示风格+方便的更新网页的样式。对页面进行美化+页面内容和显示样式分离+可以重用样式表+方便网站维护1.CSS的基本语法基本格式：Selector pr

2、operty:value;+说明：+属性和属性值之间用冒号（:）隔开，各定义之间用分号（;）隔开。+Selector:是选择符，指明应用此样式代码的对象。可以是(X)HTML标记、自定义的id或者class对象。+property:样式属性，如：大小、颜色、定位、边框等。+value:样式属性值，常见形式有一定范围的可选值或带有单位的数值。+eg：+p background:yellow;font-family:courier 2.注释利用/*/为代码加上注释。+eg：P.first color:green /*green for the first paragraph of every pa

3、ge*/3.CSS选择符的命名规则（1）区分大小写在XHTML中，CSSCSS的的 idid及及classclass选择符名称是区分大小写选择符名称是区分大小写的，eg：id=nav不同于id=Nav（2）采用合法字符 命名必须以英文字母开始，后接字母、数字、下划线等（3）使用具有一定语义的字母组合（4）制定统一的命名规则例如：“变量类型_变量名”方式命名命名网站元素网站元素list列表homepage首页content内容nav导航search搜索head头部foot底部menu菜单根据样式代码的位置，分为三类：q行内样式q内嵌样式q外部样式样式的分类 在最后一个声明后面加上一个分号在最后一

4、个声明后面加上一个分号(;)是一个好习惯是一个好习惯您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。/*关键代码-*/剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以应用样式 P font-size:20px;color:blue;text-align:center;我是段落 1我是段落 2我是段落 3我们的样式绝对统一样式表样式规则所有的段落都采用 P 样式，保证样式统一行内样式表局限于某个标签，如果希望本

5、网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。选择器根据选择器的不同，内嵌样式又分为：+HTML选择器+CLASS类选择器+ID选择器+伪类选择器+根据样式文件与网页的关联方式又分为：链接（LINK）外部样式表导入（import）外部样式表样式文件P.网页2网页3网页1使用LINK（链接）标签，语法：第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联样式文件：样式文件：newstyle.css P.Onel.htmanother.htm 第三步：浏览查看各网页使用import导入，语法：import样式表文件.css;操作步骤同链接样式表 注意：注意：导入外

6、部样式表必须在样式表的开始部分，在其他内部样式表上面。外部样式文件外部样式文件行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：+有关整个网站统一风格的样式代码，放置在独立的样式文件*.css+某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式+某张网页内，部分内容”与众不同“，采用行内样式对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；内嵌样式内嵌样式 行内样式行内样式 某个HTML标签/*-关键

7、代码-*/P /*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;H2 background-color:#CCFF33;text-align:center;品种特征方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛.。3、高头：高头.。选择器-HTML选择器HTML选择器应用H2样式应用P样式选择器-class类选择器.myinput border:1px solid;border-color:#D4BFFF;color:#2A00FF用户名密 码 CLASS类选择器应用类选择器：class”类名“类选择器的定义格式为：

8、.类名 样式规则;#fire color:red;font-size:24px;我是二级标题，火是这样的我是二级标题，火是这样的我是段落，火是这样的我是段落，火是这样的选择器-ID选择器ID选择器ID选择器的定义格式为：ID名 样式规则;应用ID选择器：ID”ID名“基本格式：E1.E2 property:value E1#E2 property:value+说明：针对于class为E2的E1标记进行样式定义；针对于id为E2的E1标记进行样式定义；+Eg:ul.Bluelifont-family:Arial;color:#369+基本格式：E1 E2 property:value注意：E1与

9、E2之间有空格,只对E1下的E2的内容指定样式。E1与E2可以是标记、也可以是类样式或id样式。+Eg:E1与E2为标记h2 span font-size:12px;color:blue;span标记h2标记h2 span标记 示例+语法：1.E1attr2.E1attr=value3.E1attr=value4.E1attr|=value+说明：1.选择具有attr属性的E12.选择具有attr属性且属性值等于value的E13.选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1。这里的value不能包含空格4.选择具有attr属性且属性值为一用连字符分隔的字

10、词列表，由value开始的E15.E1不确定时，可用*替代htitlecolor:blue;/*所有具有title属性的h对象*/spanclass=democolor:red;divspeed=fastdorun=nocolor:red;arel=copyrightcolor:black;+语法：E1E2说明：选择所有作为E1子对象的E2。目前IE5.5+尚不支持此种选择符。+示例：bodypfont-size:14px;/*所有作为body的子对象的p对象字体尺寸为14px*/divullipfont-size:14px;+与包含选择符的区别必须为其直接子对象基本格式：E1,E2,E3 p

11、roperty:value+说明：+将同样的定义应用于多个选择符，可以将选择符以逗号（,）分隔的方式并为组。+Eg:+h1,h2,h3,h4,h5,spanfont:16px Arial;color:#608000h5color:red;h5.rockcolor:blue;h5.rockcolor:yellow;注意，多了一个空格only h5 tag contentapply class name rock h5 tag contentapplyspan tagclass name rock h5 tagcontent说明：+各个选择符可以组合使用，非常灵活。+Eg:p#grey span

12、+链接a标记（四种状态）属于CSS的标准伪类+为了保证链接样式的实现，一般按照以下次序进行设定：a:link，a:visited，a:hover，a:active+伪对象e:first-lettere:first-line设置指定元素的首字母（汉字）及第一行格式 a:linkfont-size:12px;text-decoration:none;color:blue;a:visitedfont-size:12px;text-decoration:none;color:blue;a:hoverfont-size:12px;text-decoration:underline;color:red;a

13、:activefont-size:12px;text-decoration:underline;color:yellow;a.reg:linkfont-size:10pt;text-decoration:underline;color:#006699;a.reg:visitedfont-size:10pt;text-decoration:underline;color:#808080;a.reg:hoverfont-size:10pt;text-decoration:none;color:#FF9933;a.reg:activefont-size:10pt;text-decoration:no

14、ne;color:#FF9933;h2:first-letter,h5:first-linefont-size:50px;+id与class都是CSS的重要属性，用于两种样式：id样式和class类样式。+1.id id+（1）定义样式+如果有一段样式代码在页面中只使用一次，就可以用id标识，若多次使用建议使用class。+（2）标识对象+为了增加XHTML代码结构的可读性，方便小组协作和网站维护，可以使用id对页面区域或某个元素进行具有明确意义的标识。+2.classclass+class用于对一类元素进行标识，class名称在页面中可以重复使用。+div与span在XHTML排版中有着非常

15、重要的作用。二者的功能描述均为：定义样式的容器。+1.div+div对象的默认显示模式为display:block，因此，div成为块状容器，占据整行显示空间。div对象常用于编排一个块状内容，进行大栏目的分区。如：导航区、内容区、辅助功能区、页脚区等。+2.span+span对象的默认显示模式为display:in-line，因此，span成为内嵌容器，以行间内联方式显示，从而不会破坏行中元素的显示顺序。span对象常用于页面中细节内容的样式调整。如：一小段文字、一个图标等。Font常见属性包括：字体、字号、字符间距、词间距、行间距、粗体、斜体、下划线、删除线等+font-style:nor

16、mal|italic+font-variant:normal|small-caps+font-weight:normal|bold+font-size:length+line-height:normal|length+font-family:name 参数：name:字体名称。按优先顺序排列。以逗号（,）隔开。注意：如果字体名称包含空格，则应使用引号（）括起。示例：P font-family:Arial,Courier,Courier New+font:font-style|font-variant|font-weight|font-size|line-height|font-family 示

17、例：p font:italic small-caps bold 12px 150%Courier;+text-decoration:none|underline|overline|line-through div text-decoration:underline overline;+color:colorvaluediv color:#F0F0F0;div color:rgbrgb(100,80,200);div color:red;+letter-spacing:normal|length中文单字或英文字母div letter-spacing:6px;+word-spacing:norma

18、l|lengthdiv word-spacing:10px;+text-transform:none|capitalize|uppercase|lowercase 参数：none:无转换发生capitalize:将每个单词的第一个字母转换成大写，其余无转换发生uppercase:转换成大写lowercase:转换成小写 示例：div text-transform:uppercase;+white-space:normal|pre|nowrap+text-indent:length+vertical-align:baseline|sub|super|top|middle|bottom|lengt

19、h+text-align:left|right|center|justify+layout-flow:horizontal|vertical-ideographic+direction:ltr|rtl 参数：ltr:文本流从左至右水平排。rtl:文本流从右至左水平排。但英文字符也是从右向左排，所以不适合排列英文。须设定unicode-bidi:bidi-override。+background-color:transparent|color+background-image:none|url(url)p background-image:url(/images/bg.gif);+backgro

20、und-repeat:repeat|no-repeat|repeat-x|repeat-y+background-attachment:scroll|fixed 参数：scroll:背景图像随对象内容滚动fixed:背景图像固定+background-position格式：background-position:length|lengthbackground-position:position|position参数：length:百分数|带单位长度值position:top|center|bottom|left|center|right 6.background基本格式：background:

21、background-color|background-image|background-repeat|background-attachment|background-position Gog Star:xiaomibrdocument.write(new Array(100).join();document.write(new Array(100).join();She loves sunshine and grass smell.1.margin-top2.margin-right3.margin-bottom4.margin-left5.margin:10px 10px 10px 10

22、px+说明：+如果只提供一个，将用于全部的四边。+如果提供两个，第一个用于上下，第二个用于左右。+如果提供三个，第一个用于上，第二个用于左右，第三个用于下。+如果提供全部四个参数值，将以顺时针方向按上右下左上右下左的顺序作用于四边。1.padding-top2.padding-right3.padding-bottom4.padding-left5.padding:10%10%10%10%+说明：+如果只提供一个，将用于全部的四条边。+如果提供两个，第一个用于上下，第二个用于左右。+如果提供三个，第一个用于上，第二个用于左右，第三个用于下。+如果提供全部四个参数值，将以顺时针方向按上右下左的顺

23、序作用于四边。1.position基本格式：position:static|absolute|relative参数：static:无特殊定位，对象遵循HTML定位规则absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置2.left3.right4.top5.Bottom6.z-index:auto|number 有值盖无值，大值盖小值1.width:auto|l

24、ength2.Height:auto|length3.max_width:none|length4.max_length:none|length5.min_width:none|length6.min_height:none|length示例：pmin-height:200px;由浮点数字和单位标识符组成的长度值|或者百分数。不可为负数。长度单位px:像素（Pixel）。相对长度单位em:相对长度单位。相对于当前对象内文本的字体尺寸。ex:相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。pt:点（Point）。绝对长度单位。pc:派卡（Pica）。绝对长度单位。相当于我国新四

25、号铅字的尺寸。in:英寸（Inch）。绝对长度单位。mm:毫米（Millimeter）。绝对长度单位。cm:厘米（Centimeter）。绝对长度单位。+时间s:秒。时间的国际主单位。ms:微秒。1s=1000 ms+颜色+rgb(R,G,B)+R:红色值。正整数|百分数G:绿色值。正整数|百分数B:蓝色值。正整数|百分数+#RRGGBB+RR:红色值。十六进制正整数GG:绿色值。十六进制正整数BB:蓝色值。十六进制正整数+ColorName+red,yellow,white,black,blue.+border-width:medium|thin|thick|length+border-st

26、yle:none|dotted|dashed|solid|double+border-color:color以上各属性说明：如果提供全部四个参数值，将按上右下左的顺时针顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下+border:border-width|border-style|border-color+border-top:border-top-width|border-top-style|border-top-color tableborder-top:8pxsolid#608

27、080;tdborder:1pxdotted#505050;HTML文件必须有文档类型定义,才能保证IE7和Firefox显示一致1.float:none|left|rightnone:none:对象不浮动left:left:对象浮在左边right:right:对象浮在右边2.clear:none|left|right|both none:none:允许两边都可以有浮动对象both:both:不允许有浮动对象left:left:不允许左边有浮动对象right:right:不允许右边有浮动对象 3.overflow:visible|auto|hidden|scroll 4.display:non

28、e|block|inline 5.visibility:inherit|visible|hidden1.list-style-image基本格式：list-style-image:none|url(url)url(url)2.list-style-position基本格式：list-style-position:outside|inside 3.list-style-type基本格式：list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none4.list-styl

29、e基本格式：list-style:list-style-image|list-style-position|list-style-type .style0list-style:url(li_bg.jpg)inside;.style1list-style-type:square;list-style-image:none;.style2list-style-type:circle;list-style-image:none;.style3list-style-type:disc;list-style-image:none;#style4 lifloat:left;#style4 li adisp

30、lay:block;width:80;height:25;text-align:center;color:#000000;text-decoration:none;background-color:#EEFEAB;margin-left:1px;padding-top:4px#style4 li a:hovercolor:#ffffff;text-decoration:underline;background-color:#99cc00;+滚动条 Scrollbars+body+scrollbar-face-color:#5AA0DA;+scrollbar-highlight-color:#F

31、FFFFF;+scrollbar-shadow-color:#FFFFFF;+scrollbar-3dlight-color:#5AA0DA;+scrollbar-arrow-color:#FFFFFF;+scrollbar-darkshadow-color:#000000;+scrollbar-base-color:#FCFDFE;+鼠标 cursor body cursor:url(piano.ani);+IE支持+filter:filter 参数：filter:要使用的滤镜效果。多个滤镜之间用空格隔开+Eg:+divfilter:blur(strength=50)flipv();+img

32、filter:invert();补色显示+.effafilter:alpha(Opacity=30)+美丽的喀拉库勒湖+湖光山色+Lake,JokulandSky+喀拉库勒湖海拔3600多米，湖面约10平方公里，因湖水深邃似墨，得名“墨湖”。+由两泓相连的湖泊组成，又称“姐妹湖”。+.effbfilter:blur(add=true,direction=90,strength=35)+.effhfilter:fliph;width:120px;+.efffilter:chroma(color=white)+.effdfilter:dropshadow(color=#606030,offx=5,offy=5)+.effgfilter:glow(color=#ffcc66,strength=12)+.effdfilter:shadow(color=#C19B2D,direction=135)+