MENU

Co je to CSS

CSS je jazyk, kterým je možné určovat vzhled webových stránek. HTML jazyk se zabývá obsahem (texty, odkazy ...) a CSS je zase určen pro vhled. CSS může určovat barvu textu nebo pozadí, velikost písma, zarovnání textu, umístění prvků jako je třeba obrázek a mnoho dalších funkcí. Moderní webové stránky optimalizované pro vyhledávače (tzv. SEO) mají grafickou podobu vytvořenou pomocí CSS jazyka umístěného ve zvláštních souborech. CSS styly by se neměli nacházet v HTML kódu.

Jak CSS funguje

V principu to není zase tak složité. Obtíže nastávají většinou tím, že každý internetový prohlížeč si může vyložit CSS kód trochu odlišně. Tím se však zde nebudeme zabývat, protože tato stránka k tomuto není určena.

CSS může vypadat následovně:

h1 { font-size: 18px; color: red;}

Vysvětlení: v tomto CSS kódu se říká, že nadpis 1. úrovně (h1), bude mít velikost 18 pixelů ( font-size: 18px) a barvu textu červenou (color: red). Tímto jsem ani zdaleka nevystihl všechna pravidla jazyku CSS, účelem bylo pouze demonstrování CSS pro laika.

Kde se CSS nacházejí

CSS by se měly psát do zcela samostatných souborů, které mají příponu .css a HTML kód na ně pouze odkazuje, aby internetový prohlížeč věděl, kde je najít. Nemusí tomu tak být vždy. Styly CSS je technicky možné vkládat přímo do HTML kódu každé jednotlivé stránky (tzv. inline styly). Důvodů proč styly vzhledu oddělit od obsahu v HTML kódu jsou v zásadě dva:

  • První důvod je ryze praktický. Pokud každá samostatná webová stránka jednoho webu využívá společná pravidla umístěná na jediném místě, pak jakákoli oprava, či úprava, je neporovnatelně jednodušší, než kdyby bylo nutné spravovat každou stánku samostatně. U rozsáhlejších webů bez jednotného CSS byl vznikl obrovský problém při správě vzhedu.
  • Druhým neméně významným důvodem je tzv. SEO – optimalizace pro vyhledávače. Pokud CSS styly vkládáte přímo do HTML kódu, tak tím výrazně naroste velikost kódu. Vyhledávače si musejí ukládat obsah webových stránek do svých databází, aby dokázali odpovídat na dotazy tak rychle, jak odpovídají. Pokud vkládáte styly CSS přímo do HTML kódu (tzv. inline styly), tak vyhledávačům komplikujete jejich práci, zvyšujete náklady na provoz vyhledávačů a oni se vašemu webu „odmění" tím, že jej umístí na horší pozice ve výsledcích vyhledávání (SERP), než by si normálně zasloužil.

Jak lze ovlivnit vzhled obsahu v redakčním systému CMS

Mnoho redakčních systémů CMS odděluje vzhled od obsahu. Často se vzhled dá nainstalovat přímo do CMS (tak tomu je např. u Joomla, Drupal ...). Někdy však administrátor webu požaduje, aby se nějaká část zobrazovala jinak, než jak jak je nastavena v instalovaném vzhledu.

Uvedu příklad:
Chcete doprostřed textu článku umístit ilustrativní obrázek. Umístíte jej pomocí WYSIVYG editoru, ale on způsobí přerušení textu, umístí se vlevo a text pokračuje až pod ním. Vypadá to nevzhledně, a proto chcete, aby se obrázek zarovnal vpravo a text jej obtékal tak, jak tomu bývá třeba v novinách. Máte v zásadě dvě možnosti jak to udělat:

  • Ve WYSIVYG editoru nastavit zarovnání a obtékání obrázku. V drtivé většině případů dojde k nežádoucímu vložení stylu CSS přímo do HTML kódu. V internetovém prohlížeči to vypadá normálně, ale dojde tím k porušení pravidel norem (kód nebude validní dle normy W3C) a získáváte tak negativní „body" u vyhledávačů (poškozujete si SEO webu). Navíc opravy ve vzhledu se časem stanou noční můrou.
  • Lepším řešením je, když se domluvíte s někým, kdo CSS ovládá, aby vám v CSS souboru vytvořil tzv. třídu CSS, která nastaví přesně ty pravidla vzhledu, která chcete. Pak bude stačit obrázku tuto třídu přiřadit a on se začne chovat podle tak, jak jste chtěli. HTML kód zůstane validní, z pohledu SEO budou vyhledávače spokojené a jakákoli změna vzhledu se může provést centrálně z jediného místa.

Kam dál

Sezanm CSS vlastnostíŠkolení HTML a CSS – kurz pro veřejnost | Tvorba webových stránek

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548 

Používáme cookies

Soubory cookie používáme k analýze údajů o našich návštěvnících, ke zlepšení našich webových stránek, zobrazení personalizovaného obsahu a k tomu, abychom od vás měli zpětnou vazbu.