mājas › Iestatījumi › CSS koda ievietošana html. Kā tīmekļa lapai pievienot CSS

CSS koda ievietošana html. Kā tīmekļa lapai pievienot CSS

Atribūts http-equiv="Content-Style-Type" norāda, ka šis META elements ir stila lapa, un atribūts content="text/css" norāda, ka stilu lapas tiks rakstītas CSS. Lai saprastu, kā stili tiek pievienoti HTML dokumentam, atgriezīsimies pie paša pirmā dokumenta piemēra, ko izveidojām HTML apguves procesā. Atgādināšu, ka šī bija lapa ar būvfirmas "Dom" aprakstu. Viņa izskatījās šādi:

Pieņemsim, ka vēlējāmies mainīt galvenes krāsu no pašreizējās melnās uz zaļu. Pēc tam mēs varam ierakstīt papildu atribūtu, kas nosaka dizaina stilu tieši elementā H1:

Stila atribūtu var izmantot jebkuram HTML elementam, lai norādītu tā stilu. Pēdiņas norāda uz CSS kārtulu, kas apraksta, kā elementam jābūt veidotam. Šajā gadījumā tiek iestatīta krāsa (krāsa) un tiek norādīta noteikta krāsa (zaļa). CSS izmanto kolu, lai atdalītu parametru no tā vērtības.

Iekšējās stila lapas

Stila lapu, kas norādīta HTML elementā, izmantojot stila atribūtu, sauc par iekšējo stila lapu.

Iekšējo stila lapu trūkums ir tāds, ka tie neuniversitāte. Izmantojot stila atribūtu, tikai viena virsraksts dokumentā kļūs zaļš. Pārējā gadījumā stila atribūts būs jāiestata tādā pašā veidā vai arī jāizveido trīskārša stila lapa.

Iebūvētas stila lapas

Iekļautās tabulas tiek pievienotas HTML dokumentam starp STYLE tagiem dokumenta sadaļā HEAD. Piemēram, lai visi pirmā līmeņa virsraksti būtu zaļi, varat uzrakstīt šādu iekļauto tabulu.

CSS kodu lapā var iekļaut četros veidos: dokumenta pamattekstā, iegult kodu lapas galvenē, norādīt saiti uz ārēju failu un arī importēt CSS failu.

Iebūvētie stili

Pirmajā gadījumā stili tiek lietoti tieši HTML elementam. Tā vietā, lai deklarētu visus stilus uzreiz un pēc tam lietotu tos koda progresā, jūs veidojat katru elementu atsevišķi.

Piemērs:

HTML stili ar CSS

Skatīt demonstrāciju

Iekļauts CSS tiek uzskatīts par ātru un ērtu veidu, kā veidot HTML dokumentus, taču jums nevajadzētu to pārmērīgi izmantot. Tās izmantošana ievērojami apgrūtina vietnes uzturēšanu. Nepieciešamība veikt nelielas izmaiņas var novest pie pilnīgas koda pārrakstīšanas.

Iebūvēts stils

Šī metode CSS savienošanai ar HTML nozīmē, ka jūs pievienojat visu nepieciešamo stila kodu vienā lielā daļā. Tas ļauj veidot stilu jebkuram lapas elementam. Līdzīgu pieeju var īstenot, lapas galvenajā sadaļā iegulstot CSS kodu. Piemēram, ievietojiet tālāk norādīto kodu sava HTML dokumenta sadaļā:

HTML lapas kods izskatīsies apmēram šādi:

Mans piemērs pamatteksts ( fona krāsa: tumši pelēka; krāsa: debeszils; fonta izmērs: 1,1 em; ) h1 (krāsa: koraļļi; ) #intro ( fonta izmērs: 1,3 em; ) .colorful ( krāsa: oranža; ) Iekļauts stils

Skatīt demonstrāciju

Ārējie stili

Ārējie stili ir viens no visizplatītākajiem veidiem, kā iekļaut CSS stilus.

Tas ietver atsevišķa faila izveidi, kas satur CSS kodu. Pēc tam HTML lapas atsaucas uz šo failu. Parasti visas vietnes noformēšanai tiek izmantots viens fails.

Lai tīmekļa lapai pievienotu ārējos stilus, izmantojiet tagu ar atribūtiem href un rel="stylesheet".

Iekļautā stila piemērs

Ļauj definēt stilus visai lapai uzreiz.

Šī rindkopa ir formatēta, izmantojot klasi.

Tagad HTML failā nav informācijas par elementu stilu. Iekļaujot CSS failu, visi stili nepārblīvē lapas izkārtojuma kodu.

Skatīt demonstrāciju

Stilu importēšana

Varat arī izmantot @import CSS kārtulu, lai importētu ārējās stila lapas. Lai to izdarītu, izmantojiet tagu. Šeit būtu piemērota jebkura no šīm sintaksēm:

@import "imported_style_sheet.css"; @import url("imported_style_sheet.css");

Tas izmanto tos pašus stilus kā iepriekšējos piemēros, bet importēts, izmantojot @import :

Piemērs @import "/css/tutorial/example.css"; Iebūvēts stils

Ļauj definēt stilus visai lapai uzreiz.

Šī rindkopa ir formatēta, izmantojot klasi.

Skatīt demonstrāciju

Lūdzu, ņemiet vērā, ka šī CSS fontu savienošanas metode var negatīvi ietekmēt vietnes veiktspēju, tāpēc ieteicams izmantot .

Tomēr @import kārtulu var izmantot visattālākajā stila lapas failā, lai iekļautu vienu CSS kodu citā, neietekmējot veiktspēju.

Nav stingru noteikumu par to, kuras metodes izmantot. Vislabāk ir vadīties no konkrētās situācijas un izvēlēties optimālākās metodes elementu veidošanai.

Raksta “Kā pievienot CSS vietnei” tulkojumu sagatavoja draudzīgā projekta komanda.

Ir 3 veidi, kā ieviest CSS stilus savā vietnē: varat izmantot globālos CSS stilus, pievienojot CSS kārtulas HTML dokumentu konteineram, varat pievienot saiti uz ārēju .css failu, kurā ir visi nepieciešamie noteikumi, vai izmantot iekšējo CSS, lai piemērot noteikumus noteiktam elementam. Šajā apmācībā mēs apskatīsim visas trīs CSS iespējas un uzzināsim to priekšrocības un trūkumus.

Globālais CSS tiek ievietots noteiktā lapas konteinerā. Izmantojot šo savienojuma opciju, klases un identifikatorus (ID) var izmantot, lai atsauktos uz CSS kodu, taču tie būs aktīvi tikai konkrētajā lapā. Šādi savienotie CSS stili tiek ielādēti katru reizi, kad lapa tiek atkārtoti ielādēta, tāpēc tie var ietekmēt tās ielādes ātrumu. Tomēr ir vairākas situācijas, kurās globālā CSS izmantošana var būt noderīga. Piemēram, ja jums ir jānosūta kādam lapas veidne, jums būs daudz vieglāk nodrošināt provizorisku rezultātu, ja viss ir vienā lapā. Globālais CSS ir novietots starp . Šis ir globālās stila lapas piemērs:

p (krāsa: balta; fonta izmērs: 10 pikseļi;).centrs (displejs: bloks; piemale: 0 auto;) #button-go, #button-back (apmale: vienkrāsains 1px melns;)

Globālās CSS priekšrocības:

Stila lapa ietekmē tikai vienu lapu.
Globālā CSS var izmantot klases un identifikatorus (ID).
Nav nepieciešams augšupielādēt vairākus failus. HTML un CSS var atrasties vienā failā.

Globālās CSS trūkumi:

Palielināts lapas ielādes laiks.
Savieno tikai ar vienu lapu — neefektīvi, ja vēlaties izmantot vienu un to pašu CSS vairākām lapām.

Kā savienot CSS ar HTML lapu

Atveriet savu HTML lapu jebkurā teksta redaktorā. Ja lapa jau ir ielādēta jūsu mitināšanas kontā, varat izmantot teksta redaktoru, ko nodrošina jūsu mitināšanas pakalpojumu sniedzējs. Ja norādītais HTML dokuments atrodas jūsu datorā, varat izmantot jebkuru teksta redaktoru, lai to rediģētu, un pēc tam atkārtoti augšupielādēt to savā mitināšanas kontā, izmantojot .

Atrodiet sākuma tagu un pēc tā pievienojiet šādu kodu:

Pēc tam pārejiet uz nākamo rindiņu un pievienojiet nepieciešamos CSS noteikumus, piemēram:

korpuss ( fona krāsa: zila; ) h1 ( krāsa: sarkana; polsterējums: 60 pikseļi; )

Kad esat pabeidzis CSS kārtulu pievienošanu, pievienojiet beigu tagu:

Pēc visām darbībām HTML dokumentam ar globālo CSS vajadzētu izskatīties apmēram šādi:

korpuss (fona krāsa: zils; ) h1 ( krāsa: sarkans; polsterējums: 60 pikseļi; ) Hostinger ceļvedis

Šis ir mūsu teksts.

2. iespēja — ārējais CSS

Iespējams, visērtākā iespēja CSS pievienošanai vietnei ir saistīt to ar ārēju .css failu. Šādā gadījumā visas ārējā CSS failā veiktās izmaiņas tiks atspoguļotas jūsu vietnē kopumā. Saite uz ārējo CSS failu tiek ievietota lapas konteinerā:

Savukārt pašas stila lapas atrodas failā style.css. Piemēram:

Xleftcol ( pludiņš: pa kreisi; platums: 33%; fons: #809900; ) .xmiddlecol ( pludiņš: pa kreisi; platums: 34%; fons: #eff2df; )

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

Mazāks HTML lapas izmērs un tīrāka failu struktūra.
Ātrs ielādes ātrums.
To pašu .css failu var izmantot dažādām lapām.

Ārējā CSS trūkumi:

Lapa var netikt renderēta pareizi, kamēr ārējais CSS nav pilnībā ielādēts.

3. iespēja — iekļauta CSS

Iekļauts CSS tiek izmantots noteiktam HTML tagam. Atribūts tiek izmantots, lai konfigurētu šo tagu. Šī CSS savienojuma opcija nav ieteicama, jo tai ir jākonfigurē katrs HTML tags atsevišķi. Turklāt vietnes pārvaldība var kļūt diezgan sarežģīta, ja izmantojat tikai iekšējo CSS. Tomēr dažos gadījumos šī metode var būt ļoti noderīga. Piemēram, ja jums nav piekļuves CSS failiem vai jums ir jāpiemēro noteikumi tikai vienam elementam. HTML lapas paraugam ar iekšējo CSS vajadzētu izskatīties šādi:

Hostingera ceļvedis

Šeit ir kaut kas noderīgs.

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

Noderīga izmaiņu testēšanai un priekšskatīšanai.
Noder ātriem labojumiem.
Mazāk HTTP pieprasījumu.

Iekļautās CSS trūkumi:

Iekļauts CSS ir jāpiemēro katram elementam atsevišķi.

Secinājums

Tagad esat uzzinājis, kā savienot CSS ar savu vietni trīs dažādos veidos, kā arī galvenās atšķirības starp tiem.

Ir četri veidi, kā veidot HTML tagus CSS.

1) Iekļauts stils.

2) Iegultais stils

3) importētais stils.

4) Stils no faila.

Un šajā rakstā mēs analizēsim visas četras metodes.

Vispirms pirmā metode ir iekļauts stils. Šis stils ir norādīts tieši pašā tagā. Piemēram:

tekstu

Šajā gadījumā mēs iestatām elementu " tekstu" izmērs būs 150% un līdzināts centrā. Šis ir iekļautā stila piemērs.

Otrā metode ir iegultais CSS stils, tas ir, stils, kas ir iestatīts dokumenta galvā, tagā. Piemēram, šādi:

h1 (
krāsa: sarkana;
augšdaļa: 100 pikseļi;
}

Šeit notiks tas, ka visiem tagā esošajiem elementiem tiks veiktas šādas darbības: to krāsa būs sarkana un augšējais polsterējums būs 100 pikseļi.

Trešais veids, kā iestatīt CSS stilu, ir importētie stili. Tie, tāpat kā iegultie, ir norādīti dokumenta galvā, bet no faila. Šeit ir piemērs:

@importēt url("mans.css");

Šeit stili no faila " tiks lietoti visai lapai my.css".

Un pēdējais CSS stilu veids ir stili no faila. Šī metode ir visizplatītākā, un tā ietver stila faila savienošanu, izmantojot tagu dokumenta galvā. Piemēram, šādā veidā:

Šī metode ir ļoti līdzīga iepriekšējai metodei, taču tags šeit netiek izmantots, un ir vēl viena atšķirība. Turklāt šī atšķirība ir raksturīga visām CSS stila noteikšanas metodēm. Un šī atšķirība ir prioritāte.

Kad rodas prioritāte? Un tas izpaužas, kad rodas konfliktsituācijas, kas saistītas ar mēģinājumu piešķirt vienam un tam pašam elementam pretrunīgu stilu. Piemēram, izmantojot iekļauto stilu, mēs cenšamies padarīt sarkanu krāsu, bet ar importēto stilu mēs cenšamies padarīt šī elementa krāsu melnu. Lai izvairītos no šādām pretrunīgām situācijām, ir jānosaka prioritāte: kurai metodei ir visaugstākā prioritāte un kurai, gluži pretēji, ir viszemākā. Prioritātes augošā secībā ir šādas:

1) Stils no faila.

2) Importētais stils.

3) Īstenotais stils.

4) Iekļauts stils.

Tādējādi iekļautajam stilam ir augstākā prioritāte. Un, izmantojot to, mēs varam secināt, ka iepriekš minētajā piemērā elementa krāsa būs sarkana, nevis melna.

Kādus secinājumus var izdarīt?

1) Vispārīgais stils visai vietnei jāievieto atsevišķā failā un jāsavieno katrā lapā, izmantojot tagu. Tā kā šim stilam ir minimāla prioritāte, to var mainīt īpašos gadījumos.

2) Importētais stils ir jāizmanto, ja 2 vai vairākām lapām (bet ne visām) ir noteiktas stila iezīmes.

3) Iegultais stils ir jāizmanto, lai iestatītu unikālus CSS stilus konkrētai lapai. Šie stili ir unikāli katrai vietnes lapai.

4) Iekļauts stils ir jāizmanto, ja atsevišķam elementam atsevišķā lapā ir nepieciešams īpašs izskats.

Vadoties pēc šiem principiem, jūs nekad neapjuksiet CSS stilos.

Nobeigumā es vēlētos sniegt nelielu piemēru, kā ievērot šos principus. Pieņemsim, ka vēlaties tagā esošo elementu attēlot citādi

. Jūs saskaraties ar šādiem uzdevumiem:

1) Fonta lielumam visās vietnes lapās jābūt 15 pt un krāsai jābūt melnai.

2) Visās lapās, izņemot vienu, šī elementa teksta krāsai jābūt sarkanai.

3) Katrā lapā atkāpes būs atšķirīgas.

4) Dažos gadījumos var mainīt teksta izmēru un krāsu.

Es domāju, ka šeit viss ir pārredzams, bet tomēr paskaidrosim procedūru:

1) Ievietojiet stilu atsevišķā failā, kur ir iestatīts izmērs un krāsa. Pēc tam savienojiet šo stilu, izmantojot tagu.

2) Ievietojiet stilu atsevišķā failā, kur teksta krāsa ir iestatīta uz sarkanu. Pēc tam pievienojiet to kā importēto stilu vajadzīgajām lapām.

3) Katrā taga lapā izveidojiet atšķirīgus atkāpes tagam

4) Pie nepieciešamajiem tagiem

atbilstoši pielāgojiet teksta izmēru un krāsu.

Kā redzat, nav nekā sarežģīta, un, to apguvis, jums būs daudz vieglāk, kas ir nepieciešams. Jūs varat lasīt par citiem tajā pašā kategorijā.

Ar cieņu Mihails Rusakovs!

P.S. Pabeigt kursu par HTML, CSS un vietnes izkārtojumu:

Šajā nodarbībā aplūkosim dažādus veidus, kā tīmekļa lapai pievienot CSS stilus.

Stilu pievienošana tieši HTML elementam

Varat pievienot stilu HTML elementam, izmantojot stila atribūtu. Šajā gadījumā stils ietekmēs tikai šo elementu. Veidojot vietni, šo metodi labāk neizmantot.

Lorem ipsum dolor sit amet. Porro quisquam est

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Stilu pievienošana HTML dokumentam

Jūs varat pievienot stilus tīmekļa lapas elementiem HTML dokumenta galvas sadaļā. Šajā gadījumā stili tiks piemēroti tikai šajā tīmekļa lapā. Šo metodi ieteicams izmantot, ja stilu skaits nav ļoti liels. Šī metode arī palielina tīmekļa lapas ielādes ātrumu, jo pārlūkprogrammai nav jāmeklē un jāiekļauj ārēji CSS faili.

.blue-20 (krāsa: zila; fonta izmērs: 20 pikseļi; ) .bg-yellow (fons: dzeltens; ) ")); )); ... .blue-20 (krāsa: zila; fonta izmērs: 20 pikseļi ) .bg-yellow ( fons: dzeltens ; ) ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Stilu pievienošana, izmantojot ārējos CSS failus

Varat pievienot tīmekļa lapai stilus, izmantojot ārēju CSS failu. Turklāt šo stila failu var saistīt ar jebkuru vietnes lapu skaitu, izmantojot saites elementu, kas jāievieto galvas sadaļā.

... ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Šī stila failu savienošanas metode ir vēlama, jo tas nodrošina, ka faili tiek ielādēti tādā secībā, kādā tie norādīti HTML dokumentā (pretstatā @import). Šī metode arī palielina tīmekļa lapas ielādes ātrumu, jo CSS faili tiek ielādēti vienlaikus. Vietnes ieviešana, izmantojot ārējos CSS failus, atvieglo stilu rediģēšanu un vietnes dizaina mainīšanu. Noslēgumā varat komentēt Google vēlmes, kas iesaka visus stilus ievietot vienā ārējā failā, kas novedīs pie vēl ātrākas vietnes ielādes.

Stilu pievienošana, izmantojot @import

Varat arī pievienot CSS failus, izmantojot @import konstrukciju, kas jānovieto HTML dokumenta stila bloka pašā augšpusē. Šī metode nav ieteicama, jo tas negarantē CSS failu secīgu ielādi. Arī tā izmantošana var izraisīt kļūdas tīmekļa lapas darbībā (Piemēram: skripta ielāde var tikt pabeigta agrāk nekā to stilu ielāde, no kuriem tas ir atkarīgs).

... @import url("faila ceļš kā url"); @import "ceļš uz failu"; ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

CSS failu dinamiska saistīšana

Dažreiz ir situācijas, kad tīmekļa lapā ir dinamiski jāiekļauj CSS fails. Šo metodi var ieviest, izmantojot jQuery bibliotēkas pievienošanas metodi.

$(dokuments).ready(function())( $("head").append($("")); ));

Piezīme. Izmantojot šo metodi, neaizmirstiet savā tīmekļa lapā iekļaut jQuery bibliotēku:

Stilu dinamiska pievienošana HTML dokumentam $(document).ready(function())( $("head").append($(.blue-20 (krāsa: zila; fonta izmērs: 20px; ) .bg- dzeltens ( fons: dzeltens; )")); )); Stila prioritāte un CSS samazināšana

Tā kā stilus var iestatīt dažādos veidos, ir jāzina vienas metodes prioritāte pār citu. Stili, kuriem ir augstākā prioritāte, ir tie, kas tiek pievienoti tieši HTML elementam, izmantojot stila atribūtu. HTML dokumentā iegultajiem stiliem ir prioritāte pār stiliem, kas iekļauti kā ārējie CSS faili.

Ārējā faila samples.css saturs --- .red ( krāsa: sarkans; ) --- HTML dokumenta saturs --- .blue ( krāsa: zils; ) ... ...

Lorem ipsum dolor sit amet. Sunt, explicabo quia non recusandae eaque ipsa, quae ab illo inventore.

Šī piemēra izpildes rezultātā teksts būs dzeltens, jo stilam, kas norādīts, izmantojot stila atribūtu, ir augstākā prioritāte. Ja noņemsit stila atribūtu ar vērtību un atsvaidzināsiet lapu, teksta krāsa tagad būs zila, jo dokumentā norādītajam stilam ir augstāka prioritāte nekā stiliem no ārējā faila.

Samaziniet CSS

CSS failu samazināšana (koda samazināšana) ir paredzēta to lieluma samazināšanai, kas palielina vietnes ielādes ātrumu un veiktspēju. Kā piemēru aplūkosim CSS faila lieluma samazināšanas procesu, izmantojot CSSTidy optimizētāju.

Mēs palaižam programmu “cmd (Command Line)”, kurā ierakstām programmas nosaukumu csstidy.exe un kā parametrus norādām avota CSS failu un minimizētā faila nosaukumu.

Minimizācijas rezultāts ir parādīts attēlā, kurā parādīts ievades lielums, samazinātais faila lielums un saspiešanas procents.