V kaskádových štýlov ( CSS ) mark - up language získal v CSS3 mnohými novými prvkami , ktoré vám umožní súperiť s vizuálne zobrazenie pomocou programovania webová stránka s obrázkami . Nové prvky CSS3 patrí trojuholníky a zaoblené rohy , ktoré pred touto aktualizáciou , boli ťažké vytvoriť . Tieto funkcie uľahčujú vytváranie farbiace účinky aj pre nováčikov v prirážky . Stuha je v podstate jedno niekoľkých trojuholníky , krabice , a drop - tieňový efekt . Tieto komponenty sa pripojiť spoločne vytvoriť 3D pásky , ktoré môžete umiestniť na záhlavie , bannery , alebo kdekoľvek inde na svoje webové stránky . Pokyny dovolená 1

Vytvorenie hlavičky alebo názov značky . Napríklad , ak chcete , aby váš prvý záhlavie na stránke hovoriť " hlavičku " , vaša prirážka sa javí ako , " .

Záhlavie < /h1 > " Vždy zavrieť tag HTML s spätné lomítko .
2

Dajte svojmu HTML tag stylings chcete s CSS . Obsahovať aspoň svoju pozíciu , veľkosť a farbu . Napríklad , na prihlásenie Vášho

značku , vaše CSS mark - up bude vyzerať :

h1 { position : absolute ; šírka : 20 % ; padding : 10px ; background- color : # 999 ; }

, aby každý riadok CSS mark - up na samostatnom riadku . Začína a končí každý príkaz s otvorenými a uzavretými zátvorkách . " Position : absolute " znamená , že pozície prvku je absolútna a nemení bez ohľadu na to , čo iného sa deje v strane . Šírka je nastavená na 20 percent obrazovky alebo koša tag h1 je nastavená vo vnútri , ako je napríklad " div " alebo " tabuľky " . Polstrovanie dáva štítok H1 nejaké extra priestor na dýchanie . Background- color nastavuje farbu celého textu.
3

Vytvoriť trojuholníkový " po " pseudo - prvok pridať do hlavičky tag . " Po " pseudo - prvok je nové v CSS3 a umožňuje umiestniť prvok bezprostredne po iný . Nech je to trojuholník nastavením viac ako jeden z jej hraniciach transparentné . Váš značkovacie po vašej značke

bude teraz vyzerať takto :

h1 : po { position : absolute ; left : 0 ; top : 100 % ; border - width : 10px 10px ; border - style : solid , border - color : # 666 # 666 transparentné transparentné ; }

pozície a vľavo štýl nastaví trojuholník v ľavom dolnom rohu h1 prvku . Horná a pohraničnej štýly nastaviť veľkosť trojuholníka . Štýl border - color je blok javiť ako trojuholník a hraničné farby , ktoré sa objavujú tmavšie , než je farba záhlavie , vytvára 3D efekt , ako keď blok hlavičku je ostro skladanie dozadu ako stuha .

4

Pridať ďalšie efekty s trojuholníkovými prvkami dokončiť plochý vzhľad hlavičky. Umiestnite tieto posledné trojuholníky na začiatku úvode a na konci , takže stuha má príznak - ako vzhľad . Váš CSS mark - up sa objaví v celku ako :

h1 { position : absolute ; šírka : 20 % ; padding : 10px ; background- color : # 999 ; }

h1 : po { position : absolute ; left : 0px ; top : 100 % ; border - width : 10px 10px ; border - style : solid ; border - color : # 666 # 666 transparentné transparentné ; }

h1 : before { pozície : absolútna , vpravo : 0px ; top : 0px ; border - color : transparent # FFF transparentné transparentné ; } klipart

h1 : pred { position : absolute ; left : - 30px , top : 12px ; border - width : 20px 10px , border - color : # 999 # 999 # 999 transparentné ; }

prvý " : pred " element vytvára vlajky efekt na pravej strane hlavičky. Druhý " : pred " element vytvára štýl vlajky na ľavej strane klesla strane hlavičky
.

• Predchádzajúca strana: Ako vytvoriť prihlasovací skript v OES 
• Ďalšia strana: Ako používať Therefore Symbol v LaTeXu