CSS 

Layout

Parengė: Martynas Kašelionis

From zero to hero

"BOX" modelis

"BOX" modelis

Savybės:

  • Postūmis (padding) - atitraukimai dežutės viduje
  • Paraštės (margin) - atitraukimai dėžutės išorėje
  • Plotis (width) 
  • Aukštis (height)
  • Kraštinė (border) - dežutės kraštinės

HTML

CSS

<article>
  <h2>Naujienos pavadinimas</h2>
  <p>Naujienos tekstas</p>
  <a href="#">Skaityti daugiau...</a>
</article>
article {
  padding-top: 10px; /* Postūmis viršuje */
  padding-right: 15px; /* Postūmis dešinėje */
  padding-bottom: 10px; /* Postūmis apačioje */
  padding-left: 15px; /* Postūmis kairėje */

  padding:10px 15px 10px 15px; 

/* Visas reikšmes galima nurodyti 
viena eilute, pagal laikrodžio 
rodyklę pradedant nuo 12 val. */
}

HTML

CSS

<article>
  <h2>Naujienos pavadinimas</h2>
  <p>Naujienos tekstas</p>
  <a href="#">Skaityti daugiau...</a>
</article>
article {
  margin-top: -10px; /* Paraštė viršuje. 
  Margin galima naudoti ir negatyvias reikšmes */
  margin-right: 15px; /* Paraštė dešinėje */
  margin-bottom: 10px; /* Paraštė apačioje */
  margin-left: 15px; /* Paraštė kairėje */

  margin:-10px 15px 10px 15px; 

/* Visas reikšmes galima nurodyti 
viena eilute, pagal laikrodžio 
rodyklę pradedant nuo 12 val. */
}

HTML

CSS

<article>
  <h2>Naujienos pavadinimas</h2>
  <p>Naujienos tekstas</p>
  <a href="#">Skaityti daugiau...</a>
</article>
article {
  width: 60%; /* Elemento plotis. */
  height: 350px; /* Elemento aukštis */

  border: 1px solid #eee; /* Elemento kraštinės 1px storio vientiso stiliaus, pilkos spalvos */


  /*
  
  Kiti border stiliai:

  - dotted 
  - dashed
 
}

Display savybė

Display savybę turi visi HTML elementai.

Vieni elementai yra block tipo, kiti inline tipo.

Block tipo elementai:

  • P *
  • H1-H6
  • OL, UL, DL
  • DIV,SECTION, HEADER, kt.
  • HR
  • TABLE
  • FORM, FIELDSET

*negali savyje turėti block tipo elementų

Inline tipo elementai:

  • A
  • BR
  • EM, STRONG
  • SPAN
  • IMG
  • INPUT, SELECT, TEXTAREA, LABEL

 

Display savybė

  • Block tipo elementai turi savybę išsiplėsti kiek įmanoma, bei sekantį elementą numušti į sekančią eilutę.
  • Inline tipo elementai nesiplečia per visą plotį ir nelaužo eilutės struktūros. Tai pat inline tipo elementai nereguoja į nustatytą aukštį.

Dažniausiai naudojamos display savybės reikšmės:

  • inline - elementas rodomas eilutėje
  • block - elementas rodomas vienas po kitu
  • inline-block - elementas rodomas eilutėje, kaip blokas
  • table  -  elementai atvaizduojami lentele
  • none - elementas nerodomas

Visos savybės: https://developer.mozilla.org/en-US/docs/Web/CSS/display

 

 

HTML

CSS

<nav>
  <ul>
    <li><a href="#">Linkas 1</a></li>
    <li><a href="#">Linkas 2</a></li>
    <li><a href="#">Linkas 3</a></li>
    <li><a href="#">Linkas 4</a></li>
    <li><a href="#">Linkas 5</a></li>
  </ul>
</nav>
nav li {
  list-style:none;
  display:inline-block;
  padding:10px;
}

Display taikymas

Pozicionavimas

Elementų pozicionavimas css position savybė gali būti 4 tipų:

  • static - numatytoji elemento pozicijos reikšmė
  • releative - panašus į static, tačiau elementas įgauna papildomas savybes: top, bottom, right, left.

​Tai leidžia nuo esamos pozicijos releatyviai parodyti į kurią pusę ir kiek pasislenka elementas.

  • fixed - naudojame tada, kai norime, kad elementas visada liktų toje pačioje lango vietoje
  • absolute - šio elemento pozicija skaičiuojama nuo pirmo releatyvaus tėvinio elemento 

Box-sizing savybė

Kartais nutinka, kad nustatčius elemento plotį, jis neatitinka nustatymo.

Tai nutinka, todėl, kad būna nustatyti padding, bei margin savybės, kurio nėra įskaičiuojamos į elemento aukščio ir pločio parametrus. Norint išspręsti šią problemą, turime viską perskaičiuoti arba nurodyti box-sizing savybei reikšmę - border box.

Atlikus šį pakeitimą padding, border įskaičiuojami į aukštį ir plotį.

 

 

Elementų išdėstymo būdai

Kuriant maketą naudojant css išdėstymo savybes yra išdėstomi elementai, kad būtų pasiektas rezultatas nurodytas tinklapio prototipe arba dizaine.

Elementų išdėstymo būdai:

  • html table (pasenusi technologija, kurią griežtai draudžiama naudoti) 
  • display: inline-block (elementai išdėstomi, taip, kaip aptarta ankščiau)
  • Float
  • Grid
  • Flex

Float

Float savybė leidžia kurti paprastus tinklapių maketus (layouts). Dažniausia naudojama, kai norima kelis elementų blokus išdėstyti vieno eilutėje. Tai pat naudojama, kai maketuojant turinį reikia paveikslėlį įdėti į tekstą, bei daugeliu kitų atvejų.

 

Float reikšmės:

  • left - elementas padedamas kairėje pusėje
  • right - elementas padedamas dešinėje pusėje
  • none - float savybė elentui išjungiama

Float išvalymas

Kadangi float pakeičia numatytą elementų išdėstymo tvarką, norint grįžti prie įprastinės tvarkos reikia išvalyti išdėstymą sekantiems elementams su clear savybe.

 

Clear reikšmės:

  • left - išvalo float elementus kairėje
  • right - išvalo float elementus dešinėje
  • both - išvalo float elementus abiejose pusėse

Float

Float

.column {
    float: left;
}

/* Kairys ir dešinys stulpeliai*/
.column.side {
    width: 25%;
}

/* Vidurinis stulpelis */
.column.middle {
    width: 50%;
}

Float

Daugiau apie float:

Grid

CSS Grid maketų dviejų dimensijų sistema sukurta sudetingesnių tinklapių maketų kūrimui. Ji leidžia turinį dėlioti eilutėse ir stulpeliuose ir turi daugybę galimybių tai daryti labai lanksčiai.

 

 

Savybės:

  • Spalva
  • Šriftas
  • Šrifto dydis

Grid maketas

Grid maketas

Grid maketas

Savybės:

  • Spalva
  • Šriftas
  • Šrifto dydis

Grid

.grid-container {
        width : 100%;
        max-width : 1200px; 
        box-sizing: border-box; 
    }


/*cleafix */ 
    .row:before, 
    .row:after {
        content:"";
        display: table ;
        clear:both;
    }

[class*='col-'] {
        float: left;
        min-height: 1px; 
        width: 16.66%; 
        padding: 12px;
    }

CSS grid

Taip pat maketų sudarymui galima naudoti CSS 3 grid sistemą.

 

Tačiau ją palaiko tik naujos naršyklės.

 

Plačiau galite susipažinti:

Grid

Grid sistemą naudoja populiariausi frontend karkasai:

  • Bootstrap
  • Foundation

CSS layout

By Martynas Kašelionis

Made with Slides.com

CSS layout

  • 663

More from Martynas Kašelionis