CSS (Cascading Style Sheet) leírja a HTML elemeket, amelyeken megjelennek képernyő, papír , vagy benne egyéb média . Rengeteg időt takarít meg. Egyszerre több weboldal elrendezését vezérli. Beállítja a betűméret, betűcsalád, szín, háttérszín az oldalon.

Lehetővé teszi, hogy hozzáadjuk hatások vagy animációk a weboldalra. Használjuk CSS megjeleníteni animációk mint gombok, effektusok, betöltők vagy fonók , és még animált hátterek .

Használat nélkül CSS , a webhely nem fog vonzónak tűnni. Vannak 3 típusok CSS amelyek alább találhatók:

• Inline CSS
• Belső/ beágyazott CSS
• Külső CSS

1. Belső CSS

A belső CSS rendelkezik címke a szakasza a HTML dokumentum. Ez a CSS-stílus hatékony módja az egyes oldalak stílusának. A CSS-stílus használata több weboldalon időigényes, mert el kell helyeznünk a stílus minden weboldalon.

A belső CSS-t a következő lépésekkel használhatjuk:

1. Először nyissa meg a HTML oldalt, és keresse meg a

2. Írja be a következő kódot a

3. Adja hozzá a szabályokat CSS-ből az új sorban.

Példa:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Zárja be a stíluscímkét.

A belső CSS hozzáadása után a teljes HTML-fájl a következőképpen néz ki:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Használhatjuk a szelektorokat is (osztály és személyi igazolvány) a stíluslapon.

Példa:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

A belső CSS előnyei

Belső CSSnem tölthet fel több fájlt, ha hozzáadjuk a kódot a HTML oldalhoz.

A belső CSS hátrányai:

• Kód hozzáadása a HTML dokumentum csökkenti a oldalméret és betöltési idő a weboldalról.

2. Külső CSS

A külső CSS-ben összekapcsoljuk a weboldalakat a külsővel .css fájlt. Ezt hozza létre szöveg szerkesztő . A CSS hatékonyabb módszer a webhely stílusának kialakítására. Szerkesztésével a .css fájlt, egyszerre módosíthatjuk az egész webhelyet.

A külső CSS használatához kövesse az alábbi lépéseket:

1. Hozzon létre egy újat .css fájllal szöveg szerkesztő , és add hozzá Lépcsőzetes stíluslap szabályokat is.

Például:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Adjon hozzá hivatkozást a külsőhöz .css fájl közvetlenül utána címke a szakasza HTML lap :

A külső CSS előnyei:

• Fájlaink letisztultabb szerkezetűek és kisebbek.
• Ugyanazt használjuk .css fájl több weboldalhoz külső CSS-ben.

A külső CSS hátrányai:

• Az oldalakat nem lehet megfelelően kézbesíteni a külső CSS betöltése előtt.
• Külső CSS-ben sok CSS-fájl feltöltése megnövelheti a webhely letöltési idejét.

3. Inline CSS

A beépített CSS-t egy adott stílus kialakítására használják HTML elem. Add hozzá a stílus attribútumot minden HTML címkéhez a szelektorok használata nélkül. Egy webhely kezelése nehéz lehet, ha csak használjuk inline CSS . Azonban az Inline CSS HTML-ben bizonyos helyzetekben hasznos. Nem fértünk hozzá a CSS fájlok vagy stílusok alkalmazásához az elemre.

A következő példában a beépített CSS-t használtuk

java példánya