TechCodeview

CSS (pakopinio stiliaus lapas) aprašo HTML elementus, kurie rodomi ekranas, popierius , arba į kitos žiniasklaidos priemonės . Tai sutaupo daug laiko. Jis vienu metu valdo kelių tinklalapių išdėstymą. Jis nustato šrifto dydis, šriftų šeima, spalva, fono spalva puslapyje.

Tai leidžia mums pridėti efektai arba animacijos į svetainę. Mes naudojame CSS Rodyti animacijos Kaip mygtukai, efektai, krautuvai arba suktukai , ir taip pat animuoti fonai .

Nenaudojant CSS , svetainė neatrodys patraukliai. Yra 3 tipai CSS kurios yra žemiau:

• Inline CSS
• Vidinis / įterptasis CSS
• Išorinis CSS

1. Vidinis CSS

Vidinis CSS turi žyma skyrių HTML dokumentas. Šis CSS stilius yra efektyvus būdas sukurti atskirų puslapių stilių. CSS stiliaus naudojimas keliems tinklalapiams užima daug laiko, nes reikia įdėti stilius kiekviename tinklalapyje.

Vidinį CSS galime naudoti atlikdami šiuos veiksmus:

1. Pirmiausia atidarykite HTML puslapį ir suraskite

2. Įdėkite šį kodą po

3. Pridėkite taisykles CSS naujoje eilutėje.

Pavyzdys:

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

4. Uždarykite stiliaus žymą.

Pridėjus vidinį CSS, visas HTML failas atrodo taip:

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

Taip pat galime naudoti selektorius (klasė ir ID) stiliaus lape.

Pavyzdys:

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

Vidinio CSS privalumai

Vidinis CSSnegali įkelti kelių failų, kai pridedame kodą prie HTML puslapio.

Vidinio CSS trūkumai:

• Pridedamas kodas į HTML dokumentas sumažins puslapio dydis ir pakrovimo laikas tinklalapio.

2. Išorinis CSS

Išoriniame CSS tinklalapius susiejame su išoriniu .css failą. Jį sukuria teksto redaktorius . CSS yra efektyvesnis būdas sukurti svetainės stilių. Redaguodami .css failą, galime pakeisti visą svetainę iš karto.

Norėdami naudoti išorinį CSS, atlikite toliau nurodytus veiksmus.

1. Sukurkite naują .css failas su teksto redaktorius ir pridėkite Kaskadinis stiliaus lapas taisyklės taip pat.

Pavyzdžiui:

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

2. Pridėkite nuorodą į išorinį .css failą iškart po to žyma skyrių HTML lapas :

Išorinio CSS privalumai:

• Mūsų failai yra švaresnės struktūros ir mažesnio dydžio.
• Mes naudojame tą patį .css failas keliems tinklalapiams išoriniame CSS.

Išorinio CSS trūkumai:

• Puslapiai negali būti tinkamai pateikti, kol neįkeliamas išorinis CSS.
• Išoriniame CSS įkėlus daug CSS failų, gali pailgėti svetainės atsisiuntimo laikas.

3. Inline CSS

Inline CSS naudojamas konkrečiam stiliui sukurti HTML elementas. Pridėti stilius atributą kiekvienai HTML žymai nenaudodami parinktuvų. Tinklapio valdymas gali būti sudėtingas, jei naudojame tik inline CSS . Tačiau Inline CSS HTML yra naudinga kai kuriose situacijose. Mes neturime prieigos prie CSS failai arba taikyti stilius elementui.

Šiame pavyzdyje naudojome eilutę CSS

jquery tėvas