Tmw 4 css_2010

Úvod CSS (Cascading Style Sheets) predstavuje možnosť formátovania WEB dokumentu s využitím definície štýlov. Umožňuje priradiť vlastnosti všetkým prvkom na WEB stránke, ktoré sú označené konkrétnou značkou. Výhodou oproti klasickým značkám HTML je úspora času, jednoduchá zmena formátovania, nové možnosti formátovania textu, ... Nevýhodou je odlišný syntax oproti HTML a veľké množstvo definícií, ktoré sa ťažko pamätajú.

Anatómia CSS sa skladajú zo značky a definície (deklarácie). Definícia je uzatvorená v zložených zátvorkách. Medzi jednotlivými definíciami sa píše bodkočiarka.

Vloženie CSS do dokumentu HTML Kaskádové štýly je možné rozdeliť do dvoch skupín: interné, externé. Interné CSS sú definované priamo v zdrojovom kóde dokumentu HTML a je možné ich používať ako lokálne (využíva sa málo) alebo v záhlaví dokumentu (v sekcii „head“). Externé CSS sú uložené v inom samostatnom súbore.

Použitie parametra ID Hodnoty atribútov sa zapisujú bez úvodzoviek. Ďalšou možnosťou nastavenia vlastností značiek je použitie parametra ID a jeho hodnotou bude ľubovolné unikátne slovo. Pre takúto značku je možné definovať vlastný štýl. Jeho definícia bude daná názvom materskej značky a znakom # za ktorým nasleduje názov ID. Vlastné atribúty budú v zložených zátvorkách.

Definícia univerzálnej triedy

Zápis externých štýlov Externé štýly sa vytvárajú v špeciálnom súbore s príponou .css. V tomto súbore sa neuvádzajú značky <styletype="text/css">...</style> . Definície štýlov a tried sa zapisujú priamo. Do stránky, v ktorej sa majú použiť štýly, sa vloží odkaz na tento súbor pomocou značky: <link rel="stylesheet" type="text/css" href="styly.css”/> Pozn.: pri definícii mena súboru v href=... je potrebné zohľadniť umiestnenie súboru. Uvedený príklad je pre súbor css uložený v rovnakom adresári.

Použitie externých štýlov Názov súboru: mujstyl.css h1 { color: blue; text-align: center; font: bold 20pt "Vendera","Arial CE";} h1.cervena { color: red; } .vzor1 { color: #990099; font: bold;} <link rel="stylesheet" type="text/css" href="mujstyl.css" /> </head> <body> <h1>Text nadpisu</h1> <h1 class="cervena">Použitie triedy</h1> <p class="vzor1">Farebný text</p>

Zložené deklarácie Hromadná deklarácia Štýlopisy umožňujú zadeklarovať vlastnosti pre viac elementov naraz. Napríklad deklarácie H1, H2, H3 {color: green} zafarbí všetky nadpisy prvej, druhej i tretej úrovne na zeleno. Hromadnú deklaráciu je možné použiť, keď sú zadávané rovnaké vlastnosti pre viacero elementov. Dôležitá je čiarka medzi selektormi! Keby tam nebola, išlo by o niečo iné, totiž o kontextový selektor.

Zložené deklarácie Kontextová deklarácia príklad H3 A {font-style: italic} Táto deklarácia by napísala kurzívou všetky odkazy vo vnútri nadpisov tretej úrovne (elementy A vo vnútri elementu H3). <h3>Obyčajný text nadpisu s <a>odkazom kurzívou </a> </h3> <p>Obyčajný odsek s <a>obyčajným odkazom</a></p> Odkazy v obyčajných odsekoch to nijako neovplyvní, rovnako tak obyčajný text trojkového nadpisu. Zápisy selektorov kontextového zápisu sú oddelené len medzerou.

Skladanie štýlov Vďaka CSS sa na jeden element môže navrstviť mnoho rôznych deklarácii (preto štýly kaskádové), niekedy i protichodných. Ako sa rozhodne, ktorá deklarácia prevládne? Spravidla tá posledná. Keď je potrebné, aby niektorá predchádzajúca deklarácia prevládla, vloží sa do deklarácie reťazec "! important". Takáto deklarácia potom nebude prepísaná žiadnou neskoršou. (Túto vlastnosť je odporúčané používať s rozvahou, pretože spôsobuje zmätok pri neskoršom ladení designu.)

Písmo a jeho vlastnosti Typ písma font-family:[meno_písma], [generické_meno] meno_písma – uvádza sa v uvodzovkách napr. arial, times new roman, .... generické_meno – predstavuje skupinu men písma: - serif – štandardné pätkové písmo (Times) - sans-serif – štandardné bezpätkové písmo (Arial) - cursive – zdobené písmo v kurzívnom rezu (Zapf-Chancery) - fantasy – ornamentálne písmo (Western) - monospace – neproporcionálne písmo (Courier) font-family: arial, times new roman, serif; Sklonenie písma font-style:[hodnota] hodnota – normál - italic font-style: italic;

Písmo a jeho vlastnosti Tučné písmo font-weight: [hodnota]; hodnota: normal – normálny typ písma bold – tučné písmo číselné označenie:100-300 normal, 400-500 tučné, 600-900, extra tučné font-weight: bold; Variant písma určuje ako bude písmo písané verzálkami alebo malými kapitálkami font-variant: [názov]; font-variant: small-caps;

Písmo a jeho vlastnosti Veľkosť písma font-size: [hodnota]; hodnota: - v jednotkách - absolútna veľkosť – xx-small, x-small, small, medium, lerge, x-large, xx-large - relatívna veľkosť – relative-size – large, smaller oproti pôvodnej, - výška – určuje výšku písma v typografických jednotkách najčastejšie v bodoch (pt) - percentá – určuje veľkosť oproti pôvodnej veľkosti písma. font-size: 25pt; font-size: xx-small; font-size: larger; font-size: 250%; Skratkový príkaz pre zápis vlastností písma font: bold italic 14pt arial, times new roman, serif;

Farby textu a pozadia Je možné nastaviť farbu textu aj pozadia neviditeľného rámčeka okolo textu. Farba textu color: [definícia farby] - menom základnej farby color:blue; - RGB zápisom color:rgb(128,250,65); - rgb štardantnou trojicou color: #cc3366; - percentuálnou hodnotou jednotlivých zložiek color: rgb(100%,50%,50%); Farba pozadia background-color:[farba],[transparentnosť] - farba – rovnako ako u textu, - transparentnosť – priehľadnosť pozadia, Fixovanie obrázku, pozadia background-attachment: fixed; background-attachment: scrol;

Formátovanie textu Medzera medzi slovami word-spacing: [hodnota];word-spacing: 10pt; Medzera medzi písmenami letter-spacing: [hodnota]; letter-spacing: 5pt; Rez písma text-decoration: [hodnota]; text-decoration: underline; hodnota: none - základný text underline - podčiarknutý text overline - čiara nad textom line-through - prečiarknutý text Odsadenie textu predstavuje odsadenie textu od ľavého okraja text-indent: [hodnota]; text-indent: 50pt;

Formátovanie textu Verzálky a kapitálky text-transform: [hodnota]; text-transform: uppercase; hodnota: capitalize – všetky písmena veľká s zvýraznením prvých písmen uppercase – všetky písmena veľká text-transform: uppercase; lowercase – malá písmena, Medziriadková medzera line-height: : [hodnota]; hodnota: - číslo line-height: 10pt; - výška (napr. 1.5 znamená 1,5x výšku písma) - percentuálna výška

Vlastnosti rámčeka Okraje rámčeka margin-left: [hodnota] ; - miesto vľavo margin-bottom: [hodnota]; - miesto pod textom margin-right: [hodnota]; - miesto vpravo margin-top: [hodnota]; - miesto nad textom margin: 10pt 20pt 30pt 25pt; margin: nad vpravo pod vľavo Veľkosť voľného priestoru okolo elementu padding-bottom: [hodnota]; padding-left: [hodnota]; padding-right: [hodnota]; padding-top: [hodnota]; padding: 20pt 30pt 45pt 30pt;

Vlastnosti rámčeka Zobrazenie rámčeka border-top-width:15pt ; border-bottom-width: 25pt; border-left-width: 5pt; border-right-width: 2pt; border-width: 2pt 10pt 5pt 35pt; - nastaví veľkosť určeným stranám border-width: 2pt; - nastaví pre všetky 4 strany veľkosť 2 border-color:#990000 ; - nastavenie farby rámčeka

Zhrňujúci príklad <style type="text/css"> #prvniOdsek {text-ident: 20 px} A.visited {color: teal} A.link {color: navy} a.hover {color: red} .velkeA {font-weight: bold} .zalozka {font-style: oblique} .zalozkaA:visited {color: navy ! important} H1, H2 {color: #33ff66; font-variant: small-caps} H2 {font-size: 18pt} </style>

Použití CSS - pozíciovanie Pozíciovanie elementov predstavuje možnosť akýkoľvek objekt (obrázok, tabuľka, text, ...) umiestniť kamkoľvek na stránku, objekty sa môžu prekrývať, posúvať. Druhy pozíciovania: Absolútna pozícia – umiestni objekt do stránky na udané súradnice bez ohľadu na okolie textu. Relatívna pozícia – určuje o koľko sa má objekt posunúť oproti svojej pôvodnej polohe. Objekt zostává súčasťou zobrazovaného textu. <body> Normálný text, <spanstyle="position: relative; top: 20px"> relatívne umiestený text</span> a <spanstyle="position: absolute; top: 100px; left: 150px">absolútne umiestený text.</span>. </body>

Prekrývanie Prekrývanie – vlastnosť, ktorá určuje možnosť vzájomného prekrytia a to v poradí ako sú uvedené v textu dokumentu alebo s využitím Vnorené pozície – vnorený prvok bude poziciovaný z pohľadu nadriadeného prvku (top:0;left:0 predstavuje horný ľavý okraj nadriadeného prvku) Syntax <tagstyle="position:(absolute|relative); [top: dĺžka]; [left: dĺžka]; [z-index: číslo]">Pozíciovaný element</tag>

Príklad umiestnenia objektu <body> <div style="position:absolute; width: 150px; height: 150px; top:60px; left: 100px; background-color:lime; z-index:2;"> Z-index je nastavený na 2, a tak je objekt hore (vyhraje nad všetkými nižšími i neuvedenými z-indexy), i keď je v kódu skorej (je prvý). Bez z-indexu by bol prvý objekt naspodku. </div> <div style="position:absolute; width: 150px; height: 150px; top:160px; left: 150px; background-color:yellow; z-index:1;"> <br><br><br>Tento žltý objekt so zeleným prehraje, pretože má nastavený z-index len na 1 (to je menej ako 2). V kódu je druhý. </div> Z-index. Pre pochopení príkladu je potrebné zobraziť zdroj. Všetky objekty sú absolútne poziciované. </body>

Vytvorenie stránky pomocou pozíciovania <styletype="text/css"> <!– #hlavicka {position: absolute; width: 760px; height: 60px; top: 0px; left: 0px; background-color: green; color: white} #levy {position: absolute; width: 150px; height: 360px;top: 60px; left: 0px; background-color: #0000ff; color: white} #pravy {position: absolute; width: 150px; height: 360px;top: 60px; left: 610px; background-color: #ff9933; color: white} #spodny {position: absolute; width: 760px; height: 60px; top: 360px; left: 0px; background-color: #ffff33; color: #000000} --> </style> <metahttp-equiv="Content-Type" content="text/html; charset=windows-1250" /> </head> <body> <div id="hlavicka">Hlavička</div> <div id="levy">Levýsloupec</div> <div id="pravy">Pravý sloupec</div> <div id="spodny">Spodný riadok</div> </body>

Neisté znaky V menách tried a identifikátorov sa nesmie používať podtrhnutie _ (a výrazov s diakritikou a iných pochybných znakov, ale mínus je v pohode). Internet Explorer 5 podtrhnutie v názve triedy alebo ID znesie a správne zobrazí, žiadny iný prehliadač ale nie!!! Názov triedy ani identifikátora by podľa špecifikácie nemal začínať číslicou, Internetu Exploreru 6 sa to veľmi nepáči.

Přehled vlastností CSS Převzato z: http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html V následující části jsou uvedeny tabulky atributů: font text a odstavec barvy a pozadí velikost a obtékání okraje rámečky seznamy pozicování tabulky

Rámečky 2 Slovníček okrajů a rámečků

Tmw 4 css_2010

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (9)

Tmw 4 css_2010