logo

CSS veidi

CSS (kaskādes stila lapa) apraksta HTML elementus, kas tiek rādīti ekrāns, papīrs , vai iekšā citi mediji . Tas ietaupa daudz laika. Tas kontrolē vairāku tīmekļa lapu izkārtojumu vienlaikus. Tas nosaka fonta izmērs, fontu saime, krāsa, fona krāsa lapā.

Tas ļauj mums pievienot efekti vai animācijas uz vietni. Mēs izmantojam CSS parādīt animācijas patīk pogas, efekti, iekrāvēji vai vērpēji , un arī animēti foni .

Nelietojot CSS , vietne neizskatīsies pievilcīga. Tur ir 3 veidi CSS kas ir zemāk:

  • Iekļauts CSS
  • Iekšējais/ iegultais CSS
  • Ārējais CSS
CSS veidi

1. Iekšējais CSS

Iekšējā CSS ir tagā sadaļā HTML dokumentu. Šis CSS stils ir efektīvs veids, kā veidot atsevišķas lapas. CSS stila izmantošana vairākām tīmekļa lapām ir laikietilpīga, jo mums ir jāievieto stils katrā tīmekļa lapā.

Mēs varam izmantot iekšējo CSS, veicot šādas darbības:

1. Vispirms atveriet HTML lapu un atrodiet

2. Ievietojiet šādu kodu aiz

 

3. Pievienojiet noteikumiem CSS jaunajā rindā.

Piemērs:

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

4. Aizveriet stila tagu.

 

Pēc iekšējā CSS pievienošanas viss HTML fails izskatās šādi:

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

Varam izmantot arī selektorus (klase un ID) stila lapā.

Piemērs:

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

Iekšējās CSS priekšrocības

    Iekšējā CSSnevar augšupielādēt vairākus failus, kad mēs pievienojam kodu kopā ar HTML lapu.

Iekšējās CSS mīnusi:

  • Koda pievienošana mapē HTML dokuments samazinās lapas izmērs un ielādes laiks no tīmekļa lapas.

2. Ārējais CSS

Ārējā CSS mēs saistām tīmekļa lapas ar ārējo .css failu. To rada teksta redaktors . CSS ir efektīvāka metode vietnes veidošanai. Rediģējot .css failu, mēs varam mainīt visu vietni uzreiz.

Lai izmantotu ārējo CSS, veiciet tālāk norādītās darbības.

1. Izveidojiet jaunu .css failu ar teksta redaktors un pievienojiet Kaskādes stila lapa arī noteikumi.

Piemēram:

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

2. Pievienojiet atsauci uz ārējo .css failu uzreiz pēc tagā sadaļa HTML lapa :

 

Ārējās CSS priekšrocības:

  • Mūsu failiem ir tīrāka struktūra un mazāki izmēri.
  • Mēs izmantojam to pašu .css fails vairākām tīmekļa lapām ārējā CSS.

Ārējās CSS mīnusi:

  • Lapas nevar piegādāt pareizi, pirms nav ielādēts ārējais CSS.
  • Daudzu CSS failu augšupielāde ārējā CSS var palielināt vietnes lejupielādes laiku.

3. Iekļauts CSS

Iekļauts CSS tiek izmantots konkrēta stila veidošanai HTML elements. Pievienojiet a stils atribūtu katram HTML tagam, neizmantojot atlasītājus. Vietnes pārvaldība var būt sarežģīta, ja mēs izmantojam tikai iekļauts CSS . Tomēr Inline CSS HTML ir noderīga dažās situācijās. Mums nav piekļuves CSS faili vai izmantot stilus elementam.

Nākamajā piemērā mēs esam izmantojuši iekļauto CSS

kartes java iterators
un

Šeit tas noderēs.

Iekļautās CSS priekšrocības:

  • Mēs varam izveidot CSS noteikumus HTML lapā.
  • Mēs nevaram izveidot un augšupielādēt atsevišķu dokumentu iekļautajā CSS.

Iekļautās CSS mīnusi:

  • Iekļauts CSS, pievienošana CSS HTML elementu noteikumi ir laikietilpīgs un nekārtības uzlabojiet HTML struktūru.
  • Tas vienlaikus veido vairākus elementus, kas var ietekmēt lapas izmēru un lapas lejupielādes laiku.