Použití stylů v dokumentu

Aplikování stylů je možné hned několika způsoby:

  • použitím <link> elementu k připojení externího souboru se styly
  • použitím pravidla @import v <style> elementu k připojení externího souboru se styly
  • definicí stylů v dokumentu v elementu <style>
  • použitím atributu style přímo v elementu, který chceme styly ovlivnit

Použití <link> elementu

Jeho výhodou je, že jsou veškeré styly v externím souboru [např. styly.css], tím pádem lze jednoduše měnit vzhled celého projektu.
<link> je uzavřen v elementu <head>

<head>
 <title>Externí stylopis</title>
  <link href="styly.css" rel="stylesheet" type="text/css" />
</head>

Použití @import pravidla

@import pravidlo slouží k načtení externího stylopisu do dokumentu stejně jako předchozí případ. Používá se k zadání konkrétních stylových změn pro daný dokument.
Opět se zadává do hlavičky dokumentu, tentokrát uvnitř elementu <style>

<head>
 <title>Externí stylopis</title>
  <style type="text/css">
        @import "styly.css";
  /* a nebo takto */
        @import url("http://www.stranka.cz/styly.css");
  </style>
</head>

Definice stylů v elementu <style>

Náročné na práci, definice vzhledu elementů je na každé stránce (souboru) dokumentu. Doporučuje se u malých prezentací, nepřesahující několik stránek.

<head>
 <title>Externí stylopis</title>
  <style type="text/css">
       h1 {color: red}
       ul>li {list-style-type: square; color: blue}
  </style>
</head>

Použití atributu style v elementu

Používá se zejména k definici vzhledu jednoho konkrétního elementu, na stejné elementy na jiném místě dokumentu se stylopis neuplatňuje.
Může se použít při jednostránkové prezentaci k ostylování všech elementů, u vícestránkové, rozsáhlé prezentaci tento postup postrádá smysl a je velmi náročný.

 <p style="color: red; font-size: 1.5em">
   Nějaký text.
 </p>

Hledání

Google
Web wapway

Doporučujeme

Solná jeskyně

Kykovo blog

Truhlářství Kralupy

Topení Vávra

Poptávky zdarma