Le të shohim një dokument. Elementet HTML formohen mbi të (shfaqet në ekran në shfletues). Ato formohen në bazë të etiketave. Ju vendosni etiketa, ato përpunohen nga analizuesi html (i disponueshëm në çdo shfletues) dhe ndërton elemente html. Dhe si do të duken këta elementë përcaktohet nga CSS.
Të gjithë elementët html kanë 4 zona: zonën e mbushjes, kufirin, mbushjen dhe përmbajtjen e elementit. Për çfarë nevojiten?
- Marzhet e jashtme (marzhi) nevojiten për të rregulluar ndërveprimin e këtij elementi me kufijtë e elementeve të tjerë.
- Mbushja është distanca nga korniza në përmbajtjen e një elementi të caktuar.
- Përmbajtja e vetë elementit. Është e qartë këtu. Nëse ka elementë të mbivendosur, atëherë ato janë të vendosura në këtë zonë.
- Kornizë (kufi). Përvijon kufijtë e një elementi. Skematikisht, 4 zonat mund të përfaqësohen si më poshtë:
Duhet të kuptohet se çdo element ndodhet brenda një zone. Kjo zonë për elementin që ndodhet brenda tij quhet enë. Ato. Kontejneri është zona e përmbajtjes së elementit mëmë. Kjo zonë përcakton hapësirën për ndërtimin e elementit të brendshëm. Kjo do të thotë që elementi i brendshëm do të përshtatet me madhësinë e kësaj zone.
Margjinat
Kjo është kur elementi ynë ndërvepron me kufijtë e kontejnerit dhe me kufijtë elementet fqinje(ato që ndodhen pranë tij në kod). Rregullat themelore:
- margin-top: auto|magnitude|% - diferenca e sipërme.
- margin-djathtas: auto|magnitude|% - marzhi i djathtë.
- margin-fund: auto|magnitude|% - marzhi i poshtëm.
- margin-left: auto|magnitude|% - marzhi i majtë.
- margjina: margjina-lartë margjina-diferenca djathtas-marzhi i poshtëm-majtas – rregull i parafabrikuar.
Vlera "auto" do të thotë që shfletuesi do t'i analizojë në mënyrë të pavarur këto vlera. Madhësia e indentit mund të specifikohet në vlerat e mëposhtme: em, ex, px. Përqindjet (%) llogariten nga gjerësia e enës (nga zona e përmbajtjes së elementit mëmë). Nëse specifikoni një vlerë negative, kufijtë e elementeve brenda kontejnerit prind do të përplasen me njëri-tjetrin.
Rregulli i "marzhës" është i përbërë; vlerat e të 4 marzheve tregohen këtu (duke filluar nga lart dhe në drejtim të akrepave të orës). Shembuj:
Margjina: 10px 20px 20px 30px; diferenca: 10px 20px 30px; - diferenca nga e majta në të djathtë është e njëjta diferencë: 10px 20px; - diferenca nga lart-poshtë dhe majtas-djathtas është e njëjta diferencë: 10px; - të gjitha pikat janë të njëjta
Mbushje
Këtu nuk mund të ketë vlera negative, sepse Është e pamundur të lëvizësh përmbajtjen përtej kornizës së elementit. Përqindjet llogariten në bazë të gjerësisë së enës.
- padding-top: vlera|%.
- padding-right: vlera|%.
- padding-bottom: vlera|%.
- padding-left: vlera|%.
- mbushje: mbushje-mbushje-mbushje-mbushje djathtas-mbushje e poshtme-majtas - rregull i parafabrikuar. Ngjashëm me "marzhin".
Kufijtë në CSS
Të gjitha kornizat kanë karakteristikat e mëposhtme:
- Trashësia - gjerësia e kufirit: vlera (i hollë|mesatar|i trashë). Parazgjedhja është mesatare.
- Ngjyra - kufiri-ngjyra: ngjyra. E paracaktuar është ngjyra e shkronjave në këtë element.
- Lloji - stili i kufirit: asnjë|pika|shkëputur|e ngurtë|dyshe|brazal|kreshtë|hyrje|fillim. Llojet: pa kornizë | pika | me pika | të ngurta | dyfish | imitim i relievit.
Vetë rregullat e kornizës:
- border-top-(width|ngjyra|stili).
- border-right-(width|ngjyra|stili).
- border-bottom- (gjerësia|ngjyra|stili).
- border-left- (gjerësia|ngjyra|stili).
- kufiri: kufiri-gjerësia kufiri-ngjyrë kufiri. Rregulli i ekipit.
Kornizat (parametrat e bllokut)
Vlerat e këtyre vetive përdoren për të vendosur karakteristikat e zonës rreth elementit.
Kjo mund të zbatohet për simbolet, imazhet, etj.
| Opsione | Kuptimi | Përshkrim |
| kufiri-lart-ngjyra kufiri-djathtas-ngjyra kufiri-majtas-ngjyra kufiri-fund-ngjyra kufi-ngjyrë |
ngjyrë (pa ngjyrë e paracaktuar) |
Përcaktoni ngjyrën e katër anëve të kornizave. Nëse e zëvendësoni ngjyrën me URL-në e figurës, ajo do të përsëritet për të formuar një kornizë. |
| kufiri-top-style kufiri-djathtas-style kufiri i stilit të majtë stili i kufirit të poshtëm të stilit kufitar |
asnjë (e parazgjedhur) të ngurta dyfishtë brazdë kurriz futur fillimi |
Përcakton stilin e katër anëve të kornizave. |
| kufi-majë kufiri-djathtas kufiri-majtas kufiri-fund kufiri |
gjerësia e kornizës, stili i kornizës, ngjyrë (e parazgjedhur: |
Përcaktoni vetitë e katër anëve të kornizave. Funksionon njësoj si vetitë e mbushjes (shih më poshtë), përveç që kufiri është i dukshëm. gjerësia e kornizës mund të jetë mesatar, i hollë ose i trashë, ose i specifikuar në njësi. Argumenti ngjyrë përdoret për të përcaktuar ngjyrën e mbushjes për sfondin e një elementi gjatë ngarkimit, si dhe pas pjesëve transparente të elementit. Nëse kaloni adresën e figurës në vend të kësaj, modeli do të përsëritet, duke plotësuar skicën e kornizës. |
| kufiri-lart-gjerësia kufiri-djathtas-gjerësia kufiri-majtë-gjerësi kufiri-poshtë-gjerësia gjerësia e kufirit |
i hollë mesatare (e parazgjedhur) trashë gjatësia |
Përcaktoni gjerësinë e kufirit rreth elementit. Çdo anë mund të specifikohet me një parametër përkatës. Ju mund të zëvendësoni vendosjen e katër vetive individuale me vendosjen e një vetie gjerësia e kufirit njëjtë si për vetitë e dhëmbëzimit diferencë. |
| ciip | drejt (/lart/djathtas/poshtë/majtas/) automatik (i parazgjedhur) |
Përcakton se sa nga elementi është i dukshëm. Çdo gjë jashtë zonës së specifikuar nga ky parametër nuk mund të shihet. |
| shfaqja | "", asnje "" (e parazgjedhur) |
Ky cilësim specifikon nëse elementi do të shfaqet. |
| noton | asnjë (e parazgjedhur) majtas drejtë |
Përcakton që një element mbështillet rreth elementëve të tjerë majtas ose djathtas në vend që t'i vendosë nën to. Mbështetur nga etiketat ,
...
|
| lartësia | automatik (i parazgjedhur) gjatësia |
Vendosni lartësinë e elementit dhe matni atë, nëse është e nevojshme. Vlera kthehet si varg duke përfshirë njësitë (px, %, etj.). Për të marrë një vlerë numerike, përdorni veçorinë posHeight. |
| majtas | automatik (i parazgjedhur) gjatësia interesi |
Ata vendosin koordinatat horizontale të elementit, duke ju lejuar të instaloni dhe lëvizni saktë elementët. Vlera kthehet si varg duke përfshirë njësitë (px, %, etj.). Për të marrë vlerën si numër, përdorni veçorinë posLeft. |
Shembulli 1:
Kjo linjë nënvizohet me një vijë me pika. Shembulli 2: Lloje të ndryshme kornizash.
| 1. asnjë - Pa kufi (kufi: asnjë;) |
| 2. solid - Ka një kufi (kufiri: 1px solid;) |
Shembulli 4: Kornizë me qoshe të rrumbullakëta.
. V deklaratat tatimore;
. certifikatat 2-NDFL;
Të gjitha dokumentet e listuara tregojnë 11 kodi shifror OKTMO në vend të kodeve OKATO të përdorura më parë.
|
#org Pozicioni:i afërm; Ngjyra e sfondit: #e8e3d4; |
Duke filluar nga 1 janari 2014, kodet e reja OKTMO tregohen në: . në deklaratat tatimore; . certifikatat 2-NDFL; . urdhërpagesat (fusha 105); . faturë për pagesën e taksave, tarifave, detyrimeve, formulari PD-4 tatim. Të gjitha dokumentet e listuara tregojnë kodin OKTMO 11-shifror në vend të kodeve OKATO të përdorura më parë. |
|
Tavolina të mbivendosura
Kufiri i ngushtë i zi (5px) Parametrat e tabelës:
|
Gjerësia dhe lartësia elementet e bllokut
Karakteristikat e CSS gjerësia Dhe lartësia- vendosni gjerësinë dhe lartësinë e elementeve të bllokut.
Gjerësia dhe lartësia e një elementi mund të vendosen në mënyrat e mëposhtme:
- auto- Dimensionet e një elementi përcaktohen nga përmbajtja e tij. (e parazgjedhur)
- % - Dimensionet e elementit vendosen si përqindje e lartësisë/gjerësisë së elementit mëmë.
- px- Dimensionet e elementit janë të specifikuara në piksel ose çdo njësi tjetër matëse të pranuar në CSS.
Menaxhimi i përmbajtjes së elementit
Çfarë duhet bërë me përmbajtjen e një elementi nëse e kalon madhësinë e tij?
Nëse një elementi i jepen vlerat e sakta të lartësisë dhe gjerësisë ( lartësi gjerësi) dhe përmbajtjen e tij, për shembull tekst i gjatë, nuk përshtatet brenda kufijve të specifikuar, atëherë si parazgjedhje një element i tillë shtrihet në madhësive të kërkuara, e cila nuk është gjithmonë në avantazhin e webmasterit. Atributi vjen në shpëtim vërshoj, i cili i tregon shfletuesit se çfarë të bëjë me elementin në raste të tilla.
Prona vërshoj mund të ketë kuptimet e mëposhtme:
- të dukshme- Elementi shtrihet në madhësinë e kërkuar. (e parazgjedhur)
- i fshehur- Përmbajtja e elementit është “prerë”; shihet vetëm ajo pjesë e tij që përshtatet në element.
- rrotulloni- Shtohen shirita lëvizës (gjithmonë! edhe nëse përmbajtja përshtatet brenda elementit).
- auto- Shiritat e lëvizjes shtohen nëse është e nevojshme.
CSS
CSS(Anglisht: Cascading Style Sheets - cascading style sheets) - një gjuhë zyrtare për të përshkruar pamjen e një dokumenti të shkruar duke përdorur një gjuhë shënjimi, etj. ..............
Rezultati
CSS
CSS(Anglisht: Cascading Style Sheets) është një gjuhë zyrtare për të përshkruar pamjen e një dokumenti të shkruar duke përdorur një gjuhë shënjimi. Metodat Lidhjet CSS te dokumentiRregullat CSS janë shkruar në mënyrë zyrtare Gjuha CSS dhe janë të vendosura në fletët e stilit, domethënë, fletët e stilit përmbajnë rregulla CSS. Këto fletë stilesh mund të vendosen ose në vetë dokumentin në internet, pamjen të cilat ata i përshkruajnë, dhe në skedarë të veçantë në formatin CSS. (Në thelb, formati CSS është i zakonshëm skedar teksti. Skedari .css nuk përmban gjë tjetër veçse një listë Rregullat CSS dhe komente për ta.) Kjo do të thotë, këto fletë stilesh mund të lidhen, të ngulitura në dokumentin në internet që ata përshkruajnë në katër mënyra të ndryshme:
- Kur fleta e stilit është në skedar të veçantë, mund të lidhet me një dokument ueb duke përdorur një etiketë , e vendosur në këtë dokument midis etiketave Dhe.
(Etiketë do të ketë një atribut href që ka vlerën e adresës së kësaj flete stili). Të gjitha rregullat në këtë tabelë zbatohen në të gjithë dokumentin;
.....
- Kur një fletë stili është në një skedar të veçantë, ai mund të lidhet me një dokument ueb duke përdorur direktivën @import, e vendosur në këtë dokument midis etiketave Dhe) menjëherë pas etiketës
- Kur një fletë stili përshkruhet në vetë dokumentin, ai mund të vendoset në të midis etiketave(të cilat, nga ana tjetër, ndodhen në këtë dokument midis etiketave Dhe). Të gjitha rregullat në këtë tabelë zbatohen në të gjithë dokumentin;
.....
- Kur një fletë stili përshkruhet në vetë dokumentin, ai mund të vendoset brenda tij në trupin e një etikete të veçantë (përmes atributit të stilit) të këtij dokumenti. Të gjitha rregullat në këtë tabelë zbatohen vetëm për përmbajtjen e kësaj etikete.
blej një elefant
Informacioni i rrethuar nga një kornizë ju lejon të ndani një material në një faqe interneti nga një tjetër dhe të tërheqni vëmendjen e lexuesit.
Për më tepër, korniza i shton elegancë dizajnit të sitit.
Për krijimin e kornizave përdoren disa metoda, shumica e të cilave përdorin vetitë e tabelave. Stilet plotësojnë aftësitë e tabelave dhe ju lejojnë të krijoni lloje të ndryshme kornizash me mjete të thjeshta. Më poshtë janë teknikat e zakonshme për marrjen e kornizave që mund të gjenden kudo në faqe të ndryshme.
Parametri kufiri
Mënyra më e thjeshtë për të krijuar një kufi është përdorimi i kufirit të parametrave të tabelës, i cili përcakton trashësinë e kufirit dhe ngjyrës së kufirit, i cili specifikon ngjyrën e tij. Kornizat e krijuara në këtë mënyrë ndryshojnë në pamje shfletues të ndryshëm(Fig. 3.1).
Oriz. 3.1. Korniza e marrë duke përdorur parametrin e kufirit
Netscape simulon tredimensionalitetin e kornizës, Shfletuesi Opera përgjithësisht e lë ngjyrën e saj të pandryshuar, dhe Internet Explorer e bën kornizën të fortë.
Shembulli 3.1. Përdorimi i parametrit të kufirit
| përmbajtja |
Parametri i kufirit përcakton trashësinë e kornizës, ngjyra e kufirit - ngjyra e saj, mbushja e qelizave përcakton distancën nga korniza në përmbajtjen e tabelës.
Tavolina të mbivendosura
Një tjetër e thjeshtë metodë universale ndërtimi i një kornize, i cili funksionon njësoj në shfletues të ndryshëm, bazohet në mbivendosjen e dy tabelave njëra mbi tjetrën. Nëse marrim një drejtkëndësh nga letra e kuqe, për shembull, dhe mbi të vendosim një drejtkëndësh të bardhë, pak. madhësi më të vogël, atëherë do të shohim një kornizë të kuqe. Vetëm në vend të një fletë letre përdorim etiketën TABLE dhe vendosim ngjyrën e tabelës me parametrin bgcolor.
Shembulli 3.2. Përdorimi i Tabelave të Nested
|
Në tabelën e sipërme, vendosni gjerësinë dhe lartësinë e tabelës sipas dëshirës duke përdorur parametrin bgcolor vendosni ngjyrën e kornizës, hapësira e qelizave caktojeni atë në zero dhe mbushje celulare kontrollon trashësinë e kufirit. Sa më i madh ky parametër, aq më i trashë do të jetë korniza.
Për një tabelë të brendshme, është e nevojshme të vendosni ngjyrën e saj, të ndryshme nga ngjyra e jashtme, që të përputhet me ngjyrën e sfondit të faqes së internetit; në shembull, për shembull, është vendosur e bardha. Parametri hapësira e qelizave ose mbushje celulare(V në këtë rast pa marrë parasysh se cilin të përdorni) përcakton distancën nga kufiri i kornizës deri në përmbajtjen e tabelës.
Gjerësia dhe lartësia e tabelës së brendshme duhet të përputhen me gjerësinë dhe lartësinë e tabelës së jashtme.
Koment: Ndërprerjet e rreshtave në kodin HTML shtojnë automatikisht një hapësirë. Nëse korniza në disa vende rezulton më e trashë se sa ishte menduar, duhet ta hiqni hapësira shtesë ndërmjet etiketave dhe në këtë mënyrë zvogëloni numrin e rreshtave.
Mbushja e qelizave të tabelës me ngjyra
Përdorimi i ngjyrës së sfondit të qelizave të tabelës është një nga mënyrat universale dhe të zakonshme për të krijuar një kufi. Krijoni një tabelë (Fig. 3.2) dhe mbushni qelizat e jashtme në ngjyrën e duhur(Fig. 3.3).
Oriz. 3.2. Oriz. 3.3
Trashësia e kornizës përcaktohet nga gjerësia dhe lartësia e qelizave. Sigurohuni që të vendosni një ndarës brenda këtyre qelizave të tabelës - vizatim transparent 1 me 1 pixel në madhësi (në shembull quhet spacer.gif), përndryshe kjo metodë nuk do të funksionojë në shfletuesin Netscape.
Shembulli 3.3. Krijimi i një kornize duke mbushur qelizat e tabelës me ngjyra
 | |  lartësi = "2"> |
| lartësi = "2"> | përmbajtja | lartësi = "2"> |
| lartësi = "2"> | | lartësi = "2"> |
NË në këtë shembullËshtë bërë një kornizë e kuqe me një trashësi prej 2 pikselësh; duket më elegante. Opsionet e tabelës hapësira e qelizave Dhe mbushje celulare janë të barabarta me zero në mënyrë që korniza të mbetet trashësia e dëshiruar dhe pa boshllëqe. Nëse vendosni tekst brenda një tabele të tillë, ai do të përshtatet fort në kornizë, e cila është e shëmtuar dhe e vështirë për t'u lexuar. Për të shtuar dhëmbëza, mund të krijoni qeliza shtesë për këtë qëllim, të përdorni një tabelë të ndërthurur ose të përdorni stile.
Koment: Metoda e mësipërme është e ndjeshme ndaj parametra të ndryshëm Prandaj, në rast të vizatimit të gabuar të kornizës, duhet të kontrolloni sa vijon:
- nëse madhësia e tabelës është e specifikuar në piksel, ju duhet të specifikoni madhësive fikse të gjitha qelizat;
- kur gjerësia e tabelës specifikohet si përqindje, duhet të vendosni tekst brenda kornizës që "zgjeron" qelizën e brendshme në gjerësinë e dëshiruar; nëse nuk ka tekst ose përmbajtje tjetër brenda një tabele me kornizë, gjerësia e saj do të jetë shumë më e gjerë se sa dëshironi;
- Nuk duhet të ketë karaktere të pandashme të hapësirës në qelizat ku shkon kufiri (& nbsp;), atë që disa redaktorë të faqeve të internetit duan të shtojnë automatikisht;
- Ndërprerjet e rreshtave shtojnë automatikisht një hapësirë në tekst, pra midis etiketave hapëse dhe mbyllëse
Dhe Teksti duhet të shkruhet në një rresht në mënyrë që të mos ketë boshllëqe midis qelizave.
Kornizë dekorative
Për të krijuar kornizën e dëshiruar, së pari duhet ta vizatoni atë në një lloj redaktues grafik. Në Fig. 3.4, për shembull, tregon një kornizë me qoshe të rrumbullakosura. Më pas e presim këtë imazh në 9 pjesë, të shënuara në figurën 3.5 vija portokalli dhe numrat. Ju mund ta shkurtoni imazhin, për shembull, në programin ImageReady ose në një tjetër të ngjashëm.
Oriz. 3.4.
Oriz. 3.5.
Pas prerjes së figurës në copa marrim 8 fragmente:
Nuk do të ketë asnjë fragment të kuadrit të pestë (5.gif), pasi përmbajtja jonë do ta zëvendësojë atë. Tani krijojmë një tabelë me madhësi 3x3, siç tregohet në Fig. 3.2 dhe vendosni vizatimet e krijuara në qelizat e tij.
Shembulli 3.4. Krijimi i një kornize dekorative
 | width="1"> |  |
| përmbajtja | ||
 | width="1"> |  |
Parametrat në tabelë kufiri, hapësira e qelizave Dhe mbushje celulare duhet të jetë e barabartë me zero, përndryshe linjat nuk do të lidhen me njëra-tjetrën.
Ne futim qoshet si vizatime të zakonshme duke përdorur Etiketa IMG, por horizontale dhe vija vertikale duhet të vendoset duke përdorur sfondin e qelizës së tabelës, parametrin sfond. Kjo do ta bëjë kornizën tonë të shkallëzueshme dhe madhësia e saj do të ndryshojë në varësi të përmbajtjes.
Në mënyrë që linjat të përshtaten fort me njëra-tjetrën dhe të mos ketë hapësira midis tyre, është e nevojshme të tregohen të gjitha madhësitë e qelizave dhe vizatimeve.
Në qelizat ku linjat horizontale dhe vertikale janë vendosur në sfond, është e nevojshme të vendosni një ndarës - kjo është ose një hapësirë ose një model transparent Formati GIF 1 me 1 pixel në madhësi (në shembull skedari quhet spacer.gif). Kjo është bërë për të mashtruar shfletuesin Netscape, i cili nuk tregon përmbajtjen e një qelize nëse ajo është bosh.
Kjo metodë ju lejon të krijoni korniza të pothuajse çdo lloji.
Përdorimi i stileve
Duke përdorur stile, mund të aplikoni një kornizë për çdo bllok etiketë, për shembull, paragrafi (etiketa P), tabela dhe etiketë DIV. Stilet e bëjnë më të lehtë dhe më të përshtatshëm krijimin e një kornize sesa përdorimin e tabelave dhe sigurojnë tipe te ndryshme kornizat, të cilat janë paraqitur në Fig. 3.6.
Oriz. 3.6 Lloji i kornizave të specifikuara duke përdorur stilet
Dy llojet e para të kornizave janë me pika Dhe i thyer mbështeten nga shfletuesit Netscape dhe Internet Explorer vetëm nga versionet më të vjetra.
Korniza vendoset më lehtë nga parametri kufiri, e cila tregon menjëherë llojin, trashësinë dhe ngjyrën e saj.
Shembulli 3.6. Përdorimi i stileve
Kur punoni në teknologji kompjuterike ju duhet të uleni në mënyrë që
duart dhe parakrahët formuan një kënd të drejtë, sytë e vendosur
distanca 30-40 cm nga sipërfaqja e punës e monitorit.
Shembulli përdor një kornizë të dyfishtë, trashësia e së cilës është shuma e trashësisë së vijave dhe distancës ndërmjet tyre. Për të parandaluar që korniza të prekë tekstin, caktoni distancën nga korniza në përmbajtje duke përdorur parametrin mbushje.
Koment: Shfletuesi Netscape 4.x nuk shton një kufi për tabelat dhe kufizon gjerësinë e kufirit në përmbajtjen e tij.
Vetia kufitare CSS përdoret për të krijuar kufirin e një objekti, përkatësisht trashësinë e kufirit, ngjyrën dhe stilin e tij. Kjo veçori përdoret gjerësisht në HTML. Ju mund të krijoni efekte të ndryshme për perceptim më të mirë të përmbajtjes në faqe. Për shembull, dizajnoni një shirit anësor, kokën e faqes në internet, menunë, etj.
1. Sintaksa e kufirit CSS
kufiri: kufiri me gjerësi kufiri në stilin e kufirit me ngjyrë | trashëgojnë;
- border-width - trashësia e kufirit. Mund ta vendosni në piksel (px) ose të përdorni vlerat standarde të hollë, të mesme, të trashë (ato ndryshojnë vetëm në gjerësi në piksel)
- border-style - stili i kufirit të shfaqur. Mund të marrë vlerat e mëposhtme
- asnjë ose i fshehur - anulon kufirin
- me pika - kornizë me pika
- i ndërprerë - kornizë e bërë me viza
- vijë e fortë - e thjeshtë (më shpesh e përdorur)
- kornizë e dyfishtë - dyfish
- groove - kufiri 3D me brazdë
- kurriz, hyrje, fillim - efekte të ndryshme të kornizës 3D
- trashëgoj - aplikohet vlera e elementit mëmë
- border-color - ngjyra e kufirit. Mund të vendoset duke përdorur emër specifik ngjyrat ose në Formati RGB(shih emrat e ngjyrave html për sitin)
Vlerat në pronën e kufirit CSS mund të vendosen në çdo mënyrë. Sekuenca më e përdorur është "ngjyra e stilit të trashësisë".
2. Shembuj me kufij të ndryshëm CSS
2.1. Shembull. Stilet e ndryshme të dizajnit të kufirit në stilin e kufirit
border-style: dashedborder-style: dashedborder-style: solidborder-style: doubleborder-style: grooveborder-style: ridgeborder-style: insetborder-style: outsetЧетыре разных рамки
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
При наведении курсора мыши на блок цвет рамки изменится
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width : thin | medium | thick | значение ;
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
border-width: thinborder-width: mediumborder-width: thickРазная толщина у границ
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей: */
4.1. Пример. Красивая рамка для выделения цитат
Пример рамки для цитаты
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Вот как это выглядит на странице:
Для обращения к border из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.border ="VALUE "
Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает параметр border тега
| Чебурашка | Крокодил Гена | Шапокляк |
Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.
Рис. 1. Рамка, полученная с помощью параметра border
Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом border , применяя его к ячейкам таблицы (тегу
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Dallimi midis kufijve të tabelës me dhe pa parametrin e kolapsit të kufirit është paraqitur në Fig. 2.
a
b
Oriz. 2. Pamja e tabelës kur përdoret atributi border-collapase
Në Fig. Figura 2a tregon kornizën e paracaktuar të tabelës. Ju lutemi vini re se brenda tabelës të gjitha linjat kanë trashësi të dyfishtë. Shtimi i parametrit border-collapse heq këtë veçori dhe trashësia e të gjitha linjave bëhet e njëjtë (Fig. 2b).
Për të zhvilluar linja të të njëjtit lloj brenda tabelës, mund të shkoni në një mënyrë tjetër. Duhet të shtohet për përzgjedhës
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Kjo metodë mund të ketë ndryshime, për shembull, për përzgjedhësin
ose
Në këtë shembull, ngjyra e sfondit të faqes së internetit futet përmes veçorisë së sfondit të shtuar në përzgjedhësin BODY. Edhe pse Ngjyra e bardhëështë vendosur si parazgjedhje, ndonjëherë është e dëshirueshme ta vendosni atë në mënyrë që përdoruesi të mos specifikojë ngjyrën e tij të sfondit përmes cilësimeve të shfletuesit. Vijat e tabelës gjithashtu duhet të kenë të njëjtën ngjyrë; në këtë rast, ato nuk janë qartë të dukshme dhe vetëm ndajnë qelizat midis njëra-tjetrës. Rezultati i Shembullit 4 është paraqitur më poshtë.
Oriz. 3. Shfaqja e kufijve që përputhen me ngjyrën e sfondit Artikujt më të mirë mbi këtë temë |
