Luoda css-tiedosto yhtä helppoa kuin html. Mene vain mihin tahansa tekstieditori, esimerkiksi Muistio, ja luo siellä tiedosto css laajennus. Annetaan se hänelle vakionimi - tyyli.css.

Onnittelut! Tiedostosi on valmis. Se on toistaiseksi tyhjä, mutta myöhemmin se voidaan täyttää asiaankuuluvalla sisällöllä. Alla tarkastellaan perusasiat - tapoja yhdistää css.

Ulkoiset tyylisivut

Ehkä ulkopuolinen CSS- tämä on oikea ja optimaalinen ratkaisu sivustoa varten. Sinun tarvitsee vain ilmoittaa sivulla linkkitunniste(Luotu muiden tiedostojen yhdistämiseksi) linkillä tyylisivulle ja tyylit yhdistetään!

Huomio

Linkkitunnisteen sisältävä rivi olettaa, että style.css on samassa hakemistossa (kansiossa) kuin tämä tiedosto.

Linkkitunnisteen sisältävä rivi olettaa, että style.css on samassa hakemistossa (kansiossa) kuin tiedostomme (esimerkiksi index.html). Jos css-tiedoston sijainti on muuttunut, href-attribuuttia on muutettava vastaavasti. Usein esimerkiksi tapahtuu, että luomiseen käytetään CSS:ää erillinen kansio(mikä on kätevää ja loogista). Mutta sitten href-attribuutti näyttää erilaiselta:

Sisäiset tyylisivut

Joskus voit nähdä toisen css-rakenteen, joka on lisätty suoraan html-tunniste

Teksti sininen, koko 14 pikseliä

Etuna on, että voit heti asettaa tyylejä samaan tiedostoon. Merkittävä haittapuoli on, että määritetyt ominaisuudet vain osoitetaan tietty elementti, V tässä tapauksessa kohta. Kaikki edut siis etäyhteys omaisuudet menetetään.

Sisäänrakennetut tyylisivut

On helpompikin tapa CSS-lisäkkeet. Jos et halua luoda erillistä CSS-tiedostoa, vaan tarvitset vain paria ominaisuutta, tämä vaihtoehto on sopiva. Aloitetaan heti esimerkillä

Ensimmäisen tason otsikko

Toisen tason otsikko, sininen

Kolmannen tason otsikko

Esimerkistä näet, että kirjoitimme tyylit juuri ennen sulkemista päämerkki avaus- ja sulkemistunnisteiden sisällä tyyli. Oikeastaan ​​tag tyyli voidaan myös kirjoittaa kehon, mutta jos haluat, että viestisi näyttävät jäsennellyiltä ja että henkilö, joka näkee tämän koodin sinun jälkeensi, ei tartu päähän, on parempi kirjoittaa tyylejä yhteen paikkaan.

Sisäänrakennetun tyylisivun haittapuoli on myös ilmeinen - tällaiset merkinnät on tehtävä jokaiselle sivulle erikseen.

"Connecting CSS" -sarjan kolmas artikkeli on omistettu ulkoiset tyylisivut. Ulkoisten pöytien käyttö on joustavin, tehokkain, kätevin ja oikea tapa yhdistä HTML ja .

Menetelmän ydin on, että CSS sijoitetaan erilliseen tiedostoon (tai tiedostoihin). Ja HTML määrittää, mitä CSS-tiedostoja siihen on käytettävä.

Esittelyssä ulkoinen pöytä

Ulkoinen tyylisivu on tavallinen tekstitiedosto, jolla on css-tunniste. Yleisesti ottaen tämä laajennus ei ole pakollinen, mutta se on erittäin suositeltavaa välttää ongelmia joissakin erityisen vanhoissa selaimissa.

Tyylisivutiedoston tulee sisältää vain säännöt ja CSS kommentit. Esimerkiksi HTML-merkintöjen esiintyminen ulkoisessa tyylisivussa voi johtaa siihen, että jotkin osat tai koko tyylisivu jätetään huomiotta.

Linkkitunniste ulkoisille tyylisivuille

Tunnistetta käytetään sisällyttämään ulkoinen CSS.

Tutustu linkkitunnisteeseen:

• muodostaa yhteyden ulkoisiin asiakirjoihin, useimmiten tyylisivuihin;
• tulee sijaita osassa ;
• Yhdessä asiakirjassa voi olla useita linkkitunnisteita.

Esimerkkejä CSS-yhteydestä

Tyypillisesti käytetään kolmea attribuuttia:

• — on vastuussa parisuhteen luomisesta, ja tässä tapauksessa se tarkoittaa "tyylitaulukkoa";
• — yhdistetyn objektin MIME-tyyppi. Meille tämä on tyylisivu - se tarkoittaa, että tyyppi on "text/сss";
• - absoluuttinen tai suhteellinen polku itse CSS-tiedostoon.

On myös mahdollista yhdistää yksittäisiä CSS-soittimia näyttölaitteesta riippuen. Media-attribuuttia käytetään tähän. Lisätietoja sen merkityksistä löytyy osoitteesta.

Kytkentäesimerkki lisäpöytä tulostuslaitteiden tyylit:

Esimerkki CSS-yhteydet käyttäen (eli6.css sisällytetään vain, jos sivua tarkastellaan IE6:ksi tunnistetulla selaimella):

Ulkoisen CSS:n edut

Sen lisäksi, että kaikki säännöt on selkeästi ryhmitelty erillinen tiedosto ja ne on helppo löytää ja tarvittaessa muokata, ulkoisilla taulukoilla on useita merkittäviä etuja verrattuna . Esimerkiksi:

1. Sama CSS-tiedosto voi "palvella" niin monta HTML-sivua kuin haluat. HTML:n määrää vähennetään, jolloin sivuston kaikille sivuille yhteisten muutosten tekeminen on paljon helpompaa.
2. Voit jakaa säännöt loogisiin lohkoihin (yleiset tyylit, sivuston tiettyjen osioiden tyylit), järjestää ne useiksi eri CSS-tiedostoiksi ja yksittäisiä sivuja, yhdistä vain tarvittavat. Muista vain, että tämä on kaksiteräinen miekka - toisaalta saamme sen pienempi koko yhdistetty CSS ( tarpeettomia tiedostoja tyylejä ei ladata), toisaalta enemmän pieniä tiedostoja tyyleillä tarkoittaa enemmän puheluita palvelimelle, mikä ei tietenkään vaikuta suorituskykyyn kovin hyvin.
3. Voit valita tyylejä tietyille selaimille ja yhdistää ne käyttämällä ehdolliset kommentit. Tätä käytetään kesyttääkseen erityisen itsepäisiä selaimia. Totta, ehdollisten kommenttien avulla voit myös yhdistää sisäkkäisen taulukon, mutta tällainen muotoilu näyttää todella hankalalta.

Jatkaa

Ulkoisten tyylisivujen käyttäminen on kätevin ja älykkäin tapa yhdistää HTML ja CSS. Toivottavasti johtopäätös on selvä. Käytä todellisissa projekteissa ulkoisia tyylisivuja.

Kurssillamme käymme läpi CSS-tunteja – ts. tekniikan oppitunteja, joka on yksi tärkeimmistä verkkosivujen ulkoasusta.

Tällä oppitunnilla suunnittelemme verkkosivumme niin, että siitä tulee värikkäämpi (kuva 1).

Kuva 1

Ennen kuin siirrymme sivun suunnitteluun, tutkitaan kuinka värit asetetaan verkossa.

1. Värien määritelmä. CSS-tunnit

Kun määrität värejä HTML-dokumentille, voit käyttää joko värien tai niiden nimiä heksadesimaalikoodit. Heksadesimaalinen koodausjärjestelmä perustuu kolmeen komponenttiin - punainen (punainen), vihreä (vihreä) ja sininen (sininen), mistä johtuu sen nimi RGB näiden värien nimien ensimmäisten kirjainten jälkeen. Jokainen komponentti vastaa heksadesimaaliluku 00 - FF (0 ja 255 V desimaalijärjestelmä laskenta). Nämä kolme arvoa yhdistetään sitten yhdeksi arvoksi, jota edeltää #, kuten #800080, joka vastaa violettia väriä.

Taulukossa on joidenkin värien nimet ja niiden koodit. Lisää täynnä pöytiä värit ja niiden koodit ovat nähtävissä kansiossa värit sijaitsee kansiossa CD.

Väri		Väri
Musta		Hopea
Kastanjanruskea (tumma viininpunainen)		Punainen
Vihreä		Lime (kalkki)
Oliivi		Keltainen
Navy (tummansininen)		Sininen
Violetti		fuksia (fuksia)
Taal (tummanvihreä)
Harmaa		Valkoinen

Taulukko turvallisia värejä verkkosivujen suunnittelun kehittämiseen

Turvallinen väripaletti varmistaa tarkimman näytön eri näytöillä.

Turvallinen paletti koostuu 216 väristä. Turvalliset värit aina muuttumattomina selaimesta toiseen tai alustasta toiseen, näytöstä toiseen eri värinäyttöominaisuuksineen ja resoluutioineen.

Jos jokin näistä kolmesta heksadesimaaliarvot eri kuin 00, 33, 66, 99, SS tai FF, silloin väri ei ole turvallinen.

Turvallisten värien taulukko on nähtävissä kansiossa CD/ värit.

2. CSS-määritelmä

Verkkosivuillamme ei ole vielä ulkoasua, mikä voidaan tehdä kahdella tavalla:

• ensin - keinoin tyylisivut CSS (progressiivisempi ja oikeampi menetelmä),
• toinen - keinoin tagin attribuutteja HTML .

Aloitetaan heti edistyksellisemmällä menetelmällä.

CSS - CSS-tyylisivut(hierarkkiset tyylimääritykset tai peräkkäiset tyylisivut) eivät korvaa merkintäkieltä, vaan ne ovat itsenäinen tekniikka, jota käytetään HTML-tunnisteeseen.

Tarkoitus: voit vaihtaa automaattisesti HTML-tyyli elementti sivuston kaikilla sivuilla. Käytämme esimerkiksi H1-otsikkoa kymmenellä verkkosivulla, jonka tulee olla vihreä. Tyylisivuja käytettäessä meidän on määritettävä vihreä väri vain kerran ja sitä käytetään kymmenelle sivulle kerralla.

Käänteinen tilanne: käytämme HTML-attribuutit aseta kaikki kymmenen verkkosivun H1-otsikot vihreiksi, ts. se määrättiin kymmenen kertaa. Sitten päätimme muuttaa otsikon värin punaiseksi, sitten meidän pitäisi korjata vihreä väri punaiseksi kymmenen kertaa.

Tyylisivua käytettäessä meidän on tehtävä tämä vain kerran, jolloin otsikon väri muuttuu vihreästä punaiseksi itse tyylisivulla, ja se muuttuu automaattisesti kaikilla kymmenellä verkkosivulla.

Tyylisivu sisältää joukon CSS-elementtejä, joiden rakenne eroaa HTML-elementin rakenteesta.

SyntaksiCSS-elementti

valitsin (ominaisuus 1: arvo; ominaisuus 2: arvo; ... ominaisuus N: arvo)

Valitsimen nimi kirjoitetaan ensin, esimerkiksi h1, mikä tarkoittaa, että kaikki tyyliominaisuudet otetaan käyttöön tagissa

, sitten on kiharat aaltosulut, joihin tyyliominaisuus kirjoitetaan ja sen arvo ilmoitetaan kaksoispisteen jälkeen. Tyyliominaisuudet arvoineen on erotettu puolipisteellä lopussa, tämä symboli voidaan jättää pois.

Tyyliominaisuuksia voi olla niin monta arvoa kuin haluat; niiden järjestyksellä ei ole väliä.

CSS ei erota isot ja pienet kirjaimet, rivinvaihdot, välilyönnit tai välilehtimerkkejä, siksi tallennuksen muoto riippuu kehittäjän toiveesta.

Esimerkiksi:

h1 (fonttiperhe:Arial; fontin koko:14pt)

tai sama voidaan kirjoittaa näin:

font-family:Arial;

kirjasinkoko: 14 pt

Tässä esimerkissä:

• h1 - valitsin, tässä tapauksessa HTML-elementti,
• font-family ja font-size - tyyliominaisuudet,
• Arial - fonttiperheen ominaisuuden arvo,
• 14pt on font-size-ominaisuuden arvo.

Tapoja sisällyttää tyylisivut HTML-dokumenttiin

1. Ulkoinen tyylisivu (linkitetty tyyli).
2. Upotettu tyylisivu (yleinen tyyli).
3. Sisäiset tyylit.

3. Ulkoinen CSS-tyylitaulukko (linkitetty tyyli)

Määrittää koko sivuston tyylin.

Is tekstitiedosto css-laajennuksella.

IN tässä esimerkissä Tyylisivu kirjoitetaan tekstitiedostoon style.css.

Harjoittelu 1

1. Avaa tyhjä asiakirja Notepad++:ssa ja tallenna se kansioon public_html nimen alla tyyli. css. Huomaa, että kentällä Tiedostotyyppi perustettiin Kaikki tyypit(Kuva 2).

Kuva 2

2. Koska CSS on eri tekniikka, .css-tiedostoon ei kirjoiteta HTML-tageja ollenkaan. Muotoillaan tiedostoon otsikkomme "Arkkitehtuuriprojektien luettelo". pää. html keskitasaus, sininen väri, kirjasin Verdana, kirjasinkorkeus 20 pt. Teemme tämän css-tiedostossa seuraava merkintä(Kuva 3):

Kuva 3

Ymmärrämme CSS-opetusohjelmissamme, mitä tähän on kirjoitettu CSS-elementtisyntaksin mukaisesti, josta puhuimme aiemmin tässä opetusohjelmassa.

• h1 on valitsin, ts. html-elementti johon tyyliä sovelletaan;
• text-align:center; -tyyli text-align-ominaisuus(tasaa tekstin) arvokeskuksen kanssa (keskellä);
• väri:#0000FF; - tyylin ominaisuuden väri (tekstin väri) sinisen värin arvolla #0000FF (arvo otettu väritaulukosta);
• kirjasinperhe: Verdana; - fontin kirjasinperheen tyyliominaisuus, jonka arvo on Verdana;
• tyyliominaisuudet arvoineen erotetaan puolipisteellä;
• ja niin edelleen, kaikki syntaksin mukaan.

Jotta verkkosivumme voisi "nähdä" tyylisivun ja käyttää ominaisuuksia html-elementteihin, on välttämätöntä luoda linkki tiedoston välille pää. html Ja tyyli. css. Voit tehdä tämän avaamalla main.html-tiedoston ja tagien välissä < pää> Ja pää> insertin muotoilu , Miten kuvassa 4.

Kuva 4

3. Tarkastele tulosta selaimessa. Sen pitäisi vastata kuvaa 5.

Kuva 5

Tällä CSS-tunnilla tarkastelemme, mistä saa tyyliominaisuuksien nimet ja niiden arvot? Tätä varten on myös erityisiä hakuteoksia ja teknisiä tietoja (kansio CSS-viite). Aloita käyttämällä tätä pientä hakuteosta viitteenä. Sprav_CSS.doc.

4. Aseta tyyli h2-otsikolle "Tulevan kodin projekteja" oikealla kohdistuksella, burgundin väri, Verdana fontti, kirjasinkorkeus 16 pt. Voit tehdä tämän tiedostossa tyyli. css h2 (Kuva 6).

Kuva 6

5. Tarkista tulos selaimesta, sen pitäisi vastata kuvaa 7.

Kuva 7

6. Kappaleet tasataan, tummansininen, Arial-fontti, kirjasinkorkeus 12 pt. Voit tehdä tämän tiedostossa tyyli. css tehdään seuraava merkintä valitsimelle s(Kuva 8).

Kuva 8

7. Teemme myös koko verkkosivun taustan vaaleansiniseksi. Voit tehdä tämän valitsimelle kehon lisää tietue (Kuva 9)

Kuva 9

8. Tarkastele tulosta selaimessa. Sen pitäisi vastata kuvaa 10.

Kuva 10

mielestäni alkaen tämä oppitunti CSS, ulkoisen tyylisivun käytön periaate on selvä. Suunnitellaksesi helposti ja värikkäästi omasi web-sivuilla, sinun tulee tutkia tyyliominaisuuksia ja niiden merkityksiä hakuteoksesta ja kokeilla niitä käytännössä. Mitä enemmän muistat tällaisia ​​ominaisuuksia ja merkityksiä ilman hakuteoksia, sitä korkeampi on ammattitaitosi.

Tutkimustehtävät

1. Hakemiston käyttö Sprav_CSS.doc, tyyli otsikko < h3> main.html-tiedostossa. Tyyliominaisuudet, joista valita.
2. Muuta "Taloprojektit"-luettelossa arabialaiset numerot roomalaisiksi numeroiksi tyylien avulla. Muut parametrit ovat valinnaisia.
3. Käytä "Taloalue" -luettelossa kuvaa merkinnänä spisok_1.gif kansiosta html_css_2. Muut parametrit ovat valinnaisia.
4. Käytä kuvaa verkkosivun taustana tyylien avulla fon9.jpg kansiosta html_css_2.
5. Käytä tyylejä kappalekirjasimien lihavointiin.

Esimerkkitulos näkyy kuvassa 11.

Kuva 11

4. Luokat tyylimäärittelyissä

CSS-opetusohjelmassamme tarkastellaan luokkia tyylimäärittelyissä, joita käytetään, kun sinun on määritettävä useita tyylejä yhdelle elementille. Kun määritetään luokkaa haluttuun tunnisteeseen mielivaltainen yksilöllinen luokan nimi lisätään pisteellä erotettuna.

Esimerkiksi tekstissä on useita otsikoita h1 ja niiden on oltava erivärisiä. Sitten sinun on erotettava tyylit seuraavasti:

h1.golub(väri:sininen)

h1.krasn(väri:punainen)

h1.green(väri:vihreä)

Kohdan jälkeen menee nimi luokka, jonka on oltava ainutlaatuinen eikä se voi koostua vain numeroista.

Nyt tagia käytettäessä < h1> attribuutti on asetettava asiakirjassa luokkaa määrittääksesi käytettävän tyylin:

< h1 luokkaa=" golub"> Tämä on sininen otsikko h1>

< h1 luokkaa=" krasn"> Tämä on punainen otsikko h1>

< h1 luokkaa=" vihreä"> Tämä on vihreä otsikko h1>

Harjoittelu 2

1. Avaa tiedosto malli. 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 sitten sisään kiharat olkaimet rekisteröidy 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äytä erilaisia ​​värejä, tasauksia ja kirjasintyyppejä. Luokkien nimien on oltava yksilöllisiä. Ei ole suositeltavaa käyttää samoja nimiä eri valitsimille. Yksi niistä 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 tulevaa menua varten.

1. Avaa tiedosto malli. 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ä luettelomerkitty luettelo

     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. Ne. 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. Ne. 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
       

     On olemassa useita tapoja lisätä web-sivulle tyylejä, jotka eroavat ominaisuuksiltaan ja tarkoitukseltaan. Katsotaanpa niitä seuraavassa tarkemmin.

     Ulkoinen tyylisivu

     Tyylit sijaitsevat erillisessä tiedostossa, jossa on css-tunniste, elementtiä käytetään linkittämään HTML-dokumentti CSS-tiedostoon . Se sijaitsee sisällä , kuten esimerkissä 1 näkyy.

     Esimerkki 1. Ulkoisten tyylien yhdistäminen

     Otsikko

     
     
     

     rel-attribuutin arvo Tyylisivu tulee aina olemaan ja pysyy ennallaan. href-arvo on polku CSS-tiedostoon; polku voidaan määrittää joko suhteelliseksi tai absoluuttiseksi. Huomaa, että tällä tavalla voit yhdistää tyylisivun, joka sijaitsee toisella sivustolla. Yllä olevassa esimerkissä yhdistämme kyrillisen kirjasimen Lobster verkkosivustolta Google-kirjasimet.

     Style.css-tiedoston sisältö on esitetty esimerkissä 2.

     Esimerkki 2: style.css-tiedoston sisältö

     H1 (fonttiperhe: "Lobster", kursiivinen; väri: vihreä; )

     Kuten tästä esimerkistä näet, tyylitiedosto on tavallinen tekstitiedosto ja sisältää vain CSS-syntaksin. HTML-dokumentti puolestaan ​​sisältää vain osoittimen tyylillä varustettuun tiedostoon, joten koodin ja sivuston suunnittelun erottaminen on täysin toteutettu. Siksi ulkoisen tyylisivun käyttö on monipuolisin ja kätevin tapa lisätä tyyliä sivustolle. Tämä mahdollistaa itsenäisen editoinnin HTML-tiedostoja ja CSS.

     Sisäinen tyylitaulukko

     Tyylit kirjoitetaan itse HTML-dokumenttiin, elementin sisään.

     Otsikko

     
     
     

     Tässä esimerkissä elementin tyyli on asetettu arvoon

     , jota voidaan sitten käyttää koko tietyllä verkkosivulla (kuva 1). Huomaa, että voimme turvallisesti yhdistää kanssa

     Otsikko 1

     Otsikko 2

     
     
     

     Tässä esimerkissä ensimmäinen otsikko on asetettu punaiseksi ja koko on 36 pikseliä style-attribuutin avulla, ja toinen otsikko on asetettu punaiseksi vihreä elementin kautta

     Otsikko 1

     Otsikko 2

     
     
     

     Tämä esimerkki näyttää tyylitiedoston tuonnin Google Fonts -sivustosta kyrillisen Lobster-fontin yhdistämiseksi.

     Taulukko CSS-tyylejä, jos otamme itse määritelmän, tämä on kuvauskieli ulkonäkö asiakirja. Eli HTML vastaa sivun rakenteesta ja CSS-tyylisivut koko suunnittelusta. Olen koonnut tänne tietoja, joiden avulla voit käyttää tyylisivua vapaasti. En kirjoita siitä, kuinka tarpeellista se on tietää, koska se on jo selvää - ilman sitä et pysty tuomaan sivustoa enemmän tai vähemmän normaali ilme. Jos joku on vasta alkamassa oppia CSS-tyylejä, nämä materiaalit riittävät CSS-opetuksen aloittamiseen.

     1. Perusasiat

     Aloitan ihan perusasioista. Kun aloitin tämän sivuston, kirjoitin pieniä opetusohjelmia CSS-tyylisivujen oppimisesta. Oppitunnit sopivat hyvin niin vasta aloitteleville kuin jo osaavillekin tiedon päivittämiseen. Siellä kaikki on esitetty kuvissa ja oikeissa esimerkeissä.

     Pieni poikkeama: Kun aloin opiskella verkkosivujen rakentamisen aihetta, opin melkein kaiken HTML-tunnisteet ja ne eivät inspiroineet minua paljon. Mutta kun aloin tutkia CSS-tyylitaulukkoa ja yrittää soveltaa jokaista ominaisuutta, pidin siitä niin paljon (en olisi luonut sitä, jos en olisi pitänyt siitä). Näin, että voit tehdä uskomattomia asioita pelkästään CSS:n avulla. Tämä ei ole ohjelmointikieli, jonka oppiminen kestää kuukausia. Tyylisivu hallitaan yhdessä (enintään kahdessa) viikossa.

     Tietenkään et tutki ehdottomasti kaikkia ominaisuuksia ja niiden merkityksiä, eikä tämä ole välttämätöntä! Sinun tarvitsee vain tuntea perusasiat, jotta voit alkaa soveltaa ja käyttää sitä projekteissasi. Yksi tärkeä vivahde on se, että sinun täytyy VÄLITTÖMÄSTI soveltaa juuri oppimaasi ominaisuutta todellinen esimerkki. Olkoon se oma verkkosivustosi tai yksinkertainen HTML verkkosivusto - ei eroa. Tärkeintä on, että yrität kirjoittaa sen itse ja näet tuloksen.

     Sivustollani on paljon esimerkkejä, jotka käyttävät CSS:ää. Yhdessä ne sisältävät yli 100 oppituntia! Kun osaat ainakin perusasiat, voit turvallisesti muuttaa ja soveltaa kaikkia oppituntien esimerkkejä.

     Omat oppitunnit perusteista peräkkäiset tyylit CSS

     2. CSS- ja CSS3-huijausarkit

     No, opit perusasiat ja parin päivän kuluttua unohdit kaiken ”menestyksen” myötä ja luultavasti ajattelet, että tämä ei ole sinun juttusi ja kaikki on monimutkaista. Haluan ilahduttaa sinua heti - en itse tunne kaikkia CSS-ominaisuudet. Mutta mikä estää minua katsomasta niitä Internetistä?

     Totta, toistaiseksi siirryt Yandexiin tai Googleen ja kirjoitat sitten tarvitsemasi pyynnön. Ja jos haku ei vieläkään anna sinulle mitä tarvitset. Voit viettää paljon aikaa tällä tavalla etkä silti löydä etsimääsi.

     Onneksi, hyviä ihmisiä He laativat erittäin hyödyllisiä huijausarkkeja, jotka auttoivat minua useammin kuin kerran. Riittää, kun selvittää, missä kaikki on, ja sitten tarvittavien ominaisuuksien löytäminen ei ole vaikeaa.

     CSS- ja CSS3-huijausarkit

     Nämä ovat yksinkertaisesti korvaamattomia materiaaleja, kun suunnitellaan ja kehitetään verkkosivuston suunnittelua. Aika, joka kuluu hajaantumiseen ja kiinteistöjen kuvausten etsimiseen Internetistä, lyhenee moninkertaisesti.

     Totta, kuten ymmärrät, mitä enemmän rakennat verkkosivustoja tai suunnittelet, sitä vähemmän sinun on katsottava tätä työkaluvihjettä, koska kaikki tarvittavat ominaisuudet pysyvät aina muistissa. Mutta silti ei ole tarpeetonta, että tämä huijausarkkisarja on käsillä.

     Se on kuin koulussa: vaikka et käyttäisikään huijauslehteä, sielusi on silti jotenkin rauhallisempi sen kanssa 😆 .