Best Page

HOME

css, css tutorial, css profile, css background, css border, css position, css overflow, style, hover, Cascading Style Sheets

Rady pro Váš web, blog

Předchozí stránka  1  2  3  4  5  6  Další stránka

  !!! Zde uvedené scripty a ostatní věci lze kopírovat. Pod názvem klikněte na slovo Download, poté lze kopírovat !!!

 

CSS

úvod do CSS

CSS (zkratka Cascading Style Sheets), tedy jednoduše  řečeno vylepšení a zjednodušení formátování nejen textu v dokumentu HTML. Existují 3 způsoby CSS:

Přímé formátování
Zápis v hlavičce
Použití externího souboru

 

3 způsoby zápisu

Přímé Formátování

<p style="color: white; font-weight: bold">Tento odstavec bude bílou barvou písma a tučně.</p>

Tento odstavec bude bílou barvou písma a tučně.

Tento způsob se používá jen vyjímečně


Zápis v hlavičce

<style>

p   {color: white; font-weight: bold}

</style>

Tímto způsobem se zformátují všechny odstavce na stránce.
Na stránce tedy stačí použít :

<p>Tento odstavec bude bílou barvou písma a tučně.</p>

 

Příklad - podtržení odkazu přejetím myší

download

<style type="text/css">
<!--
a {text-decoration: none}
a:hover {text-decoration:underline}
-->
</style>



Externí soubor CSS

download

 Nejpoužívanější způsob, používá externí soubor s příponou *.css.
Vytvořte si soubor pojmenovaný např. styl.css a do něj napište následující:


p   {color: white; font-weight: bold}
V hlavičce dokumentu, který se má řídit podle tohoto stylu musí být tento odkaz:

<link rel="stylesheet" type="text/css" href="styl.css">
Bestpage doporučuje tento způsob. Výhodou je, že můžete změnit třeba formátování textu u stovek stránek.

 

Přehled některých zápisů

Níže uvedená tabulka se týká posledně jmenovaného zápisu v externím souboru.
Jednotlivé prvky se oddělují středníkem ; .

příklad zápisu:

download

A:link {
     FONT-WEIGHT: normal;
     FONT-SIZE: 8pt;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial;
     TEXT-DECORATION: underline
}

je to prakticky totéž jako:

A:link { FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Arial; TEXT-DECORATION: underline }
Příklad - podtržení odkazu přejetím myší

a {text-decoration: none}
a:hover {text-decoration:underline}

 


Základní prvky

 download

BODY {...} Hodnoty v těle dokumentu (barva textu, pozadí, styl textu, scrollbar ...)
A:link {...} Nenavštívený odkaz (formátování textu)
A:visited {...} Navštívený odkaz (formátování textu)
A:hover {...} Odkaz po najetí kurzorem (formátování textu)
A:active {...} Odkaz těsně po kliknutí (formátování textu)
TABLE {...} Formát tabulky (velikost, pozadí tabulky, formátování textu ...)
TR {...} Část tabulky (velikost, pozadí, formátování textu ...)
TD {...} Část tabulky (velikost, pozadí, formátování textu ...)
LI {...} Odrážky "Seznamy" (styl, formátování textu)
HR {...} Linka "Dělící čára" (barva, velikost, zarovnání)
H1 {...} Nadpisy H1 - H6 (formátování textu)
BIG {...} Větší písmo "BIG" nebo menší "SMALL" (formátování textu)
DIV {...} Formátování tagu "DIV"



Možnosti definování

Zápis Možnosti Popis
     
font-family: verdana, arial, ... použitý typ písma
font-style: normal - italic - oblique normální písmo, kurzíva, umělá kurzíva
font-weight: normal - bold - bolder - lighter normální, tučné, velmi tučné, extra tučné
font-size: 14pt velikost písma v bodech
color: #FFCC00 barva písma, linky ...
background-color: #FFCC00 - transparent barva pozadí, průhledné pozadí
background-image: none - url(../obrazek.jpg) žádný obrázek v pozadí, ze souboru
background-repeat: repeat - no-repeat - repeat-x opakování textury, neopakování
background-attachment: scroll - fixed určuje rolování pozadí, nebo jej zakazuje
word-spacing: normal - 0.8m mezera mezi slovy
letter-spacing: 2em - -2em mezera mezi písmeny (i záporná hodnota!)
text-decoration: none - underline - overline - line-trought dekorace žádná, podtržení, nadtržení, přeškrtnutí
text-transform: capitalize-uppercase-lowercase kapitálky - velká písmena - malá písmena
text-align: left, right, center, justify zarovnání L, P, na střed a na oba okraje
line-height: 150% meziřádková mezera
margin: 10pt 10pt 10pt 10pt okraje rámečku (Horní Pravý Spodní Levý)
padding: 10pt 10pt 10pt 10pt volný prostor (nahoře vpravo dole vlevo)
border-width: thin thick medium 12pt tenký, široký, středně široký, velikost, HPSL
border-style: none - dotted - dashed - solid - double - groove - ridge - inset - outset jedná se o vzorkování rámečku: žádný - tečkovaný - čárkovaný - spojitá čára - dvojitá čára - prostorový žlábek - vystouplý rámeček - zapuštěné osvětlení - vystouplé osvětlení
list-style-type: disc - circle - square - decimal - lower-roman - upper-roman - lower-alpha - upper-alpha - none styl odrážek: plné kolečko - prázdné kolečko - čtvereček - arabské číslice - římské malé - římské velké - malá písmena - velká písmena - žádné
list-style-image: url(../obrazek.jpg) jako značku odrážky lze použít i obrázek





Délkové jednotky

Podporované relativní jednotky:
em : jednotka vztažená k šířce písmene "m" (rovná se výšce textu)
ex : jednotka vztažená k výšce písmene x
px : výška zadaná v pixelech (pixel je bezrozměrný - záleží na parametrech zobrazení)

Podporované absolutní jednotky:
in : palce (1" = 2.54cm)
cm : centimetry
mm : milimetry
pt : typografické body (1pt = 1/72 palce)
pc : picas (1pc = 12pt)

 

Scrollbars

download


 BODY {
   scrollbar-face-color:#C0C0C0;
   scrollbar-arrow-color:#000000;
   scrollbar-highlight-color:#FFFFFF;
   scrollbar-3dlight-color:#C0C0C0;
   scrollbar-shadow-color:#808080;
   scrollbar-darkshadow-color:#000000;
   scrollbar-track-color:#E0E0E0;
  }

Výše uvedený text vložte do souboru style.css (název můžete samozdřejmě libovolně měnit)

 

 

Barevné Formuláře

download

S použitím barvy

» Jedná se o příklad využití stylů CSS
» Do souboru *.css vložte následující kód:

#prvek {
   background-color: #33CCFF;
    color: #3300CC;
    font-weight: bold;
    border-style: groove;
}

» Při použití tlačítka, textového pole atd. vložte do formuláře id="prvek" podle příkladu níže
» Různou kombinací vlastností vznikají zajímavé efekty!
<textarea id="prvek"name="" rows=5 cols=20></textarea>



<input name="" type="text" value="" id="prvek">



<input type="button" value="tlačítko" id="prvek">





S použitím obrázku

Vše je stejné jako v předchozím příkladu, jen místo background-color: #33CCFF; je zde použito background-image: url(../obrazek.jpg)

Pojmy v CSS:

Background = pozadí

                     background-color = barva pozadí     {background-color: blue}

                     background-image = obrázek na pozadí     {background-image: url("adresa pozadí)}

 Border = orámování

                     border-color = barva orámování      {border-color: blue}

                     border-style = styl orámování    {border-style: outset}

                     border-width = šířka orámování     {border-width: 3px}

                     * můžete ale také napsat:   {border: 3px outset blue}

Margin = vzdálenost mezi rámečkem a okolním dokumentem

                     margin-top = zeshora     {margin-top: 3px}

                     margin-left = zleva     {margin-left: 3px}

                     margin-right = zprava     {margin-right: 3px}

 Text-align= zarovnání textu

                     center = na střed

                     left = na levo

                     right = na pravo

                     justify = do bloku

Text-decoration = dekorace textu

                     none = žádné

                     underline = podtržení

                     overline = nadtržení

                     line-trought = přeškrtnutí

                     blink = blikání

 

Překlad CSS v blogu

download

body { background-color: ***; font-family: ***; } pozadí a písmo v celým blogu
.hlavicka { background-color: transparent; margin:2em 200px 2em 20px; padding:0;  text-align:***; } hlavička (název a popis)
.logo {  background-color: ***; margin-left: ***px; margin-right:***px   top:***px; border: ***px *** ; border-color: ***} popisuje logo a údaje o něm- sem se ale nepíše adresa obrázku!
.nazevblogu { color: ***; background-color: ***; text-align: *** }

.popisblogu { color: ***; background-color: ***; text-align: *** }

.sloupek { background-color: ***; top: ***px; left: ***; margin-left: ***px; width: ***px; border: ***; border-width: ***px; font-size: ***px}
.prispevky {border: ***; background-color: ***; margin-left: ***px; margin-right: ***px; } příspěvky jako celek

.prispevky .zadne { margin-right: ***px; margin-left: ***px; padding: ***px; text-align: ***; background-color:***;  border: ***} když v kategorii nejsou příspěvky

.prispevek { top: ***px;  border-width: ***px; background-color: ***; padding: ***px; margin-right: ***px; margin-left: ***px; border: ***}


.prispevek h2 { padding-top: ***px; border-top: ***px *** ***; color: ***; font-size: ***px; margin: 0em 0px; margin-top: ***px;} nadpis příspěvku

.oprispevku { font-size: ***px; text-align: ***; padding-right:***px }datum a čas vložení

.kategorie { font-size: ***px; margin-left: ***px;  background-color: ***; }


.kategorie-titulek {margin-right: ***px; margin-left: ***px; color:***; font-size: ***; background-color: ***; padding: ***px; padding-left: ***px; margin-bottom: ***px; margin-left: ***px;}
.kategorie-blok, .uzivatel-blok, .html-blok, .archiv-blok { margin: .5em; background-color: ***; padding: ***px; }
.kategorie-blok { margin-bottom:0px; background-color: ***;border: ***px *** ; border-color: ***} ve sloupku kategorie

.uzivatel-blok { margin-top: ***px; margin-left: ***px; margin-right: ***px; padding-top: 0px; padding-left: ***px; background-color: ***; font-size: ***px;border: ***px ***; border-color: ***} autor ve sloupku

.html-blok { color: ***; text-align: ***;  background-color: ***; font-size: ***px; margin-left: ***px; margin-right: ***px; border: ***px *** ; border-color: ***}html sloupek
.archiv-blok { margin-top:***px; background-color: ***; border: ***px *** ; border-color: ***}

.archiv-blok .mesice { margin-left: ***px; margin-top: ***px; margin-bottom: ***px; font-size: 80%; }
.archiv-blok .zvoleno, .archiv-blok .zvoleno:visited { color: ***; font-size: ***px; }
.mesice .pocet { font-size: ***px; }
.perex { margin-top: ***px; margin-bottom: ***px; padding-left:***px; font-size: ***px; font-style: ***; background-color: ***; }
.permonik A { color: ***; } /*trvaly odkaz*/
.listovani { text-align: ***; }

.titulek { font-weight: ***px; width: 100%; }

.kalendar { background-color: ***; cell-spacing: 0px; padding: 0px; border: ***px *** ***; border-top: ***px *** ***; border-bottom: ***px *** ***; font-size: ***px; width: 100%; }
.kalendar .nadpis { font-weight: ***; color: ***; background-color: ***; }

.kalendar td { border: 0px *** ***; text-align: ***; }
.kalendar th { text-align: ***; }
.kalendar .clanky { color: ***; background-color: ***; font-weight: ***; }
.kalendar A { color: ***; }
.kalendar .vikend { background-color: ***; color: ***; }

.rss {display: none; }

.sloupek {text-align: ***;}
img {border:0px;} obrázky nebudou mít rámeček (když je to odkaz)

a:active {background-color: ***; border: ***px ***; border-color: ***; color: ***} aktivní odkaz
A:hover {  background-color: ***; border: ***px ***; border-color:***; color: ***} po najetí myši
a {text-decoration: ***; color: ***}odkaz jako takový
.komentar {margin-right: ***px; margin-left: ***px; background-color: ***; border: ***px *** ; border-color: ***}

 

 

Příklady CSS v blogu, ale i na normálních www stránkách

 download

 

Zmizení Seznam.cz hlavičky:

#SZNHLAVICKA { visibility: hidden;}

 

Vycentrování sloupku:

.sloupek {text-align: center;}

 

Odkaz bez podtržení:

a {text-decoration: none}

 

Rozmazání odkazů:

A:hover{FILTER: blur; cursor: none; height=0;}

  

Průhledný sloupek:

.kategorie-blok {background-color: transparent; }
.uzivatel-blok {background-color: transparent; }
.html-blok {background-color: transparent; }

 

Delete archivu blogu

.archiv-blok { display: none; }

 

Delete názvu blogu

.nazevblogu { display: none; }

 

Delete archívu:

.archiv-blok { display: none; }

 

Delete kategorie nezařazeno

.sloupek .kategorie.nezarazeno  { display:none; }

 

Delete popisu blogu

.popisblogu { display: none; }

 

Delete autora blogu

.uzivatel-blok { display: none; }

Delete RSS

.rss {display: none;}

 

Barevné pozadí:

.prispevky  .klíčové slovo { background-color: #FFE199;  }

Vysvětlení: klíčové slovo = které je napsané u určité kategorie jako klíčové slovo

 

Název kategorie bude vypsán tučným písmem:

.kategorie-blok .klíčové slovo { font-weight:  bold;  }

 

Odkaz po najetí myši:

a:hover {background-color:#3366FF; color:blue; text-decoration:none; border: 3px solid blue}

Vysvětlení: barva pozadí, které se objeví za textem , barva, kterou text bude napsán , rámeček, ve které bude, může být i none - NE

                   

Předchozí stránka  1  2  3  4  5  6  Další stránka