Css

Az oldal jelenlegi verzióját még nem ellenőrizték tapasztalt közreműködők, és jelentősen eltérhet a 2020. május 27-én felülvizsgált verziótól ; az ellenőrzéshez 71 szerkesztés szükséges .
css
Kiterjesztés .css
MIME típusú szöveg/css
Fejlesztő CSS munkacsoport [d]
közzétett 1996. december 17
Formátum típusa Stíluslap nyelve
Szabvány(ok) 1. szint (ajánlás)
2. szint (ajánlás)
2. szint 1. változat (ajánlás)
Weboldal w3.org/Style/CSS/drafts.csswg.org_
_

A CSS ( /siːɛsɛs/ English  Cascading Style Sheets  ) egy formális nyelv egy jelölőnyelv (leggyakrabban HTML vagy XHTML ) használatával írt dokumentum ( weboldal ) megjelenésének leírására . Bármilyen XML - dokumentumra is alkalmazható , például SVG vagy XUL .

Áttekintés

CSS használata

A CSS-t a weboldal készítői használják színek , betűtípusok , stílusok, az egyes blokkok elhelyezésének és a weboldalak megjelenésének egyéb megjelenítési szempontjainak meghatározására. A CSS fő tervezési célja, hogy elkerítse és elkülönítse egy weboldal logikai szerkezetének leírását (ami HTML vagy más jelölőnyelv használatával történik ) a weboldal megjelenésének leírásától (ami most a formális CSS segítségével történik nyelv). Ez az elkülönítés növelheti a dokumentumok hozzáférhetőségét, nagyobb rugalmasságot és ellenőrzést biztosít a megjelenítése felett, valamint csökkenti a szerkezeti tartalom összetettségét és ismétlődését.

Ezenkívül a CSS lehetővé teszi, hogy ugyanazt a dokumentumot különböző stílusokban vagy kimeneti módokban mutassák be , például képernyőn, nyomtatott prezentációban, hangolvasásban (dedikált hangböngészővel vagy képernyőolvasóval), vagy Braille -eszközökkel megjelenítve. .

A CSS dokumentumba való belefoglalásának módjai

A CSS-szabályok egyaránt megtalálhatók magában a webdokumentumban , amelynek megjelenését leírják, valamint a kiterjesztésű külső fájlokban . A CSS-formátum egy szöveges fájl , amely a CSS-szabályok listáját és azok megjegyzéseit tartalmazza. A CSS-stílusok négyféleképpen foglalhatók be vagy ágyazhatók be az általuk leírt webdokumentumba : .css

<!DOCTYPE html> < html > < fej > ..... < link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > < body > ..... </ body > </ html >
  • ha a stílusfájlt a szülődokumentumtól elkülönítve helyezzük el, akkor az elemen lévő @import utasítással bekerülhet a dokumentumba <style>:
<!DOCTYPE html> < html > < fej > ..... < style media = "all" > @ import url ( style . css ) ; </ style > </ head > </ html >
  • amikor a stílusok deklaráltak egy dokumentumon belül, akkor az elemben szerepelhetnek <style>, ami valójában benne van az elemben <head>:
<!DOCTYPE html> < html > < fej > ..... < stílus > body { szín : piros ; } </ style > </ head > < body > ..... </ body > </ html >
  • ha a stílusokat a dokumentum törzsében írják le, akkor azok egy külön elem attribútumaiban helyezkedhetnek el
<!DOCTYPE> < html > < fej > ..... </ head > < body > < p style = "font-size: 20px; color: green; font-family: arial, helvetica, sans-serif" > ..... </ p > </ body > </ html >

Az első két esetben a program külső stílusokat alkalmaz a dokumentumra , a másodikban pedig a belső stílusokat .

A CSS XML-dokumentumhoz való hozzáadásához az utóbbinak tartalmaznia kell egy speciális hivatkozást a stílusfájlra:

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

CSS szerkesztési szabályok

A CSS-stílusok dokumentumhoz való hozzáadásának első három esetben (lásd fent) a fájl minden CSS-szabálya két fő részből áll - egy választóból és egy deklarációs blokkból . A szabály bal oldalán, a "{" előtt található választó határozza meg, hogy a dokumentum mely (esetleg speciálisan megjelölt) részeire vonatkozik a szabály. A hirdetésblokk a szabály jobb oldalán található. Kapcsos zárójelben van, és egy vagy több „;”-vel elválasztott deklarációból áll. Minden deklaráció egy CSS tulajdonság és egy „:” karakterrel elválasztott érték kombinációja . A kiválasztókat ugyanabba a sorba lehet csoportosítani, vesszővel elválasztva. Ebben az esetben a tulajdonság mindegyikre vonatkozik.

selector , selector { property: value ; tulajdonság: érték ; tulajdonság: érték ; }

A negyedik esetben, amikor a CSS-t egy dokumentumhoz kapcsoljuk (lásd a listát), a CSS-szabály, amely az elem stílusattribútumának értéke, amelyre vonatkozik, deklarációk listája (" CSS tulajdonság  : érték "), a következővel elválasztva: " ;".

A szelektorok típusai Univerzális választó * { margó : 0 ; párnázás : 0_ _ } Címkeválasztó p { font-family : arial , helvetica , sans-serif ; } Osztályválasztó . jegyzet { szín : piros ; háttér színe : sárga font-weight : félkövér ; } Azonosító választó # bekezdés1 { margó : 0 ; } Attribútumválasztó a [ href = "http://www.somesite.com" ] { font-weight : bold ; } Leszármazott választó (kontextusválasztó) div # bekezdés1 p . jegyzet { szín : kék ; } Gyermekválasztó o . jegyzet > b { szín : zöld ; } . div { border : 1 px solid red ; padding - bal oldal : 20 képpont } . title { font-size : 20 px ; háttér színe : piros } A testvérelem-választó h1 + p { font-size : 24 px ; } Pszeudoosztály választó a : aktív { szín : kék ; } Pszeudoelem választó p :: első betű { font-size : 32 px ; }

Osztályok és elemazonosítók

Egy osztály vagy azonosító hozzárendelhető egy HTML-elemhez az elem osztály vagy azonosító attribútumain keresztül:

<!DOCTYPE html> < html > < fej > < meta http-equiv = "Tartalomtípus" content = "text/html; charset=utf-8" > < cím > Osztály és azonosító választó </ title > < style > p . big { font-family : arial , helvetica , sans-serif ; szín : piros _ } div # first { háttérszín : ezüst ; } </ style > </ head > < body > < div id = "first" > <!-- Ez egy szürke háttér div stílusa id --> </ div > < p class = "nagy" > <! -- Ez piros szöveg --> </ p > </ body > </ html >

Az elemosztályok és az elemazonosítók közötti fő különbség az, hogy egy azonosító egyetlen elemre vonatkozik, míg egy osztályt általában több elemhez rendelnek egyszerre. A modern böngészők azonban általában több elemet is helyesen jelenítenek meg ugyanazzal az azonosítóval. A különbség az is, hogy több osztály is létezhet (ha egy elem osztálya több szóból áll, amelyeket szóközzel választanak el). Az azonosítóknál ez nem lehetséges.

Fontos megjegyezni a következő különbséget az azonosító és az osztály között: az azonosítókat széles körben használják a JavaScriptben , hogy egyedi elemeket találjanak a dokumentumban.

Az osztályok és azonosítók nevei – a címkék nevétől és attribútumuktól eltérően – megkülönböztetik a kis- és nagybetűket.

Az osztályok és azonosítók tulajdonságait a megfelelő szelektorok segítségével állítjuk be. Sőt, beállítható az osztály egészének tulajdonságaként (ebben az esetben a szelektor "."-vel kezdődik, például ".big"), vagy magának az azonosítónak a tulajdonságaként (ebben az esetben a a választó "#"-val kezdődik, például "#first" ), és ennek az osztálynak valamely elemének tulajdonsága vagy ezzel az azonosítóval.

A CSS-ben az oldal szerzője által meghatározott osztályokon kívül korlátozott számú úgynevezett pszeudo -osztály is létezik, amelyek egy bizonyos állapotú hiperhivatkozások megjelenését írják le a dokumentumban, annak az elemnek a megjelenését, amelyen a bemenet fókuszált, és olyan elemek megjelenése, amelyek más elemek első gyermekei. A CSS-ben négy úgynevezett pszeudoelem is található : az első betű, az első sor, speciális stílusokat alkalmazva az elem előtt és után.

Öröklés. Lépcsőzetes. A CSS stílus prioritásai.

A CSS alkalmazása HTML dokumentumokra az öröklés és a lépcsőzetes elven alapul . Az öröklődés elve az , hogy az őselemeken deklarált CSS-tulajdonságokat szinte mindig a leszármazott elemek öröklik.

A kaszkádolás elvét akkor alkalmazzuk, ha egynél több CSS-szabály van társítva egy HTML -elemhez egyidejűleg, vagyis ha ütközés van ezen szabályok értékei között. Az ilyen konfliktusok megoldására elsőbbségi szabályokat vezetnek be.

  • A böngészőstílus a legalacsonyabb prioritású;
  • A következő legfontosabb a böngésző felhasználója által a beállításaiban beállított stílus;
  • A közvetlenül az oldal szerzője által beállított stílus pedig a legmagasabb prioritást élvezi. És a továbbiakban, már a szerző stílusában, a prioritások a következők:
    • A legalacsonyabb prioritásúak azok a stílusok, amelyeket egy elem az őseitől örökölt egy dokumentumban;
    • A dokumentumhoz csatolt külső stíluslapokon meghatározott stílusok magasabb prioritást élveznek;
    • Még nagyobb prioritást élveznek azok a stílusok, amelyeket közvetlenül a dokumentum stílustárolóiban található mind a tíz fajta választó (lásd a „Kiválasztó típusai”) közvetlenül beállított. Nem ritka, hogy egy elemhez kapcsolódik, megjelenését több ilyen szelektor határozza meg. A köztük lévő ilyen konfliktusokat úgy oldjuk meg, hogy kiszámítjuk az egyes ilyen szelektorok specifikusságát, és ezeket a szelektorokat az adott elemre alkalmazzuk, specifikusságuk csökkenő sorrendjében. A specifitás számítását az alábbiakban ismertetjük.
      • A szelektorok sajátossága 4 csoportra oszlik - a, b, c, d:
        • ha a stílus inline (definíció szerint style="...", akkor а=1, egyébként a=0);
        • az érték megegyezik a választóban blévő azonosítók számával (egyébként — id=" ", ezek karakterrel kezdődnek );#
        • az érték cmegegyezik az osztályok számával (class=" ", karakterrel kezdődnek .), az pszeudoosztályok ( :például -vel kezdődnek a:hover) és az attribútumválasztók ( input[type="text") számával;
        • az érték dmegegyezik az elemtípus h1 { color: blue; }-választók ( ) és a pszeudokód elemek ( p::first-line { color: blue; }) számával. A kapott értéket ezután számmá alakítja (általában decimális formában). A magasabb specificitási értékkel rendelkező szelektor magasabb prioritású is.
      • Specifikusság számítási táblázat [1] :
Választó a, b, c, d Szám
span 0, 0, 0, 1 egy
div.class 0, 0, 1, 1 tizenegy
#id .osztály 0, 1, 1, 0 110
div span 0, 0, 0, 2 2
.osztály 0, 0, 1, 0 tíz
#id span 0, 1, 0, 1 101
  • De az oldal szerzője vagy a felhasználó által a kísérő szabály segítségével deklarált stílusok élvezik a legmagasabb prioritást !important. Ha több ilyen tulajdonság van, akkor elsősorban a szerző vagy a felhasználó által beállított stílusokat részesítjük előnyben , a többi tulajdonságnál pedig, amelyeket az oldal szerzője állít be, meg kell határozni azok sajátosságait a a fent leírt elveket, és alkalmazza ezeket a tulajdonságokat e sajátosságok csökkenő sorrendjében.

Példa stíluslapra

Példa egy stíluslapra (ebben a formában elhelyezhető egy külön .css fájlban, vagy bekeretezhető címkékkel <style>, és elhelyezhető annak a weboldalnak a „fejlécében”, amelyen működik):

p { font-family : arial , helvetica , sans-serif ; } h2 { font-size : 20 pt ; szín : piros _ háttér : fehér _ } . jegyzet { szín : piros ; háttér színe : sárga font-weight : félkövér ; } p # bekezdés1 { padding-left : 10 px ; } a : hover { text-decoration : none ; } # hírek p { szín : kék ; } [ type = "button" ] { háttérszín : zöld ; }

Íme hét CSS-szabály a , p, h2, .note, p#paragraph1és a:hoverválasztókkal . #news p[type="button"]

  1. Az első szabály hozzá van rendelve egy HTML elemhez p( bekezdés ) - stílus hozzá van rendelve. A bekezdések Arialban jelennek meg, vagy ha ilyen betűtípus nem áll rendelkezésre, akkor Helvetica vagy Sans-serif, ellenkező esetben a család másik betűtípusával.
  2. A második szabály a HTML elemhez van hozzárendelve h2(második szintű címsor). A második szint fejléce piros színben jelenik meg fehér alapon, felnagyított méretben .
  3. A harmadik szabály minden olyan elemre vonatkozik, amelynek attribútuma class"note". Például a bekezdéshez:<p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. </p>
  4. A negyedik szabály csak arra az elemre vonatkozik, pamelynek attribútuma idegyenlő paragraph1. Egy ilyen elemnek 10 pixeles belső párnázása lesz (padding).
  5. Az ötödik szabály határozza meg a  hiperhivatkozások elemeinek lebegtetési stílusát . Alapértelmezés szerint a legtöbb böngészőben az elemek szövege aláhúzott. Ez a szabály eltávolítja az aláhúzást, ha az egérmutató ezen elemek felett van.aa
  6. A hatodik szabály azokra az elemekre vonatkozik , amelyek minden olyanp elemen belül vannak , amelynek attribútuma egyenlő " " (a #news p a gyermekválasztó tipikus esete, lásd a fenti 5. listaelemet ).idnews
  7. A hetedik szabály minden olyan elemre vonatkozik, amelynek attribútuma typeegyenlő button. Ez a szabály például a <input type="button">vagy elemre <button type="button">Кнопка</button>(normál gomb) vonatkozik, háttérszíne zöldre változik.

CSS elrendezés

A CSS megjelenése előtt a weboldal stílusa kizárólag HTML -ben történt , közvetlenül a dokumentum tartalmán belül. A CSS megjelenésével azonban lehetővé vált a dokumentum tartalmának és megjelenítésének alapvető elválasztása. Ennek az újításnak köszönhetően lehetővé vált egyetlen tervezési stílus egyszerű alkalmazása hasonló dokumentumok tömegéhez, valamint a terv gyors megváltoztatása.

Előnyök:

  • Több oldalterv különböző megtekintési eszközökhöz. Például egy képernyőn a dizájnt nagy szélességre tervezik, nyomtatás közben a menü nem jelenik meg, PDA -n és mobiltelefonon pedig a menü követi a tartalmat.
  • A webhely oldalainak betöltési idejének csökkentése az adatmegjelenítési szabályok külön CSS fájlba átvitelével. Ebben az esetben a böngésző csak a dokumentumszerkezetet és az oldalon tárolt adatokat tölti le, ezeknek az adatoknak a megjelenítését a böngésző csak egyszer tölti le, és gyorsítótárazható .
  • A későbbi tervezési változtatások egyszerűsége. Nem kell minden oldalt szerkesztenie, csak a CSS-fájlt kell módosítania.
  • További tervezési lehetőségek. Például a CSS-elrendezés használatával létrehozhat egy szövegtömböt, amely köré a szöveg többi része kerül (például menü esetén), vagy a menüt mindig láthatóvá teheti az oldal görgetése során.

Hibák:

  • Különböző böngészőkben (különösen régebbiekben) eltérő megjelenítési elrendezések, amelyek eltérően értelmezik ugyanazokat a CSS-adatokat.
  • A gyakorlatban gyakran nem csak egyetlen CSS-fájlt kell javítani, hanem a CSS-szelektorokhoz kapcsolódó HTML-címkéket is összetett és megfoghatatlan módon, ami esetenként megcáfolja az egyedi stílusfájlok egyszerű alkalmazását, és jelentősen megnöveli a szerkesztési és tesztelési időt.

A CSS létrehozásának és fejlesztésének története

A CSS egyike a W3C által támogatott technológiák széles skálájának, amelyeket összefoglaló néven "webszabványoknak" neveznek [2] . Az 1990-es években világossá vált a web szabványosításának szükségessége, valamiféle egységes szabályok létrehozása, amelyek alapján a programozók és a webdesignerek oldalakat terveznek. Így jelentek meg a HTML 4.01 és XHTML nyelvek és a CSS szabvány.

Az 1990-es évek elején a különböző böngészőknek saját stílusuk volt a weboldalak megjelenítésére. A HTML nagyon gyorsan fejlődött, és minden akkori információtervezési igényt ki tudott elégíteni, így a CSS ekkor még nem kapott széles körű elfogadást.

A Cascading Style Sheets kifejezést Haakon Lee alkotta meg 1994-ben. Bert Bosszal együtt elkezdte fejleszteni a CSS-t.

Az akkoriban létező sok stílusnyelvtől eltérően a CSS szülő-gyermek öröklődést használ, így a fejlesztők különböző stílusokat határozhatnak meg a már meghatározott stílusok alapján.

Az 1990-es évek közepén a World Wide Web Consortium ( W3C ) kezdett érdeklődni a CSS iránt, és 1996 decemberében kiadták a CSS1 ajánlást.

1. szint (CSS1)

1996. december 17-én elfogadott W3C ajánlás, 1999. január 11- én módosították [3] . Az ajánlás által biztosított szolgáltatások közül:

  • Betűtípus-beállítások. Lehetőség a betűtípus és a betűméret, valamint a stílus beállítására - normál, dőlt vagy félkövér.
  • Színek. A specifikáció lehetővé teszi a szöveg, a hátterek, a szegélyek és más oldalelemek színeinek meghatározását.
  • szöveg attribútumok. Karaktertávolság, szóköz és sormagasság (azaz sor behúzás) beállításának lehetősége
  • Szöveg, képek, táblázatok és egyéb elemek igazítása.
  • Blokktulajdonságok, például magasság, szélesség, padding ( ) és padding padding( margin) és szegélyek. Ezenkívül a specifikáció korlátozott eszközöket tartalmazott az elemek, például floatés clear.

2. szint (CSS2)

1998. május 12- én elfogadott W3C ajánlás [4] . CSS1-en alapul, miközben néhány kivételtől eltekintve visszafelé kompatibilis. Hozzáadás a funkcionalitáshoz:

  • Blokk elrendezés. Megjelent a relatív, abszolút és rögzített pozicionálás. Lehetővé teszi az elemek elhelyezésének szabályozását az oldalon táblázatos elrendezés nélkül .
  • Médiatípusok. Lehetővé teszi különböző stílusok beállítását a különböző adathordozókhoz (pl . monitor , nyomtató , PDA ).
  • Hangos stíluslapok. Megadja a hangot, a hangerőt stb. az audio médiához (például vak látogatók számára).
  • oldal média. Lehetővé teszi például különböző stílusok beállítását a páros és páratlan oldalakon lévő elemekhez nyomtatáskor.
  • A szelektorok fejlett mechanizmusa.
  • Mutatók.
  • Generált tartalom. Lehetővé teszi olyan tartalom hozzáadását a kívánt elem elé vagy után, amely nem szerepel a forrásdokumentumban.

A W3C már nem támogatja a CSS2-t, és a CSS2.1 használatát javasolja

2. szintű 1. változat (CSS2.1)

W3C ajánlás, elfogadva 2011. június 7- én .

A CSS2.1 a CSS2-n alapul. A hibák kijavítása mellett a specifikáció egyes részei is módosultak az új változatban, illetve néhány[ mi? ] és teljesen eltávolítjuk. Az eltávolított részek a jövőben hozzáadhatók a CSS3-hoz.

3. szint (CSS3)

A CSS3 ( English  Cascading Style Sheets , a harmadik generációs 3 lépcsőzetes stíluslapok  ) egy aktívan fejlesztett CSS specifikáció . Ez egy formális nyelv , amelyet jelölőnyelv segítségével valósítottak meg . A legnagyobb revízió a CSS1, CSS2 és CSS2.1 verziókhoz képest. A CSS3 fő jellemzője az animált elemek létrehozásának lehetősége JS [5] használata nélkül , támogatja a lineáris és radiális színátmeneteket, árnyékokat, simításokat stb.

Elsősorban a HTML és XHTML jelölőnyelvekkel írt weboldalak megjelenésének leírására és stílusosítására szolgál , de alkalmazható bármilyen XML dokumentumra is , például SVG vagy XUL .

Fejlesztési verzió (összes modul listája) [6] .

A korábbi verziókkal ellentétben a specifikáció modulokra oszlik, amelyek fejlesztése és fejlesztése egymástól függetlenül történik. A CSS3 a CSS2.1-re épít, kiegészíti a meglévő tulajdonságokat és értékeket, és újakat ad hozzá.

Újítások, kezdve a blokkok kicsi, lekerekített sarkaival, transzformációval ( animáció ) és esetleg változók bevezetésével [7] [8] .

4. szint (CSS4)

A W3C 2011. szeptember 29. óta fejlesztette [9] [10] .

A CSS4 modulok a CSS3-ra épülnek, és új tulajdonságokat és értékeket adnak hozzájuk. Mindegyik tervezet (working draft) formájában létezik eddig.

Például:

CSS böngésző támogatás

A CSS szabványt leginkább a Gecko ( Mozilla Firefox stb.), WebKit ( Safari , Arora , Google Chrome ) és Presto (Opera) [11] motorokon futó böngészők támogatják .

A korábbi legelterjedtebb böngésző [12] Internet Explorer 6 nem támogatja teljes mértékben a CSS- t [13] .

A hét évvel később kiadott Internet Explorer 7 jelentősen javította a CSS-támogatás szintjét [14] [15] , de még így is jelentős számú hibát tartalmazott [16] .

Az Internet Explorer 8 új motort használ, amely teljes mértékben támogatja a CSS 2.1-et és részben támogatja a CSS 3-at [17] .

A webes szabványok böngésző-támogatásának tesztelésére, beleértve a CSS-szabvány különböző részeit, az Acid tesztet fejlesztették ki .

Különféle blokkmodellek

A W3C CSS-szabványai olyan modellt használnak, ahol egy tulajdonság widthhatározza meg a doboz tartalmának szélességét, kitöltés vagy szegélyek nélkül. Az Internet Explorer korai verziói (4 és 5) saját modellt valósítottak meg, ahol a szélesség határozza meg a keretek közötti távolságot, beleértve a kitöltést ( padding) és a szegélyeket ( border). Ezt a modellt az Internet Explorer 5 mellett a Netscape 4 és Opera 7 böngészők is megértik, a W3C szabványos modell támogatása csak a hatodik verzióban jelent meg az IE-ben.

A közelgő CSS3 szabvány bevezetett egy olyan tulajdonságot box-sizing, amelynek értékei content-boxjelzik a W3C szabványmodell border-boxhasználatát és az IE 5 modellt a probléma megoldására.

A Mozilla böngészőben ennek a tulajdonságnak a támogatásával, saját „működő” név -moz-box-sizingalatt egy másik érték került bevezetésre - padding-box, ezzel létrehozva egy harmadik dobozmodellt, amelyben width a blokk tartalmának és behúzásainak a mérete, nem számítva a keret.

CSS-szűrők

A CSS különböző böngészők általi megvalósításában tapasztalható különbségek arra késztetik a webfejlesztőket, hogy megoldásokat keressenek arra vonatkozóan, hogyan lehet az összes böngészőt azonos módon megjeleníteni. A CSS-szűrők (más néven CSS-hackek) lehetővé teszik a stílusok szelektív alkalmazását a különböző elemekre. Az Internet Explorer 6 például köztudottan olyan szabályokat kényszerít ki, amelyek nézetválasztókat használnak (ez a " star html bug " néven ismert szűrő ). Ahhoz, hogy a Quirks módban futó W3C és IE dobozmodell egy 100 képpont széles dobozt jelenítsen meg 10 képpontos kitöltéssel, a következő kódot írhatja: * html селектор#someblock

/* W3C modell - 80px tartalomszélesség és 10px kitöltés mindkét oldalon */ # someblock { width : 80 px ; kitöltés : 10 képpont _ _ } /* A következő szabály csak az IE6-ra vonatkozik. */ * html # someblock { width : 100 px ; kitöltés : 10 képpont _ _ }

Az Internet Explorer szabályainak szelektív kényszerítésének másik módja a feltételes megjegyzések .

Biztonság

Az Internet Explorer 2010-ben támogatott összes verziója sebezhető volt: amikor a böngésző lépcsőzetes stílusokat (CSS) dolgoz fel, inicializálatlan memória jelenhet meg, amelyet később rosszindulatú kódok távoli elindítására használnak a felhasználó számítógépén [18] .

CSS-keretrendszer

A CSS Framework (egyben Web design framework ) egy előre elkészített CSS-könyvtár, amelyet az elrendezéstervező munkájának leegyszerűsítésére, a fejlesztés felgyorsítására és az elrendezési hibák (különböző böngészőverziók közötti kompatibilitási problémák stb.) lehető legnagyobb számának kiküszöbölésére hoztak létre. Csakúgy, mint a parancsfájl-programozási nyelvek könyvtárai, a CSS-keretrendszerek, általában külső .css-fájl formájában, „csatlakoznak” a projekthez (a weboldal fejlécéhez hozzáadva), lehetővé téve a programozók vagy tervezők számára, akik nem jártasak a programozás bonyolultságaiban. elrendezést a html-elrendezés helyes létrehozásához.

CSS kiterjesztések

Az oldalak elrendezésekor gyakran ugyanazt az értéket kell használnia: ugyanaz a szín, ugyanaz a betűtípus. És ha ezen az értéken változtatni kell, akkor sok helyen módosítani kell.

E problémák megoldására és a fejlesztés felgyorsítására a CSS nyelvnek számos bővítménye (előfeldolgozója) létezik. Kiterjesztések abban az értelemben, hogy a CSS-kód érvényes kód egy kiterjesztéshez, de nem fordítva. Ahhoz, hogy a „bővített CSS” kód normál CSS-fájllá alakuljon, amelyet a böngésző észlel, le kell fordítania. Az összeállítás többféle lehet:

  • oldal indításakor a kliens oldalon ( JavaScript használatával )
  • oldal indításakor a szerver oldalon
  • a webhely elrendezése során egy speciális fordító segítségével

Példák CSS-bővítményekre (előfeldolgozók):

Lásd még

Jegyzetek

  1. ↑ McFarland, 2017 , p. 126.
  2. ↑ Dave Shea, Molly E. Holtzschlag. A CSS tervezés filozófiája. / Per. angolról. A. Slinkina. — M.: NT Press, 2005. — 312 p.: ill.
  3. ↑ Lépcsőzetes stíluslapok, 1. szint . Letöltve: 2006. június 16. Az eredetiből archiválva : 2011. február 9..
  4. ↑ Lépcsőzetes stíluslapok, 2. szintű CSS2 specifikáció . Hozzáférés dátuma: 2011. március 9. Az eredetiből archiválva : 2011. január 16.
  5. ↑ Egyszerű CSS3 animáció az Animate.css segítségével . Letöltve: 2018. szeptember 18. Az eredetiből archiválva : 2018. szeptember 18.
  6. ↑ W3C : CSS: aktuális munka Archiválva : 2011. március 3., a Wayback Machine , CSS 3 stb.
  7. ↑ CSS3: A css változók rossz ötlet. Csak engedje meg, hogy hívjunk más kiválasztókat. Archivált : 2010. január 2. a Wayback Machine -nél // Rip's Domain
  8. ↑ A CSS-változók archiválva : 2010. április 5. a Wayback Machine -nél // dave-woods.co.uk
  9. ↑ Selectors Level 4 (downlink) . W3.org (2011. szeptember 29.). Az eredetiből archiválva : 2012. május 30. 
  10. ↑ Fedezze fel a CSS 4 újdonságait | webmajom | Wired.com (nem elérhető link) . Webmonkey (2011. október 26.). Az eredetiből archiválva : 2012. május 30. 
  11. ↑ Webböngésző szabványok támogatása . Letöltve: 2008. január 11. Az eredetiből archiválva : 2020. április 14.
  12. ↑ A OneStat.com szerint a Mozilla Firefox globális használati aránya továbbra is növekszik . Letöltve: 2008. január 11. Az eredetiből archiválva : 2021. február 26..
  13. ↑ Tartalom és böngésző kompatibilitás . Hozzáférés dátuma: 2008. január 11. Az eredetiből archiválva : 2008. január 11.
  14. ↑ Részletek az IE7 CSS-módosításairól, archiválva 2008. július 30-án a Wayback Machine IEBlogban
  15. ↑ Lépcsőzetes stíluslap-kompatibilitás az Internet Explorer 7 -ben Archiválva : 2008. február 1. a Wayback Machine MSDN -nél
  16. ↑ Az Internet Explorer furcsa és csodálatos világa (lefelé mutató hivatkozás) . Hozzáférés dátuma: 2008. január 11. Az eredetiből archiválva : 2008. január 13. 
  17. ↑ CSS-kompatibilitás és Internet Explorer archiválva : 2010. december 29. a Wayback Machine MSDN -nél
  18. ↑ Microsoft: Az Internet Explorer összes verziója sebezhető a hackerekkel szemben . Letöltve: 2011. január 2. Az eredetiből archiválva : 2011. január 3..

Irodalom

  • David Sawyer McFarland. Új nagy könyv CSS = CSS: The Missing Manual. - Szentpétervár: Piter , 2017. - 720 p. - 1000 példányban.  - ISBN 978-5-496-02080-0 .
  • Ed Tittel, Jeff Noble. HTML, XHTML és CSS For Dummies, 7. kiadás = HTML, XHTML és CSS For Dummies, 7. kiadás. - M . : "Dialektika" , 2011. - 400 p. - ISBN 978-5-8459-1752-2 .
  • Stephen Schafer. HTML, XHTML és CSS. A Felhasználói Biblia, 5. kiadás = HTML, XHTML és CSS Biblia, 5. kiadás. - M . : "Dialektika" , 2011. - 656 p. - ISBN 978-5-8459-1676-1 .

Linkek

Angol nyelvű források

Orosz nyelvű források

 Stíluslap nyelvek ( hasonlítsa össze , list )
Módok
Alapértelmezett
nem szabványos
 Lépcsőzetes stíluslapok
css
Összehasonlítás
  • CSS támogatás a böngészőmotorok által
  • Stíluslapok nyelvei
Web design
Lépcsőzetes stíluslapok