Ako vytvoriť prepojený kaskádový štýl (CSS)?
Ako môžem vystrihnúť kód CSS medzi úvodnými a záverečnými značkami štýlu?
V priebehu rokov sa štandardy webového dizajnu a vývoja zmenili. Jednou z týchto zmien je použitie kaskádových štýlov (CSS) na kontrolu celkového vzhľadu webovej stránky. Využitie CSS v dizajne vašich webových stránok vám ako vývojárovi umožňuje vykonať rozsiahle zmeny na celom webe, pričom upravíte iba jeden riadok kódu.
- 1Začnite otvorením jednoduchého textového editora, napríklad programu Poznámkový blok (v priečinku s príslušenstvom v ponuke programov systému Windows).
- 2Prvé úpravy štýlu, ktoré vykonáte, ovplyvnia celú webovú stránku, takže začnete úpravou farby pozadia a farby textu celej stránky. Telo prvého typu {
- 3Teraz skúste zmeniť farbu pozadia zadaním background-color: bezprostredne za ním kód farby a koniec riadka bodkočiarkou (každý riadok v značke štýlu musí byť ukončený bodkočiarkou). Kód farby je možné zadať niekoľkými spôsobmi.
- Hexadecimálna notácia-šesťmiestny alfanumerický kód, ktorý pre danú farbu uvádza červené, zelené a modré hodnoty v uvedenom poradí. (tj #000000 je čierna, #FFFFFF je biela, #FFFF00 je žltá).
- Percento červenej, zelenej a modrej - percentuálnou hodnotou sa označuje, koľko z každej farby je zastúpené (tj. Rgb (100%, 100%, 0%) je žltá a rgb (100%, 50%, 0%) je oranžová).
- Hodnoty červená, zelená modrá - táto technika je podobná percentuálnemu podielu, ale použitá hodnota je od 0 do 128 (tj rgb (128128,128) je biela a rgb (6464,64) je šedá).
- Názov farby - určité farby je možné zadať ako textovú hodnotu, ako je čierna, biela, červená, modrá, zelená.
- 4Ovplyvnenie farby typu farby textu: nasleduje požadovaná farba. Na zmenu farby pozadia použite ktorúkoľvek z vyššie uvedených techník.
Ovplyvnenie farby typu farby textu: nasleduje požadovaná farba. - 5Zatvorte hlavnú značku zadaním koncovky}
- 6V tomto prípade vykonáme podobné zmeny v značke <h1> (hlavička 1) ďalším zadaním h1 {
- 7Upravte písmo, ktoré bude prehliadač používať na vykreslenie akéhokoľvek textu obsiahnutého v tejto značke. Tu budeme používať písmo verdana, ktoré je jedným z predvolených písem nainštalovaných vo väčšine operačných systémov Windows. Dobrou zásadou je uviesť zoznam dvoch požadovaných typov písem a potom triedu písem. Implementovali by ste to tak, že zadáte font-family: verdana, arial, sans serif; Ako sme tu však ukázali, môžete si jednoducho vybrať iba jedno písmo.
- 8Ak chcete zmeniť veľkosť textu, zadajte font-size: a za ním požadovanú veľkosť. Veľkosť môže byť definovaná v pixeloch a em s. Zatiaľ definujte veľkosť textu na 22 pixelov.
- 9Zmeňte farbu textu pomocou rovnakých metód, aké sú definované vyššie, na ovplyvnenie štýlu tela. V tomto prípade robíme text sivým zadaním farby hexadecimálneho farebného kódu: #CCCCCC;
- 10Nezabudnite zatvoriť definíciu štýlu h1 zadaním}
- 11Ak chcete zmeniť značku odseku, začnite zadaním príkazu p {a vykonajte zmeny podobné zmenám vykonaným v definícii štýlu h1.
- 12Keď ste spokojní s definíciami štýlu, musíte súbor uložiť vo formáte, ktorý prehliadač rozpozná. V tomto prípade uložíme súbor ako styles.css, aj keď súbor môžete skutočne pomenovať tak, ako ste si vybrali, pokiaľ bude mať koncovku.css (tj. Mystyle.css, myfile.css, sitestyle.css). V prípade ľudí, ktorí používajú program Windows Poznámkový blok, sa uistite, že v rozbaľovacom zozname „Uložiť ako typ“ bude uvedené „Všetky súbory“ alebo prípona súboru additional.txt. V tomto prípade tiež uložíme naše CSS do rovnakého priečinka ako webová stránka, na ktorej pracujeme.
Jednou z týchto zmien je použitie kaskádových štýlov (CSS) na kontrolu celkového vzhľadu webovej stránky. - 13Stále používajte textový editor, otvorte súbor html, do ktorého chcete prepojiť CSS.
- 14Medzi značky <head> vložte nasledujúci riadok kódu: '' '<link rel = "stylesheet" type = "text/css" href = "LmNzcw ==" media = "all">' ''
- link rel = "stylesheet" (Vzťah prepojenia s dokumentom je šablóna so štýlmi)
- type = "text/css" - povie prehliadaču, na aký typ dokumentu odkazujete.
- href = "styles.css" - cesta k umiestneniu šablóny štýlov.
- media = "all" - určuje typ média, na ktoré odkazuje značka odkazu.
- 15Obnovte alebo otvorte prehliadač a zobrazia sa zmeny, ktoré ste urobili na svojej webovej stránke.
- Pri ukladaní súboru nezabudnite zadať za názvom súboru typ.css a uložiť typ súboru ako „Všetky súbory“.
- Oddeľte každú definíciu, aby bol váš kód čitateľnejší.
Prečítajte si tiež: Ako hacknúť účet Hotmail?
Otázky a odpovede
- Ako môžem vystrihnúť kód CSS medzi úvodnými a záverečnými značkami štýlu?Zvýraznite kód a potom stlačte Ctrl + X. V zásade ste vybrali kód zvýraznením a Ctrl + X je klávesová skratka na vystrihnutie.
