Pridanie CSS. Čo je CSS, na čo sú CSS štýly Vlastné CSS štýly

Už vieme, že na to, aby web vyzeral krásne a štýlovo, musíme pracovať so súborom CSS. A aby sa naše štýly uplatnili, musíme sa spojiť HTML súbor a súbor CSS.

Existuje niekoľko možností na implementáciu tejto operácie: pomocou vnorených šablón štýlov, externých šablón štýlov a vloženého štýlu.

Dnes budeme hovoriť o poslednej metóde.

Vloženie štýlu do značky HTML

esencia túto metódu vec je potrebné povolenie vložíme do značky. Na tento účel samostatný atribút - štýl. Tento atribút možno aplikovať na akúkoľvek značku, ale iba v rámci tela stránky, tj v tele. Hodnota tohto atribútu je príkaz štýlu, ktorý sa má použiť na daný prvok.

Napríklad, nastavme rôzne veľkosti písma pre dva rôzne odseky textu:

< p style= "font-size:25px;" >Nastavte túto časť textu na výšku 25 pixelov. < p style= "veľkosť písma:15px; farba:#2400ff;"> A tento text bude s písmenami vysoký 15 pixelov a tiež ho zafarbíme na modro, aby sme demonštrovali použitie viacerých štýlov súčasne.

Nedostatky

Príklad dokonale ukazuje, ako takéto zavesenie štýlov upcháva kód stránky.

Môžete si tiež všimnúť niekoľko nevýhod použitia tejto stylingovej techniky. Prvý z nich možno nazvať rozšírením štýlu v celom dokumente, čo v budúcnosti občas skomplikuje proces úprav.

Problémy budú aj pri navrhovaní veľkých objemov textu. Myslím, že nikto nie je spokojný s vyhliadkou predpisovania veľkosti písma pre každý odsek, najmä ak je takýchto odsekov 40.

Dokonca aj pri použití inline štýlov je nemožné použiť pseudotriedy, čo webovým dizajnérom značne zväzuje ruky.

Za zmienku stojí aj zmätok, ktorý určite nastane pri používaní atribútu style. Tento zmätok vznikne v dôsledku používania rôznych úvodzoviek pri písaní štýlov.

Pre prehľadnosť sa pozrime na príklad nižšie:

< div style= "font-family: "Roboto Condensed", bezpätkové"> Zadanie je správne. < div style= "font-family: "Robot Condensed", bezpätkové"> Tak to je tiež správne. < div style= "font-family: " Roboto Condensed ", sans-serif" >Toto nie je správny záznam. < div style= "font-family: " Roboto Condensed ", sans-serif" >A ani to nie je pravda.

Pri pohľade na výpočty uvedené vyššie je logickým záverom, že používanie inline štýlov je spojené s množstvom významných komplikácií a nepríjemností.

Kedy použiť vložený štýl

Napriek všetkým nedostatkom nebol inline štýl vynájdený nadarmo. Webmasteri sa na ne často odvolávajú v prípade programového štýlu. Pozrime sa napríklad na tento kód

< div id= "productRate" > < div style= "width: 40%" >

Napísanie požadovanej šírky pre tento blok by bola najjednoduchšia operácia.

Podobná situácia môže nastať, keď je potrebné nahradiť obrázok na pozadí (napríklad) používateľa v role správcu. V tomto prípade nemusí značka img fungovať. Preto sa oplatí odkázať na atribút štýlu:

< div style= "background:url(fon.jpg)" >

Programátori tiež často odkazujú na inline štýly v procese rozloženia vyskakovacích okien. Tento proces často prebieha nasledovne: blok, ktorý sa navrhuje, je nastavený na display:block a ostatné okná sú skryté pomocou display:none, aby vizuálne neprekážali pri práci programátora. Tu je príklad:

< div class = "element" style= "display:block" >Vyskakovacie okno, ktoré sa práve vykresľuje

Výsledok

Používanie inline štýlov je spojené s množstvom ťažkostí a nepríjemností, avšak v procese stylingu niektorých prvkov sa webmasteri často obracajú na túto metódu, aby optimalizovali svoju prácu.

V tejto kapitole si povieme, ako vložiť CSS do HTML dokumentu, teda prepojiť popis štýlu prvku priamo so samotným prvkom pomocou nejakého druhu HTML tagu.

Implementovať túto úlohu možné tromi spôsobmi:

  • Napíšte popis štýlu priamo na samotný prvok. Táto metóda je dobrá iba vtedy, ak je takýto prvok jediný HTML dokument e, ktorý si vyžaduje samostatný popis štýlu.
  • Napíšte popis štýlu pre všetky identické prvky v dokumente HTML. Táto metóda sa ospravedlňuje, ak sa štýl stránky zásadne líši od celkového dizajnu stránky (skupina vzájomne prepojených stránok).
  • Presuňte popis štýlu prvkov HTML do samostatného súboru CSS. To vám umožní kontrolovať dizajn celej lokality, každej stránky lokality, na ktorej je uvedený odkaz na súbor CSS. Táto metóda je najefektívnejším spôsobom použitia kaskádových štýlov.

Pozrime sa bližšie na jednotlivé možnosti a zároveň sa zoznámime s pravidlami syntaxe pre písanie CSS.

atribút štýlu.

Takmer každá značka HTML má atribút štýl, čo znamená, že na túto značku je použitý nejaký popis štýlu.

Píše sa to takto:

style="">

Všetko, čo bude napísané medzi úvodzovkami atribútu štýl a bude popisom štýlu pre daný prvok, v tomto prípade prvok

No napríklad:

style="color: #ff0000; font-size:12px"> je to odsek s vlastným štýlom

V tomto prípade sme určili, že tento odsek by mal byť zobrazený červenou farbou a mal by mať veľkosť písma 12 pixelov. V nasledujúcich kapitolách sa budem podrobne venovať tomu, čo je napísané v úvodzovkách, ale teraz ide o to, ako aplikovať CSS na ľubovoľný HTML tag.

Rovnakým princípom môžete určiť individuálny štýl pre takmer každý prvok HTML.




atribút štýlu

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px"> Všetko o slonoch



Kúpte si slona


style="color: #ff0000; font-size:14px">


style="color: #0000ff; font-size:16px"> Prenajmite si slona


style="color: #ff0000; font-size:14px">




Ale ešte raz, tento spôsob vstrekovania CSS je dobrý iba vtedy, ak potrebujete nastaviť určitý štýl pre malý počet prvkov HTML.

Tag (nezamieňať s rovnomenným atribútom), v ktorom sa vyskytuje popis prvkov, ktoré potrebujeme.

Pozrite sa na príklad, nižšie budú komentáre.




štýlová značka



Všetko o slonoch


Na tejto stránke nájdete všetky informácie o slonoch.


Kúpte si slona


Tu si môžete kúpiť tie najlepšie slony za konkurenčné ceny!!


Požičajte si slona


Len tu si môžete prenajať akékoľvek slony!!




Ako vidíte na príklade, dosiahli sme presne rovnaký výsledok ako v prvom prípade, len teraz nepredpisujeme štýl pre každý prvok jednotlivo, ale vložíme ho do „hlavy“ dokumentu, čím naznačujeme, že všetky nadpisy

,

- budú modré a odseky

- červená. Predstavte si, ako by sme si uľahčili prácu, keby na stránke bolo sto takýchto odsekov a asi pätnásť nadpisov a samotný dokument by vážil menej „odstránením“ všetkých opakujúcich sa popisov štýlov pre každý jednotlivý prvok.

Teraz sľúbené komentáre:

Tag existuje priama deklarácia štýlov určitých prvkov HTML podľa nasledujúcej syntaxe:

Ak je v bloku deklarácie štýlu špecifikovaných niekoľko vlastností prvku, potom sú oddelené bodkočiarkou.

CSS v samostatnom externom súbore.

Ako dlho a krátko sme sa dostali k hlavnej, podľa mňa, výhode CSS, a to k možnosti vytiahnuť všetky informácie súvisiace s dizajnom stránky do samostatného externého súboru.

Otvorte teda poznámkový blok (alebo iný editor) a napíšte doň nasledujúci text:

Telo (farba pozadia: #c5ffa0)
a (farba:#000060; hrúbka písma: tučné;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (farba: #0000ff; veľkosť písma: 18px)
h2 (farba: #ff00ff; veľkosť písma: 16px)
p (farba: #600000; veľkosť písma:14px)

Pokúsim sa vám podrobne povedať, čo je také zvláštne, čo sme napísali v nasledujúcich kapitolách tohto návodu.

Všetky! súbor s popisom štýlu bol vytvorený! Teraz zostáva len trochu, a to prinútiť potrebné stránky našej stránky, aby čerpali informácie z tohto súboru.

To sa vykonáva pomocou značky (spojenie). Tag viacúčelový a slúži na „prepojenie“ HTML dokumentu s ďalšími externými súbormi, aby sa zabezpečila jeho správna činnosť. Tag je druh odkazu, ktorý nie je určený pre používateľov, ale pre programy prehliadača (prehliadače). Pretože nesie výlučne servisné informácie nachádza sa v hlavičke dokumentu HTML medzi značkami a nezobrazujú sa v prehliadačoch.

Tag má atribúty:

href- Cesta k súboru.
rel- Definuje vzťah medzi aktuálnym dokumentom a referenčným súborom.
  • ikona odkazu – Určuje, že zahrnutý súbor je .
  • štýlový list- Určuje, že zahrnutý súbor obsahuje šablónu štýlov.
  • application/rss+xml – súbor XML na popis informačného kanála noviniek.
typu- Typ údajov MIME zahrnutého súboru.

Keďže kaskádové štýly zahŕňame ako externý súbor, náš odkaz na službu má nasledujúcu formu:

Opakujem sa, aby som určite rozptýlil prípadné nedorozumenia. Atribút rel priradiť hodnotu štýlový list keďže kaskádový štýl zahrnieme ako externý súbor, zadáme cestu k súboru css (v tomto príklade sa súbor nazýva mystyle.css a leží vedľa dokumentu HTML, v ktorom je napísaný daný odkaz) to tiež naznačujú daný súbor textový a obsahuje popis štýlu type="text/css"

Teraz vložíme tento riadok do nadpisov stránok nášho webu a vychutnáme si výsledok ..

Súbor mystyle.css
telo (farba pozadia: #c5ffa0)
a (farba:#000060; hrúbka písma: tučné;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (farba: #0000ff; veľkosť písma: 18px)
h2 (farba: #ff00ff; veľkosť písma: 16px)
p (farba: #600000; veľkosť písma:14px)
súbor index.html



kaskádové štýly



Ponuka:


Všetko o slonoch.
Kúpte si slona.
Požičajte si slona.

Všetko o slonoch


Na tejto stránke nájdete všetky informácie o slonoch.




súbor elephant.html



kaskádové štýly



Ponuka:


Všetko o slonoch.
Kúpte si slona.
Požičajte si slona.

Kúpte si slona


Tu si môžete kúpiť tie najlepšie slony za konkurenčné ceny!!




súbor elephant1.html



kaskádové štýly



Ponuka:


Všetko o slonoch.
Kúpte si slona.
Požičajte si slona.

Požičajte si slona


Len tu si môžete prenajať akékoľvek slony!!




Vo vyššie uvedenom príklade „The Elephant Site“ sú momentálne tri stránky, z ktorých každá je prepojená s jednou jedinou stránkou. externý css súbor - mystyle.css. Tým sme to výrazne „vyložili“ a dizajn celej stránky urobili „mobilným“. Predstavte si, koľko kilobajtov by sme vyhrali, keby na tomto webe bolo sto celých stránok!? Tiež, koľko času by to ušetrilo, keby sme potrebovali niečo zmeniť v jeho dizajne!?

V tejto kapitole sme sa pozreli na tri spôsoby, ako vložiť CSS do dokumentu HTML. Ktorý z nich je lepšie použiť?

  • Použiť atribút štýl pre akýkoľvek prvok, ak je tento prvok so štýlom odlišným od ostatných prvkov jediný na celej lokalite.
  • Použite značku

    Toto je nadpis


    Toto je odsek.


    Externý CSS

    Externá šablóna štýlov sa používa na definovanie štýlu pre mnoho stránok HTML.

    Pomocou externej šablóny štýlov môžete zmeniť vzhľad a dojem z celej webovej stránky zmenou jedného súboru!

    Ak chcete použiť externú šablónu štýlov, pridajte na ňu odkaz do sekcie HTML stránky:

    Príklad






    Toto je nadpis


    Toto je odsek.


    Externá šablóna štýlov môže byť napísaná v ľubovoľnom textový editor. Súbor nesmie obsahovať HTML kód a musí byť uložený s príponou . CSS.

    Takto vyzerá "styles.css":

    telo (
    farba pozadia: prášková modrá
    }
    h1(
    farba: modrá;
    }
    p(
    farba: červená;
    }

    CSS písma

    Vlastnosť CSS color určuje farbu textu, ktorá sa má použiť.

    Vlastnosť CSS font-family určuje písmo, ktoré sa má použiť.

    Vlastnosť CSS font-size určuje veľkosť textu, ktorý sa má použiť.

    Príklad






    Toto je nadpis


    Toto je odsek.


    css okraj

    Vlastnosť CSS border definuje hranicu okolo prvku HTML:

    Príklad

    p(
    }

    CSS výplň

    Vlastnosť CSS padding definuje výplň (medzeru) medzi textom a okrajom:

    Príklad

    p(
    okraj: 1px tuhá prášková modrá;
    výplň: 30px
    }

    Od autora: Dobrý deň, milí čitatelia portálu webformyself. Pri vytváraní stránok je veľmi dôležitý dizajn webového zdroja. To má na svedomí css jazyk (kaskádové štýly), o ktorom si dnes niečo povieme. Alebo skôr o jeho spojení a využití. Zvážte niektoré štýly css pre web, ktoré sa používajú pri navrhovaní webových stránok.

    css pripojenie

    Dnes už takmer nikde nenájdete webovú stránku, ktorá by bola vytvorená čisto pomocou možností html. V skutočnosti by bol vzhľad takýchto stránok jednoducho hrozný, a preto, keď je značenie potrebných prvkov pripravené, musia byť okamžite navrhnuté, a to pomocou css v samostatný súbor.

    Treba povedať, že vo všeobecnosti existujú aj možnosti zahrnutia štýlov do html súboru. Môžu byť napríklad definované pomocou atribútu style alebo rovnakej značky. Toto sa nazýva inline štýly. Tento prístup dnes nie je vítaný a porušuje moderné vývojové štandardy.

    Ale ako to urobiť správne, pýtate sa? Na to musíte vytvoriť nový súbor s príponou css a potom ho pripojte k html. To sa robí veľmi jednoducho pomocou značky odkazu, ktorá je zodpovedná za pripojenie externých súborov. Robí sa to takto:

    < link rel = "stylesheet" type = "text/css" href = "style.css" >

    Značka je jednoduchá, ako ste už pochopili. Poviem vám trochu viac o jeho atribútoch:

    rel = "stylesheet" - vo všeobecnosti sa atribút rel zapisuje na určenie úlohy súboru na stránke. V našom prípade je úlohou šablóna štýlov, ktorá je označená.

    type = "text/css" - takzvaný MIME typ, ktorý sa zvyčajne uvádza pre všetky zahrnuté súbory, aby ich prehliadač správne interpretoval. Moderné webové prehliadače tento atribút písať nemusia.

    href = "style.css" je štandardný atribút, ktorý určuje adresu nášho externého súboru. V tomto prípade sa píše na základe toho, že súbor má štýl názvu, príponu css a nachádza sa v rovnakom priečinku ako html dokument.

    Ako vidíte, pri pripájaní css súborov sa zmení iba atribút href, všetko ostatné meniť netreba. Na stránku môžete pripojiť toľko štýlov, koľko chcete, ale nie viac ako 2-4 sa považujú za optimálne, pretože príliš veľa požiadaviek na server tiež nie je príliš dobré.

    Kde môžem získať hotové štýly CSS pre web?

    No s tým spojením je dúfam všetko viac-menej jasné. Vy však vytvárate prázdny súbor a aby ste videli efekt jeho pridávania, musíte pravidlá buď napísať sami, alebo ich odniekiaľ prevziať.

    Na webe je napríklad množstvo bezplatných html šablón. Ak si stiahnete niektorý z nich, potom vo vnútri určite bude hotová šablóna štýlov s potrebnými pravidlami pre dizajn webových stránok. Správne však bude fungovať iba pre vlastný html dokument. Faktom je, že tieto dva jazyky sú spojené pomocou takzvaných selektorov.

    Selektor je vlastnosť jazyka css, ktorá je preň jedinečná. Na čo sú potrebné? No predstavte si tento kód:

    Text nadpisu

    Text v odseku

    A ako môžeme napríklad štylizovať odsek a nadpis v css? Na to slúžia selektory, aby ste získali prístup len k prvkom, ktoré potrebujete. Napríklad:

    p( font-size: 12px; ) .title( font-size: 36px; )

    veľkosť písma: 12px;

    názov (

    veľkosť písma: 36px;

    Veľkosť písma všetkých odsekov sme nastavili na 12 pixelov, pričom prvky s triedou title (v našom prípade h1) dostali oveľa väčšiu veľkosť 36 pixelov. Všimnite si, že v prípade odsekov sa štýly vzťahujú na všetky, bez ohľadu na to, koľko ich je na stránke.

    Druhý selektor riešil iba jeden prvok – triedu názvu. Samozrejme, je možné vytvoriť ďalšie prvky s presne rovnakou triedou, nie je to zakázané a dostanú rovnaké pravidlo, ale ak napíšeme html tag h1 (bez triedy title), potom preň nebudú pridané žiadne pravidlá.

    Takto pohodlne umožňuje css vybrať potrebné prvky a nechať na pokoji tie, ktoré nie sú potrebné. S čím to súvisí pripravené štýly ktoré nájdete na internete? Všetko je naviazané na určité triedy a identifikátory, takže tieto tabuľky nemôžete len tak pripojiť k žiadnym súborom, nebudú fungovať, ak potrebné triedy nie sú pripojené k html potrebných prvkov.

    Napríklad v šablóne štýlov vidíme nasledujúci kód:

    Nav( šírka: 300px; pozadie: aqua; ... ) .nav a( display: block; color: #ccc; ... )

    Nav(

    šírka: 300px

    Už z toho môžeme usúdiť, že niekde na našej html stránke musí byť prvok s triedou nav a musia v ňom ležať odkazy. Ak je to pravda, potom sa na ne použije vzhľad a podľa toho sa zmení aj ich vzhľad. Ak sa takéto prvky nenájdu, kód sa jednoducho ignoruje.

    Opäť na nete nájdete veľa hotové šablóny, v ktorom môžete vidieť toto prepojenie triedy, takže ak v html niečo zmeníte, je potrebné vykonať príslušné operácie v šablóne štýlov.

    Ako vytvoriť štýly CSS pre web?

    CSS nie je niečo strašidelné a extrémne zložité. Ide o bežnú technológiu vytvorenú ľuďmi na dizajn webových stránok, ktorá má svoje pravidlá. Stačí im porozumieť a aj vy budete môcť pomocou tohto jazyka vytvárať vzhľad webových zdrojov.

    Najdôležitejšou podmienkou rýchleho rozvoja je neustála prax spojená s novými poznatkami, ktoré sa sami naučíte. Naši vám môžu poskytnúť podobnú prax.

    Okrem toho sa môžete naučiť a zvládnuť základy css v našej prémiovej sekcii. Existuje jeden z kurzov, ktorý sa úplne venuje základným vlastnostiam tohto jazyka. .

    Hlavne sa rozhodne nalaďte na štúdium a zahoďte predsudky, že je to veľmi ťažké. Pomôcť môžete aj bezplatnými materiálmi na našej webovej stránke, článkami a videonávodmi. Ak chcete, môžete ich použiť na získanie základných vedomostí, ktoré sú potrebné pri práci s css.

    Týmto sa s vami lúčim. Prečítajte si náš blog webformyself, aby ste zlepšili svoje znalosti o tvorbe webových stránok.

    > Základné css štýly na vytvorenie stránky Štýly na zobrazovanie kontajnerov a ich obsahu sa spravidla píšu do šablóny štýlov, ktorá sa zvyčajne nazýva stile.css, hoci ju môžete nazvať akokoľvek. Hlavná vec je, že na stránke v značke bola správna cesta k šablóne so štýlmi

    Ak chcete upraviť štýl kontajnera na stránke, môžete mu priradiť triedu. Napríklad kontajner

    môžete priradiť štýl s názvom chapka_saita, potom sa trieda priradí ku kontajneru na stránke
    obsahu
    . Šablóna štýlov špecifikuje štýly pre chapka_saita. Názov v tabuľke stile.css začína bodkou.

    Chapka_saita (štýly zadajte v zložených zátvorkách)

    Štýl kontajnera možno zadať aj priamo, ak mu nebola priradená trieda. Napríklad štýl pre kontajner

    obsahu
    začína názvom kontajnera

    Hlavička (v zložených zátvorkách označujú štýly)

    Môžete tiež určiť štýly pre kontajnery pomocou identifikátora, potom to vyzerá takto

    obsahu
    , v šablóne štýlov sa identifikátor začína znakom libry

    #blok1 (v zložených zátvorkách uveďte štýly)

    Ak potrebujete špecifikovať štýly nadpisov v kontajneroch, odkazoch, obrázkoch, vyzerá to takto.

    Chapka_saita (v zložených zátvorkách štýl hlavného kontajnera)
    .chapka_saita h1, h2 ( štýl pre nadpisy v značkách

    a

    pre tento kontajner)
    .chapka_saita a ( štýl pre odkazy v tomto kontajneri )
    .chapka_saita a:hover ( štýly odkazov pri umiestnení kurzora myši )
    .chapka_saita img ( štýly pre obrázky v tomto kontajneri )
    Samotné štýly sú napísané v týchto zložených zátvorkách a sú oddelené bodkočiarkami;

    Rodina písiem: Arial; nastavuje písmo kontajnera, ktoré sa zvyčajne používa v značke , v ktorom je celý obsah stránky

    Výška riadku: 1,2; nastavuje výšku riadkov pre písmo

    Odsadenie

    výplň: 10px nastavuje vnútornú výplň obsahu od okraja kontajnera, v tomto prípade je výplň 10 pixelov, hodnotu môžete zadať v percentách alebo v em
    okraj: 5px nastavuje okraje kontajnera,
    okraj: 10px 5px 0px 15px; zarážky môžu byť špecifikované samostatne pre každú stranu
    margin-bottom: 10px; môžete určiť odsadenie len na jednej strane, v tomto prípade je odsadenie zdola 10 pixelov. To isté sa dá aplikovať aj na výplň.

    Nižšie je uvedený príklad štýlov značky

    Text ( ľavý okraj: auto; pravý okraj: auto; šírka: 930 pixelov; veľkosť písma: 12 pixelov; rodina fontov: Arial; výška riadku: 1,2; obrázok na pozadí: url(images/fon.jpg); )

    Štýly pre text

    veľkosť písma: 12px; určuje veľkosť písma, môže byť špecifikovaná v pixeloch, percentách alebo ems
    farba: #0000ff; označuje farbu písma, v tomto prípade #0000ff modrá, môže byť špecifikovaná ako slovo, napríklad farba: zelená; t.j. farba je zelená.
    text-dekorácia: žiadna; odstraňuje podčiarknutie, používa sa pre odkazy na odstránenie podčiarknutia
    text-transform:veľké písmená; robí všetky písmená textu veľkými, namiesto veľkých písmen môžete písať iné hodnoty a naopak, horné alebo dolné podčiarknutie, prečiarknutie.
    font-weight: bold; bude písmo tučné, namiesto tučného písma je možné použiť iné hodnoty
    text-align:left; nastaví zarovnanie textu, v tomto prípade vľavo, na ľavú stranu kontajnera, môžete nastaviť hodnotu conter, hight.
    text-shadow: 1px 2px 1px 0px #000000; farba: #f9f5ed; tieň pre text

    Štýly kontajnerov

    farba pozadia: #DCDCDC; priradí kontajneru farbu pozadia, v tomto prípade #DCDCDC sivú
    background-image: url(images/fon.jpg); nastaví obrázok na pozadí

    Ohraničenie: 1px plný #E8E8E8; priraďuje orámovanie, fráza pevná znamená pevné orámovanie, #E8E8E8 je farba orámovania. Môžete zadať samostatné orámovanie pre každú stranu, napríklad border-top: 2px solid #E8E8E8;
    border-radius: 10px pri zaoblení rohov kontajnera môžete na každom rohu nastaviť iné zaoblenie border-radius: 2px 6px 10px 0px;
    box-shadow: #2C2C29 10px 10px 10px; tienidlo pre nádoby

    šírka: 926 pixelov; určuje šírku nádoby
    výška: 240px; výška nádoby

    float:left; stlačí kontajner na ľavú stranu, štandardne idú kontajnery v poradí, a ak chcete zoradiť niekoľko blokov do riadku, potom je potrebné nastaviť vlastnosť float:left; a šírka výška: px; tak, aby sa po šírke zmestili do rodičovskej nádoby.
    float:right; to isté, ale nádoby sú pritlačené k pravej strane.
    Ak chcete vytvoriť kontajner v strede, zadajte šírku a zarážky sú avto , napríklad: margin-left: auto; pravý okraj: auto; šírka: 150px