Stiile saab lisada kolmel viisil.

Sisemised stiilid

Interjööri stiil on omamoodi html-märgendi laiendus. See stiil luuakse siis, kui on vaja määrata mingid omadused konkreetsele objektile, mitte objektide rühmale. Neid omadusi nimetatakse atribuudid stiilis.

Sellise stiili loomiseks kasutage parameetrit stiilis, mis on kõigil siltidel. Parameeter stiilis läbi loetletud "semikoolon" atribuudid koos antud väärtused. Atribuutide väärtused määratakse ilma märgita "võrdne", nagu tavaliselt, aga tuttav "koolon".

Näiteks soovite kirjutada konkreetse pealkirja oranžina ja 22 piksli suurusena. Selleks kirjutage järgmine tekst:

1. tund

1. tund

Vaatame seda näidet. Fraas "1. tund" pealkirjasildiga esile tõstetud

. Sildi juures

parameetri abil luuakse stiil stiilis. Stiilil on 2 atribuuti värvi(värv) ja fondi suurus(fondi suurus), eraldatud "semikoolon". Atribuut värvi määratud väärtus #CD6600, atribuut fondi suurus määratud väärtus 22 pikslit.

Globaalsed stiilid

Globaalsed stiilid luuakse siis, kui on vaja määrata objektide rühmale mis tahes atribuute. Sellised stiilid luuakse dokumendi alguses sildi sees ja nende mõju laieneb kogu dokumendile.

Üldised stiilid lisatakse dokumendile järgmiselt.

1. Sildi sees sisestatud seotud silt
   

   punane värv ja suurus 20 pikslit:

   
   
   

   Pärast nende stiilide lisamist tõstetakse kõik teie dokumendi pealkirjad siltidega esile

   Ja

   ilma täiendavate siltideta on soovitud omadused. Ja kui soovite mõnda atribuuti muuta või lisada, siis lihtsalt muudate või lisate seda sobivas stiilis.

   Seotud stiilid

   Lingitud stiilileht luuakse laiendiga eraldi failis .css ja ühendage dokumendiga (või mitme dokumendiga).

   See stiilide lisamise meetod on kõigist kirjeldatud meetoditest kõige mugavam ja pakub veebiarendajale rohkem võimalusi.

   Esiteks laieneb eraldi failis kirjeldatud stiilide mõju mis tahes arvule dokumentidele, millega see on ühendatud, ja sama faili saab kasutada ka teistel saitidel.

   Teiseks saate stiile muuta ilma html-lehti muutmata. Ja kõik muudatused rakendatakse automaatselt kõikidele lehtedele, millega stiilifail on ühendatud.

   Ja kolmandaks, kui laadite esmakordselt brauseri vahemälu (mäletab) selliseid faile, nii et teie sait laaditakse veidi kiiremini.

   Ja kui soovite muuta näiteks päiste värvi või suurust kogu saidil, muudame ühendatud stiilifailis lihtsalt vastavaid parameetreid ja kõikide lehtede päised omandavad automaatselt vajalikud omadused.

   Stiilifaili ühendamiseks dokumendiga peate dokumendi alguses olema sildi sees sisestage silt kolme parameetriga:

   
   
   

   Kus on parameetrid rel="laadileht" Ja type="text/css" on konstandid ja parameeter href stiilifaili aadress on määratud. Aadress võib olla absoluutne või suhteline.

   Näiteks:

   
   
   

   Stiilide faili sees kirjeldatakse kõiki vajalikke stiile, eraldatuna reavahetustega, nagu globaalsed stiilid:

   stiil1 (
   atribuut1: väärtus;
   atribuut2: väärtus;
   ...
   }
   stiil2 (
   atribuut1: väärtus;
   atribuut2: väärtus;
   ...
   }
   ...

   Näiteks loome mis tahes HTML-dokumendi koos pealkirjadega, vaatame, kuidas see ilma stiilideta välja näeb. Teeme kõik päised

   oranž värv ja suurus 22 pikslit ja kõik pealkirjad

   punast värvi ja suurusega 20 pikslit. Selleks looge stiilifail style.css, mis sisaldab järgmist:

   h1 (
   värv: #CD6600;
   fondi suurus: 22 pikslit
   }
   h2 (
   värv: #FF0000;
   fondi suurus: 20 pikslit
   }
   

   Ja ühendage see fail meie dokumendiga, kirjutage sinna:

   
   
   

   Mis on CSS-i kaskaadlaaditabelid?

   CSS (kaskaadstiili leht)- kaskaadlaadilehed. See on omamoodi HTML-laiend, mis annab veebiarendajale lisavõimalusi.

   Stiil on tekstivormingu elementide komplekt. Näiteks teksti värv, font, suurus, joondus jne. Kõiki neid parameetreid saab salvestada stiilidesse.

   Kuid HTML võimaldab teil ka teksti vormindada, kasutades vormindussilte. Mis on eelis CSS enne HTML-i?

   CSS-i eelised HTML-i ees

   1. CSS võimaldab ühe toiminguga muuta kogu parameetrite rühma korraga.

      Nii et saidil on kõik siltidega määratud päised

      ,

      ,

      Ja

      olid sama värvi, tavalises HTML-is peame selle jaoks paigutama iga pealkirja konteinerisse parameetriga color="#CD6600":

      Pealkiri 1

      
      ...
      

      4. pealkiri

      Ja kui meil on vaja muuta pealkirjade värvi, peaksime otsima läbi kogu dokumendi ja muutma iga pealkirja eraldi.

      Ja abiga CSS loome siltidele stiili

      ,

      ,

      Ja

      eraldi failis. Ja kõigil nende siltidega määratud päistel ilma täiendavate siltideta on soovitud omadused.

      Ja kui tahame mõnda pealkirjade omadust muuta, peame lihtsalt muutma siltide stiili ja kõik pealkirjad muudetakse automaatselt.

   2. Stiilid pakuvad arendajale palju rohkem võimalusi kui tavaline HTML.

      Näiteks stiilide abil saate määrata teksti atribuute, mida ei saa määrata konkreetse html-märgendi standardparameetritega.

   3. Kõiki stiile saab salvestada eraldi faili. Brauser salvestab sellised failid vahemällu (mäletab), nii et teie sait laaditakse veidi kiiremini.

   Erinevat tüüpi stiilide kombinatsioon

   Kõiki kirjeldatud stiilitüüpe saab kasutada koos üksteisega. Ainult sel juhul tasub meeles pidada prioriteete: sisemistel stiilidel on kõrgeim prioriteet, seejärel globaalsetel ja madalaima prioriteediga seotud stiililehtedel.

   Näiteks teeme kõik päised

   oranži värvi ja üks neist on punast värvi. Loome oranžide pealkirjade jaoks globaalse stiili ja punaste pealkirjade jaoks sisemise stiili:

   
   h1 (
   värv: #CD6600
   }
   

   
   

   Pealkiri 1

   
   

   Pealkiri 2

   
   

   3. pealkiri

   
   
   
   

   Selle näite tulemusena "Pealkiri 1" Ja "Pealkiri 3" saab olema oranž ja "Pealkiri 2"- punane.

   Kui brauser loeb stiililehte, vormindab ta dokumendi selle järgi.

   Kolm võimalust CSS-i sisestamiseks

   Stiililehe sisestamiseks on kolm võimalust:

   • Väline stiilileht
   • Sisemine stiilileht
   • Sisseehitatud stiil

   Väline stiilileht

   Väline stiilileht on ideaalne, kui stiile tuleb rakendada paljudele lehtedele. Välise stiililehe abil saate muuta terve veebisaidi välimust, muutes ühte faili. Iga leht peaks viitama stiililehele, kasutades silti . Tag asub peaosas:

   Ära jäta vara väärtuse ja selle ühikute vahele tühikuid! "margin-left:20 px" ("margin-left:20px" asemel) töötab IE-s (Internet Exploreri brauseris), kuid mitte Firefoxi või Opera brauserites.

   Sisemine stiilileht

   Sisemist laadilehte kasutatakse siis, kui üksikul dokumendil on kordumatu stiil. Sisemised stiilid saate määrata HTML-lehe peaosas märgendi abil

   HTML-lehe kood näeb välja umbes selline:

   Sisseehitatud stiil

   
   
   

   Vaata demo

   Välised stiilid

   Välised stiilid on üks levinumaid viise CSS-stiilide kaasamiseks.

   See hõlmab CSS-koodi sisaldava eraldi faili loomist. Seejärel viitavad sellele failile HTML-lehed. Tavaliselt kasutatakse kogu saidi kujundamiseks ühte faili.

   Veebilehele väliste stiilide lisamiseks kasutage silti atribuutide href ja rel="stylesheet" määramine:

   Sisseehitatud stiil

   Võimaldab määrata kogu lehe stiilid korraga.

   See lõik on vormindatud klassi kasutades.

   
   
   

   Nüüd pole HTML-failis teavet elementide stiili kohta. CSS-faili kaasamisega ei sega kõik stiilid lehe paigutuse koodi segamini.

   Vaata demo

   Stiilide importimine

   Väliste stiililehtede importimiseks saate kasutada ka reeglit @import CSS. Selleks kasutage silti

   See kasutab samu stiile, mis eelmistes näidetes, kuid imporditakse @import abil:

   Sisseehitatud stiil

   Võimaldab määrata kogu lehe stiilid korraga.

   See lõik on vormindatud klassi kasutades.

   
   
   

   Vaata demo

   Pange tähele, et see CSS-fondide ühendamise meetod võib saidi jõudlust negatiivselt mõjutada, mistõttu on soovitatav seda kasutada .

   Siiski saab @import reeglit kasutada kõige välimises stiilitabeli failis, et lisada üks CSS-kood teise ilma jõudlust mõjutamata.

   Puuduvad ranged reeglid selle kohta, milliseid meetodeid kasutada. Parim on lähtuda konkreetsest olukorrast ja valida elementide kujundamiseks kõige optimaalsemad meetodid.

   Artikli “Kuidas veebilehele CSS-i lisada” tõlke koostas sõbralik projektimeeskond.

   
   
   Atribuut http-equiv="Content-Style-Type" näitab, et see element META viitab stiililehele ja atribuudile content="text/css" näitab, et stiililehed kirjutatakse selles keeles CSS. Et mõista, kuidas HTML-dokumendile stiile lisatakse, pöördume tagasi kõige esimese HTML-i õppimise käigus loodud dokumendi näite juurde. Tuletan meelde, et see oli leht ehitusfirma "Dom" kirjeldusega. Ta nägi välja selline:

   Oletame, et tahtsime muuta päise värvi praegusest mustast roheliseks. Seejärel saame kirjutada täiendava atribuudi, mis määrab kujundusstiili otse elemendis H1:

   
   

   Atribuut stiilis saab kasutada mis tahes elemendis HTML kujundada oma disainistiili. Reegel on märgitud jutumärkides CSS, mis kirjeldab elemendi stiili. Sel juhul määratakse värv ( värvi) ja on näidatud konkreetne värv ( roheline - roheline). Eraldajana parameetri ja selle väärtuse vahel CSS kasutatud käärsool.

   Sisemised stiililehed

   Elemendi sees määratletud stiilileht HTML kasutades atribuuti stiilis, kutsus sisemine.

   
   

   Sisemiste stiililehtede puuduseks on see, et need mitteuniversaalsus. Kasutamise tulemusena stiili atribuut ainult üks dokumendi pealkiri muutub roheliseks. Ülejäänu kohta peate täpselt samamoodi küsima stiili atribuut või peaksite looma kolmekordse stiililehe.

   Sisseehitatud stiililehed

   Sisseehitatud tabelid on lisatud HTML dokument siltide vahel STIIL jaotises PEA dokument. Näiteks kõigi esimese taseme pealkirjade roheliseks muutmiseks võite kirjutada sellise tekstisisese tabeli.

   CSS (Cascading Style Sheets) ehk kaskaadlaadilehed, kasutatakse märgistuskeeles kirjutatud veebidokumendi välimuse kirjeldamiseks. CSS määrab stiilireeglid, mis muudavad veebilehtedele paigutatud elementide välimust, täpsustades nende üksikasju, nagu värv, font, suurus, äärised, taust ja asukoht dokumendis.

   Saate manustada CSS-koodi otse märgistuselemendile atribuudi väärtusena stiilis. See atribuut on saadaval kõigi HTML-i elementide jaoks. CSS-i abil saate antud HTML-i elemendi jaoks määrata mitu stiiliatribuuti. Igal atribuudil on nimi ja väärtus, mis on eraldatud kooloniga (:). Iga deklareeritud omadus eraldatakse semikooloniga (;).

   Nii näeb see elemendi puhul välja

   :

   CSS-stiilide lisamise viisid

   CSS-standard pakub veebilehele stiililehe rakendamiseks kolme võimalust:

   • Väline laadileht – laadilehe reeglite määratlemine eraldi .css-failis ja seejärel selle faili lisamine HTML-dokumenti märgendi abil
   • Sisemine stiilileht – määrake stiililehe reeglid sildi abil

     Näide: sisemine stiilileht

     • Proovi ise"

     Pealkiri

     Esmalt tekst

     Tekst kaks

     Kolmas tekst

     Pealkiri

     Esmalt tekst

     Tekst kaks

     Kolmas tekst

     
     
     

     Selles näites määrame elemendi taustavärvi CSS-i abil : taustavärv: kahvaturoheline, pealkirjade värv ja fondi tüüp

     : värv: sinine; font-family:verdana, samuti lõikude fondi suurus, värv ja teksti keskjoondus

     : fondi suurus: 20 pikslit; värv: punane; text-align:center.

     Sisseehitatud stiil

     Kui teil on vaja vormindada HTML-lehe üksikut elementi, saab stiilikirjelduse paigutada otse avamärgendi sisse, kasutades juba spetsialiseeritud stiiliatribuuti. Näiteks:

     Lõik

     Selliseid stiile nimetatakse sisseehitatud (inline) või manustatud. Otse elemendi avamärgendis määratletud reeglid alistavad välises CSS-failis määratletud reeglid, samuti elemendis määratletud reeglid

     Pealkiri

     Esmalt tekst

     Tekst kaks

     Kolmas tekst

     
     
     

     Ülesanded

     • Teksti joondamine keskele

       Kasutage tekstisisest lõigu stiili, tsentreerige tekst.