Veronika Dropčová
veronika.dropcova(at)gmail.com

   nika.blog.matfyz.sk

08 – Aspoň niečo z CSS

Kaskádové štýly (CSS)

  • poskytujú širšie možnosti formátovania nielen textu
  • oddeľujú štruktúru dokumentu od dizajnu
  • obyčajný text

 

Ako vložiť CSS do HTML5

  • element <link> – CSS sú v externom súbore, môžeme ich využiť na viacerých stránkach, môžeme pripojiť viacero súborov
  • element <link> musí byť vnútri elementu <head></head>
  • zvyčajne takýto zápis: <link href=“styly.css“ rel=“stylesheet“>

 

Ako to v tom CSS-kovom súbore vyzerá?

body {

background-color: #FFFFCC;

}

p {

color: #003399;

}

/*ovplyvní všetky elementy p v dokumente*/

 

Ako zmeniť štýl textu uprostred nejakého bloku?

  • stačí ho obaliť do elementu <span></span>, a tomu potom nastaviť nejaké kaskádové štýly
  • napr. <p>Volám sa <span>Veronika</span>.</p>

 

Predtým, než prejdeme ďalej, vysvetlivky k vlastnostiam a hodnotám, ktoré budeme používať:

 % veľkosť/vzdialenosť vyjadrená v %
 color farba – môže byť zapísaná rôznymi spôsobmi

  • #RRGGBB – zložky r, g, b vyjadrené v hexadecimálnom tvare
  • rgb(r,g,b) – zložky r, g, b ako čísla (0-255) alebo percentá (0% – 100%)
  • rgba(r,g,b,a) – zložky r, g, b ako čísla (0 – 255) alebo percentá (0%-100%) s priesvitnosťou a (0.0 – 1.0)
  • hsl(h,s,l), hsla(h,s,l,a) – farba (prípadne s priesvitnosťou a) v tvare odtieň, sýtosť, svetlosť
  • meno_farby – meno/názov farby
url adresa k súboru, priečinku alebo serveru, napr. url(‘obrazky/foto.jpg’)
 length vyjadrenie veľkosti (šírka, výška, veľkosť písma/bloku, …)jednotky: em (rozmer znaku), ex (rozmer znaku x), cm, mm, in, px, pt, % (musia byť spolu s číslom bez medzery)

 

 

Background (pozadie)

atribút hodnoty popis
background-color color | transparent farba pozadia
 background-image url | none obrázok na pozadí
background-position top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right |x-% y-% | x-pos y-pos umiestnenie obrázka na pozadí
 background-repeat repeat | repeat-x | repeat-y | no-repeat obrázok na pozadí

Príklad:

section{

background-image: url(‘obrazky/pozadie.gif’);

background-position: 0% 0%;

background-repeat: repeat: repeat-y;

}

 

Vlastnosti textu (1)

atribút hodnoty popis
color color farba textu
 letter-spacing normal | length nastavuje medzery medzi písmenami
text-transform none | capitalize | uppercase | lowercase mení malé a veľké písmená
 text-decoration none | underline | overline | line-through | blink nastavenie podčiarknutia, nadčiarknutia, prečiarknutia, blikania textu
text-align left | right | center | justify vodorovné zarovnanie textu v rámci blokového elementu
 word-spacing normal | length nastavuje medzery medzi slovami
 vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | % nastavenie podčiarknutia, nadčiarknutia, prečiarknutia, blikania textu

Príklad:

h1{

color: #003399;

text-transform: uppercase;

}

footer{

letter-spacing: 0.25em;

text-align: center;

}

 

Font (písmo)

atribút hodnoty popis
font-weight normal | bold | boldere | ligher | 100 | 200 | … | 800 | 900 nastaví hrúbku písma
font-style normal | italic | oblique nastaví štýl písma
font-variant normal | small-caps zobrazí malé kapitálky
font-family napr. Arial, Helvetica, sans-serif, „Times New Roman“, Times, serif, „Courier New“, mono určuje rodinu písma, viacslovné názvy musia byť v úvodzovkách/apostrofoch
font-size xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | % vodorovné zarovnanie textu v rámci blokového elementu
 word-spacing normal | length nastavuje medzery medzi slovami
 vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | % nastavenie podčiarknutia, nadčiarknutia, prečiarknutia, blikania textu

Príklad:

h1{

color: #003399;

font-variant: small-caps;

font-size: 3em;

font-family: Arial, Helvetica, sans-serif;

}

 

Domáca úloha, deadline 10.1.2017 o 23:59

Teraz vypracujte toto zadanie (klik!).

 

Selektor nasledovníka

  • ako pomocou CSS zabezpečiť, aby sa nadpis h1 v hlavičke líšil od nadpisu h1 v inej časti stránky?
  • možností je viac, začneme selektorom nasledovníka
  • ten sa definuje takto: selektor 1 selektor 2 {vlastnosti}, pričom selektor 2  je vnorený do selektoru 1

 

Príklad:

header h1 {

color: #003399;

font-size: 3em;

text-align: right;

}

aside h1, section h1{

color: #000000;

font-size: 2em;

}

 

nav a{

text-decoration: none;

font-weight: bold;

}

 

Zoznamy

vlastnosť hodnoty popis
list-style-type none | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | … typ zoznamu (odrážka, číslo)
list-style-image none | url obrázok (zo súboru) ako odrážka, ak obrázok neexistuje, alebo sa nedá načítať, použije sa vlastnosť list-style-type
list-style-position inside | outside umiestnenie textu vzhľadom k odrážke

Príklad:

aside ul {

list-style-image: url(‘obrazky/odrazka.gif’);

}

 

 

Okraje elementu

  • pre každý element sa automaticky generuje tzv. box
  • box sa skladá z:
    • obsahu elementu
    • vnútorného orkaja (padding)
    • orámovania (border) – nemusí byť viditeľné
    • vonkajšieho okraja (margin)

 

800px-CSS-Box-Modell

 

 

Border je orámovanie elementu – tmavosivý pásik na obrázku (orámovanie nemusí byť viditeľné).

 

Padding je vzdialenosť obsahu elementu od orámovania elementu (vnútorný okraj) – svetlosivý pásik.

 

Margin je vonkajší okraj elementu, čiže ako blízko k tomuto elementu môžu ísť elementy v jeho susedstve. Na obrázku je to modrý pásik.

 

Orámovanie (border)

vlastnosť hodnoty popis, význam
border  length style color  definuje všetky vlastnosti pre všetky štyri strany
border-color  color  definuje farbu orámovania (pre všetky štyri strany)
border-style  none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset  definuje štýl orámovania (pre všetky štyri strany)
border-width  thin | medium | thick | length  definuje šírku orámovania (pre všetky štyri strany)

 

  • môžeme nastaviť orámovanie pre celý element naraz, alebo pre jednotlivé strany samostatne (border-top, border-right, border-bottom, border-left)
  • poradie hodnôt je: hrúbka štýl farba (oddelené medzerou), napr. border-bottom: 5px dotted #FF0000;
  • môžeme použiť aj vlastnosti border-bottom-color, border-bottom-style, border-bottom-width, atdˇ.
  • aby sa zobrazilo orámovanie, musia byť nastavené všetky jeho zložky (hrúbka štýl farba)

Príklad:

nav{

background-color: #FFF;

border-bottom: 1px solid #039;

}

 

 

Vonkajší okraj (margin)

  • ako najbližšie pri orámovaní elementu môžu byť okolité objekty
  • nastavujeme buď jednotlivé vlastnosti samostatne alebo naraz všetky strany pomocou združenej vlastnosti margin (hodnoty sú v poradí top, right, bottom, left)
  • bunkám tabuľky nemá zmysel nastavovať margin, lebo okolie buniek určuje tabuľka a jej vlastnosti
vlastnosť hodnoty popis, význam
margin-top | margin-right | margin-bottom | margin-left  auto | length | %  horný | pravý | dolný | ľavý okraj (vonkajší) elementu

Príklad:

  • margin: 2em; (pre všetky 4 strany)
  • margin: 2em 20px; (pre zvislé a vodorovné strany)
  • margin-left: auto; margin-right:auto; (vycentrujeme objekt)

 

 

Vnútorný okraj (padding)

  • vzdialenosť obsahu elementu od jeho orámovania
  • nastavujeme buď jednotlivé vlastnosti samostatne alebo naraz všetky strany pomocou združenej vlastnosti padding (hodnoty sú v poradí top, rigth, bottom, left)
  • ak má element nastavené pozadie (farbu/obrázok), tak sa vnútorný okraj (padding) ním vyplní (zvyčajne)

 

vlastnosť hodnoty popis, význam
padding-top | padding-right | padding-bottom | padding-left  length | %  vzdialenosť od horného | pravého | dolného | ľavého okraja elementu

Príklad:

  • padding: 2em; (pre všetky 4 strany)
  • padding: 2em 20px; (pre zvislé a vodorovné strany)

 

 

Pseudotriedy

  • sú akési správania alebo špeciálne efekty elementov, nevieme ich definovať priamo v html
  • uvádzajú sa s dvojbodkou, napr. :hover
  • nedefinujeme ich samostatne, ale s nejakým selektorom
  • zvyčajne sa používajú pri hypertextových odkazoch

 

Budeme používať iba jednu pseudotriedu:

  • :hover – vzťahuje sa na element, ponad ktorý prechádzame myšou, napr. a:hover{color:#256}; (zmení sa farba odkazov pri prechádzaní myšou ponad ne)

Teraz vypracujte toto zadanie (klik).

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *