5 perc alatt megtanulhatja a CSS-t - oktatóanyag kezdőknek

Gyors bemutató a web tervezési nyelvéről.

A CSS (Cascading Style Sheets) teszi a weboldalakat jóvá és reprezentatívvá. Ez a modern webfejlesztés elengedhetetlen része, és minden web-tervező és fejlesztő számára kötelező ismeret.

Ebben a cikkben egy gyors bevezetést adok a CSS használatának megkezdéséhez.

Indítottunk egy ingyenes, teljes hosszúságú CSS tanfolyamot is a Scrimbán. Ide kattintva megnézheti.

Feltételezem, hogy rendelkezik a HTML alapismereteivel, de ezen az oktatóanyagon kívül nincsenek előfeltételek.

Elkezdeni

Kezdjük azzal, hogy megtanuljuk, hogyan vonhatjuk be a CSS-t projektjeinkbe. Ezt általában három módon tehetjük meg.

1. Inline CSS

Először is beépíthetjük a CSS-t közvetlenül a HTML elemeinkbe. Ehhez felhasználjuk az styleattribútumot, majd tulajdonságokat adunk meg neki.

Hello world!

Itt megadjuk neki a tulajdonságát colorés beállítjuk az értékét blue, ami a következőket eredményezi:

styleHa szeretnénk, több tulajdonságot is beállíthatunk a címke belsejében . Azonban nem akarok tovább haladni ezen az úton, mivel a dolgok rendetlenné válnak, ha a HTML-tünk tele van sok CSS-lel benne.

Ezért vezették be a CSS bevonására szolgáló második módszert.

2. Belső CSS

A CSS felvételének másik módja az styleelem használata heada HTML dokumentum szakaszában. Ezt belső stílusnak hívják.

  h1 { color: blue; }   

A stíluselemben az elem (ek) kiválasztásával megadhatjuk a HTML-elemek stílusát, és megadhatunk stílusattribútumokat. Ahogy a colortulajdonságot a h1fenti elemre alkalmaztuk .

3. Külső CSS

A CSS harmadik és legajánlottabb módja egy külső stíluslap használata. Létrehozunk egy stíluslapot egy .csskiterjesztéssel, és a linkjét belefoglaljuk a HTML dokumentumba, így:

A fenti kódba felvettük a style.cssfájl linkjét az linkelem segítségével. Ezután az összes CSS-jünket egy külön stíluslapba írjuk style.css, hogy könnyen kezelhető legyen.

h1 { color: blue; } 

Ez a stíluslap más HTMLfájlokba is importálható , így ez nagyszerű az újrafelhasználhatóság szempontjából.

CSS-választók

Ahogy korábban megbeszéltük, a CSS egy olyan tervezési nyelv, amelyet HTML elemek stílusára használnak. Az elemek stílusához pedig először ki kell választania őket. Már láttál bepillantást ennek működésébe, de merüljünk el egy kicsit mélyebben a CSS-választókban, és vizsgáljuk meg a HTML-elemek kiválasztásának három különböző módját.

1. Elem

A HTML elem kiválasztásának első módja egyszerűen a név használata, amit fentebb tettünk. Nézzük meg, hogyan működik:

h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } 

A fenti példa szinte magától értetődő. Különböző elemeket választunk ki h1, például p, divés különböző stílusattribútumokat adunk nekik. A font-sizevezérli a szöveg méretét, colorbeállítja a szöveg színét és margintávolságot ad az elem körül.

2. Osztály

A HTML elemek kiválasztásának másik módja az class attribútum használata. A HTML-ben különböző osztályokat rendelhetünk az elemeinkhez. Minden elemnek több osztálya lehet, és mindegyik osztály több elemre is alkalmazható.

Lássuk működés közben:

This is heading

 .container { margin: 10px; } 

A fenti kódban hozzárendeltük az osztályt containera div elemhez. A stíluslapban .classNameformátumot és 10pxmargót adva választjuk ki osztályunkat .

3. Azonosító

Az osztályokhoz hasonlóan mi is használhatunk azonosítókat a HTML elemek kiválasztásához és a stílus alkalmazásához. Az egyetlen különbség az osztály és az azonosító között az, hogy egy azonosító csak egy HTML elemhez rendelhető.

This is a paragraph

 #para1 { color: green; font-size: 16px; } 

A fenti példa megmutatja, hogyan rendelünk azonosítót a bekezdéselemhez, és később a stíluslap ID-választójával választjuk ki a bekezdést és alkalmazzuk a stílust.

Betűtípusok és színek

CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:

1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)

2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)

For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS is Coooooool!!!!

.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; } 

As you can see in the above example, we have a div element with the class of container. Inside this div, there is an h1 tag with some text inside it.

In the stylesheet, we select the container class and set its width, height, background-color, and text-align.

Finally, we select the .heading1 class — which is applied to the h1 tag — and give it the attributes of font-family and color.

Conclusion

You might feel a bit overwhelmed by all this information, but don’t worry.

Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.