Všichni (nebo skoro všechno), co potřebujete vědět, abyste mohli začít s CSS

Rozhodl jsem se oživit tento příspěvek odnesena z mého starého blogu a dát to sem. Je vždy dobré mít průvodce pokaždé, když se na něco ve stylu agenta listech.

Takže pojďme se pustit do práce!

Stylů lze propojit s dokumentem třemi způsoby:

1. Spojeny nebo dovážena;
2. Incorporated;
3. Inline.

Externí stylů

Stylů je řekl, venku, když jsou pravidla CSS deklarované v dokumentu v dokumentu HTML . Stylesheet je samostatný soubor a HTML soubor má příponu. Css

Externího seznamu stylů je ideální aplikovat na více stránek. S externí styly, můžete změnit vzhled celého webu tím, že mění jen jeden soubor (soubor stylů).

CSS soubor z externího seznamu stylů by měly být propojeny nebo dováženy HTML dokumentu uvnitř <> tag dokumentu. Syntaxe obecně k propojení stylů volala estilo.css je uveden níže:

Obecná syntaxe pro import stylů volala estilo.css je uveden níže:

Prohlížeč načte soubor pravidel estilo.css styl a formátování dokumentu odpovídajícím způsobem.

Externích stylů může být napsán v libovolném textovém editoru. Tento soubor by neměl obsahovat žádné HTML tagy. Stylů musí být "spaseni" s A. Css
Vložené styly nebo interní

Stylů, se nazývá vložený nebo vnitřní, kdy jsou pravidla CSS, deklarované v HTML dokumentu.

Stylů vložené nebo interní, je ideální pro použití v jedné stránce. S CSS nebo vložený uvnitř, můžete si změnit vzhled jediného dokumentu, v němž je součástí stylu.

Styl pravidla, platná pro dokumentu jsou deklarovány v <> část dokumentu se stylem tag <> jako syntaxe je uvedeno níže:

V prohlížeči se nyní číst pravidla stylu na stránce sám, a formátování dokumentu odpovídajícím způsobem.

Poznámka: prohlížeč běžně ignoruje neznámé značky. To znamená, že starý prohlížeč, který nepodporuje styly, bude ignorovat tag, ale obsah tagu se zobrazí na obrazovce. Můžete zabránit tomu, starý prohlížeč zobrazit obsah

tag ", což jej skryje" pomocí HTML značky komentář.

Poznámka: Zahrnutí symbolů (v blízkosti komentář) ve výše uvedeném kódu.
Inline stylů

Stylů, se nazývá inline CSS, když jsou pravidla dána do HTML tag elementu.

Inline styl, se vztahuje pouze na HTML element. Ztrácí mnoho výhod stylů pro míchání obsahu prezentací. Použijte tuto metodu, ve výjimečných případech, jako když si chcete aplikovat styl na jeden výskyt prvku.

Syntaxe použít inline styl je uvedeno níže:

Nyní je nejdůležitější vlastnosti CSS:

Vlastnost písma

Vlastnosti zdrojů, definovat vlastnosti (hodnoty v CSS pravidlo), z dopisů, které tvoří text v HTML elementy.

Základní zdrojů a budou řešeny v tomto tutoriálu jsou uvedeny níže:

* Barva: ... ... ... ... ... .... Barva písma
Font-family: ... ... .... písma
Font-size: ... ... ... .... Velikost písma
Font-style: ... ... ... ... styl písma
Font-variant: případ ... ... ... zdroje menší
Font-hmotnost: ... ... ... čím tmavší, tím je zdroj (tučně)
* Písmo: ... ... ... ... ... ... .. zkratka pro všechny vlastnosti

Platné hodnoty pro vlastnosti zdroje

* Barva:
1. hex kód: # FFFFFF
2. RGB kód: RGB (255,235,0)
3. název barva červená, modrá, zelená, atd. ...
Font-family:
1. rodinné jméno: je definován název písma,
P. ex: "Verdana", "Helvetica", "Arial", atd..
2. generic-Rodina: je definován obecný název,
P. např. "serif", "sans-serif", "kurzíva", atd..
Font-size:
1. xx-small
2. X-malá
3. malé
4. střední
5. velké
6. x-large
7. xx-large
8. Menší
9. větší
10. Délka: opatření uznávané CSS (px, pt, in, cm, ...)
11. %
Font-style:
1. Normal: normální písmo ve svislém směru
2. Kurzíva: šikmé kašna
3. šikmá: šikmá zdroj
Font-variant:
1. Normal: normální písmo
2. small-caps velká písmena se změnil na nižší výškou
Font-váha:
1. normální
2. Tučný
3. odvážnější
4. zapalovač
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900

Vlastnost text

V textu, definovat vlastnosti (hodnoty v CSS pravidlo) vstupního textu do HTML prvků.

Vlastnosti textu jsou uvedeny níže:

* Barva ... ... ... ... ... ... ... barvy textu;
* Letter-spacing ... ... .. mezery mezi písmeny;
* Word-spacing ... ... ... mezery mezi slovy;
* Text-align ... ... ... ... .. zarovnání textu;
* Text-decoration text-decoration ... ...;
* Text-indent ... ... ... ... odsazení textu;
* Text-transform ... .... tvar písmen;
* Směr ... ... ... ... ... směr textu;
* Bílého místa ... ... ..., jak prohlížeč zpracovává prázdná místa;
Platné hodnoty pro vlastnosti textu

* Barva:
1. hex kód: # FFFFFF
2. RGB kód: RGB (255,235,0)
3. název barva červená, modrá, zelená, atd. ...
* Letter-spacing:
1. Normální: je to výchozí mezery
2. Délka: opatření uznávané CSS (px, pt, in, cm, ...) jsou platné záporných hodnot
* Word-spacing:
1. Normální: je to výchozí mezery
2. Délka: opatření uznávané CSS (px, pt, in, cm, ...) jsou platné záporných hodnot
* Text-align:
1. Zleva: zarovnat text doleva
2. doprava: zarovnat text doprava
3. středisko: zarovná text ve středu
4. odůvodnění: Text síly zabírat celou délku vedení zleva doprava
* Text-decoration:
1. Žádný: bez ozdob
2. Spodní linie: zdůrazňují míst v textu
3. overline: overline místo v textu
4. line-through: vložíte řádek nad textem
5. Blink: text bliká
* Text-indent:
1. Délka: opatření uznávané CSS (px, pt, in, cm, ...)
2. %: Procento šířku nadřazeného prvku
* Text-transformace:
1. Žádný: běžný text
2. využít: Všechny prvních písmen textu na velká písmena
3. velká, všechna písmena textu na velká písmena
4. malá písmena: všechna malá písmena textu
* Režie:
1. l: text psaný zleva doprava
2. RTL: text psaný zprava doleva
* White-space:
1. Normální: mezery jsou ignorovány prohlížečem
2. předem: prázdná místa budou zachována v prohlížeči
3. nowrap: text se zobrazí to vše v jednom řádku na obrazovce. Nejsou žádné zalomení řádků se nachází tag <>

Okraj nemovitost

Majetku pro banky, stanoví hodnoty pro tloušťku okraje HTML prvků.

Vlastnosti okraje jsou uvedeny níže:
* Margin-top ... ... .... Nastavení horního okraje;
* Margin-pravý ... ... .. určuje pravý okraj;
* Margin-bottom ... .... Nastavení dolního okraje;
* Margin-left ... ... ... Nastavení levého okraje;
* Marže ... ... ... ... .. zkratka pro všechny banky

Platné hodnoty pro okraje majetku

1. Auto: Výchozí hodnota marže
2. Délka: opatření uznávané CSS (px, pt, in, cm, ...)
3. %: Procento šířku nadřazeného prvku

Hranice vlastnictví

Vlastnosti okraje, definovat vlastnosti (hodnoty v CSS pravidlo) ze čtyř hranice HTML elementu.

Vlastnosti okraje jsou uvedeny níže:

* Hraniční-width: ... ... ... ... .... Tloušťka hranic
* Border-style: ... ... ... ... .... styl hranice
* Border-color: ... ... ... ... .... Barva rámečku
* --------------
* Border-top-width: ... ... ... ... tloušťka horní hrany
* Border-top-style: ve stylu ... ... ... ... od horní hrany
* Border-top-color: ... ... ... ... barva horního okraje
* --------------
* Border-right-width: ... ... ... tloušťka pravého okraje
* Border-right-style: ... ... .... styl pravého okraje
* Border-right-color: ... ... .... pravý okraj barvy
* --------------
* Border-bottom-width: ... ... ... tloušťka spodního okraje
* Border-bottom-style: ve stylu ... ... ... od spodního okraje
* Border-bottom-color: ... ... ... barvu spodního okraje
* --------------
* Border-left-width: ... ... ... .. tloušťka levého okraje
* Border-left-style: ve stylu ... ... ... .. od levého okraje
* Border-left-color: ... ... ... .. levou barvu ohraničení
* --------------
* Border-top: ... zkratka pro všechny vlastnosti horního okraje
* Border-right: .. zkratka pro všechny nemovitosti od pravého okraje
* Border-bottom: .. zkratka pro všechny vlastnosti spodního okraje
* Border-left: .. zkratka pro všechny nemovitosti od levého okraje
* Hranice: ... ... ... zkratka způsobem na všechny čtyři okraje

Platné hodnoty pro vlastnosti hran

* Barva:
1. hex kód: # FFFFFF
2. RGB kód: RGB (255,235,0)
3. název barva červená, modrá, zelená, atd. ...
* Styl:
1. Žádný: Žádné hranice
2. skryté: ekvivalent k žádnému
3. tečkovaný: tečkované hranici
4. přerušované, čárkované hranice
5. Solid: Solid Edge
6. Double: Dvoulůžkové hranice
7. drážky, zářezem
8. hřeben, římsa římsy
9. vložka: hrana v nízkém reliéfu
10. počátku: Edge ražené
* Šířka:
1. Slabý: tenké hraně
2. medium: Mediální hrana
3. silná: silná hranice
4. Délka: opatření uznávané CSS (px, pt, in, cm, ...)

Polstrování nemovitost

Nemovitosti na vzdálenost (asi překládat jako "výplň") definuje hodnotu pro mezery mezi obsahem a hranice HTML prvků.

Nemovitosti na rozestupy jsou uvedeny níže:

* Padding-top ... ... .... Nastavení padding-top;
* Padding-pravý ... ... .. definuje vzdálenost práva;
Padding-bottom * ... .... Definuje dolní mezery;
* Padding-vlevo ... ... ... Nastavuje mezery vlevo;
* Výplň ... ... ... ... .. zkratka pro všechny rozteče
Platné hodnoty pro vlastnosti mezery

1. Auto: Výchozí hodnota marže
2. Délka: opatření uznávané CSS (px, pt, in, cm, ...)
3. %: Procento šířku nadřazeného prvku

Pozadí nemovitost

Na pozadí vlastnost definuje vlastnosti (hodnoty v CSS pravidlo) od spodní části HTML prvků.

Pozadí vlastnosti jsou uvedeny níže:

* Background-color ... ... ... ... ... barva pozadí;
* Background-image ... ... ... .... obrázek na pozadí;
* Background-repeat ... ... ... .... Jak se umístí obrázek na pozadí;
* Pozadí-příloha ... .... Pokud je obrázek na pozadí "valí" na obrazovku, nebo ne;
* Background-position ... ... ... ... jak a kde je umístěn obrázek na pozadí;
* Pozadí ... ... ... ... ... ... ... ... zkratka pro všechny vlastnosti,

Platné hodnoty pro vlastnosti pozadí

* Background-color:
1. hex kód: # FFFFFF
2. RGB kód: RGB (255,235,0)
3. název barva červená, modrá, zelená, atd. ...
4. Transparentní: transparentní
* Background-image:
1. URL: url (cesta / image.gif)
* Background-repeat:
1. není repeat: no-repeat
2. horizontální a vertikální opakování: opakovat
3. Vertikální Opakuji: repeat-y
4. Horizontální Opakuji: repeat-x
* Pozadí-příloha:
1. Obraz na displeji: pevná
2. Obrázek "valí" na obrazovku přejděte
* Background-position:
1. x-y-pos pos
2. x-% Y-%
3. vlevo nahoře
4. horní části
5. v pravém horním rohu
6. vlevo uprostřed
7. centrum centrum
8. vpravo uprostřed
9. vlevo dole
10. dole uprostřed
11. vpravo dole

Výpis nemovitostí

Seznam vlastností definuje vlastnosti (hodnoty) HTML seznamům.

Seznam vlastnosti jsou uvedeny níže:

* List-style-image ... ... ... .... image jako ukazatel seznamu;
* List-style-position ... ... .... Kde je značka umístěna na seznamu;
* List-style-type ... ... ... ... ... druh záložek ze seznamu;
* List-style ... ... ... ... ... ... ... ... zkratka pro všechny vlastnosti;

Platné hodnoty pro vlastnosti seznamu

* List-style-image:
1. žádný
2. URL: url (cesta / marcador.gif)
* List-style-position:
1. mimo: u popisku zarovnání textu
2. Uvnitř: ukazatel textu
* List-style-type:
1. Žádný: Žádné značky
2. Diskuse: kružnice (koule plněné)
3. kruh: kruh (koule prázdný)
4. náměstí, plné náměstí
5. desetinné: 1, 2, 3, 4, ...
6. desetinné přední-zero
7. nižší roman: Roman malá I, II, III, IV, ...
8. horní roman: Roman velká I, II, III, IV, ...
9. méně alpha, malá písmena a, b, c, d, ...
10. Horní-alpha: velké písmeno A, B, C, D, ...
11. nižší Řeka
12. nižší a Latinské
13. Horní a Latinské
14. hebrejský
15. arménský
16. gruzínský
17. CJK-ideographic
18. hiragana
19. Katakana
20. hiragana-iroha
21. Katakana-iroha

BONUS!

POZICE

Pozice atribut může získat tři hodnoty:

* Absolutní: To je ten jediný, který umožňuje vrstvení a tím určit polohu na stránku, kterou jste vytvořili a připravený. Absolutní umístění;
Relativní *: Tato hodnota určuje text, bude mít zbytek pozice na stránce, a proto se nemohou překrývat, ale je stále schopen rozpoznat některé zajímavé vlastnosti. Relativní pozice;
* Estatic, zjistí, že neuzná žádné zvláštní postavení určen vrstev. Statické polohy.

Vlevo

Nastaví vzdálenost, která vrstva bude levého okraje prohlížeče nebo nadřazený prvek. Můžete si vzít absolutní hodnoty, relativní nebo Auto (automatické).

Poznámka: absolutní hodnoty přijímat hodnoty v souladu s definicí formátů popsaných v "formátů."
PRÁVO

Nastaví vzdálenost, která vrstva bude mít pravý okraj prohlížeče nebo nadřazený prvek. Můžete si vzít absolutní hodnoty, relativní nebo Auto (automatické).

Poznámka: absolutní hodnoty přijímat hodnoty v souladu s definicí formátů popsaných v "formátů."
TOP

Nastaví vzdálenost od horní vrstvy budou mít v prohlížeči, nebo nadřazený prvek. Můžete si vzít absolutní hodnoty, relativní nebo Auto (automatické).

Poznámka: absolutní hodnoty přijímat hodnoty v souladu s definicí formátů popsaných v "formátů."
Botom

Nastaví vzdálenost od spodní vrstva bude mít prohlížeče nebo nadřazený prvek. Můžete si vzít absolutní hodnoty, relativní nebo Auto (automatické).

Poznámka: absolutní hodnoty přijímat hodnoty v souladu s definicí formátů popsaných v "formátů."

Z-INDEX

Určuje pořadí překrývání prvků. Přijímá hodnotu Auto (automatické) a číslo, kde vyšší hodnota, tím vyšší vrstvy.

VÝHLED

Tento styl se používá ke skrytí prvků. Neviditelný prvek stále zabírají místo na stránce. Platné hodnoty jsou: viditelná (viditelné), skryté (skryté) a dědí (dědí atribut horní vrstvy, default).

Přelivem

Určuje, jak se bude chovat obsah vrstvy, když jeho limity jsou menší než její obsah. Platné hodnoty jsou: viditelná (viditelné, velikost vrstvy se zobrazí jeho obsah), skryté (okultní přebytek ignoruje obsah vrstvy), vyberte (posuvník zobrazuje vrstvy) a já (zobrazí se posuvník vrstva v případě potřeby).

DISPLAY

Identifikuje-li a je-li prvek by měl být zobrazena:

* Blok: jako blok, se zalomením řádku před a za element. Vytvoří nové pole ve vztahu k okolním prvků (výchozí hodnota);
* Inline: no řádku před a za element;
* List-item: stejně jako blok, s výjimkou list-item značky, který zní:
* Žádný: je neviditelný, a nezabírá místo na stránce. Zakáže zobrazení prvků v každé situaci, včetně sekundární.

Později udělám příspěvek o svých novinkách a CSS 3.

Související příspěvky

1. Centrum div vertikálně i horizontálně s plovákem a jasné

Štítky: css