CSS Rozdíly 1

Jak již víte, jednotlivé verze css mezi sebou mají mnohé rozdíly. Do dnešního dne máme 3 verze CSS, každá z nichž doplňuje některé vlastnosti, které dříve nebyly. Na rozdíl od HTML, se v CSS zatím žádné vlastnosti nepovažují za zastaralé, nové verze tedy pouze přidávají další využitelné vlastnosti. A jaké to tedy jsou vlastnosti?

Původní verze CSS 1 obsahovala pouze základní vlastnosti, protože většina se v té době stále nastavovala pomocí HTML. Mezi tyto základní vlastnosti patří například vlastnosti ohledně pozadí a jeho pozicování: background-color, background-attachment, background-image nebo background-position. Žádná velká změna v otázce pozadí nenastala ani ve dvojce, nové vlastnosti přinesla až CSS3. O nastavení pozadí se můžete dozvědět v dílu pozadí.

Dalšími vlastnostmi první verze CSS byly téměř všechny vlastnosti týkající se ohraničení. Vlastnosti jako border, border-color, border-style a od nich odvozené. Dalšimi vlastnostmi prvni verze byly přirozeně vlastnosti nastavující šířku a výšku – height a width. Ovšem vlastnosti označující maximální/minimální výšku a šířku najdeme až v CSS 2. Jsou jimi max-width, min-width, max-height, min-height. Okraje můžeme pomocí margin nastavovat už od zcela první verze. Základní nastavení fontů máme v CSS také již od první verze. V druhé verzi se u nich opět nic nemění, jediné změny jsou až ve verzi třetí.

Druhá verze CSS představila hlavně nové vlastnosti pro úpravu tabulek – border-collapse, table-layout a další. O těchto se můžete dozvědět v dílu tabulky. Z hlediska pozicování nám druhá verze ulehčila mnohé pomocí vlastností float, clear, position a nebo z-index. Mezi další nové vlastnosti v CSS 2 patří například visibility, která nám určuje, jestli je prvek vidět nebo ne. Další vlastností, která se týká zobrazení je také například vlastnost cursor, pomocí které můžeme nastavit vzhled kurzoru. O pozicování a těchto vlastnostech zejména v díle pozicování

Mezi další nové vlastnosti ohledně pozicování patří také vertical-align, který určuje pozici vertikálně, direction, který určuje směr textu a content, pomocí nějž můžeme vkládat obsah pro pseudoelementy :before a :after.

Celkový přehled nových vlastností:

Ohraničení

outline – nastavuje vzdálenější ohraničení
outline-color

outline-width

Výška a šířka

max-lenght – nastavuje maximální délku (zejména u textových polí)

max-height – nastavuje maximální šířku (zejména u textových polí)

Obsahové

content – pro vkládání obsahu zejména při použití s pseudoelementy :before a :after

Pozicové

botttom – specifikuje vzdálenost prvku od spodního okraje

right – vzdálenost prvku od pravé strany

top – vzdálenost od vršku

visibility – specifikuje zobrazení prvku

overflow – specifikuje přetékání prvku

position – specifikuje typ pozicování prvku – relativní nebo absolutní

z-index – specifikuje vzdálenost prvku a vzájemné přetékání

Tisknutí

page-break-after – specifikuje zalomování stránek za nějakým prvkem

page-break-before – specifikuje zalomování stránek před elementem

page-break-inside – specifikuje zalomování v prvku

Tabulky

border-collapse – specifikuje jestli se mají ohraničení zobrazovat samostatně – separate a nebo být jenom v jedné čáře – collapse

border-spacing – určuje mezeru mezi ohraničeními

empty-cells – určuje jestli se má zobrazovat ohraničení u prázných buněk

table-layout – určuje jakým způsobem se má tabulka vykreslovat

Text

direction – určuje směr textu