CSS (Cascading Style Sheets) ehk astmelised stiililehed, kasutatakse kirjeldamiseks välimus märgistuskeeles kirjutatud dokument. Tavaliselt kasutatakse CSS-i stiile veebilehe elementide stiili loomiseks ja muutmiseks ning kasutajaliidesed sisse kirjutatud HTML keeled ja XHTML, kuid seda saab rakendada ka mis tahes tüüpi XML-dokumentidele, sealhulgas XML, SVG ja XUL.

Kaskaadlaaditabelid kirjeldavad elementide vormindamise reegleid, kasutades atribuute ja vastuvõetavad väärtused need omadused. Iga elemendi puhul saate kasutada piiratud hulga atribuute, mis ei mõjuta seda.

Stiili deklaratsioon koosneb kahest osast: veebilehe elemendist − valija ja vormindamise käsud - reklaamiplokk. Selektor ütleb brauserile, millist elementi vormindada, ja deklaratsiooniplokis (kood lokkis sulgudes) loetletakse vorminduskäsud - omadused ja nende väärtused.

Riis. 1. CSS-stiili deklaratsiooni struktuur

Kaskaadlaadilehtede tüübid ja nende eripära

1. Stiililehtede tüübid

1.1. Väline stiilileht

Väline stiilileht esindab tekstifail CSS-laiendiga, mis sisaldab elementide CSS-stiile. Fail luuakse koodiredaktoris nagu HTML-leht. Fail võib sisaldada ainult stiile ilma HTML-i märgistuseta. Väline stiilileht ühendatakse veebilehega märgendi abil , mis asub sektsiooni sees . Need stiilid töötavad saidi kõigil lehtedel.

Saate lisada igale veebilehele mitu laadilehte, lisades järjest mitu silti , mis näitab selle stiililehe eesmärki meediumisildi atribuudis. rel="stylesheet" määrab lingi tüübi (link stiililehele).

HTML5 standard ei nõua atribuuti type="text/css", seega võib selle ära jätta. Kui atribuut puudub, on vaikeväärtus type="text/css" .

1.2. Sisemised stiilid

Sisemised stiilid osasse manustatud HTML-dokumenti ja on määratletud märgendi sees. Sisemised stiilid on ülimuslikud väliste stiilide ees, kuid on halvemad kui tekstisisesed stiilid (määratletakse stiili atribuudiga).

...

1.3. Sisseehitatud stiilid

Kui me kirjutame tekstisisesed stiilid, kirjutame CSS-koodi HTML-faili otse elemendisildi sisse, kasutades stiiliatribuuti:

Pöörake sellele tekstile tähelepanu.

Sellised stiilid mõjutavad ainult elementi, mille jaoks need on määratud.

1.4. @impordi reegel

@impordi reegel Võimaldab laadida väliseid stiililehti. Et @import direktiiv töötaks, peab see ilmuma stiililehel (väline või sisemine) enne kõiki muid reegleid:

@import reeglit kasutatakse ka veebifondide kaasamiseks:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,kirillitsa);

2. Selektorite tüübid

Valijad esindavad veebilehe struktuuri. Need aitavad luua reegleid veebilehe elementide vormindamiseks. Selektorid võivad olla elemendid, nende klassid ja identifikaatorid, aga ka pseudoklassid ja pseudoelemendid.

2.1. Universaalne valija

Sobib mis tahes HTML-i elemendiga. Näiteks * (veeris: 0;) lähtestab kõigi saidi elementide veerised. Valijat saab kasutada ka koos pseudoklassi või pseudoelemendiga: *:after (CSS-stiilid) , *:checked (CSS-stiilid) .

2.2. Elemendi valija

Elementide valijad võimaldavad vormindada kõiki elemente seda tüüpi saidi kõigil lehtedel. Näiteks h1 (font-family: Lobster, cursive;) määrab kõigi h1 pealkirjade üldise vormindusstiili.

2.3. Klassi valija

Klassivalijad võimaldavad teil stiilida ühte või mitut sama klassinimega elementi erinevad kohad lehtedel või edasi erinevad lehed saidile. Näiteks pealkirjaklassiga pealkirja loomiseks peate lisama klassi atribuut väärtuse pealkirjaga avamärgendis

ja määrake määratud klassi stiil. Klassi abil loodud stiile saab rakendada teistele elementidele, mitte tingimata seda tüüpi.

Kasutusjuhend personaalarvuti

.headline ( text-transform: suurtähed; värv: helesinine; )

2.4. ID valija

ID-valija võimaldab vormindada üks konkreetne element. ID peab olema kordumatu ja võib ühel lehel esineda ainult üks kord.

#külgriba (laius: 300 pikslit; hõljumine: vasakul; )

2.5. Järeltulijate valija

Järgmiste valijatega rakendatakse stiile konteinerielemendi elementidele. Näiteks ul li (teksti teisendus: suurtähtedega;) – valib kõik li elemendid, mis on kõigi ul elementide alamastmed.

Kui soovite vormindada konkreetse elemendi järeltulijaid, peate andma sellele elemendile stiiliklassi:

p.first a (värv: roheline;) – seda stiili rakendatakse kõikidele esimese klassiga lõigu järeltulijatele linkidele;

p .first a (värv: roheline;) – kui lisate tühiku, kujundatakse lingid, mis asuvad mis tahes .first klassi sildi sees, mis on elemendi alamsild.

Esiteks a (värv: roheline;) – seda stiili rakendatakse mis tahes lingile, mis asub mõnes teises elemendis, mille määrab klass.first .

2.6. Lapse valija

Alamelement on seda sisaldava elemendi otsene alam. Ühel elemendil võib olla mitu lapselemendid, ja igal elemendil saab olla ainult üks ülem. Lapsvalija võimaldab stiile rakendada ainult siis, kui alamelement tuleb kohe pärast emaelementi ja nende vahel pole muid elemente, st alamelement ei ole millegi muu sees pesastatud.
Näiteks p > strong valib kõik tugevad elemendid, mis on p elemendi alamelemendid.

2.7. Õe valija

Õdelus tekib elementide vahel, millel on ühine vanem. Valijad sõsarelemendid võimaldab valida elemente sama taseme elementide rühmast.

h1 + p – valib kõik esimesed lõigud vahetult pärast märgendit

ilma ülejäänud lõikeid mõjutamata;

h1 ~ p – valib kõik lõigud, mis on mis tahes h1 pealkirja õde ja kohe pärast seda.

2.8. Atribuutide valija

Atribuudi valijad valivad elemendid atribuudi nime või väärtuse alusel:

[atribuut] - kõik elemendid, mis sisaldavad määratud atribuuti - kõik elemendid, millele alt atribuut on määratud;

selektor[atribuut] - seda tüüpi elemendid, mis sisaldavad määratud atribuuti, img - ainult pildid, millele alt atribuut on määratud;

valija[atribuut="väärtus"] - seda tüüpi elemendid, mis sisaldavad konkreetse väärtusega määratud atribuuti, img - kõik pildid, mille pealkiri sisaldab sõna lill;

valija[atribuut~="väärtus"] – osaliselt sisaldavad elemendid antud väärtus, näiteks kui tühikuga eraldatud elemendile on määratud mitu klassi, p - lõigud, mille klassi nimi sisaldab tunnust ;

selektor[atribuut|="väärtus"] - elemendid, mille atribuutide väärtuste loend algab määratud sõnaga, p - lõigud, mille klassi nimi on tunnus või algab tunnusega ;

selektor[atribuut^="väärtus"] - elemendid, mille atribuudi väärtus algab määratud väärtusega, a - kõik lingid, mis algavad tähega http:// ;

selektor[atribuut$="väärtus"] – elemendid, mille atribuudi väärtus lõpeb määratud väärtus, img - kõik pildid png-vormingus;

valija[atribuut*="väärtus"] - elemendid, mille atribuudi väärtus sisaldab määratud sõna ükskõik kus, a - kõik lingid, mille nimi sisaldab raamat .

2.9. Pseudoklassi valija

Pseudoklassid on klassid, mis ei ole tegelikult HTML-i siltide külge kinnitatud. Need võimaldavad teil rakendada elementidele CSS-i reegleid, kui sündmus toimub või järgib konkreetset reeglit. Pseudoklassid iseloomustavad elemente, millel on järgmised omadused:

:hover - mis tahes element, mille kohal hiirekursor hõljutatakse;

:focus – interaktiivne element, mille juurde navigeeriti klaviatuuri abil või mis aktiveeriti hiirega;

:active – element, mille kasutaja aktiveeris;

:valid - vormiväljad, mille sisu vastavust määratud andmetüübile on brauseris kontrollitud;

:invalid — vormiväljad, mille sisu ei ühti määratud andmetüübiga;

:enabled – kõik aktiivsed väljad vormid;

:disabled - blokeeritud vormiväljad, st mitteaktiivses olekus;

:vahemikus - vormiväljad, mille väärtused on määratud vahemikus;

:vahemikust väljas – vormiväljad, mille väärtused ei ole määratud vahemikus;

:lang() - määratud keeles tekstiga elemendid;

:not(selector) - elemendid, mis ei sisalda määratud valijat - klass, identifikaator, nimi või vormivälja tüüp - :not() ;

:target on # sümboliga element, millele dokumendis viidatakse;

:checked — valitud (kasutaja valitud) vormielemendid.

2.10. Struktuurne pseudoklassi valija

Struktuurilised pseudoklassid valivad alamelemendid vastavalt sulgudes määratud parameetrile:

:nth-child(odd) - paaritu alamelemendid;

:nth-child(paaris) – paaris alamelemendid;

:nth-child(3n) - iga kolmas element laste hulgas;

:nth-child(3n+2) - valib iga kolmanda elemendi, alustades teisest lapsest (+2) ;

:nth-child(n+2) - valib kõik elemendid alates teisest;

:nth-child(3) – valib kolmanda alamelemendi;

:nth-last-child() - valib alamelementide loendis elemendi, mille abil määratud asukoht, sarnane:nth-child() , kuid alustades viimasest, vastupidises suunas;

:first-child – võimaldab kujundada ainult sildi kõige esimest alamelementi;

:last-child - võimaldab vormindada sildi viimast alamelementi;

:only-child – valib elemendi, mis on ainus alamelement;

:empty – valib elemendid, millel pole lapsi;

:root - valib elemendi, mis on dokumendi juur - html element.

2.11. Struktuuritüübi pseudoklassi valija

Osutage konkreetne tüüp lapse silt:

:nth-of-type() - valib elemendiga :nth-child() sarnased elemendid, kuid võtab arvesse ainult elemendi tüüpi;

:first-of-type - valib antud tüübi esimese alam;

:last-of-type - valib selle tüübi viimase elemendi;

:nth-last-of-type() - valib antud tüüpi elemendi elementide loendis määratud asukoha järgi, alustades lõpust;

:only-of-type – valib alamelementide hulgast ainsa määratud tüüpi elemendi vanem element.

2.12. Pseudoelementide valija

Pseudoelemente kasutatakse sisu lisamiseks, mis luuakse atribuudi sisu abil:

:first-letter - valib iga lõigu esimese tähe, rakendub ainult plokielementidele;

:first-line - valib elemenditeksti esimese rea, rakendub ainult plokielementidele;

:befor - lisab loodud sisu elemendi ette;

:after – lisab genereeritud sisu pärast elementi.

3. Valija kombinatsioon

Vormindavate elementide täpsemaks valimiseks võite kasutada valijate kombinatsioone:

img:nth-of-type(paaris) – valib kõik paarisarvulised pildid, mille alternatiivtekst sisaldab sõna css.

4. Rühmitamise valijad

Sama stiili saab rakendada mitmele elemendile korraga. Selleks tuleb deklaratsiooni vasakus servas komadega eraldatult loetleda vajalikud valijad:

H1, h2, p, span (värv: tomat; taust: valge; )

5. Pärand ja kaskaad

Pärimine ja kaskaad on kaks CSS-i põhimõistet, mis on omavahel tihedalt seotud. Pärand on see, kus elemendid pärivad omadused oma vanemalt (neid sisaldavalt elemendilt). Kaskaad avaldub selles, kuidas erinevad tüübid laadilehti rakendatakse dokumendile ja kuidas vastuolulised reeglid üksteist alistavad.

5.1. Pärand

Pärand on mehhanism, mille abil edastatakse teatud omadused esivanemalt tema järglastele. CSS-i spetsifikatsioon võimaldab pärida lehe tekstisisuga seotud atribuute, nagu värv, font, tähevahe, reakõrgus, loendi stiil, teksti joondus, teksti taane, teksti teisendus, nähtavus, valge -tühik ja sõnavahe. Paljudel juhtudel on see mugav, sest te ei pea määrama veebilehe iga elemendi fondi suurust ja fondiperekonda.

Plokkide vormindamisega seotud atribuudid ei päri. Need on taust , ääris , ekraan , hõljuk ja selge , kõrgus ja laius , veeris , minimaalne-maksimaalne kõrgus ja laius , piirjoon , ülevool , polsterdus , asend , teksti kaunistamine , vertikaaljoondus ja z-indeks .

Sunniviisiline pärimine

Kasutades märksõna inherit võib sundida elementi pärima oma emaelemendi mis tahes omaduse väärtuse. See toimib isegi selliste atribuutide puhul, mida vaikimisi ei päri.

Kuidas CSS-i stiilid seadistatakse ja töötavad

1) Stiile saab pärida põhielemendist (päritud omadused või pärimisväärtuse kasutamine);

2) alloleval laadilehel asuvad stiilid alistavad ülaltoodud tabelis olevad stiilid;

3) Ühe elemendi stiile saab rakendada erinevatest allikatest. Saate kontrollida, milliseid stiile brauseri arendaja režiimis rakendatakse. Selleks klõpsake elemendil paremklõps hiirega ja valige "Kuva kood" (või midagi sarnast). Parempoolses veerus on loetletud kõik atribuudid, mis on sellele elemendile määratud või päritud ülemelemendist, koos stiilifailidega, milles need on määratud, ja seerianumber koodi ridu.

Riis. 2. Arendaja režiim sisse Google'i brauser Chrome

4) Stiili määratlemisel saab kasutada suvalist valijate kombinatsiooni - elemendivalijat, elemendi pseudoklassi, klassi või elemendi identifikaatorit.

div (ääris: 1px solid #eee;) #wrap (width: 500px;).kast (float: left;).clear (clear: both;)

5.2. Kaskaad

Kaskaad on mehhanism, mis kontrollib lõpptulemust olukorras, kus samale elemendile rakendatakse erinevaid CSS-i reegleid. Atribuutide rakendamise järjekorra määravad kolm kriteeriumi –!oluline reegel, spetsiifilisus ja laadilehtede kaasamise järjekord.

Reegel!tähtis

Reegli kaalu saab määrata märksõnaga!important, mis lisatakse kohe atribuudi väärtuse järele, näiteks span (font-weight: bold!important;) . Reegel tuleb paigutada deklaratsiooni lõppu enne sulgevat sulgu ilma tühikuta. Selline teadaanne on kõigi muude reeglite suhtes ülimuslik. See reegel võimaldab tühistada atribuudi väärtuse ja määrata elemendirühma elemendile uue, juhul kui stiilifailile puudub otsene juurdepääs.

Spetsiifilisus

Iga reegli puhul arvutab brauser valija spetsiifilisus, ja kui elemendil on vastuolulised atribuudideklaratsioonid, võetakse arvesse kõige spetsiifilisem reegel. Spetsiifilisuse väärtus koosneb neljast osast: 0, 0, 0, 0. Selektori spetsiifilisus on määratletud järgmiselt:

id jaoks lisatakse 0, 1, 0, 0;
klassile 0 lisatakse 0, 1, 0;
iga elemendi ja pseudoelemendi kohta lisatakse 0, 0, 0, 1;
otse elemendile lisatud tekstisisese stiili puhul - 1, 0, 0, 0 ;
Universaalsel valijal pole spetsiifilisust.

H1 (värv: helesinine;) /*spetsiifilisus 0, 0, 0, 1*/ em (värvus: hõbedane;) /*spetsiifilisus 0, 0, 0, 1*/ h1 em (värvus: kuldne;) /*spetsiifilisus: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.umbes (värv: sinine;) /*spetsiifilisus: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ . külgriba (värv: hall;) /*spetsiifilisus 0, 0, 1, 0 */ #külgriba (värv: oranž;) /*spetsiifilisus 0, 1, 0, 0*/ li#külgriba (värv: vesi;) /*spetsiifilisus: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Selle tulemusena rakenduvad elemendile need reeglid, mis on täpsemad. Näiteks kui elemendil on kaks spetsiifikat väärtustega 0, 0, 0, 2 ja 0, 1, 0, 1, siis võidab teine ​​reegel.

Ühendatud laudade järjekord

Saate luua mitu välised lauad stiile ja ühendada need ühe veebilehega. Kui need esinevad erinevates tabelites erinevaid tähendusiühe elemendi omadusi, rakendatakse elemendile allpool loetletud stiililehe reegel.

1. Mis on CSS-i kaskaadlaaditabelid?

Niisiis, mis on astmelised stiililehed css?

css(Inglise) Kaskaadstiililehed - kaskaadstiililehed) on keel, mis kirjeldab märgistuskeelt kasutades kirjutatud dokumendi välimust. Algajale arusaadavuse hõlbustamiseks on astmelised stiililehed css loodud selleks, et luua HTML-veebisaitide lehtede jaoks kauneid ja hõlpsasti redigeeritavaid kujundusi.

Kaskaadstiililehti kasutati esmakordselt eelmise sajandi 90ndatel. Kuid alguses polnud need nii populaarsed kui praegu, sest erinevad brauserid tajusid ja kuvasid css-i kasutavaid html-lehti erinevalt.

Mõne aja pärast hakati saidiloojate töö lihtsustamiseks brausereid "kohandama" samadele standarditele. Tänapäeval reprodutseerivad peaaegu kõik Interneti-lehtede vaatamiseks kasutatavad programmid võrdselt saite, mis kasutavad CSS-i kaskaadlaadilehti.

Minu tähelepanekud!!! Minu isiklike tähelepanekute järgi selline uusimad versioonid brauserid nagu Opera, Mazilla ForeFox, Maxthon, Google Chrome ja Internet Explorer näitavad lehti, mis kasutavad kaskaadlaadilehti peaaegu identselt, kuid kui brauserid seda ei tee viimased põlvkonnad, siis näevad veebisaidi lehed ise teistsugused välja. Ja selleks, et teie sait näeks peaaegu kõigis brauserites ühesugune välja, on olemas spetsiaalsed tehnoloogiad kaskaadlaadilehtede määramiseks.

Alustame siis uue stiililehe loomist ja lisame selle oma dokumendile.

2. Kuidas luua astmelist css stiililehte?

Artikli selles osas loome ja ühendame kaskaadlaadilehe kõige lihtsama html-lehega.

Niisiis, teeme nii:

1. Loome kausta, mis sisaldab meie html-lehte ja kaskaadlaadilehte. Las mu kausta nimi on "css"

2. Loome lihtsa html-lehe (index.html). Kuidas seda tehakse, saad lugeda siit.

3. Nüüd loome lihtsa tekstidokumendi (sarnane html-i loomine leheküljed), nimetage seda lihtsalt style.css-iks.

Selle tulemusena peaksite saama selle:

See on kõik, fail, mis sisaldab css-stiile, on valmis.

Nüüd ühendame loodud stiililehe failiga index.html.

3. Kuidas ühendada kaskaadlaadilehe css?

Nii et stiililehe ühendamiseks html-lehega peate failis index.html olema märgendis lisa silt:

Siin atribuudis href="style.css" CSS-stiilidega faili tee on määratud. Sel juhul on css ja index.html fail samas kaustas.

Näiteks kui meie failil index.html oli järgmine kood:

Tähtis!!! Muide, ärge unustage Notepadis faili index.html salvestamisel määrata kodeeringuks 1251 (ANSI-kirillitsa). Sest kui te seda ei tee ja faili muus kodeeringus ei salvesta, kuvab brauser teile tekstide asemel "doodle".

Kui kõik on õigesti tehtud ja salvestatud, näete brauseris järgmist:

See on kõik, fail index.html on loodud ja sellega on ühendatud ka css stiililehed.

Nüüd kontrollime css-laadilehtede tööd.

Niisiis, alustame kõige lihtsamast ja määrame sildi uus stiil, mis määrab html-lehe taustapildi, lehe taustavärvi (kui lehe külastaja brauseris on pildid keelatud), ülemise ja alumise veerise, vaikefondi, selle suuruse ja värvi.

Taustapildi määramiseks peate selle meie failidega kaustas märkima.

Laadige alla arhiiv bg.zip, pakkige see lahti ja asetage fail bg.jpg kausta css. Sul peaks olema midagi sellist:

Nüüd määrake sildi stiil html-dokumenti, peate stiililehele kirjutama järgmise:

body ( background-image:url(bg.jpg); background-color:#f6f6f6; margin-top:0px; margin-bottom:0px; font-family:Verdana; font-size:12px; color:#000066; )

keha (...) - märgendi css-stiilide määramine

background-image:url(bg.jpg); - taustpilt, kus parameeter url(...jpg) määrab täis tee taustaks olevale pildile

taustavärv:#f6f6f6; - dokumendi keha taust (silt ). See atribuut on lubatud, kui külastaja brauseris on pildid keelatud

margin-top:0px; - kaugus dokumendi põhiosast brauseri ülaossa. Sel juhul määras Cascading Style Sheets css vahekauguseks 0 px.

margin-bottom:0px; - kaugus dokumendi põhiosast brauseri alaosani. Sel juhul määravad kaskaad-css-laadilehed vahekauguseks 0 pikslit

fondiperekond: Verdana; - dokumendi vaikefondi määramine

fondi suurus: 12 pikslit; - dokumendi fondi suurus 12 pikslit

värv:#000000; - teksti värv. Sel juhul määravad css-i stiililehed fondi värviks tumesinine.

Pärast faili style.css salvestamist näete oma brauseris järgmist.

CSS-tehnoloogiast. CSS-stiilid

Sissejuhatus CSS-i. Stiilid Stiilide rakendamise viisid: Sisemised stiilid Globaalsed stiilid Seotud/välised stiilid Olete alustanud kaskaadlaaditabelite õppimist CSS. Nii et olete hüperteksti märgistuskeelega juba tuttav HTML, kuna HTML-i tundmata pole mõtet CSS-i alustada. CSS ( Kaskaadstiililehed - kaskaadstiililehed) on tehnoloogia, mida kasutatakse stiilide abil veebilehtede kujundamiseks. CSS-i põhiidee on eraldada veebilehtede struktuur ja sisu nende kujundusest: C HTML-i kasutades luuakse leht – selle raam ja selle sisu sisestatakse. - Koos kasutades CSS-i luuakse kujundus - kujundus seatakse leheelementidele. Stiilid- see on komplekt vormindamise reeglid, rakendatakse leheelementidele, et muuta nende atribuute ja esitusparameetreid lehel: see puudutab peamiselt nende välimust ja asukohta. Stiile esindavad CSS-i omadused. Igal atribuudil on oma mõju konkreetse leheelemendi kujundusele. Mõned omadused ei kehti mõne elemendi puhul. Lehe elemendid on HTML-sildid või nende sisu. Leheelementidele stiilide rakendamiseks on kolm võimalust. I meetod – sisemised stiilid Stiil määratakse parameetri abil stiilis, mille saab lisada mis tahes HTML-i märgendile, mõjutades ainult selle sildi ja selle sisu välimust. Koodilõik Stiiliparameetri abil määratakse selle lõigu teksti stiil, määratakse selle suurus ja värv. Tulemus: Stiiliparameetri abil määratakse selle lõigu teksti stiil: määratakse selle suurus ja värv. Seda leheelementide kujundamise meetodit kasutatakse harva. Lõppude lõpuks peate leppima sellega, et määrates iga jaoks sama kujunduse lõigu leht esiteks on see töömahukas ja teiseks pole see praktiline, kuna mahu suurenemisega lähtekood, pikeneb ka lehe laadimisaeg. II meetod – globaalsed stiilid Stiil määratakse sildi abil Dokumendi päis on ühes stiilis kujundusega kõigi praeguse lehe lõikude jaoks! Ja selle lõigu jaoks määratakse kujundus individuaalselt! Ühtne disain. Tulemus: Dokumendi päis on ühes stiilis kujundusega kõigi praeguse lehe lõikude jaoks! Ja selle lõigu jaoks määratakse kujundus individuaalselt! Ühtne disain. Seda lehtede kujundamise meetodit kasutatakse juhtudel, kui neid pole palju või kui on vajadus anda saidi ühele lehele originaalkujundus selle ülejäänud paljudest sama tüüpi lehtedest. III meetod – Seotud või välised stiilid Stiile kirjeldatakse laiendiga eraldi failis .css, mida saab seostada ühe või mitme html-failiga, mõjutades nende kujundust. Kui te pole visuaalse HTML-i redigeerijaga veel tuttav Dreamweaver, siis saate css-faili loomiseks kasutada lihtsat tekstiredaktorit, mis on osa Windows OS-ist - Märkmik. Näiteks on meil html dokument – ​​fail index.html, mille kujundusele tuleb rakendada failis kirjeldatud stiile stiil.css. Selleks failid index.html Ja stiil.css tuleb siduda. Suhtlemine toimub sildi abil , mis asub dokumendi päises index.html(siltide vahel Ja ) ja millesse peate kirjutama järgmise: "laadileht"tüüp="text/css"href="stiil.css">. See rida näitab, et faili kujundusreeglid index.html võetud stiilifailist stiil.css. Atribuudi kasutamine href tag luuakse link stiilidega failile ( absoluutne või suhteline tee viilima (täpsemalt siit...) ) . Seega saate isegi teisel saidil asuva faili stiile rakendada mis tahes HTML-dokumendile. Koodilõik: "laadileht"tüüp="text/css"href="stiil.css"> Lõikude ja teise taseme pealkirjade jaoks Stiil on paika pandud. . Koodilõik stiilifailist: p(piir: #FF0000 tahke 2px; värvi: #33CC99; polsterdus: 5 pikslit} h2 (piir: #33CC99 tahke 2px; taustavärv: #FF0066; värvi: #FFFFFF; polsterdus: 5 pikslit} Tulemus: Lõikude ja teise taseme pealkirjade jaoks Stiil on paika pandud. Stiile kirjeldatakse failis style.css, mis on selle failiga seotud märgendi abil . Selle meetodi kasutamine võimaldab linkida faili stiilidega stiil.css mis tahes arvu html-failidega ja töötage nende kujundusega, redigeerides ainult ühe faili css-koodi. Mis on väga mugav!

Cascading Style Sheets ehk CSS algajatele ("õige" HTML-i töötuba)

Interneti venekeelne osa kasvab iga päevaga. Viimase aasta-paari jooksul on venekeelsete lehtede kogumaht enam kui kahekordistunud. Täna Venemaal ei üllata te selle fraasiga kedagi<домашняя страничка>või ingliskeelset sõna . Kui varem oli veebilehtede loomine väheste väljavalitute ülesanne ja Runeti avarustes valitsesid vaid tunnustatud.<киты>veebidisain, praegu teeb isegi mu kümneaastane poeg koolist vabal ajal vaikselt oma lehte, kavatsedes selle paigutada mõnele tasuta serverile (nagu narod.ru või boom.ru), mis Eelmisel aastal Neid on ka RuNetis palju. Inimesed, kes tänapäeval veebidisainiga ei tegele, on tõenäoliselt lihtsalt need, kellel pole Interneti-ühendust või kes on laisad. Paljud inimesed, olles Internetis ringi rännanud, mõtlevad varem või hiljem oma lehe loomisele. Nende jaoks on see artikkel kirjutatud.

Me räägime siin sellest<правильном>HTML algajatele, nimelt mõnede Interneti-konsortsiumi (http://www.w3.org/) poolt ametlikult heaks kiidetud lisafunktsioonide kohta. Eelkõige mõnede dünaamilise HTML-i (DHTML) pakutavate võimaluste kohta. Ja veelgi täpsemalt – kuidas kasutada CSS-i (kaskaadlaadilehti või kaskaadlaadilehti), et luua leht, mis näeb välja parem kui kasutades loodud lehekülgi.<классического>HTML, võttes samal ajal vähem ruumi ja laadides vastavalt kiiremini.

Vähesed inimesed, kes otsustavad esimest korda veebis oma kohalolekut luua, kasutavad end Notepadi või mõne muu tekstiredaktoriga nagu HomeSite. Tavaliselt mõtleb algaja järgmiselt.<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - Loon tekste MS Wordis, esitlusi MS PowerPointis, seega võtan veebilehe loomiseks sarnase programmi - MS FrontPage...> Sellise otsuse teinud äsja vermitud veebiskulptor röövib end kaks korda.

Esimest korda – veebiruumi ratsionaalse kasutamise mõttes. Fakt on see, et kõik veebilehtede visuaalsed redigeerijad, mis sisaldavad mainitud MS FrontPage'i, sisestavad sellesse loodud lehti <отсебятину>- palju täiendavaid mittevajalikke silte. Erandiks on võib-olla Macromedia Dreamweaver (mille jaoks on see saavutanud väljateenitud populaarsuse nii algajate kui ka professionaalide seas). Kuid isegi tema pole selles osas ideaalne – talle meeldib prügi lasta originaaltekst jutumärgid (enamasti täiesti ebavajalikud), samuti sisestage kõige ebasobivamatesse kohtadesse mittemurdvaid tühikumärke. Ausalt öeldes väärib märkimist, et kõik visuaalsed redaktorid annavad kasutajale võimaluse töötada loodava lehe lähtekoodiga, kuid paljude poolt nii armastatud FrontPage teeb kõik omal moel uuesti niipea, kui olete lülituda tagasi visuaalsesse režiimi.

Siit järeldub, et juba teist korda röövib algaja end just paindlikkuse ja täieliku kontrolli osas loodava lehe sisu üle – visuaalsed toimetajad ei anna samasugust loovusvabadust, mida loova lehe lähtekoodiga otse töötades. sulle andma.

Noh, asume nüüd otse asja juurde – ilusate ja väikeste veebilehtede loomine kaskaadlaadilehtede abil (in edasine tekst Ma kasutan nende lühendatud nime - CSS). Eeldatakse, et te, kallid lugejad, olles tutvust lugenud, nõustunud minuga, loobunud visuaalsetest toimetajatest, hankisite raamatu HTML-i kohta, uurisite vähemalt väikest hulka põhimärgendeid ja -atribuute ning tahate teada saada, mis on CSS ja mis see on. kasutatakse koos.

Loogiline ja füüsiline vormindamine

Klassikaline HTML-i versioon 3.2, kõige levinum Sel hetkel veebis, pakub meile vahendit dokumentide füüsiliseks vormindamiseks, mille jaoks on olemas spetsiaalsed sildid (nt sildid , , ) ja palju erinevaid atribuute (suurus, värv, kõrgus, laius jne). Veebivormingu omadused sunnivad meid neid silte ja atribuute iga uue lõigu jaoks ikka ja jälle kirjutama, mis loomulikult suurendab oluliselt lehe koodi suurust. Lisaks jääb selle vormindamismeetodi puhul dokumendi struktuuri analüüsimisel arusaamatuks, miks on see sõna paksus kirjas esile tõstetud - lihtsalt ilu pärast või tähelepanu äratamiseks Erilist tähelepanu lõppkasutaja? Kui elav inimene suudab klassikalises HTML-is veel vähemalt lehtede loogilisest ülesehitusest aru saada, siis otsingumootorite või näiteks häälbrauserite kohta seda öelda ei saa. Võtke need välja ja pange lehe struktuuri puhas loogika. Just selle tõttu<неподвластности>Loogilise analüüsi jaoks nimetati seda vormindusmeetodit füüsiliseks vormindamiseks. Seevastu loomisel uus spetsifikatsioon HTML 4.0 keskendus loogilisele vormindamisele ehk vormindamisele, mille puhul oleks dokumendi struktuur ja kujundus selgelt eraldatud. Seda vormindamismeetodit soovitab kasutada Interneti-konsortsium, kuna see pakub laiendatud võimalusi Internetist teabe otsimiseks, võimaldab teil otsingumootorite abil teavet täpsemalt struktureerida ja analüüsida ning vähendab oluliselt lehtede suurust ja nendele kuluvat aega. täielikult laadida. Dokumendi struktuuri ja kujunduse eraldamine toimub CSS-i abil.

Märkimist väärib tõsiasi, et loogilise vormindamise alged olid olemas ka klassikalistes HTML-i siltides

,

,

, loomulikult aitas kaasa dokumentide jagamisele mõningateks loogilisteks plokkideks. Kuid paljud lehe autorid kasutasid ja kasutavad neid silte ka tänini muul otstarbel: lehekujunduse ressursside nappuse tõttu kasutati näiteks pealkirjasilte, et esile tõsta lehel elemente, mis tegelikult ei olnud pealkirjad. CSS seevastu pakub piisavalt stiilitööriistu, mis võimaldavad teil täpsemalt järgida loogilisi vormindamisreegleid ja eraldada lehe struktuur selle visuaalsest esitusest.

Stiilide määramine üksikutele leheelementidele

CSS võimaldab teil määrata oma visuaalse stiili mis tahes HTML-i märgendile, sealhulgas . Kui sildi jaoks on määratud stiil , pärivad selle kõik selle konteineri märgendi sisse asetatud elemendid (lõigud, pealkirjad jne), juhuks kui nende elementide jaoks pole kohandatud stiile. Seega ei pea me enam silte kirjutama ja atribuudid värvi, suuruse jne iga lehe lõigu jaoks – lihtsalt määrake sildi jaoks kindel stiil , ja kõik lehe lõigud kuvatakse vastavalt sellele stiilile. Kuidas seda teha?

Oletame, et tahame, et kõik lõigud kuvatakse 12-punktilises Times New Romani kirjas tumerohelisena. Selleks peate määrama sildi stiiliatribuudi , määrates sellele sobiva väärtuse. Süntaks on:

12pt; värv: tumeroheline;">

Seega kuvatakse kõik lehe lõigud nii, nagu soovisime, ja kood pole siltidega ummistunud ja nende atribuudid. Kujutage ette failimahu kokkuhoidu, kui teie leht koosneb palju tekstist!

Pange tähele, et fondi stiili määramisel märkisime nime Times New Roman järel serifi stiili, mis tähendab mis tahes serifidega fonti. Kui lõppkasutaja masinasse pole installitud Times New Romani fonti, asendab brauser mis tahes saadaolevatest seriffondidest ja lehe kuva on võimalikult sarnane teie kavandatule. Lisaks on antud näide arusaadav nii IE (4.0 ja uuemad) kui ka NN (4.0 ja uuemad) jaoks. Kuigi peame kohe tegema reservatsiooni, et Netscape Navigator ei toeta kõiki CSS-i ja DHTML-i pakutavaid funktsioone ning see loomulikult ei suurenda selle fännide arvu.

Ülaltoodud näites kasutatakse stiili manustamist otse dokumendisildisse – nn tekstisisesesse stiili. Seda CSS-i HTML-failiga linkimise meetodit soovitatakse üksikjuhtudel - kui seda stiili plaanitakse rakendada ainult ühele elemendile saidi ühel lehel. Kui stiili tuleb rakendada mitmele elemendile samal lehel või mitmele lehele korraga, on soovitatavad muud meetodid CSS-i ja HTML-i linkimiseks, millest räägime järgmisena.

Stiilide määramine mitmele elemendile samal lehel – manustatud stiililehe loomine

Siiani oleme rääkinud ühe elemendi jaoks ainult ühe stiili määramisest. Nüüd õpime, kuidas luua stiililehti.

Oletame, et tahame, et kõik lehe lõigud näeksid välja nagu eelmises näites, kõik esimese taseme pealkirjad on rohelises 16-punktilises paksus kirjas Arial ja kõik teise taseme pealkirjad 14-punktilises paksus kaldkirjas kollakasroheline . Selleks peame looma sisse<голове>leheküljed (kõikjal siltide vahel Ja) manustatud stiilileht, kuhu kirjutame korraga mitu reeglit. Selleks loo stiililehe konteineri silt, mis algab avamärgendiga. Selle konteineri märgendi sees saame vabalt määratleda suvalise arvu CSS-i reegleid, mis koosnevad valijast (selle HTML-i märgendi nimi, millele reeglit rakendatakse) ja selle määratlusest (otse vormindajate komplekt), mis on suletud sulgudes. . Ülaltoodud näite süntaks on järgmine:

fondi suurus: 12pt;

värv: tumeroheline;

fondi suurus: 16pt;

fondi kaal: paks;

fondiperekond: Arial, sans-serif;

fondi suurus: 14pt;

värvus: roheline kollane;

fondi kaal: paks;

fondi stiil: kaldkiri;

Sellist CSS-i ja HTML-i linkimise viisi nimetatakse manustamiseks. Soovitatav on seda kasutada juhtudel, kui otsustate määrata teatud vormingureeglid ainult ühe saidi lehe jaoks ja teie plaani kohaselt peaksid kõik teised lehed teistsugused välja nägema.

Stiilide määramine mitmele saidi lehele korraga

Lisaks sisemisele ja manustamisele kasutatakse CSS-i ja HTML-i linkimiseks laadilehtede importimist ja linkimist. Need on loomulikult parimad viisid sama saidi mitmele (või isegi kõigile) lehtedele ühtse välimuse ja tunnetuse andmiseks. Sel juhul salvestatakse kogu stiilileht ühte faili (faililaiend peab olema standardne – .css).

Siin on näide sellise faili sisust (näiteks my.css):

fondiperekond: "Times New Roman", serif;

fondi suurus: 12pt;

värv: tumeroheline;

fondiperekond: Arial, sans-serif;

fondi suurus: 16pt;

fondi kaal: paks;

fondiperekond: Arial, sans-serif;

fondi suurus: 14pt;

värvus: roheline kollane;

fondi kaal: paks;

fondi stiil: kaldkiri;

Pange tähele: sildid faili sees stiililehti ei kasutata – .css laiend näitab brauserile selgelt, et tegemist on stiililehega. Ühte sellist faili saab linkida mitmele lehele korraga (või importida mitmele lehele korraga). Linkimise html-failis tuleb kirjutada kuhugi siltide vahele Ja järgmine rida:

See rida näitab, et lingitud fail on stiilileht (rel="stylesheet"), selle faili vorming on .css (type="text/css") ja see asub html-failiga samas kataloogis, või sellel on erinev URL (href="my.css"). Ilmselgelt saame selle rea kirjutada mis tahes (või kõigisse) meie html-failidesse. Seega määratakse ühe stiili kujundus korraga mitmele lehele.

Pange tähele, et tekstisisesed stiilid (stiilid, mis on määratud üksikute leheelementide jaoks, kasutades atribuuti style) ja manustatud stiilid (laadid, mis on määratud<голове>konteineri märgendi sees olevad lehed