Aftësia për të formatuar saktë kodin CSS është e rëndësishme për çdo dizajner në internet. Ky mësim është krijuar për fillestarët që sapo po hedhin hapat e tyre të parë.
Prezantimi
Duhet të jeni jashtëzakonisht të kujdesshëm kur punoni me CSS. Kur shkruani kodin, duhet të ruani përqendrim ekstrem.
Ky mësim do të tregojë një shembull se si të krijoni një faqe të thjeshtë HTML duke përdorur paraqitjen e bllokut (pa përdorur tabela). Ne gjithashtu do të mësojmë se si t'i vendosim stilet në një fletë stili të veçantë.
Hapi # 1 - Shënimi dhe përdorimi i etiketave
Shënimi HTML gjithmonë vjen përpara stileve. Nuk ka kuptim të hidhesh në CSS pa e pasur HTML plotësisht gati.
HTML është një gjuhë shënjimi hiperteksti, me fjalë të tjera, HTML përshkruan strukturën e informacionit të tekstit të një faqeje. Para se të fillojmë të aplikojmë stilet CSS, duhet të mësojmë se si të aplikojmë elementet e strukturës.
Kur ndërtojmë markup, ne përdorim "etiketa" që rrethohen me kllapa këndore. Etiketat përdoren për të përcaktuar diçka në një faqe. CSS përdoret më vonë për të përcaktuar se ku (në shfletues) shfaqet përmbajtja e një etikete të veçantë.
Etiketat më të thjeshta në një faqe janë:
Shumica e etiketave dhe përmbajtjes përdoren brenda .
Një etiketë shumë e rëndësishme për ndarjen dhe përcaktimin e strukturës është . Duke përdorur këtë etiketë, mund ta ndani përmbajtjen në qeliza. Brenda këtij etiketimi, mund të përdorni etiketa të tjera për të përcaktuar përmbajtjen (për shembull, lidhje, tekst, imazhe), të cilat më pas mund të stilohen bukur duke përdorur CSS.
Përdorni çdo redaktues imazhi për të vizatuar skicën e mëposhtme:
Kodi për këtë shabllon duhet të duket si ky:
Siç mund ta shihni, etiketat div kanë ID. Do të na duhet kjo për të dizajnuar çdo qelizë. ID-ja përdoret për të etiketuar etiketën dhe për t'i dhënë një stil unik. Ndërsa "klasa" përdoret për përsëritjen e elementeve të dizajnit.
Gjithashtu, shembulli përdor një tjetër "mbështjellës" div, i cili "mbështjell" të gjitha etiketat e tjera. Kjo do të jetë e dobishme për ne më vonë për të pozicionuar faqen tonë.
Në fletën e stilit ne përcaktojmë elementet e dizajnit të faqes. Mund të krijoni ose një fletë stili të brendshëm ose të jashtëm. Në këtë mësim do të përdorim atë të jashtëm.
Nëse e shikoni faqen tuaj në një shfletues tani, asgjë nuk do të shfaqet. Kjo sepse ne nuk i kemi dhënë etiketat tona asnjë ngjyrë apo formë. Dhe meqenëse CSS-ja jonë do të jetë e jashtme, gjëja e parë që duhet të bëni është të siguroheni që faqja të ketë një lidhje me fletën e stilit.
Shtoni kodin e mëposhtëm midis:
Hapi # 3 - Krijo CSS
Sintaksa CSS përbëhet nga një përzgjedhës, një pronë dhe një vlerë. Një përzgjedhës është një etiketë që duhet të stilohet në dizajn, një veti është lloji i atributit që dëshironi të shtoni dhe një vlerë është një matje sasiore e vetive.
Përzgjedhësi, përveç etiketës së trupit, shkruhet në CSS duke filluar me "#" ose ".". "#" specifikon ID-në dhe "." (pika) specifikon klasën e përzgjedhësit. Mund të ketë shumë prona brenda një përzgjedhësi dhe të gjitha ato duhet të rrethohen nga ( ).
#zgjedhës (
prona:vlera;
prona:vlera;
prona:vlera;
}
Ne duhet të stilojmë etiketat e mëposhtme duke përdorur
CSS:
*trupi
* mbështjellës
* kokë
* navigacion
*menu
* përmbajtje
*fundit
Karakteristikat dhe vlerat e mundshme në CSS:
Vetia "sfondi" mund të jetë një imazh ose një ngjyrë, ose të dyja. Për të shfaqur një imazh, vlera duhet të përbëhet nga shtegu për në imazh. Një kod heksadecimal përdoret për të përcaktuar ngjyrën.
Vetia "color" përdoret për të përcaktuar ngjyrën e përzgjedhësit. Vlerat shkruhen si kod heksadecimal (shembull: #FFFFFF për të bardhën).
Vetia "font-family" ju lejon të përcaktoni fontin që do të përdoret. Norma është që të përfshihen të paktën 3 lloje shkronjash. Kjo bëhet në rast se shfletuesi nuk mund të shfaqë fontin e parë, do të përdoret i dyti, etj. (shembull: Trebuchet MS, Arial, Times New Roman)
Vetia "font-size" specifikon madhësinë e shkronjave dhe ka një vlerë në pixel.
Vetia "margin" përdoret për të përcaktuar pozicionin e përzgjedhësit. Vlerat specifikojnë distancën e anëve të përzgjedhësit deri në skajin e dritares së shfletuesit në rendin e mëposhtëm: lart, majtas, poshtë, djathtas. Nëse duhet të vendosim faqen në qendër, shkruajmë "0px auto 0px". Specifikimi i të katër anëve është opsional.
Vetia "width" specifikon gjerësinë e dëshiruar në pixel të çdo përzgjedhësi.
Vetia "lartësia" është lartësia në piksel.
Vetia "float" na lejon të pozicionojmë elementët brenda përzgjedhësve, në shumicën e rasteve djathtas ose majtas.
Për të krijuar një skedar CSS, hapni redaktuesin tuaj të preferuar të tekstit dhe ruani dokumentin e ri si style.css në dosjen e faqeve të faqes tuaj. Shtoni kodin e mëposhtëm:
Trupi (
sfond: #f3f2f3;
ngjyra: #000000;
font-familja: Trebuchet MS, Arial, Times New Roman;
madhësia e shkronjave: 12 px;
}
#mbështjellës (
sfond: #FFFFFF;
diferenca: 60 px automatike;
gjerësia: 900 px;
lartësia: 1024 px;
}
#header (
sfond: #838283;
lartësia: 200 px;
gjerësia: 900 px;
}
#navigacion (
sfond: #a2a2a2;
gjerësia: 900 px;
lartësia: 20 px;
}
#menu (
sfond: #333333;
noton: majtas;
gjerësia: 200 px;
lartësia: 624 px;
}
#përmbajtje (
sfond: #d2d0d2;
gjerësia: 900 px;
lartësia: 624 px;
}
#footer (
sfond: #838283;
lartësia: 180 px;
gjerësia: 900 px;
}
konkluzioni
Ju keni kaluar nëpër shkollën e luftëtarit të ri CSS dhe keni stiluar të gjithë përzgjedhësit duke përdorur vetitë e mësipërme.
Shpresoj se ju ka pëlqyer mësimi! Pres komentet dhe sugjerimet tuaja.
Ky artikull nuk synon të jetë një udhëzues gjithëpërfshirës për gjuhën e shënjimit të dokumentit HTML. Ai përshkruan bazat e HTML - parimet themelore, konceptet dhe përkufizimet e kësaj teknologjie, duke zotëruar të cilat, ju lehtë mund të vazhdoni në studimin e kodimit HTML.
Për të studiuar mësimin, shkarkoni arkivin me skedarët e nevojshëm.
HTML është një gjuhë shënjimi e dokumentit. Shqiptimi i saktë është HTT.
A keni punuar ndonjëherë në redaktuesin e dokumenteve Word ose aplikacione të ngjashme të zyrës? Ju ndoshta e dini se ky lloj redaktuesi ka aftësi të pasura për redaktimin e tekstit, rregullimin e elementeve, futjen e fotografive, etj.
Pse, mund të pyesni, të shkruani për përpunuesit e tekstit në një artikull mbi HTML? Por pse. Nëse e kuptoni, çfarë është një redaktor zyre? Ky është një aplikacion për redaktimin dhe shfaqjen e dokumenteve.
Fjala kyçe këtu është dokument. Kjo do të thotë, ne krijojmë, modifikojmë dhe shikojmë një dokument në ndonjë program, në këtë rast - në një redaktues zyre. Nëse hapim një dokument të tillë në një redaktues të thjeshtë teksti, për shembull, Notepad, do të shohim shumë simbole dhe shenja të çuditshme. Kjo rrëmujë simbolesh është e pakuptueshme për njerëzimin, por e kuptueshme për kompjuterët. Falë kësaj gjuhe të brendshme, dokumenti Word merr një strukturë dhe pamje të caktuar në vetë redaktuesin dhe dokumenti shfaqet para nesh në të gjithë lavdinë e tij me tekst të formatuar dhe fotografi në vend të tyre.
HTML është një gjuhë e shënjimit të dokumentit për shfletuesin. Word këtu është shfletuesi, dhe dokumenti është faqja HTML. Kjo është vetë baza e teknologjisë HTML, kuptimi i së cilës është i nevojshëm për të mos ngatërruar gjuhën e shënjimit të dokumenteve të uebit me gjuhët e programimit. Emri flet vetë - duke përdorur HTML ne shënimi, ku në faqe do të shfaqet elementi, fotografia ose teksti dhe në çfarë rendi do të shfaqen pranë njëri-tjetrit.
Po, shtypja dhe formatimi i thjeshtë i tekstit në aplikacionet e zyrës nuk ka të bëjë fare me programimin. Por lexuesi i vëmendshëm do të vërejë një detaj të rëndësishëm - në një përpunues teksti ne shtypim, modifikojmë dhe formatojmë tekstin dhe fotografitë duke përdorur butona dhe meny vizuale, por pse kodi HTML shkruhet me dorë? Pse të mësoni kaq shumë detaje teknike të shkrimit të shënimit për një dokument?
Në fakt, ka shumë redaktorë me të cilët mund të krijoni dhe modifikoni faqe HTML, të ngjashme me Word-in. Kjo do të thotë, kodi burimor HTML është i fshehur për ne dhe ne nuk hyjmë në të.
Një lloj Word për HTML. Këta redaktues vizual quhen:
WYSIWYG redaktorët - W hat Y ou S ee I s W hat Y ou G et. Kjo do të thotë, nëse e përkthejmë në Rusisht: ajo që shohim është ajo që marrim.Unë i quaj "wuzivoogies". Edhe pse kjo është fonetikisht e pasaktë, ajo tregon qartë pakuptimësinë e kësaj shpikjeje. Fillestarët shpesh përdorin redaktorë të tillë për të krijuar faqet e tyre të internetit të para. Sigurisht, kjo është e përshtatshme - nuk keni nevojë të gërmoni në studimin e etiketave, stileve të dizajnit dhe gjërave të tjera, në shikim të parë, të pakëndshme dhe komplekse. Vetë redaktori i konverton automatikisht veprimet tona në kod HTML.
Por, siç thonë ata, asgjë nuk ndodh. Më konkretisht, kjo qasje ka të meta shumë serioze. Çfarë i pengon të gjithë të përdorin redaktorët vizualë për të dizajnuar faqe HTML? Fakti është se faqet e formuara në këtë mënyrë zakonisht kanë shumë kode të panevojshme dhe shumë gabime nga pikëpamja semantike. Tani, natyrisht, nuk ka probleme me një lidhje interneti me shpejtësi të lartë dhe ndryshimi në madhësinë e faqes prej 400 kb dhe 100 kb nuk është i rëndësishëm për shpejtësinë, megjithatë, kodi HTML i optimizuar dhe i shkruar saktë eliminon shumë probleme dhe ofron shumë përparësi, gjegjësisht:
- Kodi kompetent HTML ka një efekt pozitiv në optimizimin e motorit të kërkimit dhe shpejtësinë me të cilën një robot kërkuesi zvarritet një faqe. Kilobajtë e kodit të gjeneruar nga vuzivuga nuk janë të pranueshme dhe madje të dëmshme;
- Kodi HTML i krijuar nga redaktori WYSIWYG ka shumë gabime semantike. Kjo do të thotë, etiketat e krijuara nga një redaktues i tillë përdoren për qëllime të tjera, ku duhet të përdoren, për shembull, listat
- , redaktori do të gjenerojë një etiketë tjetër që nuk na nevojitet. Varet, natyrisht, nga redaktori, por këtu nënkuptojmë zgjidhje komplekse për krijimin e faqeve të internetit, dhe jo thjesht redaktimi i tekstit në një zonë teksti duke përdorur mjetet WYSIWYG.
- Gjenerohen shumë etiketa të panevojshme dhe struktura e dokumentit bëhet e fryrë. Le të themi se lëvizni një element në një program të tillë, së pari në të djathtë, pastaj në të majtë, pastaj në qendër - çdo veprim lë një gjurmë në kodin burimor HTML. Redaktori është një program dhe nuk mund të dijë se çfarë saktësisht dëshironi të merrni si rezultat; ai gjeneron tonelata kodesh, duke marrë parasysh të gjitha opsionet e mundshme për sjelljen e dokumentit në shfletues.
- Si rregull, redaktorët për dizajnin vizual të kodit HTML bëhen shpejt të vjetëruar. Dhe për shkak të mungesës së interesit nga ana e profesionistëve, ata përgjithësisht janë të privuar nga mbështetja dhe ndalojnë së zhvilluari. Dhe HTML po evoluon. Gjithçka zhvillohet përveç wuzivoogi. Prandaj, ata nuk mund të gjenerojnë kod të saktë dhe modern që do të përdorte veçori dhe zgjidhje të reja.
- Mbështetja dhe zhvillimi i projekteve të tilla është ndëshkim qiellor. Nuk mund të flitet fare për përdorimin e modeleve dhe ripërdorimin e kodit.
Pra, ne do të shkruajmë HTML vetëm me stilolapsa. Mjetet adekuate për redaktimin vizual të HTML nuk janë shpikur ende dhe nuk ka gjasa të shfaqen. Gjuha e shënjimit HTML është e lehtë për t'u mësuar dhe kuptuar, dhe ka shumë mjete për automatizimin e shkrimit të kodit HTML, por më shumë për këtë në mësime të tjera.
Pasi u mërzitën pak me redaktuesin WYSIWYG, gurutë e rinj të HTML-së e lënë këtë detyrë të kotë dhe vazhdojnë.
Struktura e dokumentit HTMLPër klasat, unë rekomandoj shkarkimin dhe instalimin e redaktorit Sublime Text. Unë rekomandoj shumë të mos përdorni Notepad-in e integruar të Windows për paraqitjen HTML nëse nuk dëshironi të prishni psikikën tuaj në fazat e hershme të mësimit të HTML.
Ne vendosëm që do ta shkruanim kodin e dokumentit HTML me dorë, domethënë, ta shkruanim atë. HTML Layout është procesi i krijimit të një dokumenti HTML. Në njerëzit e thjeshtë dhe qarqet e informuara, është thjesht plan urbanistik. Çdo dokument ka një strukturë dhe rregulla të caktuara ndërtimi. Nga çfarë elementësh përbëhet kodi, cila është struktura e HTML?
Le të krijojmë një shabllon fillestar në kompjuter - skedarin index.html, ta hapim duke përdorur një redaktues dhe ngjisni kodin e mëposhtëm në të:
Trupi i titullit të dokumentit Ju lutemi vini re se dokumentet HTML kanë një shtrirje .html.
Pra, sipas shembullit.
- lloji i dokumentit (doctype)Ky konstruksion tregohet gjithmonë në fillim të dokumentit në mënyrë që shfletuesi të "kuptojë" saktë se cili version i HTML përdoret gjatë ndërtimit të dokumentit.
Për shkak të faktit se HTML është vazhdimisht në zhvillim, ai ka disa versione, si çdo produkt softuer. Versioni aktual i HTML është i pesti dhe doctipi i dhënë në shembull është aktual.
Në parim, nuk ka kuptim të thellohemi në studimin e llojeve të dokumenteve, sepse me lëshimin e HTML5 ky dizajn është bërë standard. Thjesht futeni atë në fillim të dokumentit sa herë që filloni të krijoni një plan urbanistik.
- fillimi i dokumentitEtiketa e parë që shohim pas doctype është .
Një etiketë HTML është një njësi strukturore e shënimit të dokumentit HTML. Kodi HTML përbëhet nga blloqe ndërtimi të quajtura etiketa. Çdo etiketë ka funksionin e vet dhe mësimi i gjuhës së shënjimit HTML në fund të fundit ka të bëjë me mësimin e etiketave dhe vetive të tyre në një dokument.
Dua të vërej se të mësuarit e HTML nuk është aq e vështirë sa mund të duket në shikim të parë. Mësimi i etiketave të përdorura në shënimin e dokumenteve nuk është një barrë aq e madhe për trurin.
Pra, shënimi i dokumentit fillon me një etiketë dhe përfundon me një etiketë mbyllëse. Çdo etiketë që përmban etiketa ose elementë të tjerë duhet të mbyllet me një etiketë mbyllëse. Për shembull, , , etj.
Etiketa është e detyrueshme sepse përmban të gjithë strukturën e dokumentit dhe është një mbështjellës për elementë të tjerë.
EtiketëMë pas, ne shohim etiketën, e cila përmban elementë të tjerë që nuk janë ende të qartë për ne. Përmban elementë të tjerë - kjo do të thotë që elementët ose etiketat janë midis etiketave hapëse dhe mbyllëse të konstruksionit:
përmbajtje ose etiketa të tjera
Qëllimi i etiketës është të ruajë informacionin meta të një dokumenti HTML, domethënë informacionin që nuk shfaqet në vetë dokumentin, por është i rëndësishëm dhe përcakton kryesisht se si do të duket dhe sillet dokumenti.
Ky etiketë kërkohet në dokument.
Titulli është një etiketë e kërkuar që përmban meta informacione tekstuale që shfaqen në shfletuesin ose titullin e skedës. Etiketa duhet të jetë në . Gjithashtu, përmbajtja e kësaj etikete përdoret nga motorët e kërkimit për të shfaqur dokumentin në rezultatet e kërkimit.
Meta etiketëMeta etiketa është një etiketë e specializuar e krijuar për të ofruar të dhëna të strukturuara për një faqe. Meta etiketat përdoren më shpesh në . Meta etiketat nuk kërkohen në strukturën e një dokumenti HTML.
FaviconBashkëngjit një skedar me një imazh favicon në dokument. Favicon është një ikonë miniaturë e shfaqur pranë titullit të dokumentit në një skedë shfletuesi. Favicon është një skedar grafik me përmasa 16 x 16 (ose 32 x 32) pikselë, i cili mund të ketë formate të ndryshme, si png, jpg, ico, gif. Tradicionalisht përdoret formati ico. Faviconët e animuar janë skedarë gif që përmbajnë animacion. Ju mund të shihni një favicon të animuar, për shembull, në VKontakte, kur vjen një mesazh i ri.
Stilet e dokumenteve CSSPërfshin një skedar CSS me stil HTML në dokument.
CSS- kaskadë Stilet e dokumenteve HTML. Çdo etiketë që ndodhet në etiketë ka një grup karakteristikash, të tilla si ngjyra, gjerësia, lartësia, pozicioni në lidhje me elementët e tjerë. Të gjitha këto veti janë stile CSS që mund të eksportohen në një skedar të jashtëm. Dizajni lidh skedarët e jashtëm me dokumentin HTML, duke përfshirë stilet CSS.
Shënim: Vetia href e një konstrukti specifikon vendndodhjen e skedarit të jashtëm. Në shembullin tonë, skedari stil.css Dhe favicon.ico, ndodhen në të njëjtën dosje me skedarin index.html. nuk ka një etiketë mbyllëse.
EtiketëEtiketa përmban kod ose një lidhje me një skedar javaScript dhe përdoret më shpesh brenda një etikete, megjithëse mjeti i optimizimit të shpejtësisë së faqes së Google rekomandon përdorimin e kësaj etikete në fund të një dokumenti, përpara etiketës mbyllëse.
Në shembullin tonë, një skedar i jashtëm është i lidhur skript.js, i cili ndodhet në të njëjtën dosje me skedarin kryesor index.html.
Pra, miq, ne kemi parë elementët kryesorë që përdoren më shpesh në etiketë. Përveç këtyre elementeve, ka një sërë të tjerë që janë më specifikë dhe opsionalë.
Trupi i njohur ndryshe si trupiKëtu fillojnë të gjitha gjërat argëtuese dhe vizualisht të prekshme në paraqitjen HTML të një dokumenti.
Le të kalojmë drejtpërdrejt në paraqitjen e pjesës së dukshme të faqes. Gjithçka që shkruajmë dhe vendosim brenda etiketës do të shfaqet në shfletues. Le të hapim dosjen tonë index.html në shfletuesin për të parë qartë se çfarë po bëjmë në redaktues.
Etiketa mund të përmbajë çdo etiketë HTML të nevojshme për të dizajnuar dokumentin dhe për të siguruar funksionalitetin (formën) e tij. Unë do të jap një tabelë të etiketave më të përdorura dhe do të përshkruaj shkurtimisht secilën prej tyre. Ju mund të ekzekutoni menjëherë shembujt e dhënë në redaktues.
Ne nuk i kemi marrë parasysh të gjitha etiketat dhe kjo nuk është e nevojshme në këtë fazë. Gjëja kryesore është të kuptoni idenë themelore të HTML, të mësoni se si të përdorni etiketat e paraqitura më lart dhe më pas të vazhdoni.
Ju lutemi vini re se të gjithë emrat në skedarët e përfshirë duhet të shkruhen me shkronja latine, pa hapësira.
Për shembull, mos:
Kjo është e nevojshme për përputhshmëri më të madhe të përmbajtjes së faqes. Për më tepër, standardet për të shkruar kodin HTML diktojnë.
Pra, tani ne dimë disa baza të HTML: çfarë strukture duhet të ketë një dokument tipik HTML, ne njohim disa nga etiketat më të njohura, është koha të zbresim në pjesën më të shijshme - domethënë cookies.
Detyrë praktike në paraqitjen HTMLNëse nuk e keni shkarkuar ende arkivin me shembuj, bëjeni këtë. Për shembull, mund të shikoni skedarin shembull.html, i cili ishte gjithashtu në arkiv.
Kjo përfundon mësimin mbi bazat e HTML, në mësimin tjetër "Bazat e CSS" do të mësojmë se si të menaxhojmë stilet e elementeve të dokumentit, të njohim fletët e stileve kaskadë, të mësojmë se si të përdorim klasat e stilit dhe ta bëjmë paraqitjen tonë të bukur dhe plot ngjyra .
Shihemi sërish miq!
1.1. Në serverin tuaj lokal Xampp, në dosjen htdocs, krijoni një dosje testimi të quajtur test, me dosje css, imazhe dhe faqe në të, si dhe një faqe të zbrazët index.html të faqes sonë të testimit. Më pas, në dosjen e faqeve, krijoni një faqe interneti bosh, page_1.html dhe në dosjen css, dy skedarë bosh css: styles_1.css dhe styles_2.css. Mos e fshini dosjen e provës në të ardhmen; ne do të kryejmë të gjitha ushtrimet në të. Në dokumentet html, mos harroni të specifikoni kodimin utf-8 dhe titullin e faqes "titulli". Për të hyrë shpejt në faqen kryesore, krijoni një faqeshënues në shfletuesin tuaj. Rruga e adresës në faqe duhet të duket si http://localhost/test/index.html. Trego zgjidhje.
Zgjidhja e problemit nr. 1.1
1.2. Rikrijoni kodin për faqen e internetit të paraqitur në figurë. Përdorni fletën e brendshme të stilit, përzgjedhësit e elementeve p dhe span, vetitë e ngjyrave dhe gjerësisë css. Vendosni gjerësinë e paragrafit në 300 px. Përdorni ngjyrat e kuqe dhe blu. Trego zgjidhje.
Kushti i detyrës nr. 1.2
Detyrat CSS p ( ngjyra: e kuqe; gjerësia: 300 px; ) shtrirje (ngjyra: blu)
Zgjidhja e problemit nr. 1.2
1.3. Përdorni kushtin e detyrës së dytë, por vendoseni fletën e stilit në një skedar të jashtëm styles_1.css. Për të lidhur një fletë stili të jashtëm, përdorni elementin e shërbimit "lidhje". Trego zgjidhje.
Detyrat CSS
Teksti i paragrafit duhet të jetë me ngjyrë të kuqe. Por jo, sepse... Përmbajtja e elementit "span" duhet të jetë blu.
Zgjidhja e problemit nr. 1.3
1.4. Përdorni kushtin e detyrës së tretë, por lidhni fletën e stilit të jashtëm duke përdorur veçorinë @import, duke e vendosur rregullin në elementin e shërbimit "style". Trego zgjidhje.
Detyrat CSS /* Mund të përdorni hyrje të ndryshme të rregullave */ /* @import "http://localhost/test/css/styles_1.css"; */ @import url ("http://localhost/test/css/styles_1.css");
Teksti i paragrafit duhet të jetë me ngjyrë të kuqe. Por jo, sepse... Përmbajtja e elementit "span" duhet të jetë blu.
Zgjidhja e problemit nr. 1.4
1.5. Përdorni kushtin e problemit të dytë, por vendosni rregullin e paragrafit në skedarin e jashtëm styles_1.css dhe rregullin për elementin "span" në skedarin e jashtëm styles_2.css. Lidhni një nga këta skedarë duke përdorur elementin e shërbimit "link" dhe të dytin duke përdorur veçorinë @import, duke vendosur rregullin në elementin e shërbimit "style". Në të katër detyrat rezultati duhet të jetë i njëjtë! Trego zgjidhje.
Detyrat CSS @import url("http://localhost/test/css/styles_1.css");
Teksti i paragrafit duhet të jetë me ngjyrë të kuqe. Por jo, sepse... Përmbajtja e elementit "span" duhet të jetë blu.
Zgjidhja e problemit nr. 1.5
1.6. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Përdorni përzgjedhësit e ID, klasës dhe atributeve. Trego zgjidhje.
Detyrat CSS
"Hapësirë" blu.
"Hapësirë" e gjelbër.
Kodi i faqes për detyrën nr. 1.6
Paraqitja e kërkuar e faqes në detyrën nr. 1.6
#p_1( ngjyra: e kuqe; gjerësia: 300 px; ) .s_1 (ngjyra: blu; ) shtrirje (ngjyra: jeshile; )
Zgjidhja e problemit nr. 1.6
1.7. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Lejohet të përdoren vetëm përzgjedhës kontekstualë, fëmijë dhe ngjitur në rregullat e CSS. Trego zgjidhje.
CSS sfidon Orange "em"
Vija e parë e kuqe e paragrafit.
"Hapësirë" blu.
Kodi i faqes për detyrën nr. 1.7
Paraqitja e kërkuar e faqes në detyrën nr. 1.7
Zgjidhja e problemit nr. 1.7
1.8. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Përdorni përzgjedhës pseudo-class dhe pseudo-element :hover , :visited , ::first-letter . Për një paragraf, përdorni një përzgjedhës të rregullt të elementeve. Trego zgjidhje.
Sfidat e CSS Kur rri pezull mbi mua, unë bëhem portokalli.
Vija e parë e kuqe e paragrafit.
Unë jam vizituar tashmë.
Kodi i faqes për detyrën nr. 1.8
Paraqitja e kërkuar e faqes në detyrën nr. 1.8
P( ngjyra: e kuqe; gjerësia: 300 px; ) em:hover( ngjyra: portokalli; ) p::shkronja e parë( ngjyra: blu; ) a:vizituar(ngjyra: jeshile; )
Zgjidhja e problemit nr. 1.8
1.9. Cili përzgjedhës ka më shumë specifikë: p em(...) ose p.class(...), #m_d(...) ose em.m_cl(...), div p#my_id span(... ) ose div span#s_id(...), div>div.my_class p.kuqe_ngjyra span:hover(...) ose div p+div p.ngjyra_gjelbër span(...). Trego zgjidhje.
Ne përcaktojmë specifikat dhe krahasojmë. p em(...) em.m_cl(...), sepse (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.ngjyra e kuqe span:hover(...) > div p+div p.spanja e ngjyrës së gjelbër(...), sepse (0,4,4)>(0,2,5).
Zgjidhja e problemit nr. 1.9
§2. Vetitë CSS për tekstin, fontin, listat, tabelat dhe format2.1. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Vendosni gjerësinë (gjerësinë) e paragrafëve në 500 px, sfondin (ngjyra e sfondit), përkatësisht, vendosni në të verdhë dhe vjollcë (vjollcë), distancën midis fjalëve, përkatësisht, 3px dhe 12px, distancën midis shkronjave individuale - 1px dhe 2px, lartësia e rreshtit - 1.1em dhe 1.6em, dhëmbëzimi i rreshtit të parë - 1% dhe 3%. Në paragrafin e dytë, teksti duhet të rreshtohet në të djathtë. Mos harroni të kaloni (nënvizoni) linjat e duhura. Krahasoni rezultatet e formatimit të të dy paragrafëve. Trego zgjidhje.
Detyrat CSS
Fjalia e parë e paragrafit.
Fjalia e parë e paragrafit. Fjalia e dytë më e gjatë e paragrafit. Fjalia e tretë dhe e fundit e paragrafit.
Kodi i faqes për detyrën nr. 2.1
Paraqitja e kërkuar e faqes në detyrën nr. 2.1
P_1 (gjerësia: 500 px; ngjyra e sfondit: e verdhë; hapësira e fjalëve: 3 px; hapësira e shkronjave: 1 px; lartësia e rreshtit: 1,1 em; dhëmbëzimi i tekstit: 1%; ) #p_2 (dekorimi i tekstit: vija-përmes ) .p_3( gjerësia: 500 px; ngjyra e sfondit: vjollcë; hapësira e fjalëve: 12 px; hapësira e shkronjave: 2 px; lartësia e rreshtit: 1,6em; dhëmbëzimi i tekstit: 3%; rreshtimi i tekstit: djathtas; ) #p_4 (teksti -dekorimi: nënvizoni;)
Zgjidhja e problemit nr. 2.1
2.2. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Vendosni gjerësinë (gjerësinë) e paragrafëve në 500 px, sfondin (ngjyra e sfondit), përkatësisht, vendosni në të verdhë dhe vjollcë (vjollcë). Për paragrafin e parë, përdorni fontin Arial, dhe për të dytën - Times New Roman. Vendosni madhësinë e shkronjave në të dy paragrafët në 1em. Përdorni veçoritë font-variant , font-weight, font-style kur është e nevojshme. Krahasoni rezultatin e formatimit të tekstit me rezultatin e formatimit në detyrën 2.1. Trego zgjidhje.
Detyrat CSS
Fjalia e parë e paragrafit. Fjalia e dytë më e gjatë e paragrafit. Fjalia e tretë dhe e fundit e paragrafit.
Fjalia e parë e paragrafit. Fjalia e dytë më e gjatë e paragrafit. Fjalia e tretë dhe e fundit e paragrafit.
Kodi i faqes për detyrën nr. 2.2
Paraqitja e kërkuar e faqes në detyrën nr. 2.2
P_1( gjerësia: 500 px; ngjyra e sfondit: e verdhë; font-familja: arial; madhësia e shkronjave: 1em; ) #p_2( variant i shkronjave: small-caps; ) .p_3( gjerësia: 500 px; ngjyra e sfondit: vjollcë; font-family: "times new novel"; madhësia e shkronjave: 1em; pesha e shkronjave: bold; ) #p_4( stili i shkronjave: italic; )
Zgjidhja e problemit nr. 2.2
2.3. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Vendosni gjerësinë (gjerësinë) e listave në 500 px, sfondin (ngjyra e sfondit), përkatësisht, vendosni në të verdhë dhe vjollcë (vjollcë). Përdorni veçoritë list-style-type dhe list-style-position kur kërkohet. Krahasoni rezultatet e formatimit të të dyja listave. Trego zgjidhje.
Detyrat CSS
- Ne përdorim llojin e shënuesit dhjetor.
Kodi i faqes për detyrën nr. 2.3
Paraqitja e kërkuar e faqes në detyrën nr. 2.3
Lista_1 ( gjerësia: 500 px; ngjyra e sfondit: e verdhë; lloji i stilit të listës: dhjetore; pozicioni i stilit të listës: jashtë; ) .list_2 (gjerësia: 500 px; ngjyra e sfondit: vjollcë; lloji i stilit të listës: katrori; list-style-pozicion: brenda;)
Zgjidhja e problemit nr. 2.3
2.4. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Përdorni veçoritë caption-side , kufiri-collapse spacespace , boshe-cells . Krahasoni rezultatin e formatimit të të dy tabelave. Trego zgjidhje.
Detyrat CSS
| Qeliza 1.1 | Qeliza 1.2 |
| Qeliza 2.1 | Qeliza 2.2 |
| Qeliza 1.1 | Qeliza 1.2 |
| Qeliza 2.2 |
Kodi i faqes për detyrën nr. 2.4
Paraqitja e kërkuar e faqes në detyrën nr. 2.4
Tabela_1( ana e nëntitullit: lart; palosja e kufirit: palos; ) .tabela_2( ana e titullit: fundi; palosja e kufirit: veçuar; hapësira kufitare: 5 px; qelizat boshe: fshih; )
Zgjidhja e problemit nr. 2.4
§3. Vendosja e madhësive, kufijve, mbushjeve dhe kufijve të elementeve3.1. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Vendosni gjerësinë e paragrafit të parë në 400px, të dytën në 300px. Vendosni lartësinë e paragrafit të parë në 10vh, të dytën në 200px. Në paragrafin e dytë, vendosni kufirin minimal të gjerësisë në 400 px dhe kufirin maksimal të lartësisë në 100 px. Përdorni vetitë gjerësi, lartësi, min-gjerësi, lartësi maksimale. Vini re rezultatet përfundimtare të gjerësisë dhe madhësisë së paragrafit të dytë për shkak të kufizimeve që aplikohen. Trego zgjidhje.
Detyrat CSS
Gjerësia e paragrafit është 400 px, lartësia është 10% e lartësisë së zonës së shikimit të dritares së shfletuesit.
Gjerësia e paragrafit do të jetë 400 px, sepse... gjerësia është më e vogël se min-gjerësia dhe lartësia është 100 px, sepse lartësia e kalon lartësinë maksimale.
Kodi i faqes për detyrën nr. 3.1
Paraqitja e kërkuar e faqes në detyrën nr. 3.1
P_1 (ngjyra e sfondit: e verdhë; gjerësia: 400 px; lartësia: 10 vh; ) .p_2 (ngjyra e sfondit: vjollcë; gjerësia minimale: 400 px; lartësia maksimale: 100 px; gjerësia: 300 px; lartësia: 200 px; )
Zgjidhja e problemit nr. 3.1
3.2. Në kushtin e detyrës 3.1, paraqitet kodi i faqes HTML dhe më poshtë paraqitet pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Përfitoni nga rezultati i problemit 3.1 duke shtuar veçori shtesë në fletën e stilit që vendosin kufijtë e duhur të paragrafit: kufiri, kufiri-lart, kufiri-poshtë. Vendosni gjerësinë e të gjitha kufijve në 4 px. Trego zgjidhje.
Paraqitja e kërkuar e faqes në detyrën nr. 3.2
P_1 (ngjyra e sfondit: e verdhë; gjerësia: 400 px; lartësia: 10 vh; kufiri: e kuqe e fortë 4 px; kufiri-lart: blu me pika; kufiri-fundi: blu me pika; ) .p_2 (ngjyra e sfondit: vjollcë; min-gjerësia: 400 px; lartësia maksimale: 100 px; gjerësia: 300 px; lartësia: 200 px; kufiri: jeshile e fortë 4 px; )
Zgjidhja e problemit nr. 3.2
3.3. Në kushtin e detyrës 3.1, paraqitet kodi i faqes HTML dhe më poshtë paraqitet pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Përfitoni nga rezultatet e problemeve 3.1 dhe 3.2 duke shtuar veçori shtesë në fletën e stileve që vendosin rrumbullakimin e qosheve përkatëse të paragrafit të parë dhe kufijtë e jashtëm të paragrafit të dytë: kufiri-radius , kufiri-poshtë-djathtas-rreze , kufiri-poshtë-majtas-radius , skicë , skicë- zhvendosje. Vendosni rrumbullakimin e kufirit në 1em dhe qoshet e poshtme në 2em. Vendosni distancën midis kufirit të brendshëm dhe të jashtëm në 2 px. Vendosni gjerësinë e kufirit të jashtëm në 4 px. Trego zgjidhje.
Paraqitja e kërkuar e faqes në detyrën nr. 3.3
P_1(ngjyra e sfondit: e verdhë; gjerësia: 400 pikselë; lartësia: 10 vh; kufiri: e kuqe e fortë 4 px; kufiri-lart: blu me pika; kufiri-fundi: blu e ndërprerë; rreze-kufitare: 1em; rreze kufiri-poshtë-djathtas: 2em; rreze-kufi-poshtë-majtas: 2em; ) .p_2(ngjyra e sfondit: vjollcë; gjerësia min: 400 px; lartësia maksimale: 100 px; gjerësia: 300 px; lartësia: 200 px; kufiri: jeshile e fortë 4 px; skica: blu e fortë 4 px; skicë-offset: 2 px;)
Zgjidhja e problemit nr. 3.3
3.4. Në kushtin e detyrës 3.1, paraqitet kodi i faqes HTML dhe më poshtë paraqitet pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Përfitoni nga rezultatet e detyrave 3.1, 3.2 dhe 3.3 duke shtuar veçori shtesë në fletën e stilit që vendosin dhëmbëzat e brendshme dhe të jashtme të paragrafëve: mbushje, mbushje-majtas, margjina, margjina-lart. Vendosni mbushjen në të dy paragrafët në 0.5em dhe më pas ripërcaktoni mbushjen e tyre në 0.8em. Vendosni margjinën në 30 px, por në paragrafin e dytë, ripërcaktoni kufirin e sipërm në 50 px. Krahasoni rezultatet e të katër problemeve. Trego zgjidhje.
Paraqitja e kërkuar e faqes në detyrën nr. 3.4
P_1(ngjyra e sfondit: e verdhë; gjerësia: 400 pikselë; lartësia: 10 vh; kufiri: e kuqe e fortë 4 px; kufiri-lart: blu me pika; kufiri-fundi: blu e ndërprerë; rreze-kufitare: 1em; rreze kufiri-poshtë-djathtas: 2em; rreze-kufi-poshtë-majtas: 2em; mbushje: 0,5em; mbushje-majtas: 0,8em; margjina: 30 px; ) .p_2(ngjyra e sfondit: vjollcë; gjerësia min: 400 px; lartësia maksimale: 100 px; gjerësia: 300 px; lartësia: 200 pikselë; kufiri: jeshile e plotë 4 px; skica: blu e fortë 4 px; skicë-offset: 2 px; mbushje: 0,5em; mbushje-majtas: 0,8em; diferencë: 30px; diferencë-lartë: 60px; )
Zgjidhja e problemit nr. 3.4
§4. Vendosja e ngjyrës dhe sfondit, duke përdorur animacionin4.1. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Kopjoni imazhin e çantës në dosjen e imazheve, e cila ndodhet në dosjen e provës që krijuam më parë në serverin lokal (nëse e keni fshirë atë, atëherë shikoni gjendjen e detyrës nr. 1.1 në fillim të librit të problemeve dhe krijoni përsëri gjithçka). Teksti i paragrafit të parë duhet të jetë i kuq, sfondi duhet të jetë i verdhë dhe gjerësia e paragrafit duhet të jetë 300 px. Gjerësia e paragrafit të dytë duhet të jetë 300 px, vendoseni sfondin në vjollcë. Shtoni gjithashtu një imazh të sfondit, i cili nuk duhet të përsëritet, dimensionet duhet të jenë 20% të gjerësisë dhe 40% të lartësisë së paragrafit, pozicioni fillestar duhet të përcaktohet nga koordinatat x = 15px dhe y = 15px. Zgjidhni vetëm zonën e përmbajtjes së paragrafit për sfond. Trego zgjidhje.
Detyrat CSS
Teksti i këtij paragrafi duhet të jetë i kuq dhe sfondi i verdhë. Gjerësia e paragrafit duhet të jetë 300 px.
Gjerësia e paragrafit duhet të jetë 300 px, sfondi duhet të jetë vjollcë. Imazhi nuk duhet të përsëritet, dimensionet duhet të jenë 20% e gjerësisë dhe 40% e lartësisë së paragrafit. Pozicioni fillestar duhet të përcaktohet nga koordinatat x=15px dhe y=15px. Zgjidhni vetëm zonën e përmbajtjes së paragrafit për sfond.
Kodi i faqes për detyrën nr. 4.1
Paraqitja e kërkuar e faqes në detyrën nr. 4.1
Sfondi_1( ngjyra: e kuqe; ngjyra e sfondit: e verdhë; ) . sfond_2 (ngjyra e sfondit: vjollcë; imazhi i sfondit: url ("http://localhost/test/images/cabinet.png"); përsëritja e sfondit: jo -përsërit; pozicioni i sfondit: 15 pikselë 15 pikselë; madhësia e sfondit: 20% 40%; klipi i sfondit: kutia e përmbajtjes; ) .border_1 (mbushja: 15 px; gjerësia: 300 px; kufiri: i ngurtë 2 px jeshile; )
Zgjidhja e problemit nr. 4.1
4.2. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Teksti i paragrafit të parë duhet të jetë i zi, dhe sfondi duhet të jetë një gradient linear nga e kuqja në të bardhë. Gjerësia e paragrafit duhet të jetë 300 px dhe lartësia e tij 150 px. Gjerësia e paragrafit të dytë duhet të jetë 300px dhe lartësia e tij 150px. Sfondi duhet të jetë një gradient radial nga jeshile në të bardhë. Elipsa e gradientit duhet të ketë rreze prej 250px dhe 280px, dhe qendra duhet të jetë e vendosur në pikën me koordinata x =100px dhe y =180px. Trego zgjidhje.
Detyrat CSS
Teksti i këtij paragrafi duhet të jetë i zi, dhe sfondi duhet të jetë një gradient linear nga e kuqja në të bardhë. Gjerësia e paragrafit duhet të jetë 300 px dhe lartësia e tij 150 px.
Gjerësia e paragrafit duhet të jetë 300 px dhe lartësia e tij 150 px. Sfondi duhet të jetë një gradient radial nga jeshile në të bardhë. Elipsa e gradientit duhet të ketë rreze prej 250px dhe 280px, dhe qendra duhet të jetë e vendosur në pikën me koordinatat x=100px dhe y=180px.
Kodi i faqes për detyrën nr. 4.2
Paraqitja e kërkuar e faqes në detyrën nr. 4.2
Sfondi_1( ngjyra: e zezë; imazhi i sfondit: gradient linear (90 gradë, #ff0000, #ffffff); ) .sfondi_2( sfondi: gradient radial (250px 280px në 100px 180px, #00ff00, #ffffff_); ) . mbushja: 15 px; gjerësia: 300 px; lartësia: 150 px; kufiri: i ngurtë 3 px blu; )
Zgjidhja e problemit nr. 4.2
4.3. Më poshtë është kodi për faqen html, si dhe kodi për fletën e jashtme të stileve styles_1.css. Shkruani ato në Notepad++ dhe eksperimentoni duke ndryshuar vlerat e vetive të animacionit.
Detyrat CSS
Kodi i faqes HTML për detyrën nr. 4.3
Sfondi_1( mbushje: 0 pikselë; gjerësia: 450 pikselë; lartësia: 100 pikselë; kufiri: 3 pikselë e kuqe; emri i animacionit: shembull_1; animacion-vonesa: 1s; kohëzgjatja e animacionit: 4s; numërimi i përsëritjes së animacionit: i pafund; drejtimi i animacionit: anasjelltas; funksioni i kohës së animimit: lehtësimi; modaliteti i mbushjes së animacionit: prapa; ) @keyframes shembull_1( 0% ( sfond: #ff0000; lartësi: 0 px; ) 100% ( sfond: # 0000ff; lartësi: 200 px; ) )
Kodi i jashtëm i fletës së stilit për detyrën nr. 4.3
4.4. Më poshtë është kodi për faqen html, si dhe kodi për fletën e jashtme të stileve styles_2.css. Shkruani ato në Notepad++ dhe eksperimentoni duke ndryshuar vlerat e vetive të transitit.
Krijimi i efekteve të tranzicionit
Kodi i faqes HTML për detyrën nr. 4.4
Sfondi_1( mbushja: 10 pikselë; gjerësia: 100 pikselë; lartësia: 100 pikselë; kufiri: 3 px blu; ngjyra e sfondit: #ff0000; vetia e tranzicionit: gjerësia, ngjyra e sfondit; vonesa e tranzicionit: 0,2 sekonda; kohëzgjatja e tranzicionit: 2 s; Funksioni i kohës së tranzicionit: lehtësimi; ) p:hover( kursori: treguesi; ngjyra e sfondit: #0000ff; gjerësia: 450 px; )
Kodi i jashtëm i fletës së stilit për detyrën nr. 4.4
§5. Shfaqja e elementeve në një dokument5.1. Më poshtë është kodi për faqen html, si dhe kodi për fletën e jashtme të stileve styles_2.css. Shkruani ato në Notepad++. Vini re se si sillen paragrafët ndërsa lëvizni faqen dhe si ndryshon pamja e elementit "span" kur qëndroni mbi të dhe, si rezultat, ndryshon vlera e veçorisë së ekranit të aplikuar në të.
Detyrat CSS
Po ndryshon ekranin
pozicioni: fiks;
pozicioni: absolut;
Kodi i faqes HTML për detyrën nr. 5.1
Div_0( mbushje: 10 pik. : portokalli e fortë 3px; sfondi: gradient linear(180deg, #0000ff, #ffffff); pozicioni: fiks; sipër: 250px; ) .div_2( mbushje: 10px; gjerësia: 200px; lartësia: 100px; kufiri: i ngurtë 3px i kuq; sfondi: gradient linear (90 gradë, #0000ff, #ffffff); pozicioni: absolut; lart: 1100 px; majtas: 0 px; )
Kodi i jashtëm i fletës së stilit për detyrën nr. 5.1
5.2. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Karakteristikat e kërkuara të elementeve tregohen në vetë vizatimet. Trego zgjidhje.
Detyrat CSS Për ndarjen kryesore, vendoset pozicionimi fiks, zhvendosja e sipërme është 30 px, zhvendosja e majtë është 35 px, gjerësia e div është 300 px, lartësia e div është 400 px, mbushja e brendshme është 15 px.
div_2 Për ndarjen e dytë, gjerësia është 70 px, lartësia është 50 px, gradienti (35px 35px në 10px 10px, #00ffff, #ffffff), mbushja është 5px, gjerësia e kufirit është 2px. Float në të majtë.
div_3 Për ndarjen e tretë, gjerësia është 70 pikselë, lartësia është 50 pikselë, gradienti (45 gradë, #0000ff, #ffffff), mbushja është 5 pikselë, gjerësia e kufirit është 2 px. Lundron në të djathtë. Kur rri pezull kursorin, ai ndryshon transparencën e tij në 0.3.
Kodi i faqes për detyrën nr. 5.2
Paraqitja e kërkuar e faqes në detyrën nr. 5.2
Div_1( mbushje: 15 px; gjerësia: 300 px; lartësia: 400 px; kufiri: i ndërprerë 5 px #00ff00; pozicioni: fiks; lart: 30 px; majtas: 35 px; ) .div_3:hover( kursori: treguesi; opaciteti: 0,3; ( mbushje: 5 px; gjerësia: 70 px; lartësia: 50 px; kufiri: 2 px portokalli; sfondi: gradient radial (35 px 35 px në 10 px 10 px, #00ffff, #ffffff); notues: majtas; ) .div_3( mbushje: ;px: . gjerësia: 70 px; lartësia: 50 px; kufiri: me pika 2 px e kuqe; sfondi: gradient linear (45 gradë, #0000ff, #ffffff); notues: djathtas; )
Zgjidhja e problemit nr. 5.2
5.3. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Karakteristikat e kërkuara të elementeve tregohen në vetë vizatimet. Trego zgjidhje.
Detyrat CSS Për ndarjen kryesore, vendoset pozicionimi absolut, zhvendosja e sipërme është 30 px, zhvendosja e majtë është 35 px, gjerësia e div është 500 px, lartësia e div është 200 px, mbushja e brendshme është 15 px.
Për ndarjen e dytë, gjerësia është 200 px, lartësia është 100 pikselë, mbushja është 5 px, gjerësia e kufirit është 2 px. Lundron në të majtë. tejmbushje: lëviz Për ndarjen e tretë, gjerësia është 200 px, lartësia është 100 px, mbushja është 5 px, gjerësia e kufirit është 2 px. Noton në të djathtë. tejmbushje: auto
Kodi i faqes për detyrën nr. 5.3
Paraqitja e kërkuar e faqes në detyrën nr. 5.3
Div_1( mbushje: 10 px; gjerësia: 500 px; lartësia: 200 px; kufiri: i ndërprerë 5 px #0000ff; ngjyra e sfondit: e verdhë; pozicioni: absolute; lart: 30 px; majtas: 35 px; ) .div_2 (mbushja: 5px; gjerësia: 50px; ; lartësia: 100 px; kufiri: i ngurtë 2 px blu; notues: majtas; vërshimi: lëviz; ) .div_3( mbushje: 5 px; gjerësia: 200 px; lartësia: 100 px; kufiri: me pika 2 px blu; notues: djathtas; vërshimi: automatik; )
Zgjidhja e problemit nr. 5.3
§6. @-rregullat. Duke futur përmbajtje. Shtypni dokumentin.6.1. Më poshtë është kodi i faqes html, si dhe pamja e faqes kur shfaqet nga një shfletues. Një fletë stili e jashtme është e lidhur me faqen, kodi i së cilës duhet të rikthehet. Për të krijuar numërues për trupin e dokumentit dhe elementin h2, përdorni veçorinë kundër-rivendosje dhe për të futur vlerat e numëruesit duke përdorur vetitë e përmbajtjes dhe kundër-rritjes. Trego zgjidhje.
Sfidat CSS Hyrje në HTML Çfarë është HTML? Shfaqja e një dokumenti në internet në shfletues. Koncepti i një etikete HTML dhe sintaksa e tij.
Formatimi i tekstit Elementet bllok dhe inline. Ndarja e tekstit në paragrafë. Aplikimi i titujve.
Kodi i faqes për detyrën nr. 6.1
Paraqitja e kërkuar e faqes në detyrën nr. 6.1
Body( counter-reset: parag_1; /* Krijo një numërues për trupin e dokumentit */ ) h2( counter-reset: parag_2; /* Krijo një numërues për kokën "h2" */ ) /* Numëro të gjitha "h2 " në elementin "trup" */ /* Fut përmbajtjen përpara çdo "h2": linjë+vlera e numëruesit aktual+rreshti */ h2:para( kundër-rritje: parag_1 1; përmbajtja: "§" numëruesi(parag_1) ". "; ) /* Numëroni në elementin "h2" të gjitha "h3" */ /* Futni përmbajtjen përpara çdo "h3": vlera aktuale e numëruesit parag_1+linja+vlera e numëruesit aktual parag_2+rreshti */ h3:para( kundër-rritje: parag_2 1; përmbajtja: counter( parag_1) "." counter(parag_2) "."; )
Zgjidhja e problemit nr. 6.1
§7. Paraqitja praktike e elementeve të faqes në internet në HTML dhe CSS7.1.1 Shkarkoni kodin udhëzues për kornizën përshtatëse të faqes, përdorni komentet për ta studiuar atë dhe më pas dizajnojeni vetë.
7.1.2 Shkarkoni kodin udhëzues për kornizën përshtatëse të faqes, studiojeni duke përdorur komentet dhe më pas dizajnojeni vetë. Krahasoni me opsionin e parë.
7.1.3 Shkarkoni kodin udhëzues për kornizën përshtatëse të faqes, studiojeni duke përdorur komentet dhe më pas dizajnojeni vetë. Krahasoni me opsionet e mëparshme.
7.2.1 Tutoriali i shkarkueshëm ju tregon se si të krijoni navigimin anësor të një faqeje për të lëvizur lart ose poshtë. Nuk ka komente, por nuk ka shumë kod, kështu që ta kuptosh nuk do të jetë shumë e vështirë. Studioni shembullin dhe më pas bëjeni tuajin.
7.2.2 Duke përdorur kodin nga shembulli i mëparshëm, krijoni një buton "Kthehu në krye" në fund të faqes. Hiq navigimin anësor. Nëse nuk keni mundur ta përfundoni detyrën, shikoni zgjidhjen dhe më pas shkruani vetë kodin.
7.2.3 Tutoriali i shkarkueshëm tregon se si të krijoni një buton "Kthehu në krye" në anën e faqes që shfaqet pas lëvizjes së faqes me një numër të caktuar, për shembull, pikselë. Ka pak komente, por nuk ka shumë kod, kështu që ta kuptosh nuk do të jetë e vështirë. Studioni shembullin dhe më pas bëjeni tuajin.
7.3.1 Krijoni një menu horizontale të paraqitur në figurë. Përdorni një listë për ta bërë këtë, duke vendosur lidhje në artikujt e listës. Për t'i bërë artikujt të shfaqen si një rresht, konvertojini ato në elementë të linjës. Kur rri pezull mbi artikujt e menysë, ato duhet të ndryshojnë ngjyrën në të zezë. Ju mund ta shkarkoni zgjidhjen. Konvertoni menunë në vertikale. Për të hequr numrat e artikujve, përdorni veçorinë përkatëse për shënuesit e listës (shih referencën CSS).
Paraqitja e kërkuar e menysë së detyrave Nr. 7.3.1
7.3.2 Studioni kodin e mëposhtëm të menusë rënëse dhe më pas shkruani vetë.
7.3.3 Studioni kodin e mëposhtëm vertikal të menusë me shumë nivele dhe më pas shkruani vetë.
7.3.4 Studioni kodin e mëposhtëm për një menu horizontale të lëmuar dhe më pas shkruani vetë.
Krijimi i faqes arsimore nr. 1
7.4.1 Së pari, shikoni faqet e faqes arsimore, shkarkoni dhe studioni me kujdes kodin e saj dhe më pas dizajnoni vetë sitin (pa komente, thjesht kodoni).
Paraqitja e faqes arsimore nr. 2
7.5.1 Për të marrë praktikë shtesë në paraqitjen e faqes në internet, shkarkoni një shembull tjetër trajnimi të një siti dhe përdorni komentet për të studiuar kodin e tij, dhe më pas, duke përdorur një plan urbanistik të gatshëm dhe shabllone grafike, dizajnoni vetë faqen.
Mundohuni të krijoni vetë një fletë stili për rezolucion të lartë. Nëse jeni duke punuar në një kompjuter portativ, atëherë për të simuluar rezolucione më të larta, ndryshoni rezolucionet në pyetjet e medias nga 1366 px, për shembull, në 1266 px, në mënyrë që fleta e stileve për rezolucione të mëdha të ekranit të funksionojë. Kur krijoni një fletë stili, përdorni një faktor përmasash prej 1.3. Dhe pastaj shikoni rezultatin e shfaqjes në shfletues dhe rregullojeni.
Madhësitë e imazhit mund të ndryshohen ose në një redaktues grafik ose të shtrihen duke përdorur veçorinë e duhur CSS (shih shembullin dhe referencën).
Vetëm për abonentët
Vetëm për abonentët
Vetëm për abonentët
Vetëm për abonentët
Vetëm për abonentët
Vetëm për abonentët
Zhvillimi metodologjik i punimeve praktike në shkencat kompjuterike në temat “HTML Markup Language” dhe “Modern Web Technologies” (për nxënësit e shkollave të mesme).
Kur kryeni klasa duke përdorur këto zhvillime metodologjike, për të krijuar skedarë HTML dhe CSS, rekomandohet të përdorni një redaktues të rregullt teksti që mbështet theksimin e sintaksës për gjuhët HTML dhe CSS, dhe gjithashtu preferohet të përfshijë aftësinë për të punuar me skedarë të shumtë në modalitetin me shumë faqe. .
Për shembull, Notepad++ (notepad-plus-plus.org) është i përshtatshëm për Windows. Në redaktuesin e tekstit Notepad++, për të mbështjellë rreshta të gjatë, duhet të zgjidhni View -> Line Break nga menyja. Notepad2 (flos-freeware.ch/notepad2.html) është gjithashtu një redaktues teksti shumë i mirë. Megjithatë, ai nuk mbështet funksionimin me shumë faqe. Vendosja e ndërprerjeve të linjës në të bëhet duke përdorur komandën View -> Word Wrap.
1. Dokumenti HTML. Paragrafët, ndërprerjet e rreshtave, rreshtimi1 Struktura e dokumentit HTMLKodi burimor i një dokumenti HTML përbëhet nga etiketa dhe përmbajtje.
Etiketat mund të kenë atribute të ndryshme me veti të specifikuara. Në versionet më të vjetra të gjuhës HTML, atributet u përdorën për të dizajnuar përmbajtjen: vendosja e madhësisë dhe ngjyrës së shkronjave, shtrirja e tekstit, vendosja e indenteve dhe më shumë. Në ditët e sotme, përmbajtja e një dokumenti HTML zakonisht formatohet duke përdorur gjuhën CSS.
Çdo dokument HTML gjithmonë përfshin kontejnerë html, kokë dhe trup, të cilët janë të vendosur brenda njëri-tjetrit si më poshtë:
Detyra 1. Krijoni një skedar dhe jepini strukturën e treguar më sipër. Ruaje atë.
Kontejneri i kokës zakonisht përmban një kontejner titulli, përmbajtja e të cilit shfaqet në titullin e dritares së dokumentit.
Detyra 2. Shtoni një kontejner titulli në dokument:
KOMPJUTER - kompjuter elektronik
Ruani skedarin dhe hapeni në shfletuesin tuaj. Gjeni përmbajtjen e titullit që keni futur.
Përmbajtja e trupit shfaqet në dritaren e shfletuesit.
Etiketa e kontejnerit përdoret për të shënuar paragrafët. Një etiketë e vetme b ju lejon të shkoni në një rresht të ri pa krijuar një paragraf të ri, d.m.th. krijon një thyerje rreshti.
Detyra 3. Shtoni përmbajtjen e mëposhtme në enën e trupit:
Shfaqja e kompjuterëve personalë në fillim të viteve shtatëdhjetë (paralelisht me evolucionin gradual të kompjuterëve të mëdhenj) tani konsiderohet si një grusht shteti revolucionar. Shkalla e ndikimit të saj në shoqërinë njerëzore krahasohet me pasojat e shpikjes së shtypjes.
Tashmë ka miliona e miliarda kompjuterë në botë.
Numri i tyre vazhdon të rritet vazhdimisht!
Ruaj. Rifresko dokumentin në shfletuesin tuaj. Vini re sa paragrafë shihni se ku është thyerja e rreshtit.
2 Rreshtimi i paragrafit. stil i vjetërShtrirja e paragrafit përcaktohet nga vlerat majtas (majtas), djathtas (djathtas), qendër (qendër) dhe justifikohet (justifikohet). Këto vlera mund t'i caktohen veçorisë së shtrirjes, e cila është e vlefshme për shumë etiketa.
Kështu, për shembull, shtrirja e paragrafit në qendër mund të vendoset si kjo:
Detyra 4. Për paragrafët e krijuar më parë, vendosni shtrirjen që të justifikohet (për paragrafin e parë) dhe të rreshtuar djathtas (për të dytin).
