Harjoittelu 2

1. Avaa tiedosto sapluuna. html. Tallenna se uudella nimellä neliö. html kansiossa public_html.

2. Kirjoita tunnisteiden väliin uusi otsikko "Taloalueet".

3. Sisältö kopioi teksti tiedostosta Taloalueet.txt kansiosta html_ ccs_2 .

4. Kirjoitamme tyylejä samaan tiedostoon tyyli. css, jonka loimme edellisellä oppitunnilla. Siksi tiedostossa neliö. html linkki tähän tyylisivuun lisäämällä tunnisteiden väliin Ja(Kuva 12)

Kuva 12

5. Muotoile otsikot tunnisteella

ja anna jokaiselle otsikolle oma luokkansa (Kuva 13).

Kuva 13

Tiedostosi neliö. html sen pitäisi nyt näyttää tältä (kuva 14).

Kuva 14

6. Tyylisivulla tyyli. css luo seuraava merkintä (Kuva 15)

Kuva 15

7. Tarkista Web-sivu selaimessasi. Tulos on kuvassa 16.

Kuva 16

8. Olet luultavasti huomannut sen meidän uusi merkintä Otsikkotyyleillä on toistuvia kuvioita kirjasinperhe: Verdana; text-align:left; kirjasinkoko: 14 pt. Tällaiset konstruktit voidaan kirjoittaa kerran ryhmittelemällä valitsimet, joihin niitä sovelletaan. Tätä varten sinun on lueteltava valitsimet pilkuilla erotettuina ja kirjoitettava sitten hakasulkeisiin yleiset ominaisuudet. Sitten otsikoiden tyylisivumme näyttää tältä (Kuva 17):

Kuva 17

Harjoittelu 3

Tiedoston jokaisen otsikon alla neliö. html on tekstiä. Muotoile kappaleita eri luokkien avulla. Käyttää eri värejä, tasaus ja kirjasintyyppi. Luokkien nimien on oltava yksilöllisiä. Ei ole suositeltavaa käyttää samoja nimiä eri valitsimille. Yksi mahdollisia vaihtoehtoja kuvassa 18:

Kuva 18

5. Tietyn elementin tunnustyyli

CSS-tunnit sisältävät niin sanottujen id-tyylien oppimista.

Mille tahansa elementille voidaan antaa tunniste id ja määritä sitten tälle elementille tyyli käyttämällä id.

Esimerkiksi:

Tyylisivutiedoston merkintä on seuraava

# testata { väri:#00 ffff}

Nyt voit yhdistää tämän tyylin mihin tahansa html-dokumentin elementtiin:

...

...

Tässä esimerkissä sana testi on tyylin nimi. Nimi voi olla mistä tahansa Latinalaiset kirjaimet, mutta sen on oltava ainutlaatuinen, ts. millään tyylisivun elementillä ei pitäisi olla enää samaa nimeä.

Harjoittelu 4

Tehdään malli nettisivujemme tulevalle menulle.

1. Avaa tiedosto sapluuna. html ja tallenna se uudella nimellä valikosta. html kansiossa public_html.

2. Tiedostosivun sisältöön valikosta. html syötä tekstiä tiedostosta valikosta. txt kansiosta html_ css_2 .

3. Muotoile tiedosto seuraavasti:

• Käytä otsikoissa "Projektikategoriat", "Arkkitehtuuriprojektien luettelo" ja "Taloalueet" -tunnistetta

  ;

• Käytä "Projektikategoriat" -luetteloa varten numeroitua luetteloa
  ;
  1. "Arkkitehtuuriprojektien luettelo" ja "Taloalue" -luetteloille, käytä ranskalaiset viivat

     4. Lisää web-sivun yläosaan logo (tiedosto logo_omatalo.gif). Tuloksen tulee vastata kuvaa 19.

     

     Kuva 19

     5. Tätä valikkoa varten teemme erillisen tyylisivun nimen alle tyyli_ valikosta. css. Linkitä tiedosto valikosta. html ja tyylilehti tyyli_ valikosta. css lisäämällä merkinnän tagien välissä Ja tiedostossa valikosta. html.

     6. Luo tyhjä asiakirja ja tallenna se nimellä tyyli_ valikosta.css kansiossasi.

     7. Käytämme id-tyylin nimeä "Projektikategoriat" -ryhmässä, joka sisältää otsikon ja numeroidun luettelon, ja "Arkkitehtuuriprojektien luettelo" -ryhmässä, joka sisältää itse otsikon ja luettelomerkityn luettelon. sininen. Nuo. koodi näyttää tältä (Kuva 20):

     

     Kuva 20

     8. Arkistossa tyyli_ valikosta. css Näiden elementtien tyyli on tummansininen Tahoma-fontilla (kuva 21):

     Kuva 21

     9. "Taloalueet"-ryhmässä, joka sisältää otsikon ja luettelomerkityn luettelon, käytämme id-tyylin nimeä ruskea. Nuo. koodi näyttää tältä (Kuva 22):

     

     Kuva 22

     10. Arkistossa tyyli_ valikosta. css muotoillaan nämä elementit Ruskea, Times-kirjasimella (kuva 23):

     Kuva 23

     11. Ja lisää toinen taustaväri menu.html-tiedostoon (Kuva 24)

     Kuva 24

     12. Tuloksena saamme seuraavan web-sivun (Kuva 25)

     

     Kuva 25

     Tämän CSS-opetusohjelman suorittamisen tuloksena sinun pitäisi luoda seuraavat tiedostot:

     • tyyli. css
       
     • tyyli_ valikosta. css
     • neliö. html
       
     • valikosta. html
       

     Voit yhdistää useita toisiinsa liittyviä CSS-ominaisuuksia yhdeksi omaisuudeksi säästääksesi aikaa ja vaivaa.

     Yksittäisten ja lyhennettyjen arvojen vertailu

     Harkitse seuraavaa marginaalisääntöä (täytön ja reunusten lyhenteet toimivat samalla tavalla):

     div.foo ( marginaali-ylä: 1 em; marginaali-oikea: 1,5 em; marginaali-ala: 2 em; margin-vasen: 2,5 em; )

     Tämä sääntö voidaan kirjoittaa lyhyemmin:

     div.foo ( marginaali: 1em 1,5em 2em 2,5em; )

     Määritetään alle neljä arvoa lyhennetylle ominaisuudelle

     Lyhennelmäarvolla voi olla vähemmän kuin neljä merkitystä alla olevan luettelon mukaisesti. Tulokset on järjestetty annettujen arvojen lukumäärän mukaan:

     Lyhenteiden hakemisto

     Rajaleikkaukset erilaisia ​​ominaisuuksia	On myös syytä mainita, että voit jopa asettaa rajan ominaisuusarvot vain yhdelle elementin reunukselle seuraavasti: reunus-vasen-leveys: 2px; reuna-vasen-tyyli: kiinteä; reuna-vasen väri: musta;
     Pikanäppäimet joillekin marginaali-, täyte- ja reunusominaisuuksille	Tämä kaikki toimii samalla tavalla kuin yllä kohdassa "Valinta yksittäisen ominaisuuden ja lyhennetyn arvon välillä" on esitetty.
     Fontin lyhenteet	Yhdellä pikavalintarivillä voit määrittää fontin koon, painon, tyylin, perheen ja rivin korkeuden. Harkitse esimerkiksi seuraavaa koodia: fonttikoko: 1,5 em; linjan korkeus: 200 %; fontin paino: lihavoitu; kirjasintyyli: kursivoitu; kirjasinperhe: Georgia, "Times New Roman", serif Voit määrittää tämän kaiken seuraavalla rivillä: fontti: 1.5em/200% lihavoitu kursiivi Georgia"Times New Roman",serif;
     Pikasana taustaa varten	Yhden kanssa CSS-merkkijonot voit määrittää taustavärin, taustakuva, kuvan toisto ja kuvan sijainti. Otetaan seuraava koodi: taustaväri: #000; taustakuva: url(image.gif); taustatoisto: ei toistoa; tausta-asento: ylhäällä vasen; Tämä voidaan esittää seuraavalla lyhenteellä: background:#000 url(image.gif) ei toistoa vasemmassa yläkulmassa;
     Listojen lyhenteet	Tässä tapauksessa samanlainen tarina luetteloiden ominaisuudet voit asettaa ominaisuusarvot luettelomerkin tyypille, sijainnille ja kuvalle yhdellä rivillä. Otetaan seuraava koodi: lista-tyyli-tyyppi: ympyrä; lista-tyylinen sijainti: sisällä; list-style-image: url(bullet.gif) ; Tämä vastaa seuraavaa: listatyyli: ympyrä URL-osoitteen sisällä (bullet.gif);

     CSS:n käyttäminen HTML:ään

     On kolme tapaa CSS:n käyttäminen HTML-dokumenttiin:

     • merkkijono;
     • sisäkkäinen;
     • ulkoiset tyylisivut.

     Jousetyylit

     Voit käyttää tyylisivua elementtiin käyttämällä style-attribuuttia seuraavasti:

     Tämän ominaisuuden sisällä kaikki CSS-ominaisuudet ja niiden merkitykset.

     Sisäisten tyylien etuna on, että selain pakotetaan käyttämään näitä asetuksia. Kaikki muut tyylit, jotka on määritelty muissa tyylisivuissa tai jopa sisäkkäin asiakirjan otsikko, ohitetaan nämä tyylit.

     Sisäisten tyylien suuri ongelma on, että ne tekevät tyyleistä paljon vaikeampaa ylläpitää. CSS:n käyttö Tarkoituksena on erottaa asiakirjan esitys sen rakenteesta, mutta tekstin sisäiset tyylit tekevät täsmälleen päinvastoin – hajanaiset esityssäännöt koko asiakirjassa.

     Ylläpitoongelmia lukuun ottamatta et saa mitään hyötyä CSS:n olennaisesta osasta: kaskadista.

     Sisäkkäiset tyylit

     Sisäkkäiset tyylisivut sijoitetaan asiakirjan päähän tyylielementin sisällä, kuten seuraavalla esimerkkisivulla:

     Sisäkkäisten tyylisivujen etuna on, että sinun ei tarvitse lisätä tyylimääritettä jokaiseen kappaleeseen - voit muokata ne kaikki yhdellä määritelmällä. Tämä tarkoittaa myös sitä, että jos sinun on muutettava ulkomuoto Kaikki kappaleet, tämä voidaan tehdä yhdessä paikassa, mutta kaikki tämä rajoittuu kuitenkin yhteen asiakirjaan.

     Ulkoiset tyylisivut

     Ulkoiset tyylisivut tarkoittavat kaikkien CSS-määritelmien sijoittamista erilliseen tiedostoon, sen tallentamista CSS-tiedostotunnisteella ja sen soveltamista HTML-dokumentteihin elementin avulla. linkki asiakirjan otsikossa. Esimerkiksi:

     Ulkoisten tyylisivujen avulla voit tallentaa kaikki tyylimääritykset yhteen tiedostoon. Tämä tarkoittaa, että voit tehdä muutoksia koko sivustoosi muuttamalla vain yhtä . nettiselain se voi ladata sen kerran ja tallentaa sen sitten välimuistiin kaikille muille siihen viittaaville asiakirjoille, mikä vähentää ladattavien tietojen määrää.

     Tuodaan tyylisivuja

     On myös toinen tapa tuoda ulkoisia tyylisivuja HTML-tiedostoihin - @import-käsky. Se lisätään sisäkkäiseen tyylitaulukkoon samalla tavalla kuin yllä näkyvä sisäkkäinen CSS-koodi. Syntaksi on seuraava:

     CSS:n kaksi peruskäsitettä ovat perinnöstä Ja peräkkäin. Perintö liittyy siihen, kuinka elementti sisään HTML-merkintä perii esi-isiensä elementtien ominaisuudet (joihin se sisältyy) ja välittää ne jälkeläisilleen, kun taas peräkkäin käsittelee asiakirjaan sovellettavia CSS-ilmoituksia ja sitä, kuinka ristiriitaiset säännöt ohittavat toisensa.

     Perintö

     Perintö CSS:ssä on mekanismi, jolla tietyt ominaisuudet siirretään esi-isiltä elementeiltä sen jälkeläisille elementeille.

     Perinnön avulla voit esimerkiksi määrittää fontin ominaisuudet html- tai body-elementeille, ja kaikki muut elementit perivät ne. Voit määrittää tausta- ja etualan värit tietylle säilöelementille, ja etualan värit perivät automaattisesti kyseisen säilön jälkeläiset elementit.

     Jokainen elementti sisällä HTML-dokumentti perii kaikki esi-isänsä perityt ominaisuudet, lukuun ottamatta juurielementtiä (html), jolla ei ole esi-isä.

     CSS

     CSS on mekanismi, joka ohjaa lopputulosta, kun samaan elementtiin sovelletaan useita ristiriitaisia ​​CSS-ilmoituksia. On olemassa kolme pääkäsitettä, jotka hallitsevat CSS-ilmoitusten käyttöjärjestystä:

     • Merkitys
     • Spesifisyys
     • Tilaus lähdekoodi

     Merkitys on merkittävin. Jos kahdella ilmoituksella on sama merkitys, sääntöjen erityispiirteet määrää, kumpaa niistä sovelletaan. Jos säännöillä on sama spesifisyys, lähdekoodin järjestys ohjaa tulosta.

     Merkitys

     Merkitys CSS-ilmoitus riippuu siitä, missä se on määritelty. Ristiriitaiset ilmoitukset otetaan käyttöön seuraavassa järjestyksessä, ja myöhemmät ohittavat aiemmat:

     • Käyttäjäagentin tyylisivut
     • Säännölliset ilmoitukset käyttäjän tyylisivuilla
     • Säännölliset ilmoitukset tekijän tyylisivuissa
     • Tärkeitä ilmoituksia tekijän tyylisivuissa
     • Tärkeitä ilmoituksia käyttäjän tyylisivuissa

     Käyttäjäagentin tyylisivu on selaimen sisäänrakennettu tyylisivu. Jokaisella selaimella on omat oletussääntönsä, jotka määrittävät, kuinka eri HTML-elementtejä hahmonnetaan, jos käyttäjä tai sivun suunnittelija ei ole määrittänyt tyyliä. Esimerkiksi vierailemattomat linkit näkyvät yleensä sinisinä ja alleviivattuina.

     Käyttäjän tyylisivu on käyttäjän määrittämä tyylisivu. Kaikki selaimet eivät tue käyttäjien tyylisivuja, mutta ne voivat olla erittäin hyödyllisiä erityisesti käyttäjille, joilla on tietyntyyppisiä toimintahäiriöitä. Esimerkiksi lukihäiriöstä kärsivällä henkilöllä voi olla tyylisivu, joka määrittää tietyt fontit ja värit, jotka helpottavat lukemista.

     Tekijän tyylisivu on se, mitä yleisesti kutsutaan "tyylisivuksi". Tämä on tyylisivu, jonka asiakirjan tekijä (tai todennäköisemmin sivuston suunnittelija) kirjoitti ja liitti (tai sisällytti).

     Jotta tavallisesta ilmoituksesta tulee tärkeä, sen perään tulee laittaa !tärkeä käsky. Kuten näet, tärkeät ilmoitukset käyttäjän tyylisivulla menevät päällekkäin kaiken muun kanssa, mikä on järkevää.

     Selaimen oletusesitys on käytössä vain, jos mikään käyttäjän tyylisivu tai tekijän tyylisivusäännöt eivät ohita näitä määrityksiä, koska käyttäjäagentin tyylisivulla on alhaisin prioriteetti.

     Spesifisyys

     Spesifisyys on määritelty mittana siitä, kuinka tarkka jonkin säännön valitsin on. Matalatarkkuuksinen valitsin voi kohdistaa useita elementtejä (kuten *, joka vastaa asiakirjan jokaista elementtiä), kun taas korkean tarkkuuden valitsin voi kohdistaa vain yhden elementin sivua kohden (kuten #nav, joka vastaa vain elementtiä, jolla on tunnus vastaava nav).

     Valitsin spesifisyys voidaan laskea helposti. Jos kaksi tai useampi mainos on ristiriidassa tämä elementti, ja kaikilla ilmoituksilla on sama merkitys, niin tarkimman valitsimen sisältävä ilmoitus on säännössä ensisijainen.

     Spesifisyydellä on neljä komponenttia, jotka voidaan merkitä a, b, c ja d. Komponentti a on erottelevin, d on vähiten.

     • Komponentti määritellään hyvin yksinkertaisesti: se on 1 tyylimääritteen määrityksessä, muuten se on 0 .
     • Komponentti b on id-valitsimien lukumäärä valitsimessa (ne, jotka alkavat Kanssa#).
     • Komponentti c on numero attribuuttien valitsimet, mukaan lukien luokan ja pseudoluokan valitsimet.
     • Komponentti d on elementtityyppien ja pseudoelementtien lukumäärä valitsimessa.

     Pienellä matematiikalla voit saada näiden neljän komponentin merkkijonon, joka määrittää minkä tahansa säännön spesifisyyden. Tyyli-attribuutissa olevissa CSS-määrityksessä ei ole valitsinta, joten niiden spesifisyys on aina 1,0,0,0 .

     Taulukossa on esimerkkejä.

     Valitsin	a	b	c	d	Spesifisyys
     h1	0	0	0	1	0,0,0,1
     .foo	0	0	1	0	0,0,1,0
     #baari	0	1	0	0	0,1,0,0
     html>head+body ul#nav *.home a:link	0	1	2	5	0,1,2,5

     On syytä huomata, että yhdistävät merkit (kuten >, + ja

     1. Mitä ovat CSS Cscading Style Sheets?

     Hei rakkaat lukijani. Päätin avata sivustosta uuden osan, joka on omistettu CSS-sarjan tyylisivujen työskentelylle.

     Niin, mitä ovat CSS-tyylisivut?

     css(Englanti) CSS Style Sheets — peräkkäiset tyylisivut) on kieli, jolla kuvataan sivunkuvauskielellä kirjoitetun asiakirjan ulkoasua.
     Jotta aloittelijan olisi helpompi ymmärtää, CSS-tyylisivut on suunniteltu luomaan kauniita, helposti muokattavia malleja html-sivustojen sivuille.

     CSS-tyylilevyjä käytettiin ensimmäisen kerran viime vuosisadan 90-luvulla. Mutta aluksi ne eivät olleet niin suosittuja kuin nyt, koska eri selaimet CSS:ää käyttäneet HTML-sivut havaittiin ja näytettiin eri tavalla.

     Jonkin ajan kuluttua sivuston rakentajien työn yksinkertaistamiseksi selaimia alettiin "sopeuttaa" samoihin standardeihin. Nykyään lähes kaikki Internet-sivujen katseluun käytetyt ohjelmat toistavat yhtä paljon CSS-tyylisivuja käyttävät sivustot.

     Omat havainnot!!! Henkilökohtaisten havaintojeni mukaan sellainen uusimmat versiot selaimet, kuten Opera, Mazilla ForeFox, Maxthon, Google Chrome Ja Internet Explorer Sivut, jotka käyttävät peräkkäisiä tyylisivuja, näytetään lähes identtisesti, mutta jos selaimet eivät sitä tee viimeiset sukupolvet, silloin itse verkkosivuston sivut näyttävät erilaisilta. Ja jotta sivustosi näyttäisi samalta lähes kaikissa selaimissa, on olemassa erikoistekniikoita peräkkäisten tyylisivujen asettaminen.

     Joten aloitetaan luominen uusi pöytä tyylit ja liitä se asiakirjaamme.

     2. Miten luodaan CSS-tyylisivu?

     Tässä artikkelin osassa luomme ja yhdistämme CSS-tyylisivun yksinkertaisimpaan html-sivuun.

     Tehdään siis näin:

     1. Luomme kansion, joka sisältää html-sivumme ja CSS-tyylisivumme.
     Olkoon kansioni nimeltä "css"

     2. Me luomme yksinkertainen html sivu (index.html). Voit lukea kuinka tämä tehdään.

     3. Nyt luomme yksinkertaisen tekstidokumentin (samanlainen kuin html:n luominen sivut), kutsu sitä vain style.css:ksi.

     Tämän seurauksena sinun pitäisi saada tämä:

     Siinä kaikki, css-tyylit sisältävä tiedosto on valmis.

     Yhdistetään nyt luotu tyylisivu index.html-tiedostoon.

     3. Kuinka yhdistää CSS-tyylisivu?

     Joten, jotta voit yhdistää tyylisivun html-sivuun, sinun on indeks.html-tiedostossa -tunnisteessa lisää merkintä:

     Tässä attribuutissa href="tyyli.css" polku itse tiedostoon on määritetty css-tyylejä. Tässä tapauksessa css- ja index.html-tiedostot ovat samassa kansiossa.

     Jos esimerkiksi index.html-tiedostossamme oli seuraava koodi:

     Tärkeä!!! Muuten, älä unohda asettaa koodaukseksi 1251 (ANSI-kyrillinen), kun tallennat index.html-tiedoston Muistioon. Koska jos et tee tätä ja tallenna tiedostoa toisella koodauksella, selain näyttää sinulle "doodle" tekstien sijaan.

     Jos kaikki on tehty ja tallennettu oikein, näet selaimessa seuraavan:

     

     Siinä kaikki, index.html-tiedosto on luotu ja siihen on myös yhdistetty css-tyylisivut.

     Tarkastellaan nyt css-tyylisivujen toimintaa.

     Aloitetaan siis yksinkertaisimmasta asiasta ja asetetaan tunniste uusi tyyli, joka määrittelee html-sivun taustakuvan, sivun taustavärin (jos kuvat ovat poissa käytöstä vierailijan selaimessa), ylä- ja alamarginaalit, oletusfontin, sen koon ja värin.

     Jotta voit asettaa taustakuvan, sinun on merkittävä se tiedostojemme kansioon.

     Ja jos aiot oppia luomaan ammattimaisia ​​verkkokauppoja Magento-moottorilla, niin tämä on helpoin tehdä tekijäni videokurssin avulla.

     Mihin tyylisivut ovat?

     Cascading style sheets tai CSS (englanninkielisestä Cascading Style Sheetsistä) ovat seurausta HTML-kehitys ja antaa meille mahdollisuuden siirtyä tiedon esittämisen seuraavalle tasolle. Tyylisivuilla voit erottaa sivun semanttisen sisällön sen suunnittelusta.

     Kuten muistamme, HTML-standardin ensimmäiset versiot eivät tarjonneet mitään keinoja hallita tiedon ulkoasua. Yleisellä hypertekstin käsitteellä pyrittiin tuomaan tietoa minkä tahansa tekstin toistamiseen kykenevän laitteen saataville. Merkinnässä suositeltiin käyttää vain loogisia tunnisteita, jotka määrittelevät otsikot, alaotsikot, luettelot, kappaleet, lainaukset jne. - eli ne elementit, jotka muodostavat asiakirjan rakenteen. Ulkonäön tulkinta jäi täysin terminaaliterminaalin omalletunnolle.

     Paljon on kuitenkin muuttunut sen jälkeen, ja HTML-standardi on menettänyt alkuperäisen harmoniansa. Varhain Netscape lisäsi "parannettuja tunnisteita", jotka mahdollistivat paremman hallinnan esitetyn tiedon ulkoasussa. Innovaatio tarttui, ja kaikista Netscape-laajennuksista tuli de facto standardi. Sitten Microsoft teki samoin. Kun he ymmärsivät sen, HTML oli kauhea sekoitus loogisia ja suunnittelutageja, yhteensopimattomia laajennuksia, ja se lakkasi täysin vastaamasta alkuperäistä käsitettä - esittämästä tietoa millä tahansa laitteella riippumatta sen tiedonantoominaisuuksista.

     Sitten aloitettiin laajamittainen standardointi. Tämän seurauksena syntyi HTML 3.2 -standardi. Hän ei ollut vallankumouksellinen, vaan laittoi kaikki innovaatiot paikoilleen ja kehitti yleisiä suosituksia selainvalmistajille. Vallankumoukselliset muutokset otettiin käyttöön uudessa standardissa - HTML 4.0 tai, kuten sitä kutsuttiin, Dynaaminen HTML. Tasot, tyylisivut ja universaalit objektimalli selain.

     Uusi standardi yritti palata HTML-konseptin alkuperään. Neljäs versio, kuten ensimmäinen, suosittelee sivujen luomista siten, että niitä voidaan toistaa millä tahansa laitteella - olipa se sitten 21" näyttö tai pieni. mustavalkoinen näyttö kännykkä.

     Miten tiedon ulkonäön esittämisen ongelma ratkaistiin? Tässä on vallankumouksellinen lähestymistapa. On suositeltavaa laittaa kaikki suunnittelu ulkoiseen tyylitiedostoon. Pääsivu sisältää vain tietoa ja linkkejä tarvittaviin tyyleihin.

     Kun sivu näytetään tietty laite on käytettävä sopivaa tyylitaulukkoa. Matkapuhelimelle ja tietokonenäytölle niiden on tietysti oltava erilaisia. Ensimmäisessä tapauksessa käytämme minimaalista suunnittelua, jonka avulla voimme esittää tiedot optimaalisesti ja kompaktimmin. Toisessa tapauksessa meillä on käytettävissämme kaikki runsas fontti- ja värisuunnittelu.

     Tyylisivu on kirjoitettava vain kerran, kun luodaan sivusto jokaiselle laitteelle, jolla tietoja on tarkoitus näyttää. Lisäksi tyylisivu voi olla sama koko sivustolla. Ja siksi samoja tyylikuvauksia ei tarvitse toistaa jokaisella sivulla.

     Kaikkien tyylitietojen sijoittaminen yhteen ulkoiseen tiedostoon avaa muita hyödyllisiä ominaisuuksia- Muutamalla vain yhden (!) tyylitiedoston sisältöä voimme muuttaa koko sivuston ulkoasun muutamassa sekunnissa. Lisäksi muita muutoksia ei tarvita. Tämä on tietysti totta vain, jos sivusto on alun perin suunniteltu oikein.

     Kun olet ymmärtänyt hieman teoriaa, siirrymme käytäntöön ja aloitamme tyylitaulukon liittämisestä HTML-tiedostoon.

     Tyylisivujen yhdistäminen
     Tämän tehtävän suorittamiseksi voimme käyttää yhtä kolmesta ehdotetusta menetelmästä:

     ulkoinen tiedosto

     kuvaus otsikkoosiossa

     sisäinen kuvaus

     Aloitetaan yksinkertaisimmasta, niin sanotusta tekstin sisäisestä kuvauksesta tai tunnisteesta:

     Tyyli ohittaa tämän tekstin

     Lisätyyliattribuutin avulla voimme määrittää mihin tahansa tunnisteeseen tarvitsemamme tyyliparametrit. Tämä on eniten helppo tie, ja se toimii vain yhden tunnisteen sisällä. Mutta kuvittele kuinka paljon tiedoston koko kasvaa ja kuinka hankalaa sen korjaaminen on, jos määritämme tyylin jokaiselle tunnisteelle. Tämä menetelmä ei eroa liikaa esimerkiksi ulkonäön kuvaamisesta suoraan tunnisteen avulla.

     On paljon helpompaa määrittää kaikki etukäteen vaaditut tyylit suunnittele ja kiinnitä ne sitten sopiviin tunnisteisiin. Tämä on toinen tapa - kuvaus otsikossa. Sen vaikutus ulottuu koko sivulle. Tyylit määritellään luokkien avulla, jotka ovat luetteloita, joissa on määritelty kaikki tarvittavat suunnitteluparametrit.

     Tätä menetelmää käytettäessä tyylin kuvaus on sijoitettava otsikko-osioon:

     
     ....
     
     

     Nyt näitä tyylejä voidaan käyttää missä tahansa html-koodissa. Tätä varten käytetään seuraavaa rakennetta:

     Tämä teksti on kirjoitettu otsikotyyliin

     Tämä teksti on kirjoitettu punaisella

     Kuten näet, kaikki ei ole niin monimutkaista. Tärkeintä on ymmärtää perusperiaatteet. Uusien luokkien määrittämisen lisäksi meillä on myös mahdollisuus ohittaa vakiotunnisteet. Esimerkiksi tag

     Nyt kaikki tunnisteiden sisällä oleva teksti näyttää tämän tyylin määrittämältä. Tämä on erittäin kätevää, ja sen avulla voit helposti mukauttaa olemassa olevia sivuja käyttämään tyylejä. Lisäksi tämä pienentää jonkin verran tiedoston kokoa tarpeettomien luokkaattribuuttien puuttuessa.

     Ja lopuksi, kolmas tapa on siirtää tyylien kuvaus ulkoiseen tiedostoon. Sen vaikutusalue ulottuu kaikkiin tiedostoihin, joihin kuvaus sisältyy. Tämä menetelmä vastaa parhaiten HTML 4.0:n konseptia. Jos meidän on muutettava sivuston ulkonäköä, vain tämän yhden tiedoston säätäminen riittää. Vertaa sitä aikaisempiin menetelmiin. Yhdessä niistä joudut muuttamaan kuvausta jokaisella sivulla, ja toisessa vielä enemmän - jokaisen tagin vieressä, mikä ei tietenkään ole ollenkaan inspiroivaa.

     Miten ulkoinen tiedosto upotetaan? Ensin luodaan tyylitiedosto, jossa on kuvaus kaikista tarvitsemistamme luokista (mystyle.css):

     Otsikko (tekstin tasaus: keskellä; fontin koko: 27 pt;)
     .red ( väri: punainen; )
     p (tekstin tasaus: keskellä; fontin koko: 12 pt;)

     
     ....
     
     ....
     

     Tämä on eniten kätevä tapa, ja on suositeltavaa käyttää sitä päätyylisivuna.

     Miksi sanoin "pää"? Tosiasia on, että käytännössä sinun on käytettävä kaikkia kolmea menetelmää, ja tässä tulee esiin tyylien "kaskadi". Mutta puhumme tästä ensi kerralla.

     Jatketaan keskustelua tyylisivujen käytöstä. Tarkastellaan ensin peräkkäisiä tyylejä ja siirrytään sitten tarkastelemaan syntaksia ja yleisimpiä tyylejä luotaessa käytettyjä parametreja.

     CSS-tyylit
     Joten ensin selvitetään, miksi tyylejä kutsutaan peräkkäisiksi. Hyvä lukija, haluan vielä kerran antaa sinulle tapoja toteuttaa tyylejä sivulla:

     käyttämällä erillistä tyylitiedostoa ja lisäämällä se tunnisteen avulla

     tyylin kuvaus asiakirjan otsikossa

     Tyylin käyttäminen parametrina tagissa.

     Cascading tarkoittaa, että tyylit voidaan ohittaa. Yllä oleva luettelo tavoista toteuttaa tyylejä noudattaa ohitusjärjestystä. Alavirran menetelmä voi ohittaa korkeamman menetelmän.

     Esimerkiksi määritimme ulkoisessa tyylitiedostossa tunnisteen tekstin

     on kirjoitettava 10 pisteen fontilla. Mutta jos sivun otsikossa ilmoitamme lisäksi, että sama teksti on tagissa

     tulee kirjoittaa 12 pisteen fontilla, niin teksti näkyy juuri siinä koossa - ts. sivun otsikon tyyli ohitti ulkoisen tiedoston tyylin.

     Mitä varten se on? Ai tämä on erittäin hyödyllinen asia. Ja nyt näytän tämän erityisellä esimerkillä. Oletetaan, että seuraava tyyli on määritetty kaikille sivumme otsikossa oleville linkeille:

     
     

     Ja siksi kaikki hyperlinkkeinä toimivat tekstit muuttuvat automaattisesti punaisiksi eikä niitä enää alleviivata. Joten päätimme merkitä tekijänoikeudet sivun loppuun, mutta tehdä siitä ei kovin havaittavissa, jotta emme kiinnittäisi huomiota siihen. Mutta siitä huolimatta haluamme tekijänoikeuden olevan myös linkki. Meidän tarvitsee tehdä tämä vain yhdessä paikassa sivulla ja määritellä tämä lisäluokka sopimatonta. Tässä tapauksessa peräkkäiset tyylit tulevat avuksemme. Riittää, kun ohitat linkin värin paikallisesti:

     Tekijänoikeus (C)
     1998-2001 Cherry-Design

     Teimme tämän käyttämällä style-parametria, ja kuten muistat, se toimii vain tunnisteen sisällä, jossa se on määritetty. Mikä on juuri sitä mitä tarvitsemme.

     Olet todennäköisesti huomannut sen yllä olevassa esimerkissä, jonka esittelin uusi tunniste. Se on suunniteltu erityisesti tällaisiin tapauksiin. Se vain määrittelee alueen, johon voimme soveltaa tyyliä. Tämä on erittäin kätevä tunniste, koska... ei lisää tarpeettomia täyteyksiä ennen tai jälkeen itsensä (eli tyhjää pystysuoraa tilaa), kuten tunniste tekee

     Missä tunnisteissa on parempi määrittää tyylit luokan avulla? Useimmiten tähän käytetään jotakin seuraavista malleista:

     Jotain

     
     
     Jotain
     
     Jotain

     Tag

     samanlainen , mutta vain sillä erolla, että se tekee rytmin ennen ja jälkeen itsensä (täsmälleen sama kuin

     ). Mutta sivun pääsisällön kirjoittamiseen käytetty tekstityyli on parasta tehdä määrittämällä tunniste uudelleen

     Eikä määrittelemällä erillistä luokkaa.

     Ja pieni lisäys, joka liittyy oikeaan näyttöön molemmissa selaimissa - jos käytät taulukkoasettelua verkkosivuston suunnittelussa, sinun on määritettävä päätekstin tyyli paitsi tagissa

     , koska Netscape kieltäytyy ehdottomasti perimästä ennen taulukkoa määritettyjä tyylejä.

     Käsiteltyään kaskadijärjestelmää, puhutaan syntaksista.

     CSS-syntaksi
     Kunkin luokan kuvaus tehdään käyttämällä seuraavaa rakennetta:

     Pieni (kirjasinkoko: 9 pt;)

     Ensin ilmoitetaan luokan nimi - se voi olla mielivaltainen, mutta on suositeltavaa silti antaa merkityksellinen nimi. Seuraavaksi kaikki tarvittavat parametrit tästä luokasta. Parametrit erotetaan toisistaan ​​puolipisteillä. Tässä on toinen esimerkki, joka käyttää pidempää kuvausta:

     Pieni (fontin koko: 9 pt; väri: #eeeeee; tekstin tasaus: keskellä; )

     Huomaa, että molemmissa konstruktioissa aloitin luokan nimen pisteellä ja määritin siten yleisluokan, ts. joka voidaan liittää mihin tahansa tunnisteeseen. Ja tämä tehdään käyttämällä seuraavaa rakennetta:

     
     

     Koska on olemassa universaaleja luokkia, ehkä on joitain muita? Aivan oikein, on olemassa myös ns. tag-luokkia:

     p.small (fontin koko: 9 pt;)

     Tällä tavalla määritetty luokka toimii vain siinä tunnisteessa, jolle se on tarkoitettu, ja se jätetään huomiotta kaikille muille:

     Tämä teksti näytetään pienellä tyylillä

     
     

     Voimme määrittää parametreja ei vain yhdelle tunnisteelle, vaan myös usealle kerralla. Tätä varten tyylimäärittelyssä riittää, että luet ne pilkuilla erotettuina:

     p, td (fontin koko: 9 pt; väri: vihreä;)

     Tätä tekniikkaa kutsutaan ryhmittelyksi, ja tässä tapauksessa olemme määritelleet

     sama koko ja tekstin väri.

     Ohitustapauksessa olemassa olevat tunnisteet, tyylin kuvauksessa et voi määrittää kaikkia parametreja, vaan vain niitä, joita haluamme muuttaa. Kaikki muut parametrit ottavat oletusarvonsa erilaisia ​​tunnisteita ovat erilaisia.

     Pseudo-luokat
     CSS:ssä on sellainen asia kuin pseudoluokka. Toisin kuin tavallinen luokka, pseudoluokan vaikutus ei koske koko tekstiä, johon tätä tyyliä sovelletaan, vaan vain osaa siitä ja on mahdollista vain tietyssä tilassa. Selventääksesi asiaa, tarkastellaan vaikutusta, jossa linkit alleviivataan vain, kun viet hiiren niiden päälle. Vaikutus on melko yleinen, ja se voidaan havaita myös tällä sivustolla. Tässä on fragmentti tyylisivusta, jonka avulla voit saavuttaa yllä olevan vaikutuksen:

     a (tekstikoristelu: ei mitään; )
     a:hover (tekstin koristelu: alleviivaus; )

     Ylärivi on ohitus tavallinen tunniste , joka kieltää linkkien alleviivauksen, mutta alin on tyylimäärittely hover-pseudo-luokasta, joka kuvaa linkin tyyliä, kun osoitin on sen päällä.

     Ja tässä on toinen esimerkki pseudo-luokasta - pudotuskorkin määrittäminen kappaleen alussa:

     p:first-letter ( kirjasinkoko: 200 %; fontin paino: lihavoitu; )

     Huomaa, että molemmissa tapauksissa tyyli vaikuttaa joko tiettyyn tilaan (käyttäjä aikoo napsauttaa linkkiä) tai tekstin osaan (vain kappaleen ensimmäinen kirjain muuttuu). Tämä on pseudo-luokkien merkitys.