Css

Kokeneet kirjoittajat eivät ole vielä tarkistaneet sivun nykyistä versiota, ja se voi poiketa merkittävästi 27.5.2020 tarkistetusta versiosta . vahvistus vaatii 71 muokkausta .
css
Laajennus .css
MIME -tyyppinen teksti/css
Kehittäjä CSS-työryhmä [d]
julkaistu 17. joulukuuta 1996
Muototyyppi Tyylisivujen kieli
Standardit) Taso 1 (suositus)
Taso 2 (suositus)
Taso 2 Versio 1 (suositus)
Verkkosivusto w3.org/Style/CSS/drafts.csswg.org
_

CSS ( /siːɛsɛs/ Englanti  Cascading Style Sheets  ) on muodollinen kieli , jolla kuvataan sivunkuvauskielellä (useimmiten HTML tai XHTML ) kirjoitetun asiakirjan ( verkkosivun ) ulkoasua . Sitä voidaan myös soveltaa mihin tahansa XML - dokumenttiin , kuten SVG tai XUL .

Yleiskatsaus

CSS:n käyttö

Web-sivujen luojat käyttävät CSS:ää määrittääkseen värejä , fontteja , tyylejä, yksittäisten lohkojen sijoittelua ja muita verkkosivujen ulkoasun esitysnäkökohtia. CSS:n suunnittelun päätavoite on eristää ja erottaa verkkosivun loogisen rakenteen kuvaus (joka tehdään HTML :llä tai muilla sivunkuvauskielillä ) kyseisen verkkosivun ulkoasun kuvauksesta (mikä tehdään nyt muodollisen CSS :n avulla Kieli). Tämä erottelu voi lisätä asiakirjan käytettävyyttä, tarjota enemmän joustavuutta ja sen esitystavan hallintaa sekä vähentää rakenteellisen sisällön monimutkaisuutta ja toistuvuutta.

Lisäksi CSS mahdollistaa saman asiakirjan esittämisen eri tyyleillä tai tulostusmenetelmillä , kuten näyttöesitys, tulostettu esitys, äänen lukeminen (omistetulla puheselaimella tai näytönlukijalla) tai pistekirjoituslaitteilla . .

Tapoja sisällyttää CSS asiakirjaan

CSS-säännöt voivat sijaita sekä itse verkkoasiakirjassa , jonka ulkoasua ne kuvaavat, että ulkoisissa tiedostoissa , joiden tunniste .css on . CSS-muoto on tekstitiedosto , joka sisältää luettelon CSS-säännöistä ja niiden kommenteista.
CSS-tyylejä voidaan sisällyttää tai upottaa niiden kuvaamaan verkkodokumenttiin neljällä tavalla:

<!DOCTYPE html> < html > < head > ..... < link rel = "stylesheet" type = "text/css" href = "tyyli.css" > </ head > < body > ..... </ body > </ html >
  • kun tyylitiedosto sijoitetaan erilleen pääasiakirjasta, se voidaan sisällyttää dokumenttiin @import-käskyllä ​​elementissä <style>:
<!DOCTYPE html> < html > < head > ..... < style media = "kaikki" > @ import url ( tyyli . css ) ; </ style > </ head > </ html >
  • kun tyylejä ilmoitetaan dokumentissa, ne voidaan sisällyttää elementtiin <style>, joka itse asiassa sisältyy elementtiin <head>:
<!DOCTYPE html> < html > < head > ..... < style > body { color : red ; } </ style > </ head > < body > ..... </ body > </ html >
  • kun tyylejä kuvataan dokumentin rungossa, ne voivat sijaita erillisen elementin attribuuteissa
<!DOCTYPE> < html > < head > ..... </ head > < body > < p style = "fontin koko: 20px; väri: vihreä; fonttiperhe: arial, helvetica, sans-serif" > ..... </ p > </ body > </ html >

Kahdessa ensimmäisessä tapauksessa asiakirjaan käytetään ulkoisia tyylejä ja toisessa tapauksessa sisäisiä tyylejä .

CSS:n lisääminen XML-dokumenttiin edellyttää, että dokumentissa on erityinen linkki tyylitiedostoon:

<?xml-stylesheet type="text/css" href="style.css"?>

CSS-rakennussäännöt

Kolmessa ensimmäisessä tapauksessa, kun CSS-tyylejä lisätään dokumenttiin (katso yllä), jokaisessa tiedoston CSS-säännössä on kaksi pääosaa - valitsin ja määrityslohko . Säännön vasemmalla puolella ennen "{" olevaa valitsin määrittää, mitä asiakirjan osia (mahdollisesti erityisesti merkittyjä) sääntö koskee. Mainoslohko sijaitsee säännön oikealla puolella. Se sijoitetaan hakasulkeisiin, ja se puolestaan ​​koostuu yhdestä tai useammasta ilmoituksesta , jotka on erotettu merkillä ";". Jokainen ilmoitus on yhdistelmä CSS-ominaisuutta ja arvoa , jotka erotetaan ":" -merkillä. Valitsijat voidaan ryhmitellä samalle riville pilkuilla erotettuna. Tässä tapauksessa ominaisuutta sovelletaan jokaiseen niistä.

valitsin , valitsin { ominaisuus: arvo ; ominaisuus: arvo ; ominaisuus: arvo ; }

Neljännessä tapauksessa, jossa CSS yhdistetään dokumenttiin (katso luettelo), CSS-sääntö, joka on sen elementin tyyliattribuutin arvo, jota se koskee, on luettelo ilmoituksista (" CSS-ominaisuus  : arvo "), joka erotetaan "" ;".

Valitsimien tyypit Yleisvalitsin * { marginaali : 0 ; täyte : 0_ _ } Tunnisteen valitsin p { font-perhe : arial , helvetica , sans-serif ; } Luokan valitsin . huomautus { väri : punainen ; taustaväri : keltainen _ fontin paino : lihavoitu ; } Tunnisteen valitsin # kappale1 { marginaali : 0 ; } Attribuutin valitsin a [ href = "http://www.jokusivusto.fi" ] { font-weight : bold ; } Jälkipolven valitsin (kontekstin valitsin) div # kappale1 p . note { väri : sininen ; } Lapsivalitsin p . huomautus > b { väri : vihreä ; } . div { border : 1 px kiinteä punainen ; täyte - vasen : 20px } . title { font-size : 20 px ; taustaväri : punainen _ } Sisarelementin valitsin h1 + p { font-size : 24 px ; } Pseudoluokan valitsin a : aktiivinen { väri : sininen ; } Pseudoelementin valitsin p :: ensimmäinen kirjain { font-size : 32 px ; }

Luokat ja elementtien tunnisteet

HTML-elementille voidaan määrittää luokka tai tunniste elementin class- tai id-attribuuttien kautta:

<!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > < title > Luokka- ja tunnusvalitsimet </ title > < style > p . iso { font-perhe : arial , helvetica , sans-serif ; väri : punainen_ _ } div # ensimmäinen { taustaväri : hopea ; } </ style > </ head > < body > < div id = "first" > <!-- Tämä on harmaa tausta div, jonka tyyli on id --> </ div > < p class = "iso" > <! -- Tämä on punaista tekstiä --> </ p > </ body > </ html >

Suurin ero elementtiluokkien ja elementtitunnisteiden välillä on se, että tunniste on yhdelle elementille, kun taas luokka on yleensä osoitettu usealle elementille kerralla. Nykyaikaiset selaimet kuitenkin yleensä renderöivät oikein useita elementtejä samalla tunnuksella. Erona on myös se, että luokkia voi olla useita (kun elementin luokka koostuu useista sanoista, jotka on erotettu välilyönneillä). Tämä ei ole mahdollista tunnisteille.

On tärkeää huomata seuraava ero tunnisteen ja luokan välillä: tunnisteita käytetään laajasti JavaScriptissä yksilöllisen elementin löytämiseen asiakirjasta.

Luokkien ja tunnisteiden nimet, toisin kuin tunnisteiden nimet ja niiden attribuutit, ovat kirjainkoolla.

Luokkien ja tunnisteiden ominaisuudet asetetaan asianmukaisilla valitsimilla. Lisäksi se voidaan asettaa koko luokan ominaisuudeksi (tässä tapauksessa valitsin alkaa kirjaimella ".", esimerkiksi ".big") tai itse tunnisteen ominaisuudeksi (tässä tapauksessa valitsin alkaa kirjaimella #, esimerkiksi "#first" ) ja tämän luokan jonkin elementin ominaisuus tai tällä tunnisteella.

CSS:ssä on sivun tekijän määrittelemien luokkien lisäksi myös rajoitettu joukko ns. pseudo -luokkia , jotka kuvaavat tietyn tilan hyperlinkkien esiintymistä dokumentissa, sen elementin ulkoasua, johon syötetään. on keskittynyt, ja elementtien ulkonäkö, jotka ovat muiden elementtien ensimmäisiä lapsia. CSS : ssä on myös neljä ns. pseudoelementtiä : ensimmäinen kirjain, ensimmäinen rivi, joissa käytetään erikoistyylejä ennen ja jälkeen elementin.

Perintö. CSS. CSS-tyyliprioriteetit.

CSS : n soveltaminen HTML - asiakirjoihin perustuu periytymisen ja peräkkäisyyden periaatteisiin . Periytymisperiaate on , että kanta-elementeissä ilmoitetut CSS-ominaisuudet periytyvät lähes aina jälkeläiselementeiltä.

CSS -periaatetta käytetään, kun johonkin HTML -elementtiin liittyy samanaikaisesti useampi kuin yksi CSS-sääntö , eli kun näiden sääntöjen arvojen välillä on ristiriita. Tällaisten ristiriitojen ratkaisemiseksi otetaan käyttöön ensisijaisuussääntöjä.

  • Selaimen tyylillä on alhaisin prioriteetti;
  • Seuraavaksi tärkein on selaimen käyttäjän asetuksissa asettama tyyli;
  • Ja sivun kirjoittajan suoraan asettamalla tyylillä on korkein prioriteetti. Ja edelleen, jo tämän kirjoittajan tyyliin, prioriteetit asetetaan seuraavasti:
    • Tyylit, jotka elementti perii esivanhemmiltaan asiakirjassa, ovat alhaisin prioriteetti;
    • Asiakirjaan liitetyissä ulkoisissa tyylisivuissa määritetyillä tyyleillä on korkeampi etusija.
    • Vielä korkeampi prioriteetti on kaikkien kymmenen erityyppisen valitsimen (katso alakohta "Valitsijatyypit") suoraan asettamilla tyyleillä, jotka sisältyvät dokumentin tyylisäiliöihin. Ei ole harvinaista, että elementti liittyy siihen, sen ulkonäkö määritellään useilla sellaisilla valitsimilla. Tällaiset ristiriidat niiden välillä ratkaistaan ​​laskemalla kunkin tällaisen valitsimen spesifisyys ja soveltamalla valitsimia annettuun elementtiin niiden spesifisyyden mukaisessa laskevassa järjestyksessä. Spesifisyyslaskenta kuvataan alla.
      • Valitsimien spesifisyys on jaettu 4 ryhmään - a, b, c, d:
        • jos tyyli on rivin sisällä (määritelty muodossa style="...", sitten а=1, muuten a=0);
        • arvo bon yhtä suuri kuin tunnisteiden lukumäärä (muuten — id=" ", ne alkavat kirjaimella #) valitsimessa;
        • arvo con yhtä suuri kuin luokkien (class=" ", ne alkavat kirjaimella .), pseudoluokkien (ne alkavat :esimerkiksi kirjaimella a:hover) ja attribuuttivalitsimien ( input[type="text");
        • arvo don yhtä suuri kuin elementtityypin valitsimien ( h1 { color: blue; }) ja pseudokoodielementtien ( p::first-line { color: blue; }) lukumäärä. Tuloksena oleva arvo muunnetaan sitten luvuksi (yleensä desimaaleina). Valitsimella, jolla on korkeampi spesifisyysarvo, on myös korkeampi prioriteetti.
      • Spesifisyyslaskentataulukko [1] :
Valitsin a, b, c, d Määrä
jänneväli 0, 0, 0, 1 yksi
div.class 0, 0, 1, 1 yksitoista
#id .luokka 0, 1, 1, 0 110
div span 0, 0, 0, 2 2
.luokka 0, 0, 1, 0 kymmenen
#id span 0, 1, 0, 1 101
  • Mutta sivun tekijän tai käyttäjän ilmoittamilla tyyleillä liitteenä olevan säännön avulla on korkein prioriteetti !important. Jos tällaisia ​​ominaisuuksia on useita, etusija annetaan ensin tekijän tai käyttäjän asettamille tyyleille ja muille sivun tekijän asettamille ominaisuuksille on määritettävä niiden erityispiirteet edellä kuvatut periaatteet ja soveltaa näitä ominaisuuksia näiden erityispiirteiden alenevassa järjestyksessä.

Esimerkki tyylisivusta

Esimerkki tyylisivusta (tässä muodossa se voidaan joko sijoittaa erilliseen .css-tiedostoon tai kehystää tunnisteilla <style>ja sijoittaa sen verkkosivun "otsikkoon", jossa se toimii):

p { font-perhe : arial , helvetica , sans-serif ; } h2 { font-size : 20 pt ; väri : punainen_ _ tausta : valkoinen _ } . huomautus { väri : punainen ; taustaväri : keltainen _ fontin paino : lihavoitu ; } p # kappale1 { täyte-vasen : 10 px ; } a : hover { text-decoration : none ; } # uutiset p { väri : sininen ; } [ type = "button" ] { taustaväri : vihreä ; }

Tässä on seitsemän CSS - sääntöä valitsimilla p, h2, .note, p#paragraph1, a:hoverja #news p.[type="button"]

  1. Ensimmäinen sääntö on määritetty HTML-elementille p( kappale ) - tyyli on määritetty. Kappaleet näytetään Arialilla tai, jos tällaista fonttia ei ole saatavilla, Helveticassa tai Sans-serifissä, muutoin toisella tämän perheen fontilla.
  2. Toinen sääntö on määritetty HTML-elementille h2(toisen tason otsikko). Toisen tason otsikko näkyy punaisena valkoisella taustalla suurennetussa koossa .
  3. Kolmas sääntö koskee kaikkia elementtejä, joiden attribuutti classon "note". Esimerkiksi kohtaan:<p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. </p>
  4. Neljäs sääntö koskee vain elementtiä, pjonka attribuutti idon yhtä suuri kuin paragraph1. Tällaisella elementillä on 10 pikselin sisäpehmuste (täyte).
  5. Viides sääntö määrittää  hyperlinkkielementtien hover - tyylin . Oletuksena useimmissa selaimissa elementtien teksti on alleviivattu. Tämä sääntö poistaa alleviivauksen, kun hiiren osoitin on näiden elementtien päällä.aa
  6. Kuudes sääntö koskee elementtejä p, jotka ovat minkä tahansa elementin sisällä, jonka attribuutti on idyhtä suuri kuin " news" (#news p on tyypillinen lapsivalitsimen tapaus, katso 5. luettelokohta yllä ).
  7. Seitsemäs sääntö koskee kaikkia elementtejä, joiden attribuutti on typeyhtä suuri kuin button. Tätä sääntöä sovelletaan esimerkiksi elementtiin <input type="button">tai <button type="button">Кнопка</button>(normaali painike), jolloin sen taustaväri muuttuu vihreäksi.

CSS-asettelu

Ennen CSS:n tuloa verkkosivujen muotoilu tehtiin yksinomaan HTML -kielellä suoraan dokumentin sisällössä. CSS:n tultua kuitenkin mahdolliseksi erottaa asiakirjan sisältö ja esitys olennaisesti toisistaan. Tämän innovaation ansiosta oli mahdollista helposti soveltaa yhtä suunnittelutyyliä samankaltaisten asiakirjojen massalle sekä muuttaa tätä mallia nopeasti.

Edut:

  • Useita sivumalleja eri katselulaitteille. Esimerkiksi näytöllä suunnittelu suunnitellaan suurelle leveydelle, tulostuksen aikana valikkoa ei näytetä, ja PDA :ssa ja matkapuhelimessa valikko seuraa sisältöä.
  • Sivuston sivujen latausajan lyhentäminen siirtämällä tiedon esityssäännöt erilliseen CSS-tiedostoon. Tässä tapauksessa selain lataa vain asiakirjan rakenteen ja sivulle tallennetut tiedot, ja selain lataa näiden tietojen esityksen vain kerran ja se voidaan tallentaa välimuistiin .
  • Myöhempien suunnittelumuutosten helppous. Sinun ei tarvitse muokata jokaista sivua, muuta vain CSS-tiedosto.
  • Muita suunnitteluvaihtoehtoja. Esimerkiksi CSS-asettelun avulla voit tehdä tekstilohkon, jonka ympärille muu teksti kiertää (esimerkiksi valikkoon) tai tehdä valikon aina näkyvissä sivua vieritettäessä.

Virheet:

  • Erilaiset näyttöasettelut eri selaimissa (etenkin vanhemmissa), jotka tulkitsevat samat CSS-tiedot eri tavalla.
  • Käytännössä on usein tarpeen korjata yksittäisen CSS-tiedoston lisäksi myös CSS-valitsimiin liitetyt HTML-tunnisteet monimutkaisella ja aineettomalla tavalla, mikä toisinaan tekee tyhjäksi yksittäisten tyylitiedostojen käytön helppouden ja lisää merkittävästi muokkaus- ja testausaikaa.

CSS:n luomisen ja kehityksen historia

CSS on yksi monista W3C :n tukemista teknologioista, joita kutsutaan yhteisesti "verkkostandardeiksi" [2] . 1990-luvulla tuli selväksi tarve standardoida Web, luoda jonkinlaiset yhtenäiset säännöt, joiden mukaan ohjelmoijat ja web-suunnittelijat suunnittelisivat sivustoja. Näin ilmestyivät HTML 4.01- ja XHTML - kielet sekä CSS-standardi.

1990-luvun alussa eri selaimilla oli omat tyylinsä web-sivujen näyttämiseen. HTML kehittyi erittäin nopeasti ja pystyi tyydyttämään kaikki tuolloin olemassa olleet tietosuunnittelun tarpeet, joten CSS ei tuolloin saanut laajaa hyväksyntää.

Haakon Lee loi termin Cascading Style Sheets vuonna 1994. Yhdessä Bert Bosin kanssa hän alkoi kehittää CSS:ää.

Toisin kuin monet tuolloin olemassa olleet tyylikielet, CSS käyttää vanhemmilta lapsiin -periytymistä, joten kehittäjä voi määrittää erilaisia ​​tyylejä jo määritettyjen tyylien perusteella.

1990-luvun puolivälissä World Wide Web Consortium ( W3C ) alkoi osoittaa kiinnostusta CSS:ää kohtaan, ja joulukuussa 1996 annettiin CSS1-suositus.

Taso 1 (CSS1)

W3C-suositus, hyväksytty 17. joulukuuta 1996 , muutettu 11. tammikuuta 1999 [3] . Tämän suosituksen tarjoamia ominaisuuksia:

  • Fonttivaihtoehdot. Mahdollisuus asettaa kirjasintyyppi ja kirjasinkoko sekä sen tyyli - tavallinen, kursivoitu tai lihavoitu.
  • värit. Määrityksen avulla voit määrittää värit tekstille, taustoille, reunuksille ja muille sivuelementeille.
  • tekstin attribuutteja. Mahdollisuus asettaa merkkivälit, sanavälit ja rivin korkeus (eli rivin sisennykset)
  • Tekstin, kuvien, taulukoiden ja muiden elementtien kohdistus.
  • Estä ominaisuudet, kuten korkeus, leveys, täyte ( ) ja täyte padding( margin) ja reunat. Spesifikaatio sisälsi myös rajoitetut keinot kohdistaa elementtejä, kuten floatja clear.

Taso 2 (CSS2)

W3C-suositus, hyväksytty 12. toukokuuta 1998 [4] . Perustuu CSS1:een säilyttäen samalla taaksepäin yhteensopivuuden muutamaa poikkeusta lukuun ottamatta. Lisäys toiminnallisuuteen:

  • Estä asettelu. Suhteellinen, absoluuttinen ja kiinteä paikannus ilmestyi. Voit hallita elementtien sijoittelua sivulla ilman taulukkoasettelua .
  • Mediatyypit. Voit asettaa eri tyylejä eri tietovälineille (esim . näyttö , tulostin , PDA ).
  • Äänilliset tyylisivut. Määrittää äänen, äänenvoimakkuuden jne. äänimedialle (esimerkiksi sokeille sivuston vierailijoille).
  • sivun media. Mahdollistaa esimerkiksi eri tyylien asettamisen parillisten ja parittomien sivujen elementeille tulostettaessa.
  • Edistyksellinen valitsimien mekanismi.
  • Osoittimet.
  • Luotu sisältö. Voit lisätä sisältöä, jota ei ole lähdedokumentissa, ennen tai jälkeen halutun elementin.

W3C ei enää tue CSS2:ta ja suosittelee CSS2.1:n käyttöä

Tason 2 versio 1 (CSS2.1)

W3C-suositus, hyväksytty 7. kesäkuuta 2011 .

CSS2.1 perustuu CSS2:een. Virheiden korjaamisen lisäksi joitain osia määrityksestä on muutettu uudessa versiossa ja joitain[ mitä? ] ja poistettu kokonaan. Poistetut osat voidaan lisätä CSS3:een tulevaisuudessa.

Taso 3 (CSS3)

CSS3 ( Englannin  Cascading Style Sheets 3  - cascading style sheets of the kolmas sukupolvi ) on aktiivisesti kehitetty CSS -spesifikaatio . Se on muodollinen kieli , joka on toteutettu merkintäkielellä . Suurin versio verrattuna CSS1:een, CSS2:een ja CSS2.1:een. CSS3:n pääominaisuus on kyky luoda animoituja elementtejä ilman JS :ää [5] , tuki lineaarisille ja säteittäisille gradienteille, varjoille, tasoitukselle ja muille.

Sitä käytetään ensisijaisesti HTML- ja XHTML - kuvauskielillä kirjoitettujen verkkosivujen ulkoasun kuvaamiseen ja muotoiluun , mutta sitä voidaan soveltaa myös mihin tahansa XML-dokumenttiin , kuten SVG tai XUL .

Kehitysversio (luettelo kaikista moduuleista) [6] .

Toisin kuin aikaisemmissa versioissa, spesifikaatio on jaettu moduuleihin, joiden kehitys ja kehitys suoritetaan itsenäisesti. CSS3 perustuu CSS2.1:een, täydentää olemassa olevia ominaisuuksia ja arvoja ja lisää uusia.

Innovaatiot alkaen pienistä, kuten lohkojen pyöristetyistä kulmista, päättyen muuntamiseen ( animaatioon ) ja mahdollisesti muuttujien käyttöönottoon [7] [8] .

Taso 4 (CSS4)

W3C :n kehittämä 29. syyskuuta 2011 lähtien [9] [10] .

CSS4-moduulit rakentuvat CSS3:n päälle ja lisäävät niihin uusia ominaisuuksia ja arvoja. Kaikki ne ovat toistaiseksi olemassa luonnosten muodossa (työluonnos).

Esimerkiksi:

CSS-selaimen tuki

Täydellisimmin CSS-standardia tukevat selaimet , jotka toimivat Gecko- ( Mozilla Firefox , jne.), WebKit- ( Safari , Arora , Google Chrome ) ja Presto (Opera) [11] -koneilla.

Entinen yleisimmin käytetty selain [12] Internet Explorer 6 ei täysin tue CSS :ää [13] .

Seitsemän vuotta myöhemmin julkaistu Internet Explorer 7 paransi merkittävästi CSS-tuen tasoa [14] [15] , mutta sisälsi silti huomattavan määrän virheitä [16] .

Internet Explorer 8 käyttää uutta moottoria, joka tukee täysin CSS 2.1:tä ja osittain tukee CSS 3:a [17] .

Acid -testi kehitettiin verkkostandardien selaimen tuen testaamiseksi, mukaan lukien CSS-standardin useat osat .

Erilaisia ​​lohkomalleja

W3C :n CSS-standardit käyttävät mallia, jossa ominaisuus widthmäärittää laatikon sisällön leveyden ilman täyttöä tai reunoja. Internet Explorerin varhaiset versiot (4 ja 5) ottivat käyttöön oman mallinsa, jossa leveys määrittää laatikon reunojen välisen etäisyyden, mukaan lukien täyte ( padding) ja reunat ( border). Internet Explorer 5:n lisäksi tätä mallia ymmärtävät myös Netscape 4 ja Opera 7. Tuki W3C-standardimallille ilmestyi vasta kuudennessa versiossa IE:ssä.

Tuleva CSS3-standardi esitteli ominaisuuden box-sizing, jonka arvot content-boxosoittavat W3C-standardimallin border-boxkäyttöä ja IE 5 -mallia tämän ongelman ratkaisemiseksi.

Mozilla - selaimessa tämän ominaisuuden tuella sen omalla "työnimellä" -moz-box-sizingotettiin käyttöön toinen arvo - padding-box, jolloin luotiin kolmas laatikkomalli, jossa width on lohkon sisällön koko ja sisennykset, ei sisällä kehys.

CSS-suodattimet

Erot CSS:n toteutuksessa eri selaimissa pakottavat verkkokehittäjät etsimään ratkaisuja, kuinka saada kaikki selaimet näyttämään sivu samalla tavalla. CSS-suodattimet (kutsutaan usein myös CSS-hakkereiksi) antavat sinun käyttää valikoivasti tyylejä eri elementteihin. Esimerkiksi Internet Explorer 6:n tiedetään pakottavan sääntöjä, jotka käyttävät näkymävalitsimia (suodatin, joka tunnetaan nimellä " star html bug "). Jotta Quirks-tilassa toimiva W3C- ja IE-laatikkomalli näyttäisi 100 pikseliä leveän laatikon, jossa on 10 pikselin täyte, voit kirjoittaa koodin seuraavasti: * html селектор#someblock

/* W3C-malli - 80px sisällön leveys ja 10px täyttö kummallakin sivulla */ # someblock { leveys : 80 px ; täyte : 10px _ _ } /* Seuraava sääntö koskee vain IE6:ta. */ * html # someblock { leveys : 100 px ; täyte : 10px _ _ }

Toinen tapa valvoa Internet Explorerin sääntöjä valikoivasti on ehdolliset kommentit .

Turvallisuus

Kaikki vuonna 2010 tuetut Internet Explorerin versiot olivat haavoittuvia: kun selain käsittelee CSS-tyylejä, alustettua muistia saattaa ilmestyä, jota käytetään myöhemmin haitallisen koodin etäkäynnistykseen käyttäjän tietokoneella [18] .

CSS Framework

CSS Framework (myös Web design framework ) on valmiiksi valmisteltu CSS-kirjasto, joka on luotu yksinkertaistamaan taittosuunnittelijan työtä, nopeuttamaan kehitystä ja eliminoimaan mahdollisimman paljon asetteluvirheitä (yhteensopivuusongelmat eri selainversioiden välillä jne.). Aivan kuten komentosarjaohjelmointikielten kirjastot, CSS-kehykset, yleensä ulkoisen .css-tiedoston muodossa, "yhdistetään" projektiin (lisätään web-sivun otsikkoon), jolloin ohjelmoija tai suunnittelija, joka ei ole kokenut asettelu html-asettelun luomiseksi oikein.

CSS-laajennukset

Usein sivuja asetettaessa on käytettävä samaa arvoa monta kertaa: sama väri, sama fontti. Ja jos tätä arvoa on muutettava, sitä on muutettava monissa paikoissa.

Näiden ongelmien ratkaisemiseksi ja kehityksen nopeuttamiseksi CSS-kielellä on useita laajennuksia (esikäsittelijöitä). Laajennukset siinä mielessä, että CSS-koodi on kelvollinen koodi laajennukselle, mutta ei päinvastoin. Jotta "laajennettu CSS" -koodi muuttuisi tavalliseksi CSS-tiedostoksi, jonka selain havaitsee, sinun on käännettävä se. Kokoonpano voi olla useita tyyppejä:

  • sivun käynnistyksen aikana asiakaspuolella ( JavaScriptin avulla )
  • sivun käynnistyksen aikana palvelinpuolella
  • sivuston asettelun aikana käyttämällä erityistä kääntäjää

Esimerkkejä CSS-laajennuksista (esikäsittelijät):

Katso myös

Muistiinpanot

  1. ↑ McFarland, 2017 , s. 126.
  2. ↑ Dave Shea, Molly E. Holtzschlag. CSS-suunnittelun filosofia. / Per. englannista. A. Slinkina. — M.: NT Press, 2005. — 312 s.: ill.
  3. ↑ Cascading Style Sheets, taso 1 . Haettu 16. kesäkuuta 2006. Arkistoitu alkuperäisestä 9. helmikuuta 2011.
  4. ↑ Cscading Style Sheets, taso 2 CSS2-spesifikaatio . Käyttöpäivä: 9. maaliskuuta 2011. Arkistoitu alkuperäisestä 16. tammikuuta 2011.
  5. ↑ Yksinkertainen CSS3-animaatio Animate.css:n avulla . Haettu 18. syyskuuta 2018. Arkistoitu alkuperäisestä 18. syyskuuta 2018.
  6. ↑ W3C : CSS: nykyinen työ Arkistoitu 3. maaliskuuta 2011 Wayback Machinessa , CSS 3 jne.
  7. ↑ CSS3: css-muuttujat ovat huono idea. Anna meidän vain soittaa muille valitsijoille. Arkistoitu 2. tammikuuta 2010 Wayback Machinessa // Rip's Domain
  8. ↑ CSS-muuttujat arkistoitu 5. huhtikuuta 2010 Wayback Machinessa // dave-woods.co.uk
  9. ↑ Valitsintaso 4 (downlink) . W3.org (29. syyskuuta 2011). Arkistoitu alkuperäisestä 30. toukokuuta 2012. 
  10. ↑ Tutustu CSS 4:n uuteen | webmonkey | Wired.com (linkki ei saatavilla) . Webmonkey (26. lokakuuta 2011). Arkistoitu alkuperäisestä 30. toukokuuta 2012. 
  11. ↑ Verkkoselainstandardien tuki . Haettu 11. tammikuuta 2008. Arkistoitu alkuperäisestä 14. huhtikuuta 2020.
  12. ↑ Mozillan Firefoxin maailmanlaajuinen käyttöosuus kasvaa edelleen OneStat.comin mukaan . Haettu 11. tammikuuta 2008. Arkistoitu alkuperäisestä 26. helmikuuta 2021.
  13. ↑ Sisältö ja selaimen yhteensopivuus . Käyttöpäivä: 11. tammikuuta 2008. Arkistoitu alkuperäisestä 11. tammikuuta 2008.
  14. ↑ Tiedot IE7:n CSS-muutoksistamme Arkistoitu 30. heinäkuuta 2008 Wayback Machine IEBlogissa
  15. ↑ Cascading Style Sheet -yhteensopivuus Internet Explorer 7:ssä Arkistoitu 1. helmikuuta 2008 Wayback Machine MSDN :lle
  16. ↑ Internet Explorerin outo ja ihmeellinen maailma (downlink) . Käyttöpäivä: 11. tammikuuta 2008. Arkistoitu alkuperäisestä 13. tammikuuta 2008. 
  17. ↑ CSS-yhteensopivuus ja Internet Explorer Arkistoitu 29. joulukuuta 2010 Wayback Machine MSDN :lle
  18. ↑ Microsoft: Kaikki Internet Explorerin versiot ovat alttiina hakkereille . Haettu 2. tammikuuta 2011. Arkistoitu alkuperäisestä 3. tammikuuta 2011.

Kirjallisuus

  • David Sawyer McFarland. Uusi iso kirja CSS = CSS: The Missing Manual. - Pietari: Piter , 2017. - 720 s. - 1000 kappaletta.  - ISBN 978-5-496-02080-0 .
  • Ed Tittel, Jeff Noble. HTML, XHTML & CSS For Dummies, 7th Edition = HTML, XHTML & CSS For Dummies, 7th Edition. - M . : "Dialektiikka" , 2011. - 400 s. - ISBN 978-5-8459-1752-2 .
  • Stephen Schafer. HTML, XHTML ja CSS. Käyttäjän raamattu, 5. painos = HTML, XHTML ja CSS Bible, 5. painos. - M . : "Dialektiikka" , 2011. - 656 s. - ISBN 978-5-8459-1676-1 .

Linkit

Englanninkieliset resurssit

Venäjänkieliset resurssit

 Tyylisivujen kielet ( vertaa , luettelo )
Tilat
Vakio
ei-standardi
 CSS Style Sheets
css
Vertailu
  • CSS-tuki selainkoneissa
  • Tyylisivujen kielet
Web-suunnittelu
CSS Style Sheets