Lyhyt kuvaus CSS-kielestä

Lisäosat

Muutama tyylinhallinnan temppu

Määrittämällä absoluuttiset kirjasinkoot estät sivujasi katselevilta ihmisiltä mahdollisuuden suurentaa tai pienentää kirjasinkokoa selaimen erikoispainikkeella näytön resoluution ja näkemyksensä mukaisesti. Fontit näytetään vain siinä koossa, jonka määritit sivua kirjoittaessasi.
Siksi on suositeltavaa käyttää prosenttikokoja näihin tarkoituksiin. Tässä tapauksessa fonttikoko on pienempi (suurempi) määrittämäsi prosenttiosuuden verran kuin silloin, kun se on muotoiltu käyttämällä tavallista HTML-tunnistetta.

Tämä tehdään niin, että vanhentuneet selaimet eivät ymmärrä tunnistetta

Tämän tempun avulla voit peittää yhden tekstikerroksen toisen päälle ja saada erittäin mielenkiintoisia ja epätavallisia tuloksia.
Seuraava koodi luo otsikon, joka näyttää 3D-muodossa ilman grafiikan käyttöä.

Ilmoita tyylin kuvauksessa

Nyt jokaisen uuden kappaleen ensimmäiset rivit tulevat näkyviin "punaiselta" riviltä.

CSS-tyylisivuja on kolmea tyyppiä, ja vastaavasti ne sisältyvät html-koodiin kolmella tavalla.

1. Sisäiset tyylisivut. Aseta elementtien sisällä attribuutin avulla tyyli, Esimerkiksi:

   Sininen otsikko

   Tämän kaiken tulos on:

   Sininen otsikko

   Tällä tavalla jokaiselle otsikolle ja kappaleelle voidaan määrittää tyylisivu. Tämän menetelmän haittana on, että taulukko asetetaan vain yhdelle elementille, esimerkiksi otsikolle. Kaikkia muita otsikoita varten sinun on luotava omat tyylisivut, ja tämä on jo hukattua aikaa. Lisäksi, jos haluat asettaa uusia tyylisivuja koko sivustolle tällä menetelmällä, sinun on työskenneltävä kovasti.

2. Sisäänrakennetut tyylisivut. Tällä tavalla tyylisivu asetetaan koko HTML-dokumentille tunnisteiden väliin ... . Jos esimerkiksi haluamme muuttaa verkkosivun kaikki otsikot sinisiksi, tarvitsemme tunnisteiden väliin ... kirjoita seuraava:

   Jos kirjoitat tämän koodin tunnisteiden väliin ... , kaikki ensimmäisen tason otsikot ovat sinisiä. Tällä menetelmällä tyylit määritetään tunnisteiden avulla . Myös tag , mutta ei koko sivustoa.

3. Ulkoiset tyylisivut. Ne määritetään erillisessä tiedostossa ja liitetään html-dokumenttiin tunnisteen avulla , joka on sijoitettu tagien väliin ... . Tarkastellaan tätä tapausta tarkemmin. Kirjoitamme seuraavan koodin Notepadiin ja tallennamme sen html-tiedostona.

   
   
   
   
   
   
   

   Ensimmäisen tason otsikko

   
   

   Kolmannen tason otsikko sijaitsee html-dokumentin keskellä

   
   

   Kuudennen tason otsikko, tasattu verkkosivun oikeaan reunaan

   
   
   

   Luo tämän jälkeen uusi tiedosto seuraavalla sisällöllä:

   H1 (väri: sininen;)
   H3 (väri: punainen;)
   H6 (väri: vihreä;)

   Ja tallenna se nimellä tyyli laajennuksella *css. Katso tulos. Tämä on html-tiedostomme otsikoineen. Katsotaanpa nyt, kuinka tämä suunnittelu toimii. Otsikoilla varustetussa html-dokumentissa olemme tagien välissä ... kirjoitti tämän rivin:

   Tässä tagia käyttäen yhdistämme tyylisivut html-dokumenttiin. Attribuutti href viittaa sijaintiin, jossa tyylitiedosto sijaitsee, tämä on pakollinen attribuutti. Attribuutti tyyppi tiedämme jo, että se määrittää tyylisivun tyypin. Attribuutti rel ilmaisee sisällytetyn tiedoston suhteen tähän HTML-dokumenttiin. Meidän tapauksessamme attribuutin arvo rel="tyylitaulukko" osoittaa, että olemme lisänneet pää tyylisivu. Tämän tyylisivujen määrittelytavan etuna on, että jos haluat muuttaa koko sivuston ulkoasua, sinun tarvitsee muuttaa vain yksi tiedosto tyylisivuilla.

CSS (Cascading Style Sheets) tai CSS-tyylisivut, käytetään kuvaamaan sivunkuvauskielellä kirjoitetun asiakirjan ulkoasua. CSS-tyylejä käytetään tyypillisesti HTML- ja XHTML-kielellä kirjoitettujen web-sivujen ja käyttöliittymien elementtien luomiseen ja tyyliin, mutta niitä voidaan soveltaa myös mihin tahansa XML-dokumenttiin, mukaan lukien XML, SVG ja XUL.

CSS-tyylisivut kuvaavat säännöt elementtien muotoilulle ominaisuuksien avulla ja näiden ominaisuuksien sallitut arvot. Voit käyttää jokaiselle elementille rajoitettua joukkoa ominaisuuksia. Muut ominaisuudet eivät vaikuta siihen.

Tyylimääritys koostuu kahdesta osasta: web-sivuelementistä − valitsin, ja muotoilukomennot - mainoslohko. Valitsin kertoo selaimelle, mikä elementti muotoillaan, ja ilmoituslohko (koodi aaltosulkeissa) listaa muotoilukomennot - ominaisuudet ja niiden arvot.

CSS-tyylisivujen tyypit ja niiden erityispiirteet

1. Tyylisivujen tyypit

1.1. Ulkoinen tyylisivu

Ulkoinen tyylisivu on .css-tunnisteella varustettu tekstitiedosto, joka sisältää joukon CSS-tyylejä elementeille. Tiedosto luodaan koodieditorilla, aivan kuten HTML-sivu. Tiedosto voi sisältää vain tyylejä ilman HTML-merkintää. Ulkoinen tyylisivu yhdistetään verkkosivulle tunnisteen avulla , joka sijaitsee osan sisällä . Nämä tyylit toimivat kaikilla sivuston sivuilla.

Voit liittää jokaiselle verkkosivulle useita tyylisivuja lisäämällä useita tunnisteita peräkkäin , joka osoittaa tämän tyylisivun tarkoituksen mediatunnisteattribuutissa. rel="stylesheet" määrittää linkin tyypin (linkki tyylisivuun).

HTML5-standardi ei vaadi type="text/css"-attribuuttia, joten se voidaan jättää pois. Jos määrite puuttuu, oletusarvo on type="text/css" .

1.2. Sisäiset tyylit

Sisäiset tyylit upotettu osaan HTML-dokumentti ja määritellään tagin sisällä. Sisäiset tyylit ovat etusijalla ulkoisiin nähden, mutta ne ovat huonompia kuin sisäiset tyylit (määritetty style-attribuutilla).

...

1.3. Sisäänrakennetut tyylit

Kun kirjoitamme sisäisiä tyylejä, kirjoitamme CSS-koodin HTML-tiedostoon suoraan elementtitunnisteen sisään käyttämällä style-attribuuttia:

Kiinnitä huomiota tähän tekstiin.

Tällaiset tyylit vaikuttavat vain elementtiin, jolle ne on asetettu.

1.4. @tuontisääntö

@tuontisääntö Voit ladata ulkoisia tyylisivuja. Jotta @import-direktiivi toimisi, sen on näytettävä tyylisivulla (ulkoinen tai sisäinen) ennen kaikkia muita sääntöjä:

@import-sääntöä käytetään myös verkkofonttien sisällyttämiseen:

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

2. Valitsimien tyypit

Valitsijat edustavat verkkosivun rakennetta. Ne auttavat luomaan sääntöjä verkkosivun elementtien muotoilulle. Valitsijat voivat olla elementtejä, niiden luokkia ja tunnisteita sekä pseudo-luokkia ja pseudoelementtejä.

2.1. Yleisvalitsin

Vastaa mitä tahansa HTML-elementtiä. Esimerkiksi * (marginaali: 0;) nollaa kaikkien sivustoelementtien marginaalit. Valitsinta voidaan käyttää myös yhdessä pseudoluokan tai pseudoelementin kanssa: *:after (CSS-tyylit) , *:checked (CSS-tyylit) .

2.2. Elementin valitsin

Elementtivalitsimien avulla voit muotoilla kaikki tietyn tyyppiset elementit sivuston kaikilla sivuilla. Esimerkiksi h1 (font-family: Lobster, cursive;) määrittää yleisen muotoilutyylin kaikille h1-otsikoille.

2.3. Luokan valitsin

Luokkavalitsimien avulla voit asettaa tyylejä yhdelle tai useammalle elementille, joilla on sama luokan nimi ja jotka on sijoitettu eri paikkoihin sivulla tai sivuston eri sivuille. Jos esimerkiksi haluat luoda otsikon otsikkoluokalla, sinun on lisättävä avaustunnisteeseen class-attribuutti, jossa on arvo otsikko.

ja aseta tyyli määritetylle luokalle. Luokan avulla luotuja tyylejä voidaan soveltaa muihin elementteihin, ei välttämättä sen tyyppisiin elementteihin.

Ohjeet henkilökohtaisen tietokoneen käyttöön

2.4. ID-valitsin

Tunnusvalitsimella voit alustaa yksi tietty elementti. Tunnus on yksilöllinen, ja se voi esiintyä vain kerran yhdellä sivulla.

2.5. Jälkeläisen valitsin

Jälkijonon valitsimet soveltavat tyylejä säilöelementin elementteihin. Esimerkiksi ul li (tekstimuunnos: isot kirjaimet;) - valitsee kaikki li-elementit, jotka ovat kaikkien ul-elementtien lapsia.

Jos haluat muotoilla tietyn elementin jälkeläisiä, sinun on annettava tälle elementille tyyliluokka:

p.first a (väri: vihreä;) - tätä tyyliä sovelletaan kaikkiin linkkeihin, jotka ovat ensimmäisen luokan kappaleen jälkeläisiä;

p .first a (väri: vihreä;) - jos lisäät välilyönnin, minkä tahansa elementin alitunnisteen sisällä olevat linkit tyylitetään

Ensin a (väri: vihreä;) - tätä tyyliä sovelletaan kaikkiin linkkeihin, jotka sijaitsevat toisen elementin sisällä, jonka class.first määrittää.

2.6. Lapsivalitsin

Lapsielementti on sen sisältävän elementin suora lapsi. Yhdellä elementillä voi olla useita alielementtejä, mutta jokaisella elementillä voi olla vain yksi yläelementti. Lapsivalitsimen avulla voit käyttää tyylejä vain, jos alielementti tulee välittömästi pääelementin jälkeen eikä niiden välillä ole muita elementtejä, eli alielementti ei ole sisäkkäin minkään muun sisällä.
Esimerkiksi p > vahva valitsee kaikki vahvat elementit, jotka ovat p-elementin lapsia.

2.7. Sisaren valitsin

Sisaruus syntyy elementtien välillä, joilla on yhteinen vanhempi. Sisarusvalitsimien avulla voit valita elementtejä saman tason elementtiryhmästä.

h1 + p - valitsee kaikki ensimmäiset kappaleet välittömästi minkä tahansa tunnisteen jälkeen

, vaikuttamatta muihin kohtiin;

h1 ~ p - valitsee kaikki kappaleet, jotka ovat minkä tahansa h1-otsikon sisaruksia ja välittömästi sen jälkeen.

2.8. Attribuutin valitsin

Attribuuttivalitsimet valitsevat elementit määritteen nimen tai määritteen arvon perusteella:

[attribuutti] - kaikki määritetyn attribuutin sisältävät elementit - kaikki elementit, joille alt-attribuutti on määritetty;

valitsin[attribuutti] - tämän tyyppiset elementit, jotka sisältävät määritetyn attribuutin, img - vain kuvat, joille alt-attribuutti on määritetty;

selector[attribuutti="arvo"] - tämän tyyppiset elementit, jotka sisältävät määritetyn attribuutin tietyllä arvolla, img - kaikki kuvat, joiden otsikko sisältää sanan kukka;

selector[attribuutti~="arvo"] - tietyn arvon osittain sisältävät elementit, esimerkiksi jos elementille on määritetty useita luokkia välilyönnillä erotettuna, p - kappaleet, joiden luokan nimi sisältää ominaisuuden ;

valitsin[attribuutti|="arvo"] - elementit, joiden attribuuttiarvojen luettelo alkaa määritetyllä sanalla, p - kappaleet, joiden luokan nimi on ominaisuus tai alkaa ominaisuudella;

selector[attribuutti^="arvo"] - elementit, joiden attribuutin arvo alkaa määritetyllä arvolla, a - kaikki linkit, jotka alkavat http:// ;

selector[attribuutti$="arvo"] - elementit, joiden attribuutin arvo päättyy määritettyyn arvoon, img - kaikki kuvat png-muodossa;

valitsin[attribuutti*="arvo"] - elementit, joiden attribuutin arvo sisältää määritetyn sanan missä tahansa, a - kaikki linkit, joiden nimessä on kirja .

2.9. Pseudoluokan valitsin

Pseudo-luokat ovat luokkia, joita ei varsinaisesti ole liitetty HTML-tunnisteisiin. Niiden avulla voit soveltaa CSS-sääntöjä elementteihin, kun tapahtuma tapahtuu tai noudattaa tiettyä sääntöä. Pseudo-luokat luonnehtivat elementtejä, joilla on seuraavat ominaisuudet:

:hover - mikä tahansa elementti, jonka päällä hiiren osoitin on;

:focus - interaktiivinen elementti, johon navigoitiin näppäimistöllä tai aktivoitiin hiirellä;

:active - elementti, jonka käyttäjä on aktivoinut;

:valid - lomakekentät, joiden sisältö on tarkistettu selaimessa määritetyn tietotyypin mukaisiksi;

:invalid — lomakekentät, joiden sisältö ei vastaa määritettyä tietotyyppiä;

:enabled - kaikki aktiiviset lomakekentät;

:disabled — estetty lomakekentät, eli ei-aktiivisessa tilassa;

:in-range - muotokentät, joiden arvot ovat määritetyllä alueella;

:out-of-range - muotokentät, joiden arvot eivät ole määritetyllä alueella;

:lang() - elementit, joissa on teksti määritetyllä kielellä;

:not(selector) - elementit, jotka eivät sisällä määritettyä valitsinta - luokka, tunniste, nimi tai lomakekenttätyyppi - :not() ;

:target on elementti, jossa on #-symboli ja johon asiakirjassa viitataan;

:checked — valitut (käyttäjän valitsemat) lomakeelementit.

2.10. Rakenteellinen pseudoluokan valitsin

Rakenteelliset pseudo-luokat valitsevat lapsielementit suluissa määritetyn parametrin mukaan:

:nth-child(odd) - parittomat lapsielementit;

:nth-child(parillinen) - parilliset lapsielementit;

:nth-child(3n) - joka kolmas elementti lasten joukossa;

:nth-child(3n+2) - valitsee joka kolmannen elementin, alkaen toisesta lapsesta (+2) ;

:nth-child(n+2) - valitsee kaikki elementit toisesta alkaen;

:nth-child(3) - valitsee kolmannen lapsielementin;

:nth-last-child() - valitsee alielementtien luettelosta elementin, jolla on määritetty sijainti, kuten :nth-child() , mutta alkaen viimeisestä vastakkaiseen suuntaan;

:first-child - voit muotoilla vain tunnisteen ensimmäisen alielementin;

:last-child - voit muotoilla tagin viimeisen alielementin;

:only-child - valitsee elementin, joka on ainoa lapsielementti;

:empty - valitsee elementit, joilla ei ole lapsia;

:root - valitsee elementin, joka on asiakirjan juuri - html-elementin.

2.11. Rakenteellisen pseudoluokan valitsin

Osoittaa tietyn tyyppisen alitunnisteen:

:nth-of-type() - valitsee elementtejä, jotka ovat samanlaisia ​​kuin :nth-child() , mutta ottaa huomioon vain elementin tyypin;

:first-of-type - valitsee tietyn tyypin ensimmäisen lapsen;

:last-of-type - valitsee tämän tyypin viimeisen elementin;

:nth-last-of-type() - valitsee tietyn tyypin elementin elementtiluettelosta määritetyn sijainnin mukaan, lopusta alkaen;

:only-of-type - valitsee ainoan määritetyn tyypin elementin pääelementin alielementtien joukosta.

2.12. Pseudoelementin valitsin

Pseudoelementtejä käytetään sisällön lisäämiseen, joka luodaan sisältöominaisuuden avulla:

:first-letter - valitsee jokaisen kappaleen ensimmäisen kirjaimen, koskee vain lohkoelementtejä;

:first-line - valitsee elementtitekstin ensimmäisen rivin, koskee vain lohkoelementtejä;

:befor - lisää luodun sisällön ennen elementtiä;

:after - lisää luodun sisällön elementin jälkeen.

3. Valitsinyhdistelmä

Voit valita elementtejä tarkemmin muotoilua varten käyttämällä valitsimien yhdistelmiä:

img:nth-of-type(even) - valitsee kaikki parilliset kuvat, joiden vaihtoehtoinen teksti sisältää sanan css .

4. Ryhmittelyvalitsimet

Samaa tyyliä voidaan soveltaa useisiin elementteihin samanaikaisesti. Tätä varten sinun on lueteltava tarvittavat valitsimet ilmoituksen vasemmalle puolelle pilkuilla erotettuina:

H1, h2, p, span ( väri: tomaatti; tausta: valkoinen; )

5. Periytys ja kaskadi

Periytys ja kaskadi ovat kaksi CSS:n peruskäsitettä, jotka liittyvät läheisesti toisiinsa. Perinnössä elementit perivät ominaisuudet vanhemmalta (ne sisältävältä elementiltä). Kaskadi ilmenee siinä, kuinka erilaisia ​​tyylisivuja sovelletaan dokumenttiin ja kuinka ristiriitaiset säännöt ohittavat toisensa.

5.1. Perintö

Perintö on mekanismi, jolla tietyt ominaisuudet välittyvät esi-isältä sen jälkeläisille. CSS-spesifikaatio mahdollistaa sivun tekstisisältöön liittyvien ominaisuuksien, kuten värin, fontin, kirjainten välisen, rivinkorkeuden, luettelotyylin, tekstin tasauksen, sisennyksen, tekstin muunnos, näkyvyyden, valkoisen perimisen. -välilyönti ja sanavälit. Monissa tapauksissa tämä on kätevää, koska sinun ei tarvitse asettaa fonttikokoa ja kirjasinperhettä jokaiselle verkkosivun elementille.

Lohkojen muotoiluun liittyvät ominaisuudet eivät periydy. Näitä ovat tausta , reunus , näyttö , kelluvuus ja selkeä , korkeus ja leveys , marginaali , minimikorkeus ja -leveys , ääriviivat , ylivuoto , täyte , sijainti , tekstin koristelu , pystytasaus ja z -indeksi .

Pakotettu perintö

Voit käyttää inherit-avainsanaa pakottaaksesi elementin perimään minkä tahansa emoelementin ominaisuusarvon. Tämä toimii myös ominaisuuksille, joita ei ole oletuksena peritty.

Miten CSS-tyylit asetetaan ja toimivat

1) Tyylit voidaan periä pääelementistä (perityt ominaisuudet tai käyttämällä inherit-arvoa);

2) Alla olevassa tyylitaulukossa olevat tyylit ohittavat yllä olevassa taulukossa olevat tyylit;

3) Eri lähteistä peräisin olevia tyylejä voidaan soveltaa yhteen elementtiin. Voit tarkistaa, mitä tyylejä käytetään selaimen kehittäjätilassa. Voit tehdä tämän napsauttamalla hiiren kakkospainikkeella elementtiä ja valitsemalla "Näytä koodi" (tai jotain vastaavaa). Oikeassa sarakkeessa luetellaan kaikki ominaisuudet, jotka on asetettu tälle elementille tai peritty pääelementistä, sekä tyylitiedostot, joissa ne on määritetty, ja koodirivin järjestysnumero.

4) Tyyliä määriteltäessä voit käyttää mitä tahansa valitsimien yhdistelmää - elementtivalitsinta, elementin pseudoluokkaa, luokkaa tai elementtitunnistetta.

5.2. ryöpytä

CSS on mekanismi, joka ohjaa lopputulosta tilanteessa, jossa samaan elementtiin sovelletaan erilaisia ​​CSS-sääntöjä. On olemassa kolme kriteeriä, jotka määrittävät ominaisuuksien käyttöjärjestyksen:!tärkeä sääntö, täsmällisyys ja järjestys, jossa tyylisivut sisällytetään.

Sääntö!tärkeää

Säännön paino voidaan määrittää avainsanalla!important, joka lisätään heti ominaisuuden arvon jälkeen, esimerkiksi span (font-weight: bold!important;) . Sääntö on sijoitettava ilmoituksen loppuun ennen sulkua ilman välilyöntiä. Tällainen ilmoitus menee kaikkien muiden sääntöjen edelle. Tämän säännön avulla voit peruuttaa ominaisuuden arvon ja asettaa uuden elementille elementtiryhmästä, jos tyylitiedostoon ei ole suoraa pääsyä.

Spesifisyys

Selain laskee kullekin säännölle valitsimen spesifisyys, ja jos elementillä on ristiriitaisia ​​ominaisuusilmoituksia, otetaan huomioon tarkin sääntö. Spesifisyysarvossa on neljä osaa: 0, 0, 0, 0. Valitsinspesifisyys määritellään seuraavasti:

id:lle 0, 1, 0, 0 lisätään;
luokalle 0 lisätään 0, 1, 0;
jokaiselle elementille ja pseudoelementille lisätään 0, 0, 0, 1;
suoraan elementtiin lisätylle rivin tyylille - 1, 0, 0, 0 ;
Yleisvalitsimella ei ole erityisyyttä.

H1 (väri: vaaleansininen;) /*spesifisyys 0, 0, 0, 1*/ em (väri: hopea;) /*spesifisyys 0, 0, 0, 1*/ h1 em (väri: kulta;) /*spesifisyys: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.noin (väri: sininen;) /*tarkkuus: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sivupalkki (väri: harmaa;) /*tarkkuus 0, 0, 1, 0 */ #sivupalkki (väri: oranssi;) /*spesifisyys 0, 1, 0, 0*/ li#sivupalkki (väri: vesi;) /*spesifisyys: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Tämän seurauksena elementtiin sovelletaan tarkempia sääntöjä. Jos elementillä on esimerkiksi kaksi ominaisuutta, joiden arvot ovat 0, 0, 0, 2 ja 0, 1, 0, 1, toinen sääntö voittaa.

Yhdistettyjen pöytien järjestys

Voit luoda useita ulkoisia tyylisivuja ja yhdistää ne yhdelle verkkosivulle. Jos yhdelle elementille löytyy erilaisia ​​ominaisuusarvoja eri taulukoista, sen seurauksena elementtiin sovelletaan alla olevan luettelon tyylisivun sääntöä.

Hei, hyvät Anatomia-projektin lukijat. Verkkovastaava Alexander on kanssasi! Viimeisessä artikkelissa tarkastelimme, mitä CSS-tyylit ovat ja kuinka tärkeitä ne ovat WEB-ohjelmoinnissa.

On aivan selvää, että jos CSS-tyyleillä on merkittävä vaikutus HTML-tiedoston näyttämiseen, ne on yhdistettävä jotenkin. Tänään tarkastelemme neljää päätapaa yhdistää CSS-tyyli HTML:ään.

Älä viivyttele vaan aloitetaan!

Sisältää erillisen CSS-tiedoston!

Yksi kätevimmistä ja yksinkertaisimmista tavoista yhdistää tyylejä on yhdistää erillinen tiedosto tyyleihin. Voit tehdä tämän luomalla tekstieditorilla Notepad++ (tai millä tahansa muulla) tiedoston .css-tunnisteella ja sijoittamalla sen samaan kansioon kuin tiedosto, johon haluamme sen sijoittaa.

Sitten HTML-tiedostoon tagien väliin lähetä seuraava koodi:

Katsotaan nyt mitä tämä kaikki tarkoittaa:

Linkki # englannista käännettynä tarkoittaa "linkkiä". Tällä tavalla näytämme selaimelle, että se, mistä puhumme seuraavaksi, on linkki. rel= # tällä attribuutilla näytämme kuinka CSS-tiedosto liittyy HTML-tiedostoon. "tyylitaulukko" # eli että CSS-tiedosto on peräkkäinen tyylisivu. type="text/css" # kaikki on yksinkertaista: tämä on osoitus siitä, että tiedosto on kirjoitettu tekstimuodossa ja sen tunniste on .css href="style.css" # tämä on linkki tiedostoon, jossa on CSS-tyylejä.

Mielestäni tämä on suosituin tapa sisällyttää CSS-tyylejä.

Kirjoitamme tyylit suoraan HTML-tiedostoon (ensimmäinen menetelmä)

Seuraava tapa määrittää CSS-tyylejä on kirjoittaa ne suoraan HTML-dokumenttiin. Se näyttää tältä:

Jos katsomme, kuinka tämä HTML-dokumentti näytetään selaimessa, näemme, että teksti tagien välissä muuttui punaiseksi. Ja käyttämällä style-attribuuttia sanomme, että seuraavaksi meillä on näyttötyyliparametrit. Väri on väristä vastaava valitsin. Punainen on tämän valitsimen arvo. Tällä tavalla voimme korostaa tiettyjä tekstin osia tietyntyyppisellä näytöllä.

CSS-tyylisivujen sijoittaminen HTML-koodiin (toinen tapa)

Toinen tapa sisällyttää CSS-tyylejä on sijoittaa peräkkäisiä taulukoita itse HTML-tiedoston sisään. Mielestäni tämä menetelmä ei ole kätevin, koska sen avulla sivustokoodin analysoinnista ei tule kovin kätevää. Jotta voit aloittaa CSS-tyylien kirjoittamisen, sinun on vain lisättävä tunnisteet HTML-tiedostoon . Käytännössä se näyttää tältä:

Tässä on esimerkki: CSS-tyylien näyttäminen HTML-dokumentissa

Huomaa, että tagin sisälle kirjoitamme myös koodia CSS-sääntöjen mukaisesti käyttämällä aaltosulkuja. Seuraavissa artikkeleissa puhun yksityiskohtaisemmin CSS-syntaksin säännöistä.

Useiden CSS-tiedostojen yhdistäminen yhteen HTML-dokumenttiin.

HTML-säännöt sallivat useiden CSS-tiedostojen sisällyttämisen kerralla. Monet verkkovastaavat käyttävät tätä: he luovat erilliset CSS-tiedostot tekstille ja kuville. Tai erilliset tiedostot sivun ylä-, alatunniste- ja päätekstiä varten. Mietitään, kuinka tämä toteutetaan.

Luomme useita CSS-tyylitiedostoja. Olkoot niiden nimet style-1.css ja style-2.css. Sijoitamme sen, kuten menetelmässä numero yksi, samaan kansioon HTML-tiedoston kanssa.

Tässä on esimerkki: CSS-tyylien näyttäminen HTML-dokumentissa

Kaikki on samanlainen kuin ensimmäinen menetelmä, vain tässä tapauksessa osoitamme linkit kahteen tiedostoon kerralla.

Linkki sisällä olevaan CSS-tiedostoon samantyyppiseen tiedostoon.

Kaikkien yllä olevien menetelmien lisäksi on olemassa menetelmä, jonka avulla voit sijoittaa linkkejä moniin muihin yhden CSS-tiedoston sisään!

Tämä toteutetaan seuraavasti:
Ensinnäkin meidän on yhdistettävä vähintään yksi CSS-tiedosto koodiisi samalla tavalla.

Toiseksi, syötä seuraava koodi jo yhdistettyyn tiedostoon:

@import url("tyyli-2.css");

Tämä rivi sisältää ylimääräisen CSS-tiedoston tiedostoomme. Jos sinulla on vaikeuksia CSS:n yhdistämisessä, voit kysyä heiltä kommenteissa.
Kuten opimme kahdesta edellisestä oppitunnista, CSS-tekniikka on tehokas työkalu, joka jokaisen verkkovastaavan tulee hallita! Materiaalin omaksumisen parantamiseksi päätin lisätä jokaisen oppitunnin loppuun koulutusvideon + testin, jotta saadut tiedot vahvistetaan.

Materiaalin kiinnitystesti:

Meidän on sisällytettävä CSS-tiedosto asettamalla linkki siihen HTML-tiedostoon. Mikä seuraavista menetelmistä on oikea?

Vaihtoehto 1:

Vaihtoehto 2:

Vaihtoehto 3:

Vaihtoehto 4:

Voimmeko sijoittaa CSS-kaskadeja suoraan HTML-tiedostoon?