HTML a CSS - Založení webu(5, CSS - 1)

Tutoriál

V tomto díle se podíváme na káskádové styly neboli CSS. Uděláme si také jendoduchou kompletní stránku. A příště začneme s prací na kompletním layoutu.

Nejprve si vytvoříme nový soubor třeba styly.css. Nyní vložíme do hlavičky následující kus kódu:

  <link rel=”stylesheet” href=”styly.css” type=”text/css”>
  

Kde styly.css se nachází adresa nebo název souboru kde se nachíz CSS styly.

Teď ale je tu otázka proč psát i styly. Odpověd je jednoduchá, spousta lidí je asi líná nebo já nevím co ale na webu se nachází spíše tutoriály jak napsat web který se psal v pětadevadesátým a ne jak se píše teď. Pokuď nechcete mít stránky chaotické je nejlepší použít právě css styly a také spousta prohlížečů dnes již vůbec nepodporuje nejrůznější značky z 90.let minulého století. Třeba značka center se dnes již vůbec nevyužívá ale v 90.letech se využívala hodně a slouží na vycentrování textu. Nyní si napíšeme velmi jendoduchou stránku ve které ale již použijeme css styly. Kód je následující:

HTML
  ...
  <body>
  <h1>Moje stránky</h1>
  <p>Toto jsou moje první stránky. Jelikož nemám moc zkušeností nejsou ještě na
  dokonalé úrovni.</p>
  <div id=”omne”>
  <h2>O mně</h2>
  Jsem programátor. Je mi - let. Moje hobby jsou: hobby 1, hobby 2 a hobby 3.
  </h2></div>
  <p> Více si doplňte vy</p>
  </body>
  
a teď CSS
  body {
  background: yellow;
  }
  p {
  size: 90%;
  }
  h1 {
  size: 150%;
  }
  h2 {
  size: 120%;
  }
  #omne {
  background: green;
  }
  

To je asi vše. Příště to již nebude jako obvykle budeme se zabývat tvorbou kompletního layotu.

iko.png, 433B
iko2.png, 720B














Máte nějaké připomínky? Navštivte naší návštěvní knihu:

Návštěvní kniha

hlavni strana.png, 544B
cropped-next-x-logo.jpg, 31kB
NEXT-X THE LEGENDARY SITE
Copyright © 2012 Programuj.borec.cz
„Nikdy se nesměji nejlépe. Bojím se, že by to mohlo být naposledy.“ Jan Werich