Tyylitiedosto html-muodossa. Tapoja yhdistää CSS-merkintä HTML:ään

23.01.2017

Hei kaikki!
Tällä oppitunnilla puhun aiheesta tapoja yhdistää CSS-tiedosto HTML:ään. Voit lisätä CSS-tiedoston kolmella tavalla. Kysy, miksi sinun täytyy tietää tarkalleen kolme tapaa? Vastaan, että se on välttämätöntä, koska on tapauksia, joissa on tarpeen käyttää vain kaikkia näitä 3 yhteystapaa.

○ Menetelmä nro 1 – "Linkitetty tyylitaulukko"

Kaikki tyylit tallennetaan yhteen tiedostoon, jonka tunniste on ".css".
Jos linkität kaikki web-sivujen HTML-tiedostot tällaiseen CSS-tiedostoon, silloin kun muutoksia tehdään, sivutyylit (väri, tausta, kirjasinkoko jne.) muuttuvat kaikissa CSS-tiedostoon liittyvissä HTML-dokumenteissa.
Kaavamaisesti se näyttää tältä:

Jos haluat linkittää HTML-dokumentin CSS-tiedostoon, lisää tunnisteiden väliin erityinen tunniste .
* Ei tarvita sulkevaa tagia

href – määritä polku css-tiedostoon. Yllä olevassa esimerkissä tiedosto "style.css" sijaitsee yhdessä muiden HTML-tiedostojen kanssa kohteessa .
Katsotaanpa menetelmää nro 1 askel askeleelta ja käytännössä "a":sta "z":hen:

Vaihe 1 - luo tiedosto "tyyli.css"

Yritetään luoda "style.css"-tiedosto käytännössä.
Avaa tietokoneellasi oleva muistilehtiö.
Painike "Käynnistä" => "Kaikki ohjelmat" => "Lisävarusteet" => "Muistio":

Napsauta avatun muistilehtiön yläreunassa olevaa valikkoa "Tiedosto" => "Tallenna nimellä...":

Kirjoita "Tiedoston nimi" -kenttään "style.css", ei vain tyyliä (tämä on tärkeää!). Tällä tavalla luomme tiedoston, jonka tunniste on “*.css”. Napsauta seuraavaksi "Tallenna" -painiketta:

Kokonaiskuvan pitäisi näyttää tältä:

Siinä kaikki, "style.css"-tiedosto on luotu.
Voit lisätä tämän tagin säännön "style.css"-tiedostoon

ja tallenna:

H1 ( fontin koko: 150 pikseliä; /* Fonttikoko */ väri: #cc0000 /* Tekstin väri */ )

Liitä HTML-tiedostoon tämä koodi:

Otsikko

Tuloksen pitäisi näyttää tältä:

Tämä menetelmä auttaa sinua tekemään muutoksia koko sivuston ulkoasuun muuttamalla vain sääntöjä yhdessä tiedostossa "style.css". Oletetaan, että muutamme otsikon väriä ja kokoa "style.css:ssä", jolloin samanaikainen automaattinen muutos tapahtuu kaikilla 1000 sivulla. Puhtaalla HTML:llä, ilman CSS:ää, nämä muutokset olisi tehtävä erikseen jokaiselle sivulle 1000:sta. Kamalaa!!!

○ Menetelmä nro 2 – "Global Style Sheets"

Tätä menetelmää käytetään myös ja olen varma, että tulet siihen törmäämään.
Voit yhdistää tämän menetelmän lisäämällä CSS-tyylejä tunnisteiden väliin tag

Voisi olla näin:

Tunnisteiden välissä Web-sivulle on määrätty tarvittavat CSS-säännöt.
Tämän menetelmän haittana on, että nämä tyylit koskevat vain yhtä sivua, jolla nämä tyylit sijaitsevat.

Otsikko H2

Tulos:

Yllä olevassa esimerkissä muutin H2-otsikon kokoa ja väriä CSS-tyylisivulla.

○ Menetelmä nro 3 – "Sisäiset tyylit"

Käytän menetelmää nro 3 harvoissa tapauksissa, esimerkiksi muuttaaksesi yksittäistä tunnistetta verkkosivulla. Jos haluat yhdistää tyylin mihin tahansa tunnisteeseen, sinun on määritettävä tyyliparametri.

Style="täällä on CSS-sääntöjä"

Otsikko H2

Tulos:

Yllä olevassa esimerkissä muutin H2-otsikon kokoa ja väriä käyttämällä CSS-tyylejä.

○ Yhdistetty tyylinen liitäntätapa

Kaikki kolme menetelmää voidaan yhdistää.

Otsikko

Otsikko

Siinä kaikki tältä päivältä! Odotan näkevämme sinut seuraavilla tunneilla.
Tilaa blogipäivitykset!

Edellinen viesti
Seuraava sisääntulo

Yhdistetään CSS:ää tapahtuu useilla tavoilla, joita käytetään tilanteesta riippuen. Nyt tarkastelemme näitä menetelmiä yksityiskohtaisemmin. Tietoa tulee olemaan melko paljon, joten älä edes yritä muistaa sitä, vaan yritä selvittää, mikä on mitä.

Kyllä, ja vielä yksi kohta, jota käsiteltiin jo edellisellä oppitunnilla, mutta toistan sen uudelleen. Usein monet aloittelijat pelkäävät ilmaisua "Cascading style sheets" tai yksinkertaisesti "tyylisivut", joten kun he kohtaavat tällaisia ​​ilmaisuja tekstissä, heistä tuntuu alitajuisesti, etteivät he ymmärrä mitä sanotaan. Joten itse asiassa ei ole olemassa taulukoita siinä muodossa, johon olet tottunut - ei. Ja nämä sanat kuvaavat vain yhtä asiaa - kaikkea, mikä liittyy CSS:ään, toisin sanoen erilaisia ​​CSS-sääntöjä, ominaisuuksia, arvoja ja niin edelleen. Yleensä kaikki, mitä opimme tässä oppikirjassa. Muuten, tämä voi sisältää myös yksinkertaisesti sanat "CSS" ja "tyylit".

Sisäänrakennetut tyylit

Sisäänrakennettujen tyylien yhdistäminen (inline) edellyttää style-attribuutin käyttämistä tiettyyn sivun tunnisteeseen. Tässä tapauksessa attribuutin arvo on yksi tai useampi (eroteltuna puolipisteillä) vastaavilla arvoilla. Yleensä tätä menetelmää käytetään tapauksissa, joissa on tarpeen muuttaa tietyn elementin ominaisuuksia yhdellä tietyllä sivulla.

Yleinen syntaksi

<тег style="свойство:значение; свойство:значение; ...">...

Esimerkki sisäisten tyylien yhdistämisestä CSS:ään

Kohta 1

Kohta 2

Tulos selaimessa

Kohta 1

Kohta 2

Sisäiset tyylit

Sisäiset tyylit ilmoitetaan asiakirjan otsikossa ja ne yhdistetään tunnisteen avulla. Tässä tapauksessa CSS ei enää vaikuta yhteen elementtiin, vaan kaikkiin tällä sivulla olevissa tyyleissä määritettyihin elementteihin. Tyypillisesti tätä menetelmää käytetään, kun on tarpeen muuttaa useiden identtisten elementtien tyylejä yhdellä HTML-sivulla.

Esimerkki sisäisten tyylien yhdistämisestä CSS:ään

Kohta 1

Kohta 2

Tulos selaimessa

Kohta 1

Kohta 2

Ulkoiset tyylit

Ulkoiset tyylit sisällytetään erilliseen tiedostoon käyttämällä . Tässä tapauksessa kaikki tyylit sijaitsevat tavallisessa tekstitiedostossa, jonka tunniste on .css, ja ne vaikuttavat kaikkien sivujen elementteihin, joihin tämä tiedosto on liitetty. Yleensä sivustotyylien luominen alkaa tällä menetelmällä, koska vain sen avulla tunnetaan kaikki CSS:n edut, koska muuttamalla tietoja vain yhdessä tiedostossa voit hallita useiden sivujen näyttöä kerralla. Ja jo työskenneltäessä sivustolla, sisäisiä tai sisäänrakennettuja tyylejä lisätään tarvittaessa.

Ulkoisia tyylejä käytettäessä kirjoittajat toimivat täysin eri tavoin. Jotkut tallentavat kaikki sivustotyylit yhteen tiedostoon, toiset useisiin. Esimerkiksi yksi tiedosto sisältää tyylejä koko sivustolle ja on läsnä kaikilla sivuilla, toinen on lisäksi yhdistetty vain tiettyihin osioihin, kolmas - tiettyihin alaosioihin jne. Se, mitä teet, on sinun päätettävissäsi.

Esimerkki ulkoisten tyylien yhdistämisestä CSS:ään

Kohta 1

Kohta 2

style.css-tiedoston sisältö

Teksti ( tausta: #ccccff; /* sivun taustaväri */ ) p ( väri: punainen; /* kappaletekstin väri */ font-family: Helvetica, sans-serif; /* kappaleen kirjasin */ font-size: 150 % ; /* fontin koko */ text-align: center /* reunus: 5px double */ )

Tulos selaimessa

Kohta 1

Kohta 2

Kuten näet, kaikki on hyvin yksinkertaista. Yleensä melkein kaikkien CSS-ominaisuuksien nimistä voit jo ymmärtää, mitä muutoksia ne tekevät, tietysti, jos osaat ainakin vähän englantia.

Useimmissa esimerkeissä tästä CSS opetusohjelma Käytän sisäisiä tyylejä, koska ne ovat visuaalisimpia esittelyyn. Lisätutkimuksia varten sinun on parempi luoda välittömästi tiedosto ulkoisista tyyleistä ja tottua niiden käyttöön. Tee esimerkiksi tyyli-alikansio, luo siihen style.css-tiedosto ja sisällytä se HTML-sivullesi.

Sisältää CSS:n @import-säännön kautta

Toinen tapa yhdistää eri tiedostoissa olevat tyylit on käyttää sääntöä . Tätä sääntöä käytetään yhdistämään useita tyylisivuja yhdeksi, mikä on joskus melko kätevää. Yhteys tapahtuu ulkoisissa tai sisäisissä tyylisivuissa, tätä varten säännön nimen jälkeen kirjoitetaan url()-konstruktio, jossa CSS-tiedoston osoite ilmoitetaan lainausmerkeissä (" "). Tai url() ei ole kirjoitettu ollenkaan, mutta lainausmerkit ja tiedostoosoite ovat heti mukana. Yleinen syntaksi on seuraava.

Ulkoisessa tyylitaulukossa

@import url("tiedoston osoite"); @import "tiedoston osoite"; ...

Sisäpuolella

Katsotaanpa tämän säännön käyttöä ulkoisissa tyylisivuissa, tätä varten annan sinulle kaksi esimerkkiä vertailun vuoksi.

Esimerkki 1: ulkoisten tyylien normaali kytkentä

Sivun sisältö.

Esimerkki 2: ulkoisten tyylien yhdistäminen @import CSS -säännön kanssa

Sivun sisältö.

style1.css-tiedoston sisältö

@import url("style/style2.css"); @import url("style/style3.css"); Tämän alapuolella voi lisäksi olla tavallisia tyylejä, joissa on ominaisuuksia, arvoja jne.

hallitsemaan toimi oikein, se on määritettävä tyylisivun alussa. Ainoa poikkeus on sääntö tässä , joka tulee aina ensin, vaikka käytännössä sitä käytetään erittäin harvoin.

En suosittele, että käytät kaikkia näitä erilaisia ​​CSS-menetelmiä heti - keskity tavallisiin ulkoisiin tyylisivuihin, koska tämä on päävaihtoehto. Jos haluat, voit tietysti kokeilla, mutta ei sen enempää. Yleensä voit aina päättää, miten CSS-yhteys muodostetaan, tärkeintä olisi mihin yhdistää. :)

Mukautetut tyylit

Monet selaimet voivat sisällyttää käyttäjien itsensä CSS-tiedoston, jotta he voivat muuttaa katselemiensa sivustojen ulkoasua, kuten he sanovat, "sopimaan itselleen". Muuta esimerkiksi fonttikokoa ja kirjasintyyppiä, tekstin väriä ja joidenkin elementtien taustaa jne. Tässä tapauksessa tyylit luo luonnollisesti käyttäjä itse. Esimerkiksi Internet Explorerissa voit ottaa mukautettuja tyylejä käyttöön siirtymällä kohtaan: Työkalut → Internet-asetukset → Yleiset → Ulkoasu.

Hei rakkaat blogisivuston lukijat. HTML:lle omistetun artikkelilohkon jälkeen päätin esitellä sinulle CSS:n, koska merkintätyökalut eivät riitä asiakirjojen suunnitteluun. Yleisesti ottaen HTML:n oppiminen on vain ensimmäinen vaihe verkkosivustojen luomisen oppimisessa. Seuraava vaihe on CSS:n oppiminen. Otetaanpa siis selvää mikä on CSS ja miksi niitä tarvitaan?.

Jos katsot sivuja, joissa on puhdasta HTML-koodia, ne näyttävät houkuttelemattomilta. Yksitoikkoista tekstiä, taulukoita ilman kehyksiä, synkät mustavalkoiset värit... Tietysti voit tehdä verkkosivuista kirkkaampia HTML:n avulla, mutta tämä lähestymistapa vain sotkee ​​lähdekoodia eikä tarjoa mitään joustavuutta. Siksi nykyaikaisessa ulkoasussa verkkosivujen ulkoisesta suunnittelusta vastaa henkilö CSS-tyylikieli tai vain tyylilehti.

CSS Style Sheets(tämä on lyhenne CSS - Cascading Style Sheets) ovat joukko parametreja (tyylejä), jotka kuvaavat itse web-sivun suunnittelua ja sen yksittäisiä elementtejä. Nämä asetukset hallitsevat sivun taustaa, tekstin väriä, kappaleiden tasausta, taulukon reunusasetuksia ja paljon muuta.

Siten HTML-kieltä käyttämällä muodostat verkkosivujen rakenteen, esimerkiksi määrität . Ja CSS-sääntöjen avulla määrität, kuinka nämä HTML-dokumentin elementit näytetään selaimessa. Eli asetat fontin tyypin ja värin, tekstin tasauksen, elementtien taustavärin, erilaiset sisennykset jne. Lisäksi yksi CSS-sääntö voi vaikuttaa useiden Web-sivun elementtien visuaaliseen esitykseen kerralla.

Siksi tarvitset todennäköisesti vain vähän tietoa peräkkäisten tyylisivujen ominaisuuksista sekä luodessasi verkkosivustoa tyhjästä että tehdessäsi muutoksia olemassa olevaan projektiin. Ensinnäkin näitä tietoja tarvitaan verkkosivustojen suunnittelussa.

Tyylien lisääminen tai CSS:n yhdistäminen HTML-dokumenttiin

Ennen kuin puhumme peräkkäisten tyylisivujen syntaksista tai ominaisuuksista, sinun on opittava yhdistämään ne HTML-dokumenttiin. On kolme tapaa yhdistää css html:ään.

1. Ensimmäinen tapa on sijoittaa tyylejä erilliseen tiedostoon tai useisiin tiedostoihin .css-tunnisteella. Tässä tapauksessa voit yhdistää CSS-tyylejä käyttämällä linkki, joka sisältää polun ulkoiseen tyylitiedostoon. Tämä sisällönkuvauskenttä sijoitetaan vastaavan verkkosivun otsikko-osioon head-tunnisteiden väliin. Tässä on muoto sen kirjoittamiseen:

Polku tyylitiedostoon kirjoitetaan href-attribuutin arvona. Attribuutti rel kertoo selaimelle, mihin tiedostoon linkkitunniste viittaa. Arvo "tyylitaulukko" osoittaa, että tämä tiedosto on ulkoinen tyylisivu. Type-attribuutti määrittää tiedoston MIME-tyypin. Ulkoisen tyylisivun MIME-tyyppi on "text/css".

Tältä rivi CSS-tyylien yhdistämiseksi html-koodissa näyttää:

...
.css"/>
...

Tämän menetelmän etuna on se ulkoinen tyylisivu voidaan linkittää usealle web-sivulle kerralla.

2. Toinen tapa on kirjoittaa ns globaaleja tyylejä, jotka on kirjoitettu suoraan verkkosivun html-koodiin. Ne on lukittu kahden hengen huoneeseen tyylitunniste ja se sijoitetaan yleensä pääosaan head-tunnisteiden väliin:

...

...

Tämän menetelmän haittana on, että globaalien tyylien CSS-sääntöjä sovelletaan vain verkkosivulle, jolle ne on kirjoitettu.

3. Kolmas menetelmä on ns. sisäänrakennetut tai sisäiset tyylit. Voit tehdä tämän yksinkertaisesti lisäämällä vaaditun html-tunnisteen Tyyli-attribuutti, joka sisältää joukon CSS-ominaisuuksia parametreina:

Kappale harmaalla taustalla ja punaisella tekstillä

Lisäksi style-attribuutissa määritetyt ominaisuudet koskevat vain yhtä html-elementtiä. Tyypillisesti tätä tyylien yhdistämismenetelmää käytetään sivuston suunnittelun virheenkorjausvaiheessa, ja sitten tuloksena saadut CSS-ominaisuudet siirretään tiedostoon, jossa on ulkoisia tyylejä.

CSS-tyylien luominen. Cascading tyylisivun syntaksi - säännöt, ominaisuudet, valitsimet.

Valitsin (
Omaisuuden arvo;
Omaisuuden arvo;
...
Omaisuuden arvo
}

Nuo. tyylisääntö sisältää tyylivalitsimen ja luettelon tyyliominaisuuksista ja niiden arvot aaltosulkeissa ("(" ja ")":

• valitsin käytetään sitoutumaan web-sivun osiin, joihin sen vaikutus laajenee;
• "Ominaisuus: Arvo" -parit erotetaan puolipisteellä (";"), ja niitä voi olla niin monta kuin halutaan;
• Viimeisen parin "Ominaisuus: Arvo" ja sulkevan aaltosulkeen väliltä puolipiste voidaan jättää pois;
• tyylinen omaisuus edustaa yhtä html-sivuelementin parametreista: tekstin väri, kirjasintyyppi, sisennyksen määrä;
• välilyönnit ja rivinvaihdot CSS-sääntöjä kirjoitettaessa eivät ole kriittisiä, selain jättää ne huomioimatta, joten voit muotoilla koodin haluamallasi tavalla;
• Koodi ei myöskään erota kirjainkoolla.

Selvyyden vuoksi katsotaanpa muutama esimerkki.

Katsotaanpa tätä CSS-sääntöä:

• body on valitsin, joka edustaa tunnisteen nimeä ;
• background — tyyliominaisuus, jota käytetään taustaparametrien asettamiseen;
• #0000FF on taustatyyliominaisuuden arvo, joka on värikoodi RGB-muodossa.

Tämän seurauksena tätä tyyliä käytetään verkkosivun runko-osaan ja sivun tausta väritetään määritetyllä värillä. Kyseistä tyyliä kutsutaan ns tagin ohitustyyli, koska valitsin on tunnisteen nimi ilman merkkejä< и >.

Katsotaanpa toista esimerkkiä:

h1 (
fonttikoko: 24px;
väri: vihreä;
}

Tämä tyyli osoittaa, että selain näyttää minkä tahansa tunnisteisiin lisätyn tekstin

vihreä ja asettaa sen kirjasinkooksi 24 pikseliä.

Tunnisteen valitsimena voit määrittää tunnisteen nimen lisäksi Luokka:

Keltainen teksti (väri:keltainen)

Luokan nimen tulee koostua latinalaisten aakkosten kirjaimista, numeroista ja tavuviivoista, ja sen tulee alkaa kirjaimella. Ja CSS-säännön määritelmässä luokan nimen edessä täytyy olla piste, mikä tarkoittaa, että tyyliluokkaa määritellään. Tätä tyyliä sovelletaan kaikkiin tunnisteisiin, joilla on määritetty luokan attribuutti ja sen arvo on sama tyyliluokan nimi ilman pistettä:

Tässä kappaleessa on oranssi teksti

Esimerkissä sitoudumme tunnisteeseen

Css-sääntö käyttäen luokan nimeä yellowtext. Tämän seurauksena tämän kappaleen teksti näkyy oranssina.

Voit määrittää clsss-attribuutin arvoksi useita tyyliluokkien nimiä välilyönneillä erotettuina. Tässä tapauksessa tyyliluokkien toiminta on:

Kursiivinen teksti (kirjasintyyli: kursivoitu)

keltainen kursivoitu teksti

Tässä esimerkissä tagiin

Liitämme kaksi luokkaa kerralla: keltainen teksti ja cursivtext. Tämän seurauksena tunnisteen sisältö näytetään keltaisella ja kursivoitulla fontilla.

Luokkien lisäksi valitsimena voidaan käyttää css-sääntöjä tunniste, joka määrittää elementille yksilöllisen nimen. Kaikki täällä on sama kuin tyyliluokissa, vain muutamia eroja:

• CSS-säännön valitsimessa määritetään myös tunnisteen nimi, mutta sen nimen eteen pisteen sijaan sijoitetaan hash-symboli “#”;
• html-elementtiin sitominen suoritetaan kautta id-attribuutti, jonka arvoksi asetetaan tyylin nimi ilman hash-merkkiä;
• id-attribuutin arvon tulee olla ainutlaatuinen sivulla, eli html-koodissa voi olla vain yksi elementti, jolla on annettu id-attribuutin arvo, muuten koodi ei kelpaa.

Katsotaanpa esimerkkiä selvyyden vuoksi:

#textcenter(text-align: center;)

Keskiteksti

CSS-sääntö liitetään p (kappale) -elementtiin käyttämällä id-attribuuttia, joka tasaa tekstin sivun keskelle. Sivulle ei saa enää luoda elementtejä tällä id-attribuutilla, muuten html-koodi ei kelpaa.

Harkittujen tyylien kuvausmenetelmien lisäksi css antaa sinun luoda yhdistetyt tyylit ja aseta useita identtisiä tyylejä kerralla. Katsotaanpa esimerkkiä:

h1.redtext, p vahva (väri: punainen)

Esimerkissä on määritetty kaksi valitsinta pilkuilla erotettuina: "h1.redtext" ja "p strong". Ensimmäinen valitsin sanoo, että kaikissa h1-elementeissä, joiden luokkaattribuutin arvo on sama kuin redtext, teksti näkyy punaisena. Toisessa valittimessa sama tapahtuu kaikille vahvoille elementeille, jotka on sisäkkäin p-tunnisteen sisällä:

Tämä otsikko näkyy punaisena

pelkkää tekstiä, punaista tekstiä

Mikä tahansa HTML-dokumentti, riippumatta siitä kuinka monta elementtiä se sisältää, on käytännössä "kuollut" ilman tyylejä. Tyylit tai vielä parempaa peräkkäiset tyylisivut(Cascading Style Sheets) tai yksinkertaisesti CSS määrittää asiakirjan esitystavan, sen ulkoasun. Katsotaanpa nopeasti tyylien käyttöä HTML5:n yhteydessä.

CSS:n tyyli on sääntö, joka kertoo selaimelle, kuinka elementti muotoillaan. Muotoilu voi sisältää elementin taustavärin, fontin värin ja tyypin asettamisen ja niin edelleen.

Tyylimäärittely koostuu kahdesta osasta: valitsimesta, joka osoittaa elementtiin, ja tyylin määrityslohkosta, joukosta komentoja, jotka määrittävät muotoilusäännöt. Esimerkiksi:

Div( taustaväri: punainen; leveys: 100 pikseliä; korkeus: 60 kuvapistettä; )

Tässä tapauksessa valitsin on div. Tämä valitsin määrittää, että tätä tyyliä sovelletaan kaikkiin div-elementteihin.

Valitsimen jälkeen on tyylin määrittelylohko aaltosulkeissa. Avaavien ja sulkevien aaltosulkeiden väliin määritellään komennot, jotka osoittavat kuinka elementti muotoillaan.

Jokainen komento koostuu ominaisuudesta ja arvosta. Eli seuraavalla lausekkeella:

Taustaväri: punainen;

background-color edustaa ominaisuutta ja punainen edustaa arvoa. Ominaisuus määrittää tietyn tyylin. CSS-ominaisuuksia on monia. Esimerkiksi taustaväri määrittää taustavärin. Kaksoispisteen jälkeen tulee tämän ominaisuuden arvo. Esimerkiksi yllä oleva komento asettaa taustaväri-ominaisuuden punaiseksi. Toisin sanoen elementin taustaväriksi asetetaan "punainen", eli punainen.

Jokaisen komennon jälkeen on puolipiste, joka erottaa tämän komennon muista.

Tällaisten tyylien sarjoja kutsutaan usein tyylisivuiksi tai CSS(Cascading Style Sheets tai CSS-tyylisivut). On olemassa erilaisia ​​tapoja määritellä tyylejä.

tyyli attribuutti

Ensimmäinen tapa on upottaa tyylejä suoraan elementtiin style-attribuutin avulla:

Tyylit

Tässä on määritelty kaksi elementtiä - otsikko h2 ja estää div. Otsikossa on sininen tekstin väri, joka on määritetty väriominaisuuden avulla. Korttelissa div leveysominaisuudet on määritelty ( leveys), korkeus ( korkeus), sekä taustaväri ( taustaväri).

Toinen tapa on käyttää tyylielementtiä html-dokumentissa. Tämä elementti kertoo selaimelle, että sisällä olevat tiedot ovat css-koodia, eivät html:ää:

Tyylit

Tässä ei ole enää elementtiä tyyli, mutta siinä on elementti linkki, joka sisältää yllä luodun tiedoston styles.css:

Siten määrittelemällä tyylejä ulkoisessa tiedostossa teemme html-koodista puhtaamman ja erottelemme sivun rakenteen sen tyylistä. Kun tyylejä määritellään tällä tavalla, niitä on paljon helpompi muokata kuin jos ne määritettäisiin elementtien sisällä tai elementin sisällä tyyli, ja tämä menetelmä on suositeltava HTML5.

Käyttämällä tyylejä ulkoisissa tiedostoissa voit vähentää verkkopalvelimen kuormitusta välimuistimekanismin avulla. Koska verkkoselain voi tallentaa css-tiedoston välimuistiin ja seuraavan kerran kun verkkosivua avataan, se voi hakea halutun css-tiedoston välimuistista.

On myös mahdollista, että kaikki nämä lähestymistavat yhdistetään ja yhdelle elementille määritetään jotkut css-ominaisuudet itse elementin sisällä, muut css-ominaisuudet määritetään tyylielementin sisällä ja toiset ovat ulkoisessa sisällytetyssä tiedostossa. Esimerkiksi:

Ja style.css-tiedostossa on määritetty seuraava tyyli:

Div(leveys:50px; korkeus:50px; taustaväri:punainen;)

Tässä tapauksessa div-elementillä on leveysominaisuus, joka on määritelty kolmessa paikassa eri arvoilla. Mitä arvoa elementille lopulta käytetään? Tässä meillä on seuraava prioriteettijärjestelmä:

• Jos elementille on määritetty sisäänrakennetut tyylit (inline styles), niillä on korkein prioriteetti, eli yllä olevassa esimerkissä lopullinen leveys on 120 pikseliä
• Seuraavaksi prioriteettijärjestyksessä ovat tyylielementissä määritellyt tyylit
• Vähiten prioriteettityylit ovat ne, jotka on määritetty ulkoisessa tiedostossa.

HTML-attribuutit ja css-tyylit

Monet html-elementit mahdollistavat näyttötyylien asettamisen attribuuttien avulla. Esimerkiksi useille elementeille voimme käyttää leveys- ja korkeusmääritteitä elementin leveyden ja korkeuden asettamiseen. Tätä lähestymistapaa tulisi kuitenkin välttää ja käyttää CSS-tyylejä sisäisten attribuuttien sijaan. On tärkeää ymmärtää selvästi, että HTML-merkintöjen tulee tarjota vain HTML-dokumentin rakenne ja sen koko ulkoasu ja tyyli määritetään CSS-tyylien mukaan.

CSS-koodin validointi

CSS-tyylejä kirjoitettaessa voi herätä kysymyksiä, onko oikein määritellä tyylejä tällä tavalla ja ovatko ne oikein. Ja tässä tapauksessa voimme käyttää css-validaattoria, joka on saatavilla osoitteessa http://jigsaw.w3.org/css-validator/.
Tässä on opetusvideo CSS:n yhdistämisestä HTML:ään

Hyvää päivää kaikille.

Joten yhdessä aiemmista artikkeleista, joihin tutustuimme.

Emme kuitenkaan ole käsitelleet yhtä tärkeää asiaa. Nimittäin - kuinka sitoa CSS-tyylejä HTML-koodiin sivuillamme.

Tämä kysymys on itse asiassa erittäin tärkeä. Kuitenkin jos sidomme css-tyylejä väärin sivustomme sivuille, emme voi käyttää näitä tyylejä. Selain yksinkertaisesti jättää ne huomioimatta, emmekä näe tulosta, jonka tiettyjen tyylien käyttö antaa.

On olemassa erilaisia ​​​​tapoja sitoa CSS-tyylejä sivukoodiin, ja tänään yritämme tarkastella niitä kaikkia.

Aloitetaan.

CSS-sarjan tyylisivujen HTML-dokumenttiin yhdistämisen luonteen perusteella on olemassa: ulkoiset ja sisäiset tyylisivut.

1. Sisäiset CSS-tyylisivut.

Sisäiset tyylisivut sijaitsevat aivan verkkosivumme sisällä. Kyllä, kyllä... Aivan jokaisen yksittäisen sivun HTML-koodin sisällä.

Tämä on tietysti hieman epämukavaa, mutta sellainen mahdollisuus on silti olemassa, enkä voi olla sanomatta siitä.

Joten ensimmäinen tapa linkittää CSS-tyylejä sivukoodiin on käyttää tunnistetta, koskevat koko HTML-dokumentin sisältöä. Niitä voi olla niin monta kuin haluat, jopa kaikki tyylit koko sivustolle. Mutta tämä on vähän väärin. Puhun tästä hieman myöhemmin, kun katson ulkoisia tyylisivuja.

Joskus on pakko kirjoittaa CSS-tyylejä HTML-koodin sisään.

Kun esimerkiksi sijoitat verkkosivustollesi jonkinlaisen mainosbannerin, lisäät tämän bannerin koodin sivun koodiin.

Jotta tämä banneri näkyisi oikein (ei ylitä sille osoitettuja rajoja, ehkä se tarvitsee kehyksen jne.), sinun on joskus liitettävä siihen useita CSS-ohjeita.

Mutta ei ole mitään järkeä tehdä muutoksia yleiseen tyylitaulukkoon. Banneri on väliaikainen ilmiö. Tänään yksi, huomenna toinen. Siksi sille on helpompi kirjoittaa tyylejä suoraan tämän bannerin koodin sisään.

Toisin sanoen meidän on yhdistettävä CSS-tyylit vain tiettyyn sivuelementtiin. Tämä tehdään hyvin yksinkertaisesti - tyylimääritteen avulla.

Tällä tavalla kirjoitetut tyylit vaikuttavat vain elementtiin, johon ne on sijoitettu. Tässä tapauksessa vain tälle kappaleelle (tag

). Eikä kenellekään muulle!

2. Ulkoiset tyylisivut.

Nimi ulkoiset CSS-tyylisivut tarkoittaa, että niitä ei kirjoiteta HTML-dokumentin runkoon, vaan erilliseen erityistiedostoon. Näillä tiedostoilla on tunniste .css

Joten kuten luvattiin, kerron sinulle, miksi on parempi käyttää ulkoisia tyylisivuja.

Tosiasia on, että tämän ansiosta sivustosi sivut latautuvat hieman nopeammin. Ehkä sekunnin murto-osan, mutta nopeammin. Tämä vähentää sivustosi kuormitusta ja kätevämpää vierailijoillesi – heidän on odotettava vähemmän sivujen latautumista.

Miksi tämä tapahtuu.

Jos sivustosi CSS-tyylit ovat erillisessä tiedostossa, käyttäjän selaimen ei tarvitse ladata näitä tyylejä aina, kun uusi sivu ladataan. Se lataa ne kerran, sijoittaa ne välimuistiin (vierailijan tietokoneen muistialue), ja kun seuraava sivu latautuu, se ottaa tyylit sieltä.

On kaksi tapaa liittää CSS-tyylitaulukkotiedostoja verkkosivulle.

Ensimmäinen tapa, yleisin, on käyttää tunnistetta attribuutilla: rel = "tyylitaulukko" type = "text/css" href = "tyylitiedosto.css" sivun otsikkokoodin sisällä (tunniste ).

Esimerkiksi:

1 2 3 4

<pää > ..... <linkki rel = "tyylitaulukko" type = "text/css" href = "tyyli.css" > </head>

Tämä esimerkki liittää sivulle CSS-tyylejä, jotka on kirjoitettu style.css-tiedostoon. Ne ovat voimassa koko asiakirjan ajan.

On toinenkin tapa liittää ulkoiset tyylisivut HTML:ään asiakirja. Tämä käyttää @import-direktiiviä. Sen avulla voit tuoda CSS-tiedoston sisällön nykyiseen tyylitaulukkoon.

Voit käyttää sitä sekä lisätäksesi yhden tyylisivun toiseen että liittääksesi tyylisivutiedoston HTML-dokumenttiin. Tätä varten sinun on kirjoitettava se tunnisteen sisään