Mõõtmeühikud (pikslid, Em ja Ex) ja pärimisreeglid CSS-is. Sildi atribuudid ja omadused. Pikslid, Em, Ex ja protsendid – suhtelised suurused CSS-is

laua korpus asub. Keha koosneb ridadest ja veergudest. Tabel täidetakse ridade kaupa.

Iga silt loob uus rida. Edasi pesastatud luuakse veerud. Saate luua mitu veergu. Sel juhul peate jälgima veergude arvu igas reas. Näiteks kui esimesel real oli 5 veergu, siis järgmised read peaks olema 5 veergu. Muidu jääb laud vedelema. Lahtreid on võimalik liita.

Kuidas teha tabelit html-is

Toome näite, html kood:

Näidistabel
1. veerg 2. veerg

Pöörake tähelepanu rakule . Kasutame spetsiaalseid atribuut colspan lahtrite horisontaalseks liitmiseks. Selle numbriline väärtus näitab liidetavate veergude arvu. Sellel atribuudil on ka analoog: tag (tabeli päis), kuhu tuleb sisestada ka colspan. Tulemus on sama. Kuid sageli kasutavad nad tavalist td.

Vaatame nüüd kõiki sildi atribuute lähemalt

.

Sildi atribuudid ja omadused

Sildi avamiseks

Saate määrata erinevaid atribuute.

1. Property align="parameter" – määrab tabeli joonduse. Võib võtta järgmisi väärtusi:

Ülaltoodud näites joondasime tabeli keskele align="center" .

Seda atribuuti saab rakendada mitte ainult tabelile, vaid ka üksikutele tabeli lahtritele

. Seega sisse erinevad rakud joondus on erinev.

Näiteks

, , , või
  • cols – rida kuvatakse veergude vahel
  • mitte ühtegi – kõik piirid on peidetud
  • read – sildi kaudu loodud tabeliridade vahele tõmmatakse piir
  • 12. Property width="number" - määrab tabeli laiuse: kas pikslites või protsentides.

    13. Omadus klass="klassi_nimi" - saab määrata klassi nime, kuhu tabel kuulub.

    14. Property style="styles" – stiile saab määrata igale tabelile eraldi.

    Nüüd on aeg tabelisse sukelduda ja vaadata tabeli lahtrite atribuute. Need atribuudid tuleks kirjutada avamärgendisse

    Ja Saadaval on samad valikud, mis jaoks rakendatakse hierarhiliselt kõigile
    või read
    ... ... ...

    2. Property background="URL" – komplektid taustapilt. URL-i asemel tuleks kirjutada taustapildi aadress.

    Näide

    Näidistabel
    1. veerg 2. veerg

    Teisendab lehel järgmiseks:

    Vaadeldavas näites on meie taustapilt on sees img kaust(mis asub html-lehega samas kataloogis) ja pildi nimi on fon.gif . Pange tähele, et märgendisse lisasime style="color:white;" . Kuna taust on peaaegu must, siis vältimaks teksti taustaga segunemist, tegime teksti valgeks.

    3. Omadus bgcolor="color" – määrab tabeli taustavärvi. Saate valida mis tahes värvi kogu paletist (vt html-värvide koode ja nimetusi)

    4. Property border="number" – määrab tabeli äärise paksuse. Eelmistes näidetes määrasime piiri="1" , mis tähendab, et äärise paksus on 1 piksel.

    5. Property bordercolor="color" – määrab äärise värvi. Kui border="0", siis äärist ei ole ja äärise värvil pole tähendust.

    6. Property cellpadding="number" – taane raamist lahtri sisuni pikslites.

    7. Property cellspacing="number" – lahtrite vaheline kaugus pikslites.

    8. Property cols="number" – veergude arv. Kui te seda ei määra, määrab veergude arvu brauser ise. Ainus erinevus seisneb selles, et selle parameetri määramine kiirendab suure tõenäosusega tabeli laadimist.

    9. Property frame="parameter" – kuidas kuvada äärised ümber tabeli. Võib võtta järgmisi väärtusi:

    • tühi - ära tõmba piire
    • ääris – ääris ümber laua
    • ülal - ääris piki tabeli ülemist serva
    • allpool - ääris tabeli allosas
    • hsides - lisage ainult horisontaalsed äärised (tabeli üla- ja alaosa)
    • vside - joonistab ainult vertikaalsed äärised (tabelist vasakule ja paremale)
    • rhs – ainult ääris parem pool tabelid
    • lhs - ääris ainult tabeli vasakul küljel

    10. Property height="number" - määrab tabeli kõrguse: kas pikslites või protsentides.

    11. Property rules="parameter" – kus kuvada lahtritevahelised piirid. Võib võtta järgmisi väärtusi:

    • kõik – iga tabeli lahtri ümber tõmmatakse joon
    • rühmad - siltide moodustatud rühmade vahel kuvatakse rida
    .

    Atribuudid ja omadused

    1. Property align="parameter" – määrab üksiku tabeli lahtri joonduse. Võib võtta järgmisi väärtusi:

    • vasak - vasak joondus
    • kesk-keskjoondus
    • parem - parem joondus

    2. Property background="URL" – määrab lahtri taustapildi. URL-i asemel tuleks kirjutada taustapildi aadress.

    3. Omadus bgcolor="color" – määrab lahtri taustavärvi.

    4. Property bordercolor="color" – määrab lahtri piiri värvi.

    5. Property char="letter" – määrab tähe, millest lähtudes tuleb joondus teha. Joondamisatribuudi väärtuseks tuleb määrata char.

    6. Omadus colspan="number" – määrab liidetavate horisontaalsete lahtrite arvu.

    7. Property height="number" - määrab tabeli kõrguse: kas pikslites või protsentides.

    8. Property width="number" - määrab tabeli laiuse: kas pikslites või protsentides.

    9. Property rowspan="number" – määrab ühendatavate vertikaalsete lahtrite arvu.

    10. Property valign="parameter" – lahtri sisu vertikaalne joondamine.

    • ülemine – lahtri sisu joondamine rea ülemise servaga
    • keskmine - keskmine joondus
    • alumine - joondamine alumise servaga
    • baasjoon – baasjoonega joondamine
    Märkus 1

    Sildi jaoks

    . Ühe sildi parameetrid
    tema sees

    Kuidas vältida tabeli lahtripiiride kokkukleepumist

    Millal kasutades äärist(lahtri ääris) ja nulli polsterdus lahtrite vahel, jäävad need ikkagi kokku ja saate topeltäärise . Selle vältimiseks peate tabelistiilides määrama piiride kokkutõmbamise: ahenda:

    ...

    Hea lugeja, nüüd olete selle kohta palju rohkem teada saanud html-märgend laud. Nüüd soovitan teil liikuda järgmise õppetüki juurde.

    Protsendi märkimist kasutatakse tavaliselt juhtudel, kui on vaja väärtust suhte suhtes muuta vanem element või kui mõõtmed sõltuvad välistingimustest. Seega tähendab tabeli laius 100%, et see kohandub brauseriakna suurusega ja muutub koos akna laiusega.

    Nimetused

    KirjeldusNäide
    <тип> Näitab väärtuse tüüpi.<размер>
    A && BVäärtused tuleb väljastada määratud järjekorras.<размер> && <цвет>
    A | BNäitab, et peate pakutud väärtuste hulgast valima ainult ühe väärtuse (A või B).normaalne | väikese tähega
    A || BIga väärtust saab kasutada iseseisvalt või koos teistega mis tahes järjekorras.laius || loendama
    Rühmade väärtused.[ saak || rist]
    * Korrake null või rohkem korda.[,<время>]*
    + Korrake üks või mitu korda.<число>+
    ? Määratud tüüp, sõna või rühm on valikuline.sisend?
    (A, B)Korda vähemalt A, kuid mitte rohkem kui B korda.<радиус>{1,4}
    # Korrake üks või mitu korda, eraldades need komadega.<время>#
    ×

    Näide

    Laius protsentides

    Tabeli sisu


    Spetsifikatsioon

    Iga spetsifikatsioon läbib mitu kinnitamisetappi.

    • Soovitus – spetsifikatsiooni on heaks kiitnud W3C ja seda soovitatakse kasutada standardina.
    • Kandidaadi soovitus ( Võimalik soovitus ) – standardi eest vastutav grupp on rahul, et see täidab oma eesmärke, kuid vajab standardi rakendamiseks abi arenduskogukonnalt.
    • Kavandatud soovitus Soovitatav soovitus) – selles etapis esitatakse dokument lõplikuks kinnitamiseks W3C nõuandekogule.
    • Working Draft – küpsem versioon eelnõust, mida on kogukonna läbivaatamiseks arutatud ja muudetud.
    • Toimetaja mustand ( Toimetuse mustand) - standardi mustandversioon pärast projekti toimetajate muudatuste tegemist.
    • Mustand ( Spetsifikatsiooni kavand) – standardi esimene mustandversioon.
    ×

    Brauserid

    Brauseri tabelis kasutatakse järgmisi tähiseid.

    • - brauser toetab atribuuti täielikult kõigi kehtivate väärtustega;
    • - brauser ei taju seda omadust ja seda ignoreeritakse;
    • - võib töö ajal ilmuda erinevaid vigu, või vara on toetatud vaid osaliselt, näiteks mitte kõik kehtivad väärtused kehtivad või omadus ei kehti kõikide spetsifikatsioonis määratud elementide kohta.

    Number näitab brauseri versiooni, millest atribuuti toetatakse.

    Väidetakse, et üldiselt vaatab valdav hulk kasutajaid ainult Interneti-materjale, kuid ei osale aktiivselt arutelus foorumid, V võrgukogukonnad jne.).

    Definitsioon

    Vastavalt see reegel, ei moodusta sisu loovate Interneti-kasutajate osakaal rohkem kui 1% inimestest, kes seda sisu lihtsalt vaatavad. Näiteks iga inimese kohta, kes postitab foorumisse sõnumi, vaatab seda foorumit 99 inimest. kiire, kuid ei reageeri sellele.

    Sarnased mustrid

    Ühe protsendi reegel on sarnane Pareto seadus(umbes 80:20 suhe), mille järgi teeb 20% rühmaliikmetest 80% kogu tööst.

    Kirjutage arvustus artikli "Ühe protsendi reegel" kohta

    Märkmed

    Lingid

    Ühe protsendi reeglit kirjeldav väljavõte

    - Vaata, Anisyushka, kas keeled on terved või midagi kitarril? Ma pole seda pikka aega kätte võtnud – see on puhas marss! mahajäetud.
    Anisya Fedorovna läks meelsasti oma kerge turvisega oma isanda juhiseid täitma ja tõi kaasa kitarri.
    Onu puhus tolmu ilma kellegi poole vaatamata, koputas kondiste sõrmedega kitarri kaant, häälestas ja sättis end toolis. Ta võttis (mõnevõrra teatraalse žestiga, pannes vasaku käe küünarnuki) kitarri kukla kohale ja pilgutas Anisya Fedorovnale, ei hakanud Barõnjale, vaid võttis ühe kõlava puhta akordi ja asus mõõdetult, rahulikult, kuid kindlalt lõpetada väga vaikses tempos kuulus laul: Mööda teed ja kõnniteed. Samal ajal, selle rahuliku rõõmuga (sama, mida hingas kogu Anisja Fedorovna olemus), hakkas laulu motiiv Nikolai ja Nataša hinges laulma. Anisja Fedorovna punastas ja, kattes end taskurätikuga, lahkus naerdes toast. Onu jätkas laulu lõpuni puhtalt, püüdlikult ja energiliselt, vaadates muutunud, inspireeritud pilguga kohta, kust Anisja Fedorovna oli lahkunud. Tema näos oli ühelt poolt, hallide vuntside all, veidi naeru ja eriti naeris ta siis, kui lugu edasi edenes, biit kiirenes ja liiga vali kohtades tuli midagi lahti.
    - Armas, armas, onu; rohkem, veel,” karjus Nataša kohe, kui ta lõpetas. Ta hüppas istmelt püsti, kallistas onu ja suudles teda. - Nikolenka, Nikolenka! - ütles ta, vaadates tagasi oma vennale ja justkui küsides temalt: mis see on?
    Nikolaile meeldis väga ka onu mängimine. Onu mängis laulu teist korda. Uksele ilmus taas Anisja Fjodorovna naeratav nägu ja tema selja tagant paistsid ikka teised näod... "Külma võtme taga hüüab: tüdruk, oota!" Onu mängis, tegi veel ühe osava liigutuse, rebis selle ära ja liigutas õlgu.
    "Noh, noh, mu kallis, onu," oigas Nataša nii paluval häälel, nagu sõltuks tema elu sellest. Onu tõusis püsti ja tema sees oleks justkui kaks inimest - üks naeratas tõsiselt lõbusale kaaslasele ning lustlik tegi enne tantsu naiivse ja korraliku nalja.
    - Noh, õetütar! - karjus onu, viipas käega Nataša poole, rebides akordi ära.
    Nataša viskas seljast salli, mis oli tema peal, jooksis onust ette ja, pannes käed puusa, tegi õlgadega liigutuse ja tõusis püsti.
    Kust, kuidas, millal imes see krahvinna, keda kasvatas prantsuse emigrant, sellest vene õhust, mida ta hingas, sellest vaimust, kust võttis ta need võtted, mis pas de chale oleks pidanud ammu välja tõrjuma? Kuid need vaimud ja tehnikad olid samad, jäljendamatud, uurimata vene omad, mida onu temalt ootas. Niipea kui ta püsti tõusis ja pidulikult, uhkelt ja kavalalt lõbusalt naeratas, möödus esimene hirm, mis Nikolaid ja kõiki kohalviibijaid valdas, hirm, et ta teeb valesti, ja juba hakati teda imetlema.

    Protsent on elemendi mõõtühik seda sisaldava ploki suhtes. See toimib suurepäraselt piltide puhul: siin määrame pildi mõõtmed, mille laius on alati 50% konteineri laiusest. Proovige oma brauseriakent kitsendada, et näha, mis juhtub!

    artikli img ( ujuk : paremal ; laius : 50 % ; )

    Maksimaalse ja maksimaalse laiuse piiramiseks saate kasutada isegi väärtusi min-width ja max-width minimaalne suurus Pildid!

    laiuse protsendiline paigutus

    Malli loomiseks saate kasutada protsenti, kuid see lähenemisviis nõuab rohkem tööd. Selles näites hakkab navigeerimiselemendi sisu ebameeldivalt ümber kerima, kui brauseriaken on liiga kitsas. Kõik sõltub sellest, mis teie sisuga kõige paremini sobib.

    nav ( ujuk : vasak ; laius : 25% ; ) sektsioon ( veeris vasak : 25% ; )

    Kui paigutus on liiga kitsas, pigistatakse navigeerimiselementi. Hullem kui see, ei saa te selle parandamiseks kasutada navigeerimisseadet min-width, kuna see vara ei hoia parempoolset kolonni ründamast.

    Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

    13 / 19