Veerised ja polsterdus on HTML-lehe loomisel väga olulised stiilid. Need võimaldavad elemente täpsemalt positsioneerida, luua vajalike vahedega raami jne. Mõlemad stiilid on väga sarnased ja täidavad sarnaseid funktsioone. Kuid siiski on erinevusi.
Elemendid võivad olla pesastatud, võivad olla üksteise kõrval. Vaatame järgmist näidet:
Meil on kaks lauda, sidruni ja sinine, mis asuvad üksteise all. Tabelid koosnevad ühest lahtrist. Esimese tabeli lahtris on punane plokk. Selles näites vaatame, kuidas veerised ja polsterdus töötavad.
Väljad määratakse stiili järgi polsterdus... See stiil on rakendatav ainult konteinerielementidele, mis võivad sisaldada muid elemente. Stiil võimaldab määrata elemendi servade ja selle sisu vahelise veeriste väärtuse. Stiil marginaal võimaldab määrata elemendi polsterduse teise elemendi lähimate piirideni. Teise elemendi äärised võivad olla nii emakonteineri äärised kui ka lehe enda servad.
Nende stiilide määratlemiseks on mitu võimalust. Näiteks saate otse määrata kõigi veeriste või polsterduse suuruse ühe argumendiga mõnes mõõtühikus (px, ex, em, pt, cm ja nii edasi):
polsterdus: 3px; veeris: 3px;Sel juhul on veerised ja veerised kõigil neljal küljel ühesugused. Kahe tühikuga eraldatud argumendi määramisel:
polsterdus: 3px 5px; veeris: 3px 5px;esimene määrab veeriste / polsterduse üla- ja alaosas, teine - vasakul ja paremal. Kui antakse kolm argumenti:
polsterdus: 3px 5px 2px; veeris: 3px 5px 2px;esimene on veeris / polster peal, teine on samal ajal vasakul ja paremal, kolmas on all. Nelja argumendiga:
polsterdus: 3px 5px 2px 6px; veeris: 3px 5px 2px 6px;esimene on veeris / polster üleval, teine on paremal, kolmas on all ja neljas on vasakul. Seda on lihtne meeles pidada: esimene on ülalt, siis päripäeva. Lisaks saate konkreetse serva jaoks eraldi määrata veerised ja veerised, kasutades sobivaid stiile: polsterdus-top, polsterdus-õigus, polster-põhi, polster-vasak, margin-top, margin-parem, marginaal-alumine, margin-vasak... Nende stiilide väärtus võib olla ainult üks argument, mis määrab antud külje veerise/täidise suuruse.
Joonisel on punane plokk tabeli lahtri sees ja külgneb selle ääristega, see tähendab, et lahtril pole veerisid. Määrame väljad lahtrisse, kasutades stiili:
polster: 5px;Selle tulemusena muutub leht järgmiseks:
Vaatame nüüd taanet. Kaks tabelit on kõrvuti, kui tahame neid veidi eemale nihutada, saame rakendada taandeid. Siin on kaks võimalust: kas määrata esimese tabeli alumine polster või teise tabeli ülemine polster. Kasutame teist:
veeris-ülaosa: 5 pikslit;Pange tähele, et me määrame taande tabelile, mitte tabeli lahtrile, nagu väljade puhul. Siin on tulemus:
Muide, esimesel juhul (punase kasti ja emalahtri ääriste vahe) saaks sama efekti saavutada kasti veeriste määramisega. Üldiselt, kui midagi pole selge, loobume kommentaarides tellimusest.
Testlehe HTML-kood:
<html> <pea> <pealkiri> Test</ pealkiri> <meta http-equiv = "Sisutüüp" content = "text / html; märgistik = utf-8"> </ pea> <keha> <stiil> tabel (laius: 200 pikslit; kõrgus: 150 pikslit; ääris: 1px, tahke # 555; äärise ahendamine: ahendamine) td (vertikaalne joondus: ülemine; polsterdus: 0 pikslit) div (laius: 100 pikslit; kõrgus: 100 pikslit; taust: punane)</ stiil> <tabeli stiil = "taust: laim"> <tr> <td style = "padding: 5px"> <div style = "margin: 0px"></ div> </ td> </ tr> </ tabel> <laua stiil = "taust: taevasinine; ülemine veeris: 5 pikslit"> <tr> <td></ td> </ tr> </ tabel> </ keha> </ html>Tere kallid ajaveebisaidi lugejad! Täna jätkame CSS-i ehk Cascading Style Sheets’i uurimist. Eelmistes artiklites oleme juba üldiselt uurinud saidi plokkide paigutust. Selle tulemusena hakkasime saama üsna professionaalseid veebilehti, kuid midagi on neil puudu. Ja tõenäoliselt puuduvad neil taanded ja raamid. Täna võtame vaatluse alla stiilireeglid veeris, polsterdus ja ääris, mis võimaldavad määrata html-elementide veerised ja äärised.
CSS-i taande valikud
Kaskaadlaadilehtede puhul on kahte tüüpi treppimist.
1.Sisemine polsterdus Kas kaugus elemendi mõttelisest piirist selle sisuni. Kaugus määratakse parameetri abil polsterdus... See taane kuulub elemendile endale ja asub selle sees.
2. Väline polsterdus- veebilehe aktiivse elemendi piiri ja naaberelementide piiride ehk emaelemendi vaheline kaugus. Distantsi suurust kontrollib kinnistu marginaal... See taane on väljaspool elementi.
Selguse huvides pilt:
Näiteks kaaluge tekstiga täidetud lahtrit. Siis on polsterdus lahtri kujuteldava piiri ja selles sisalduva teksti vaheline kaugus. Ja välimine veeris on kaugus külgnevate lahtrite piiride vahel. Alustame polsterdusega.
Polsterdus CSS-is koos polsterdusega (ülemine, alumine, vasak, parem)
Stiili atribuudid padding-left, padding-top, padding-right ja padding-bottom võimaldavad määrata täidise arvu vastavalt veebilehe elemendi vasakule, ülaosale, paremale ja alla:
polsterdus-top | polsterdus-parem | polsterdus-põhi | polster-vasakul: väärtus | intressid | pärida
Treppimise suurust saab määrata pikslites (px), protsentides (%) või muudes CSS-i jaoks vastuvõetavates ühikutes. Protsendi määramisel arvutatakse väärtus elemendi laiuse järgi. Pärimisväärtus näitab, et see on päritud vanemalt.
Näiteks praeguse lõigu jaoks rakendasin stiilireeglit, mis määrab vasaku täidise suuruseks 20 pikslit, ülemiseks täidiseks 5 pikslit, paremale täidiseks 35 pikslile ja alumisele 10 pikslile. Reegli sisestus näeb välja selline:
p.test (
polsterdus vasakpoolne: 20px;
polsterdus-ülaosa: 5px;
polsterdus-parem: 35px;
polsterdus-alumine: 10px
}
Kombineeritud polsterduse reegel võimaldab määrata taanded veebilehe elemendi kõikidele külgedele korraga:
polsterdus:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Kollektiivreeglis on lubatud kasutada ühte, kahte, kolme või nelja väärtust, eraldades need tühikuga. Sel juhul sõltub mõju väärtuste arvust:
- kui määrate ühe väärtuse, määrab see taande suuruse lehe elemendi kõikidel külgedel;
- kui määrate kaks väärtust, siis esimene määrab taande suuruse üla- ja alaosas ning teine - vasakul ja paremal;
- kui määrate kolm väärtust, siis esimene määrab taande suuruse ülaosas, teine - vasakul ja paremal ning kolmas - allosas;
- kui on määratud neli väärtust, seab esimene polsterduse üles, teine paremale, kolmas alla ja neljas vasakule.
Seega saab ülaltoodud CSS-i reeglit võimalikult palju lühendada ja kirjutada järgmiselt:
p.test (polster: 5px 35px 10px 20px)
Marginaali omadus või marginaalid CSS-is
Stiiliatribuudid margin-left, margin-top, margin-right ja margin-bottom võimaldavad määrata vastavalt vasaku, ülemise, parema ja alumise veerise:
margin-top | ääre-parem | marginaal-alumine | margin-vasak:<значение>| auto | pärima
Nagu eespool mainitud, on välimine polsterdus kaugus praeguse elemendi piirist külgneva elemendi piirini või kui külgnevaid elemente pole, siis põhikonteineri sisemise piirini.
Treppide suurust saab määrata pikslites (px), protsentides (%) või muudes CSS-i jaoks vastuvõetavates ühikutes:
p (
veeris-vasak: 20px;
}
h1 (
marginaal-parem: 15%;
}
Automaatne väärtus tähendab, et brauser arvutab automaatselt taande suuruse. Protsentuaalse tähise kasutamise korral arvutatakse taanded sõltuvalt sellest emakonteineri laius... Ja see ei kehti mitte ainult veerise vasak ja parempoolne, vaid ka veerise ülaosa ja veerise all, taanded protsentides arvutatakse sõltuvalt konteineri laiusest, mitte kõrgusest.
Veeriste väärtustena on lubatud kasutada negatiivsed väärtused:
p (
veeris-vasak: -20px;
}
Kui veeriste positiivsete väärtuste korral liiguvad külgnevad elemendid eemale, siis negatiivse väärtuse korral jookseb külgnev plokk üle elemendi, millele me sellised negatiivsed veerised määrasime.
Samuti saame määrata veerised atribuudi style abil marginaal... See määrab üheaegselt taande suuruse veebilehe elemendi kõikidel külgedel:
marginaal:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
See omadus ühe, kahe, kolme või nelja polstriväärtuse määramisel järgib samu seadusi, mis polstrireegel.
Piirivalikud piirikinnistust kasutades
Raamide kohandamisel on kolme tüüpi parameetreid:
- border-width - piiri paksus;
- border-color – piirivärv;
- border-style – joone tüüp, millega piirjoon tõmmatakse.
Alustame piiri paksuse parameetriga:
piiri laius: [väärtus | õhuke | keskmine | paks] (1,4) | pärida
Raami paksus saab määrata pikslites või muudes css-is saadaolevates ühikutes. Muutujad õhuke, keskmine ja paks määravad äärise paksuseks vastavalt 2, 4 ja 6 pikslit:
piiri laius: keskmine;
Nagu polsterduse ja veerise atribuutide puhul, saate äärise laiuse parameetri jaoks kasutada ühte, kahte, kolme või nelja väärtust, määrates seega äärise laiuse kõigile külgedele korraga või igaühe jaoks eraldi:
äärise laius: 5 pikslit 3 pikslit 5 pikslit 3 pikslit
Praeguse lõigu jaoks muudame reegli abil ülemise äärise suuruseks 1px, paremale 2px, alumisele 3px ja vasakule 4px (äärise laius: 1px 2px 3px 4px;)
Stiiliatribuute border-left-width, border-top-width, border-right-width ja border-bottom-width saab kasutada äärise vasaku, ülemise, parema ja alumise külje laiuse määramiseks. :
ääris-vasak-laius | ääris-ülemine laius | ääris-parem-laius | ääris-alt-laius: õhuke | keskmine | paks |<толщина>| pärida
Järgmine parameeter on piirivärv, millega saate juhtida raami värv:
piirivärv: [värv | läbipaistev] (1,4) | pärida
Atribuut võimaldab määrata elemendi kõikide külgede äärise värvi korraga või ainult määratud külgedele. Väärtusena saate kasutada värvide jaoks html-is aktsepteeritud värvide määramise meetodeid: kuueteistkümnendkood, märksõnad jne:
p (äärise laius: 2 pikslit; äärise värv: punane)
Läbipaistev väärtus määrab äärise värvi läbipaistvaks ja pärib vanema väärtuse. Kui äärise värvi pole määratud, kasutatakse vaikimisi seda, mida kasutatakse selle elemendi sees oleva fondi jaoks.
Kasutades stiiliatribuute border-left-color, border-top-color, border-right-color ja border-bottom-color, saate määrata vastavalt äärise vasaku, ülemise, parema ja alumise külje värvi. :
ääris-vasak-värv | ääris-ülemine värv | ääris-parem-värv | äärise-alumine-värv: läbipaistev |<цвет>| pärida
Ja viimane parameeter, border-style, seab raami tüüp:
ääriste stiilis: (1,4) | pärida
Raami tüübi saab määrata elemendi kõikidele külgedele korraga või ainult määratud külgedele. Väärtustena saab kasutada mitut märksõna. Välimus oleneb kasutatavast brauserist ja äärise paksusest. Tähendus mitte ühtegi on vaikimisi kasutusel ja raami ei kuvata ning selle paksuseks on seatud null. Varjatud väärtusel on sama mõju. Saadud raam ülejäänud väärtuste jaoks, olenevalt paksusest, on näidatud allolevas tabelis:
Stiiliatribuudid border-left-style, border-top-style, border-right-style ja border-bottom-style määravad joonte stiili, mida kasutatakse vasaku, ülemise, parema ja alumise külje joonistamiseks. piir vastavalt:
ääris-vasak-stiil | ääris-ülemine-stiil | ääris-parem-stiil | ääris-alt-stiil: puudub
Nagu ka polsterduse ja polsterduse valikute puhul, on äärisel ääris. üldine piiriomand... See võimaldab teil korraga määrata elemendi ümber oleva äärise paksuse, stiili ja värvi:
ääris: | pärida
Väärtused võivad olla suvalises järjekorras, eraldatud tühikutega:
td (ääris: 1 pikslit kollane)
Piiri määramiseks ainult elemendi teatud külgedele on atribuudid border-top, border-bottom, border-left, border-right, mis võimaldavad määrata ülemise, alumise, vasaku ja parema külje parameetreid. vastavalt piiridest.
Jääb vaid kokkuvõte teha:
- ülesandeks polsterdus kasutame kinnisvara polsterdus;
- seadete jaoks marginaalid on reegel marginaal;
- raami valikud määratakse atribuudi abil piir.
Pange tähele, et kõik need css-i omadused suurendavad veebilehe elemendi suurust. Seega, kui muudame veebilehe kujundust moodustavate plokkkonteinerite äärise paksust või taande suurust, siis peame nende konteinerite suurust vastavalt muutma, vastasel juhul võivad need nihkuda ja kujundus läheb katki.
See on kõik, näeme varsti!
Tere! Algselt tahtsin selle artikli jagada neljaks väikeseks, kuid siis mõtlesin sellele. Milleks? On ju mugavam, kui sellist infot kogutakse ühe materjali raames.
Seetõttu õpime täna, kuidas CSS-i taandada vasakult ja kõikidest teistest külgedest - paremale, ülalt ja alla. Neid saab teha piltide ja tekstide jaoks. Neid on kahte tüüpi:
- Väline;
- Sisemine.
Esimese puhul kasutatakse võtmeomaduse marginaali, teise puhul polsterdust. Selguse huvides tegin teile väikese näite. Et sise- ja välisruumil oleks visuaalselt mugav vahet teha, lisasin nähtava tabeli. Vaatame, mis juhtus?
Väline polsterdus
Kirjutades need CSS-i laadilehele, saate määrata lehel oleva teabeploki orientatsiooni. Näiteks liigutage seda vasakule ja alla. Näitame kohe, kuidas see välja näeb.
Üldiselt saate taande määramiseks kasutada allolevaid valikuid.
Vasak (veeris-vasak).
Parem (veeris-parem).
Ülemine (margin-top).
Alumine (veeris-alumine).
Nüüd näitan teile veel üht lahedat nüanssi.
Nagu näete, võite kasutada ühte võimalust - efekt on sama. Ainult teisel juhul on kood kompaktsem. Pange tähele ka seda, et polster on päripäeva. Kõik algab ülalt ja lõpeb vasakul.
Sisemine polsterdus
Protseduur on siin sarnane. Alles nüüd lisan uued omadused mitte kogu tabeli, vaid veergude sisu jaoks.
Vaatame, mis sellest välja tuli.
Analoogiliselt CSS-i sisemiste veeristega saab välimised veerised kirjutada lühendatud koodiga või külgede jaoks eraldi.
Need olid tipphetked. Lõpuks näitan teile, kuidas saate mõnda tööd lihtsamaks teha.
Taare valitud siltide tasemel
Eespool vaadeldud juhtudel on need määratud teksti ja piltide jaoks samaaegselt. Tegelikult saate elementide kauguse määrata konkreetse sildi tasemel. Ma näitan teile, kuidas see töötab. Võtke tagasi viimased muudatused ja sisestage kohandatud kood stiililehele.
Vaatame, mis juhtus pärast muudatuste salvestamist.
Pilt jäi paigale, liikus ainult vasakpoolses küljes olev tekst. Sarnaseid manipuleerimisi saab rakendada ka teistele plokkidele, näiteks tr, span.
Täiendava teabena pakun ülevaatamiseks välja antud ülesande kohta. Seal on kirjeldatud ka päris huvitavaid meetodeid. See võib olla kasulik tekstis punase joone moodustamiseks või muude toimingute tegemiseks.
Lisaks on olemas tellimus teabe tasuta levitamiseks e-posti aadressidele. Ajaveebi tellimiseks on spetsiaalne vorm. Järgmise korrani.
Kasutajad hindavad veebiressurssi selle visuaalse atraktiivsuse poolest. Seetõttu ei pruugita isegi informatiivset teksti lugeda, kuna see on halvasti vormindatud. Järeldus - peate hoolikalt ja hoolikalt lähenema mitte ainult saidi lehtede semantilisele sisule, vaid ka selle visuaalsele esitusele. CSS-tehnoloogia tulek on avardanud köitvate artiklite loomise võimalusi. Üks lugemise hõlbustamiseks loodud atribuutidest on CSS-teksti taane.
Veerised ja polsterdus: mis vahe on?
Enne teksti vormindamise alustamist peaksite mõistma, mis on veerised ja taanded. Hoolimata asjaolust, et need märgistuselemendid näevad mõnel juhul kasutajale ühesugused, on nende vahel põhimõttelisi erinevusi:
- välja määrab atribuut polsterdus, taane - marginaal;
- veerise määrab ploki sisu ja piiri vaheline tühimik, taane on külgnevate plokkide piiride vahel;
- veerisid saab elemendi mõõtmetes (laius ja kõrgus) arvesse võtta või mitte.
Marginaali omadus
Seega kasutage CSS-teksti horisontaalse või vertikaalse taande määramiseks konstruktsiooni marginaal... See omadus kehtib sildi kohta lõiku määratlevas dokumendis. Lihtsamal juhul kirjutatakse see järgmiselt:
veeris: 12 pikslit.
Selline joon tähendab, et tekstiploki (või mõne muu ploki) ümber tehakse igale poole 12 piksli pikkune taane. Intervalli suurendamiseks, näiteks kolm korda, piisab, kui kirjutada:
veeris: 36 pikslit.
Aga mis siis, kui plokkide vaheline kaugus peaks olema mõlemal küljel erinev? Veebiarendajad kasutavad mitut kirjutamisviisi:
- veeris: 11 pikslit 22 pikslit.
- veeris: 11px 22px 33px.
- veeris: 11px 22px 33px 44px.
Esimeses näites tehakse ploki alumisest ja ülemisest servast 11 piksli suurused taanded ning ploki külgedelt 22 piksli võrra. Vastavalt teisele kirjutamisviisile jääb ploki ülemise serva ja sisu vahele 11 pikslit, alumise serva vahele 33 pikslit ja külgedele 22 pikslit. Kolmandal juhul on polsterdus 11 pikslit ülalt, 22 pikslit paremalt, 33 pikslit alt ja 44 pikslit vasakult.
Samuti on võimalik salvestada kaugus ploki piirini ainult ühel küljel: veeris-ülemine, veeris-alumine, veeris-vasak, veeris-parem... Olles tõlkinud kinnistute nimed vene keelde, on nende otstarvet lihtne aimata. Näiteks järgmine kirje ütleb, et parempoolne taane on 22 pikslit:
veeris-parem: 22px.
Ülejäänud külgede puhul eeldatakse, et ploki ümber olevad kaugused on võrdsed lähteelemendi väärtusega.
Kinnisvara marginaal on veidrus, mida arendaja peab CSS-teksti vertikaalse täidise kasutamisel meeles pidama. Külgnevate elementide intervalle ei summeerita, vaid need asetatakse üksteise peale. Näiteks lase ühel plokil olla veeris-alumine: 15 pikslit, ja sellega külgnev plokk altpoolt ülemine veeris: 35 pikslit... Kooli aritmeetika ja terve mõistus nõuavad, et nendevaheline ruum oleks kokku 50 pikslit. Praktikas see nii ei ole. Suure kinnisvara väärtusega plokk marginaal"Neelab" oma naabri alla. Selle tulemusena on elementide vaheline kaugus 35 pikslit.
"Punane joon
Tekstiredaktoris dokumendi kujundamisel eelistavad kasutajad määrata iga uue lõigu "punase" rea abil. CSS-i abil on lihtne teksti vasakule taandada – kasutatakse konstruktsiooni tekst-taane... See on kirjutatud nii:
tekstitaane: 11 pikslit.
See tähendab, et lõigu esimest rida nihutatakse vasaku serva suhtes 11 piksli võrra. Et muuta veebilehel olev tekst redaktoris dokumendi sarnasemaks, peaksite lisaks installima, st kirjutama:
tekst-taane: 11 pikslit;
teksti joondamine: õigusta.
Lisaks pikslitele on märgistuse kirjeldamisel lubatud kasutada ka muid ühikuid - tolli, punkte, protsenti. Olgu plokil CSS-i teksti täidis 10%. Kui ploki laius on 500 pikslit, on punane joon 50 pikslit (10% 500-st).
Selle atribuudi saab määrata pärida... Selline kirje ütleb, et plokk kasutab vanemploki sarnast omadust.
tekst-taane: pärida.
Üllataval kombel võib see võtta ka negatiivseid väärtusi! Sel juhul moodustuvad nn eendid, see tähendab, et põhitekst jääb paigale ja esimene rida nihutatakse vasakule 22 piksli võrra:
tekstitaane: -22 pikslit.
Et tähed ei ületaks brauseri vasakut piiri, lisaks tekst-taane välja määramiseks peate kasutama konstruktsiooni:
polster vasakpoolne: 22px.
Arutatakse põhilisi CSS-i atribuute. Praktika aitab neid kinnistada. Siin on mõned viimased näpunäited selle materjali rakendamiseks oma veebisaidi arendamisel.
- punane joon ja teksti taane on erinevad mõisted ja nende tähistamiseks kasutatakse erinevaid omadusi;
- vertikaalsete taande puhul matemaatika reeglid ei kehti - intervallid kattuvad, suure väärtusega element "võidab";
- lõigu negatiivset taanet kasutatakse lõigu esimese rea tähistamiseks pildi abil.
CSS-i paigutus on alati olnud ristkülikukujuline. Kõik sujuvad jooned on arendaja vastutusel. Stiilireeglid pakuvad piisavalt võimalusi, et anda lehele ekraani eraldusvõime piires elegantsed kujundid. Kuid mis tahes paigutuse element on alati ristkülik, milles teabe asukohta reguleerivad CSS-i reeglid.
Universaalne polsterdus on oluline lehe iga elemendi jaoks, kui see on absoluutselt paigutatud, ja CSS-i peal olev polster on konkreetselt määratletud, kuna see on oluline erinevate elementide jaoks, eriti tekstisiseselt.
Positsioneerimise põhireeglid
Plokielemendil on reegel polsterdamiseks selle elemendi külgedelt, milles see asub (veeris), selle sees olevate elementide polsterdamise reegel (padding) ja äärise laius (ääris), mida saab ka kasutada.
Eriti oluline on ülemine veeris. Plokis olev CSS seob täidisreeglid reeglitega absoluutselt ja suhteliselt paigutatud elementide jaoks selles plokis.
Levinud tava CSS-i reeglite puhul on samade veeriste määramine kõikidele külgedele, üleval / all ja paremal / vasakul paarikaupa või mõlemale küljele eraldi. Näiteks,
- veeris: 10 pikslit;
- polsterdus: 10px20px;
- polsterdus: 10px20px30px40px.
Esimesel juhul on element taandatud selle välimise konteineri külgedelt, milles see asub. Teisel juhul on ülemine ja alumine veeris 10 pikslit ning vasak ja parem veeris 20 pikslit. Kolmandal juhul on taande mõõtmed näidatud kõikidel külgedel: üleval, paremal, all ja vasakul.
Kõigil neil juhtudel taane ülemine CSS on 10 pikslit.
Reeglid, mis muudavad elementide asukohta
Kui paigutuselement ei ole absoluutselt paigutatud, paigutatakse see lehe moodustamise üldisesse järjekorda.
Kui määratlete cCurrInfo elemendi CSS-i ülemine polsterdus saavutatakse, ja kui li tasemel, siis mitte.
Selles näites reegli täidise abil: 40px; nõuab laiuse ja kõrguse reeglite piisavat vähendamist 80 piksli võrra. Vastasel juhul ületab scCurrInfo ploki suurus välimise ploki piire.
Kui eemaldame scCurrInfo kirjeldusest polsterdusreegli, kuid lisame selle väärtusega 20 pikslit loendiüksuse stiili kirjeldusele, saame ainult ülemine taane. CSS ei rakenda seda väärtust teistele külgedele.
Loomulikult kehtib selline taandereegli kasutamine iga li elemendi kohta.
Üldine sisu vormindamise praktika
Mõned arendajad sobivad suurepäraselt plokkelementidega lehtede kodeerimiseks. Ilmselt on see klassikaline tava - alustada tabelitega ja lõpetada oma õppeprotsess plokkidena.
Plokkide paigutusele omane vabadus on lummav ning arendaja kujutlusvõimet ei pea piirama ranged tabelireeglid: ainult read, ainult lahtrid, liidetakse ainult horisontaalselt ja vertikaalselt. Mitte midagi relatsioonilistele ideedele omast.
Samal ajal on tabelitel lisaks ilmsetele puudustele ka palju kvaliteedieeliseid. Ülaserva polstri loomisel võtab CSS arvesse vasakpoolset, paremat polsterdust (all on eriline hetk). Tabeli lahtrireeglid võimaldavad teil juhtida nii vertikaalset kui ka horisontaalset joondamist. Kasutades rida stiile, kombineerides neid lahtri stiilidega, saate moodustada sisu keerulisi esitusi.
Lehe tavaline esitus ristkülikute kujul ei takista sugugi selle esitamist tabeli kujul. Need on samuti ristkülikud, kuid need on ka tabeli lahtrid, see tähendab, et neil on oma reeglid, mis täiendavad plokireegleid.
Absoluutne positsioneerimine
Blokeeri reegliga POSITION: absoluutne; asub asukohas, mis on määratud selle koordinaatidega ploki suhtes, milles see asub.
CSS-i reeglite iseloomulik tunnus on enamikul juhtudel "praktika on parim tõekriteerium", eriti kui on nõutav brauseriülene ühilduvus ja paigutus tehakse käsitsi, mitte ei uurita kaskaadlaadilehtedel täisväärtuslikke käsiraamatuid.
Tabelite kasutamine põhjustab sageli probleeme lahtrite sisu nihutamisel. Sarnane nihe ploki sees ei mõjuta alati ega mõjuta kõiki elemente. Katsetades saate soovitud tulemuse saavutada. Triviaalne ülesanne: kuidas eemalda ülemine polster, CSS ei lahenda alati triviaalselt.
Mõnel juhul, kui peate mõne populaarse saidi sisuhaldussüsteemi lehtede elemente trükkima, peate siiski pöörama tähelepanu mitte ainult eksperimentaalsele praktikale, vaid ka kolleegide kogemustele.
Avataride väärtus psühholoogias
Avataride väärtus psühholoogias
Kuidas rõhutada tähte MS Wordis
Mida see tähendab, kui inimese avatar
Kuidas luua oma Twitteri hetk