div+css学习总结材料

1、第一天:1初识css1.1介绍 div + css的介绍div是用于存放html元素1文宇.沁 是层奩样式竟用于去指定div中的内容的样式 div+css是什么divlA A HTML丈档内大块（bkck-leve!）的内容提供?结构牝背景的无素.jcss英语C酣蚀ding Style Sheets （层叠样式表卓）的缩写.I它是一种用来表现HTML A XML寻文件式样的计算机语言.I div+css是网站标准A#WEBt4：准）中常周术语之一*遇常I为了说明与HTML网页迪计语言中的表醴（ESE）定位方扎的区别、 纟囲为XHTML网站设计标淮中*下再使用表霜疋柚扌支术.而是離用DIV+CS

2、S的方我实现各种定住：|我们可以简单的it样理解kliv+cs生：div是同于存秋内容（文字图片元素）的容器，f css是同于指:t祓在di#中的内辑如何显示血桔这些内容的性暨和外观.div+css片，视频的元素-& #乂俗和小抵八炊w w呦%如 沁冰m心耳-曲 g 核如核%滋.处咖 滋s如曲虫:细1.2原理图1.3快速案例test.html:DOCTYPE HTML PUBLICW3C/DTD HTML 4.0 Transitional/ZEH t-引入my一 umm 文件- -alink. C9*T,typ=,Tt*xt/osrir*l=Mstyl l235七d Xtd23匸ciA

3、Su/tciAW/tirAl235 my.css:.stylel(width: 300pxheight:200px: border:$Qlid v*d;margin:150px Opx Opx 200px;6 r 八子选择席 T.Jtylftl tAbl border： lpx *olid blacks width:28px;h亡丄ght:ISOpx;,stylel tdble td( bord*rt lpx *olid black; tewt-align: c#ntr r.|1.4三个时期为什么需要 div+css div+css的优势要深刻理Kdiv+css的优越性哀我们不得不提到网页迓计

4、的三个历史时期table table+cssrdiv+css1tab他网贡设计：內容和样式（外观和布厨混合2table+css网真设计：table布曷工合宫扌旨定外现3div+css网页设计：div?i内容，饰时占定擇式（外观和布局）,内容和样式彻嚴分离1.5优势为什么j&div+css div+cssS勺优势1苻舍*3标:L 峨较争公司均为和 CJU#者2搜索弓 I 掣楚畑农+f3样犬的调整屯加方便 内容和样式的分馭 使页面利樽式的调詩愛得 丸加方便， 现在 YAHDOJ芬爭国衍门户网站、阿易*掰浪争團内门户网站. 和主庇的壮脱.0 蚪站*均 D【V+C 対的愜架撲式.楚独印证了 D

5、I+($是圮势所趙*4C5S 的极丸优势表观在简沽的代码*时于一个绘空网站来说、可以节 帝丸矍带黄 而且仗所间知、搜索引夢取吹清；吉的代码.5衣现和舞构分离崔团臥升发中更蓉易舜工合柞而减夕栢互关联性. tableA罡序4t据时 对刘方億.闻此施擬削div+css |时， 垃袋stable吋.就捋徒甲*主要容1. WCSS2,块级元申和疗内尢打3.CSS 核丁内彖3.13卫盒子槌璽3.3浮动3.4屯住4cssM?合桑例41盒子僕啞轻驼界觇4.2仿sohut頁面布局1.6必要性案例:栏目一栏目三、 栏目四 栏目五使用元素ide开发:ss inysclipt)jByeclisp可以给我们提 ciqr

6、jtct)ire -p javaffmt* JBE SyittR Libr ary ihuxLpmg+ , Java EE 5 Librar i es+ . - METVin* .TTK-IW if indtx. japSpan style-font-size:30px;color: blue.从便用 3Pan 元事琳心可囚看到，css 时基本遹袪元景可以是 hhl 的任童元奏：屋性名：風性值是養考肚也绘给出的交档 i吏用C2-可以殊一刪站的同（&分養；禹却CfSt勺卜熬住曲|febfioet3 h-tml,图片.jsp, cssJ|入uss丈件1.7思考（滤镜一一图片变成黑白色）-请

7、再思考一个问题汶川光地親冷所有的网站的图片由曼成黑白的了越个是怎么实 现的呢？案HHTMLPag92+htmil里用到了述我技式.厂使用滤镜“imgjfilter:gray;厂便用 tt*/A:1 Ink img 4filter:quay:a;hovei img1filter：11*；ink rel =1rstylesheet11type=hltext/css1hre =1f 2 CSS的选择器一一通配符，html，类，idcss的三种选.择券选择器遶择黑赴 C 殆中非畫吨多的机殛.CS5 中有三并不同昨 it 择岸 血羡观择霞久叫 cJassjt2id 迭幷靈3htnnl 宛査產操幕6;屯的

8、杓氏毎盘简单的 tt,JtfrJt!fcAcss 中臼圧 + 托花网頁 ) + 判“/style2.1类选择器类选择器乳词扛HtmlPageXhtml起便同列了粪戋却舞恩暨斗蛤丸宣WHTMLPage.htnn新闻一新闻二 新闻三新闻四 新闻五Of如跆;畑:；:ftfUOWMMPMHf:WWSS-：:洽t曲HtmlPage1.html:hr iCTiTE HTMLUL厂t- title-ntnacgel-html titles -.(Mt*http-qulv=dcriptlcn1fcont4Ht=1pthlt it my pig41hmeta http-equivircontent-type c

9、ontentbtext/html char5et=UTr-8F,： *-i 1*4 1 “pan|-span cld：s=styllh，舖1用5 span-my.css:/* . stylel iMQW*7* styleLfont-weight: bold : font-size： 20px; bacround-color; pink * I| 类选择器名Ig属性名:属性佩2.2id选择器 id 选择器SfJ2.3html选择器 html选择蓋我i15CHTMLPage.htm中给大家演示hhnl选择器的用法:如图: 如果我们希毕期页中默认字体是橙色.ftiTE当怎么处埠。U 闻一新闻二新闻三

10、KRE3新闻五hunl元紊筈称厲性名:属性直这是一则非常重耍的新闻新闻一 Sfffl-新闻三新闻四新闻五纺沱：半一个元HE同时祓Id选桂雷 类选操兽htwL肚斤驾足id灑浊匸血炉释器/*.9tylel.style!forit-t/ight: bold；font-size: 20px;barkground-&lor: pink/ colox:black;1/*tt style2就总一个idit弄器 S# style；? font-size: JOpx;backgroundcolor; silver ,Lcolor : blacKr|1/htirl的就舞SK右/bodycolci: ora

11、nge r2.4综合练习:些比別.i!亦里戶宜的纯(1)軌认样九蔓豐总+ 24px, at A T ij(2)当亂揣疗祐列筑能滞对勺动出現下幻统点水筑耀健禧 t qotohref=tf4go tomy.css:-a4a:1inkcolor: black 7 text-decoration: none ;a:hover text-decotation:a:visitedi第二天2.5通配符选择器通配符选择器如果希望所有的元秦熬符合只神样式可以使用通配符选择 器审* margin: 0: padding: 0 可以让所fihtml兀累的外边距利内边距都默认为0,有聘特别有用”険甲诵i汙遥择器对外迫

12、距和内边距So+* Opx 10px;*勺里tma rgin给出四个值,则表示上岛margin： 10px Opx Dpjc;如果两旳4给出3个值*F卜用丁上.第二i用1左一弟三于用于下 * /|underline :colct|： redpadding: Opx; /*pdding fSUSHiTiargin-1? ,*/2.6父子选择器-选择器深人探讨程闸而讲杓耀卄常河单.艾肺t的用样器懺期讦有很基魅炜吞讣穩的她方.如睾平討意帳木就不能驾呱g 子遇捍誥谪大蚕圭个图：HTMLPage.KmIB-M2 W |5这是一则朮欽童套的新闻HTML:这是一JM非常重/sparo的新|H这是JMJsp*

13、n#常p nQtt|S2?l*3s=rTstyll,tSS Pfl3 classsstylall,ft|R4classsstylel pfl5 IT. W niH11 i MikCSS一 一个亓，幸祐idK匚应$同时橙怖iSfi的优荒報MMsu竟择器 注：重叠的部分是以id的为准，如颜色样式，其他不重叠的部分还要正常显示 部分CB-JM 二珮 I 三釉囚緬五这是 T 悻舷更实现新闻和其它的新闻 样式不一样，这怎么实现？span span5P4Hspsnspecial newEnt-styl;coLot: red;italic;class中的一个元索眠多有一个 id 选择器但是可以有多个类选择器

14、诒石一个案例:fM般闻五要实现新闻 3 有下划线并是斜体该 応么实現？方案：ad 选择器 b.类选择器肖-个元素被务个类选择器修饰时，它们用亨格隔开(1)可以给新闻三配苴丄d选择器(2)再指定一卜class选择器.my.css中添加：.style4 font-style: italic;text-decoratlon: underline; color: green;/* . style 1 就是类选择器，/ sty 丄 font-weight: bold; font-size: 20px;background-color: pink; font-style: noi:m&丄； col

15、or:black;htrol文件中如何适用多个class选择器:.spanspanspanspanspa njpj|ifll class=nstylelHj|jpl2 classclass-w gg.二- _ 二id=ns t yl e2 * M1! 重v/span的新|MstylelAttrit : elett BataTye : CH AT A闻345这是-則灵删新闻h再引用多个选择囲的时fit用空格隔开当ulsii a迭择器发生冲翼时，以在C33刘牛中，眾后出现的ClaSS选择踞徉式为隹 宦阐/新闻新闻在一个元素中不能有两个及以上id选择器，但可以有多个class选择器当一个元索殺阳选择

16、器庚选择器thtmlft择器同时限定时，光先 级是:阳选择器类选择器htmlte择器通配符选择器.2.8将类选择器和id选择器相同部分的容整合 在C3S文件中，如臬苞多个粪/：Ld选择器它fi活K荷相同的部分*我们可以把相同的芒样式放在一耘,见案例案例说明:案例：my.css厂招生广吿* /.ad_stu width; 136px;height: 196px;backgx;ound-coior : “FC7E8 mar gin: 5px 0 0 5px; float: left;广吿2*/background: 7CF574;丄19t. p: ；巧F；：；*丄0 at: left;Lar gi

17、n: 5px 0 0 6px;房地产广告 ad_house bac kground: # 7CF574;height: 196px;width: 152px;float: left;roar gin: 5px 0 0 6px;H再有些css中， 我门可以多个class选择器或考id选择器,hDm丄选挥器.共司的部分, 提出， 写在一起，这样好处，可以简化C33文件.上面的myHc ss文件可以写咸；黨倒：ttiy*C35,ad 3 u :136pv;round-color：SFCIESC;margin: Sp 耳 00 5px;/*r*a*/-ad_2 bsc tground:杲了匚F57：w

18、idth： 4S7p? margiTi: 5px 0 n fipx;严房地产厂吿斗#.,ad hcus# hackgroutid: M7CFS7;width; 152px;mar: 5px 0 0 Gpx;T，ad st uf id_2, ad house (height: 196px;f _Lo at: left;2.9课堂练习选择器一课堂小练习选榔悬媒习H胡电用活肖的(:瞬选揖2L完成下而的页而.媒习网衍所有的招林.豪求菽样时柄式：卩煖认祥止星飪包 24PM 华文新 JS 字休没有 下地鰻12当鼠融蔚到題犍接时冃动出现卜劉蜒苻体人屮变成机 p 右不体受成 宋体(3点击麻礁皓按变成灰色.练习

19、1宋注 点员外釣子头大刀董:胜卢员外吳用的子头大门关桂html:!DOCTYPE HTML FUBLIC /H3C/DTD BTHL4.01 Transitional/ENexaml *httnlmetd http-emeta ftttpequiv=cententtype ccntenr=Mtext/ntmi; charset=FTF-甘“a|排疔榜CffcnnCrr/SH；span ciass=sJjh负夕卜：/spariXbi /Xbi /spn class=fls4bi: /大ZF关fit弋panxtr/ -css：练习2稣习2I网页所有的超链接戾求这样的格式：JW认样式是红哲.24P岳

20、华文新霜酬邈有纟|下甥线I琴当风标絲动鋤宦链接儿Ii貝动出现卜期线字侔人小眾删*P儿字体变战召宋体.乡纟点击后概整变战灰也11html:.si tont-siz-e: SOpx; color: blue r.321bacjtgtound-COIQIi grayr forit-style ; ital ic ;CQIQIT: tied;font-wi-ght: bold;.si oat-sizei50px; coloriblue;.s3Ibackground-color; gray; font-wei-ght:bold;background-cclor; gray; tontweight: bo

21、ld;font-stylei italic *tlon; MndrLln;f ont- styl-e: ital ic ; color:red;font-weightbold;background-color: gray;Coat-styl: italicr t*Kt-deeoratien:underline;css使用 html 元累透操器叮a;linkcolor: rd;forits24p3t. font-Xamlly:华文制 SL textdcoration: none;a:hovetcolor: reen;tont-size: 40pxrfont-family:f,2#r,；text-

22、le 匚 0 上盘七 ion; under line; 卜A: vis ite J Jlor: gray;3块元素和行元素3.1概念块元素和行内元素庶元素和行内元紊概态行内元(Inline element),又叫内联元素：內联元素只能容纳文本或者其地内联元秦常见内联元 ti /hlinrk 口 lam 口 nF 卜块元呆一般都从新行卄何以容纳文本，其它内联元案和其它块元热 即使内容平能占满一行.块元素也更把整行占满利常见块元 举例说明:HTMLPage3.htm卄-F料二尺=普=严dlfJjygQtjQ gotcgtgoto:ahrfIfgotcsohul 處平 w / 乳 一;LL/ :：-

23、sohu2Wl1亨ohu3M?平W/.Xbr/AsohuWlTscohuB 舉申it.3.2各自存放的容及相互转换块元索和行內元幕行内元! (inline elements对点是貝占内容的宽匪.默认不会换疔， 行内元第一 般放文本弱着基它的行内元素，按元(block element#特月不管 F 容有多少*他蕙橄行*同时占-箫整行块元秦 可以放文本*行內元蠹块元舉.c p -LJLc las3=a1,F.-spanl he Liorworld-;,/ iiLrJi.-span亡丄ass=slr-spanl hel_Lc,world-.丄丄”class= *32* divl 7丄.1 V c 1

24、 SJ1=rtsZHdiv3 块元畫和行内元素刖转換如果瓷们希姿一个元素按遇块元素方式捉示；则：d-La plt*y I beek;如果我f泰望一个元素按照行內元素芳式显示；则：*_1丄play ：J_H丄丄遊；spanljMS|iohuhellD.world .span class= sispanl hellorworld- /spanxsp an cla$s=sl,spanl helloFworld 5pan class=,rs2dvl /divxbrdiv2 连搖到白-度7 Xdiv3/d sp4O cl a ss=K tyleiJspUiy: inlinejF cla3SH1s3,pl

25、j5JJ|c/spflnL 4 CSS核心容4.1流小知识：配置eclipse模板: css 09标准流力E标淮陋标准歳”再期页帝届中.写在前面的元秦岀现在前面.后面的元lb出现后面.这是戦 认的帝启方式，也称対标淮證.菲标淮盜：再睁崩血布舄中，聲帕四昶需驻便用菲标准獄的方式来布局溝环兀蓋， 股离它車身的位直.).4.2 CSS的盒子模型CS3的蹇孑樓型 盒孑厦型的庚理图：堀节说明：html元驚都可囚看戚一 畫子盒子障嬰的琴照物不一样则梗甲的疏性不一样，比如从divl的甬度音.杲mar gin-J：xghtf)Kdxv；j t 5R|jl: margin-left * 如異你不希関砖杯外观刚尽

26、愛幽用maw希品.冈冷 如日血删 可能令谦辛債孑 的丸小(相当于这个盒子肖掘性八irargin过大.盒子內蓉被挤封盒子外辺去.但墨盒子車身没有变优mai gin-topborder-toppaddiiig-topmwgini.ghfbordcrAigh-paddins-rifrfcontentpLlrk炸R二一三/:匸7一nn脚个元冥冋賞拒軋怖T上下右右】案例:页面:HTMLOOCTYPEhtml E-U3LKXHTML1.0 Transitional/rEhrIlttp： /www,w：liiU. ucl-TT5tylt5hect,Ttype-,Ttflxt/cs3rr/boxl u$3,A

27、/h世赳“W classslxifitg x=上 萌和xglgCSSbod bordx: lpx solid cad;/bodyjfrjfeTborder的羸度，A瞬色（農序可以議息xidth; RODpx：height; lOOOpx；aiargini 0 auto; - *0表不匕下yato谨屮丿r后喘申叫.511width: 50px;height: 52pxrborder: lpX sol id blue;niargln-top： LOpx ；ffrgin-lcft: lODpx;,p4ddir9top； Spx;Ipaddlnq-lert： bpxpI,si Lmg1 IHTML I

28、a hrefsfiliximg src=11images/r,/x/l i1 iXimg src=rTinuges/aa b呻TFX/liA1 ixlmg src=rTimages/aa . bmp/X/l1iXigsrc=,Timages/aa*bn4.4.盒子模型练习9-0 .R址ift tF? MrCSS youku * cssbody margin; 0 auto；width: 1000 px;height:100Opx;border: lpx sclid b丄ue;font-slae!12 px;).divlwidtht 330px;hexght: 37Qpx;/+bQcdec: I

29、pxSQlxd gry;*/ )1*宦义几亍常用的font 1 font-weight: bold;fant3iz:e: 20px;margin: 2px 0 0 Zpx;) spanl/*background-color: pink;*/display: block;.spanl amargin-top:4px;float: right;faceulwidth: 3 50px;height: 65px;/*background-color: green;*/list-style-type: none;padding: 0;.faceul 11float: left;width: lOOpx;

30、height: 78px;margin-left: 6px;text-align: center ;/*text-align 衰不放在该兀素的其他兀素会左右居中.*/.f areul ung margin-top: 2px; width: 60px; height: 60px; padding-bottom: 2px; 厂定义几和超琏捋样式a:linktext-decoration: none;html 0 r-sp in class=，rsp *nllrxt - nt cl Jss=Eontl1. JX 4A a hr鼻*：电埶牛人町srcsiiMgts/I png !XAhrf=1ptti

31、rJ|i/Ii优Aft牛人 a huef*牛人fcH三rc*N.pnglf/xbr/xa=优酷牛人优酷车人玉三优酩牛人张三厳三叢三4.5浮动浮动是 T塞的戳念；分为左萼动，右淳动除潛 Sh淳动色要咗3WV.1S 况下，11V 妝向 It 貝止匕页；Idiv2div3 divM:黑再塑訓丄”向右面显苑遴烘f?蜗右浮动:ttdlv2|float:right；/*右浮动：是指让该元素，尽童向右边移动，直到継到德的父元養的右紡歩如果號门希塑，所有的元豪，橋向尬列，则淇用到左浮动;这时，讨div的 e 已滝加:t丄oat: ietc ;対刖注商i为黒一行兗慶*不跻下所有旳cHvMJ会自动换琏Idiv2d

32、iv3dizldiv2div3diIdivSdiv3div第三天容回顾4.6浮动理解强化浮动-trtr/r：2T只；弋陪宀-扌 rH：；#苦 W.子.負一汽曰片驴”沁卡，订孚一知”旻丰1*#护r旻一只町貴加沿,卄*H刃F- -|L*只司岌E-I,：整T1斗一沪I-靈：t胡和世量一只可知H、笔畀14-Rr*r達量一貝可M优*一頁亍孚骑屮耳 过一貝可的仕讥卡一貝可专怡1h耳沪-貝注甲，ij f-R可的u*-Rcrftiwdvi遵量一貝”加尔邑胪i這量一貝可跆+若#*iK-Ftww 12毛一卜工霍飢片皂沪 弋1貝可瓷汨中毛畀I这去一只氏胃船卜在护 abc lkasilfksalkakf 1 ;fas

33、kfl safkfsalfdkal skf s asfdsjlktlsikf lsafksal si /ficjsalf sakflsakfISJ:fksdfS4fkjsajf sajf:1skjf 1skjf : 1sjfk 1sajfsa;lkjfaslf sa fksarlfkjsa 1f st ；lslkfirg-style-afloat: left-,Tsr11images/-1 . jpg abc 1 kasilf ksalkakf 1 afa asfdsal ：kf.lsakf lsafksajl:kjf51 fkjsalf ;sakfrlsafcflsa ;fksafsaf；4

34、it *1 sdjif *1 sakif rl sakjf .L1 sajf k -134jf sa / lkjf aslf 34 -f ks 1 f kj sa If sf lslkf safkjsajf ;lsajf lsakjfilsakjhlsjf k；lsajf sarlkjf dslf ;Cks :lf sf lslkf saf kjsaif ;lsaf lsaklf *1 saki 1 k Isa jf sa -lkjf A31f sa ；rksd ;lfsf :131kt对应页面：代码:4.7清除浮动如累不希望別的元素在集个元索的左边或者右边，可以铁用清除浮动的 方法clear

35、:right ; clear: left; cleanboth4.8定位-定位基本概念CSSi：位性允许你対元素进行龙位-pgitionH性値：static（默认値）：元素框正諸生破口块级元素生成一个JEK1E.作为 文档流/标准流的-部分，行内兀素则会创建一个或多个行框，置十其父 元素中。relative: Affifi移某个距孤 元素仍保持其末宦位前的形状， 它 惊本所占的空间仍保紹从汶一角度看，好像该兀索仍然在文档流娇准流 中样。absolute:元東框从文档流完并相对于其色含块定位。 包含 块可能是文档中的另一个兀素或者是初始包含块口兀素原先在正常文档流 中所占的空制会关闭就歸像元素磊來不存在一样。元素定位肩生成一个 快级梔*而不论原来它在正常流中生成何种类型的桓。fixed:兀盍框的表址类似+position设聲为absolute,不过其赳 含块