A CSS rövidítés jelentése "lépcsőzetes stíluslapok". A CSS az összes eszközön használt webhelyek és alkalmazások stílusának kialakítására szolgál. A stíluslapot általában a HTML és a kezelőfelület programozási nyelvei, például a JavaScript mellett használják.

A CSS háromféleképpen valósítható meg - inline, belső vagy külső. Bár a külső CSS az ajánlott megközelítés, vannak esetek, amikor a két fennmaradó megvalósítási módszer praktikusabb lehet.

Ebben az oktatóanyag -cikkben megtanulhatja a CSS alapjait, hogy még ma elkezdhesse építeni az alkalmazásokat.

Mikor kell használni a különböző CSS -megvalósítási módszereket?

Az Inline CSS az ideális megvalósítási módszer, ha a szándék az, hogy csak egy vagy két stílusbeállítást tartalmazzon egy weboldalon, néhány egyéb réses esettel együtt. Az inline CSS módszer a stílus kulcsszót egy CSS tulajdonsággal együtt egy adott eredmény eléréséhez.

Ha egyetlen fejléc színét vörösre kívánja módosítani, akkor a soron belüli CSS jó megoldás lehet. A fentiekben említett hiánypótló eset az lenne, ha elsősorban táblákból álló HTML -elrendezéseket hozna létre (elavult gyakorlat).

Inline CSS példa

Főcím

A fenti kódsor piros színű „Főcím” szöveget jelenít meg. Valószínűleg ez az egyetlen praktikus oka az inline CSS használatának, mivel általában csak egy létezik h1 elem egy adott weboldalon.

Ha az összeset bevonni szándékozik h2 a weboldal elemei sárga színűek. Használnia kell a CSS -t stílus kulcsszó, a szín tulajdonság és értéke (sárga) az egyes elemeken. Ennek a feladatnak azonban hatékonyabb módja a belső CSS használata.

Példa a belső CSS -re

A fenti kód elhelyezése a a HTML -fájl címkéje biztosítja, hogy minden h2 az adott fájl elemei sárgával vannak bevonva. A belső CSS el van választva a HTML -kódtól, és ez hatékonyabbá teszi a módszert, mert megkönnyíti a különböző elemcsoportok célzását.

Tehát miért továbbra is a külső CSS -megvalósítási módszer a leginkább ajánlott módszer? Az aggodalmak elkülönítése. A külső CSS használatával a CSS -kód teljesen el van választva a HTML -kódtól, ami biztosítja a méretezhetőséget nagy projektekhez, és hatékonyabbá teszi a tesztelési folyamatot.

Példa külső CSS -re

A fenti kódsor beszúrása a a HTML -fájl címkéje megkönnyíti weboldalának stílusát a külső CSS módszerrel. A fenti kód egyetlen változó aspektusa a href tulajdonság, amely mindig legyen a CSS fájl neve (beleértve a .css kiterjesztést is).

Összefüggő: Mik a lépcsőzetes stíluslapok és mire használható a CSS? Ha a CSS -fájlja össze van kapcsolva a HTML -dokumentummal, akkor elkezdheti a CSS -kód írását a CSS -fájlba. Ezen a ponton az egyetlen különbség a fenti belső CSS -példa és a külső CSS között a stílus címke. Ezért a következő kód CSS -fájlba történő beillesztése ugyanazt az eredményt eredményezi, mint a fenti belső CSS -példa.

h2 {
szín: sárga;
}

A CSS alapstruktúrájának feltárása

Az alapvető CSS -deklaráció hét lényeges elemet tartalmaz, amint azt az alábbi példa is mutatja. Mindannyian együtt dolgoznak egy bizonyos stíluspreferencia -készlet elérésén.

A választó

A CSS deklarációban a választó lehet egy id, a osztály, egy elem, vagy bizonyos különleges esetekben álválasztó. A fenti CSS struktúrában a elemet választóként használják, ami azt jelenti, hogy a weboldalon lévő összes link piros színű lesz. Lényegében a választó célja az, hogy azonosítsa azokat az elem (eke) t, amelyeket meg kell stilizálni.

Nyilatkozat kezdete és vége

A deklaráció kezdete és vége fontos, mert minden olyan stílusbeállítást tartalmaz, amelyek egy adott választóra vonatkoznak. Mindkét elemet egy pár nyitott és zárt göndör fogszabályozó képviseli. Egy jó módja annak, hogy ne felejtse el használni a deklaráció kezdetét vagy a deklaráció végét, ha megjegyzi, hogy ha nyitott göndör zárójele van, akkor megfelelő zárt göndör zárójelet kell használni, és fordítva.

A tulajdon

A deklarációs struktúrában lévő CSS -tulajdonság lehet több mint száz különböző tulajdonságtípus. A fenti CSS -struktúrában használt tulajdonságtípus az szín és ez a tulajdonság a weboldalon található szöveget célozza. Ha többet szeretne megtudni, nézze meg a mi oldalunkat a CSS -tulajdonságok és azok felhasználásának átfogó listája.

A tulajdonság/érték elválasztó

Bár kicsi és jelentéktelennek tűnhet, a tulajdonság/érték elválasztó ugyanolyan fontos, mint a CSS szerkezet összes többi eleme. Ha van olyan eset, amikor ezt az elemet elfelejtik, a teljes CSS -deklaráció nem fog végrehajtódni.

Az érték

A CSS tulajdonság értéke pontosan azt a stílust képviseli, amelyet alkalmazni szeretne egy adott tulajdonra. A használható értékek a tulajdonság típusától függenek. Például a fenti szerkezetben használt tulajdonság az szín, ami azt jelenti, hogy erre a tulajdonságra csak egyféle érték alkalmazható, egy színnév. A szín értéket négyféle formában lehet bemutatni: szóérték (mint a fenti példában), hexadecimális érték, HSL (árnyalat, telítettség, világosság) érték vagy RGB (piros, zöld, kék) érték.

A nyilatkozat elválasztója

A nyilatkozat elválasztó jelzi, hogy egy adott stílusnyilatkozat végén van. A fenti struktúrában csak egy nyilatkozat elválasztó van, de lehet több is. Minden attól függ, hogy hány CSS -tulajdonságot kíván használni egy adott területen osztály, id, vagy elem.

Mik az azonosítók és osztályok?

azonosítók és osztályok alapvető szerepet játszanak a CSS formázási folyamatában. A HTML elemekhez hasonlóan a CSS is azonosítók és osztályok szelektorként használják a CSS deklarációban. Azonban, osztályok és azonosítók elsőbbséget élveznek egy HTML elemmel szemben.

A CSS általános szabálya, hogy a fájlhoz utoljára hozzáadott stílusnyilatkozat felülírja azokat, amelyek korábban léteztek. Ezért ha két olyan nyilatkozat van, amelyen egy h2 kiválasztó egy CSS -fájlban, az utoljára hozzáadott nyilatkozat felülírja azokat, amelyek korábban voltak.

Ha azonban ez h2 elem rendelkezik egy id amelyet választóként használnak a CSS -nyilatkozatban, függetlenül attól, hogy milyen pozícióban van (előtte vagy utána) egy olyan CSS -deklarációhoz, amely h2 elemet választóként, a stíluspreferencia a id a deklaráció mindig elsőbbséget élvez az elemmel szemben. Röviden, egy id felülírja a többi stílusválasztót.

Fontos megjegyezni, hogy a CSS nyilatkozatban azonosítók számjelevel kezdődik, és az órák pontponttal kezdődnek. A legjelentősebb különbség az an id és a osztály ez egy id egyedülálló, míg a osztály sokszorosítható. Például egy hasonló gyűjtemény a címkék ugyanazt kaphatják osztály név; Azonban a id ből a címkének egyedinek kell lennie.

A különböző típusú választók feltárása

Három alapvető választótípus létezik - egyetlen, többszörös és beágyazott. Ez a cikk eddig kiterjedten foglalkozott az egyes szelektorokkal.

A CSS használatakor előfordulhatnak olyan esetek, amikor különböző elemeket szeretne a weboldalhoz hasonló stílusú legyen, amely eltér a teljes weboldalra alkalmazott általános stílustól. Ezekben az esetekben hasznos lehet a több választó használatának ismerete.

Példa az alapvető HTML sablonokra

Üdvözöljük

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Ról ről

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Cím

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Az ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minimumok, magni és iusto id szükségszerűség harum ratione, ipsum doloremque deleniti ex eligendi
gátolja a hime maxime -t? Eius modi optio ad, nisi tempora sapiente?







Cím

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Az ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minimumok, magni és iusto id szükségszerűség harum ratione, ipsum doloremque deleniti ex eligendi
gátolja a hime maxime -t? Eius modi optio ad, nisi tempora sapiente?

Ha alaposan megnézi a fenti HTML -fájlt, látni fogja a közötti dinamikát azonosítók és osztályok. A fenti fájlra hivatkozva, ha ugyanazt a stílust szeretné alkalmazni a ról ről szakaszban és csak a weboldalon található cikkekben, ezt a következő CSS -kód teszi lehetővé.

Példa több választó használatára

#About, .content {
fehér szín;
háttérszín: sötétkék;
}

Több választó használata esetén az egyes választókat mindig vesszővel kell elválasztani. A fenti példában két választó van, egy id és a osztály. Ha az azt követő vessző ról rőlid hiányzik, a CSS deklaráció nem hajtódik végre.

Visszatérve a fenti HTML alap sablonpéldára, kettő van címkék jelennek meg - az egyik az üdvözlő részben, a másik a névjegy részben. Ha a cél az, hogy ezek közül csak az egyiket célozza meg címkék, egy beágyazott választónak kell lennie a módszernek.

Példák a beágyazott választók használatára

#Welcome p span {
piros szín;
}

A fenti beágyazott választó egy id és két HTML elem. Amint az a fenti példából is látszik, a beágyazott választó lehetővé teszi egy adott csoporton belüli elemek célzását.

Ezért csak a span szakasz a címkéje a div a... val üdvözlő id vörös színű lesz.

Akár olyan stílusnyelvet használ, mint a CSS, vagy programozási nyelvet, feltétlenül tudnia kell, hogyan írhat megjegyzést. A megjegyzések elengedhetetlenek a vállalati szintű projektekben, ahol több fejlesztő dolgozik együtt, és hasznosak kis méretű fejlesztések során is.

A CSS megjegyzés két előrevágó jelet, két csillagot és egy megjegyzés részt tartalmaz.

/ * Így írhat egyetlen soros megjegyzést a CSS -ben */

/*
Így írsz
többsoros megjegyzés
a CSS -ben
*/

Mi a következő lépés?

Ez a cikk a CSS alapvető összetevőit tartalmazza. Most használhatja az azonosítót:

• A három CSS -megvalósítási módszer bármelyike
• A CSS deklaráció összes eleme
• A választók három alapvető típusa
• CSS megjegyzés

Ez azonban még csak a kezdet. A CSS számos keretrendszerrel rendelkezik, amelyek segítenek a nyelv jobb megértésében. Az egyetlen kihívás annak eldöntése, hogy melyik a legjobb az Ön számára.

Hátsó szél CSS vs. Bootstrap: Melyik a jobb keretrendszer?

A CSS keretrendszer kiválasztásakor fontos megtalálni azt, amely megfelel az Ön igényeinek.

Olvassa tovább

A szerzőről