A webhelyek unalmasnak tűnnének CSS nélkül, mivel ez a stílusnyelv felelős a szöveg stílusáért, méretéért, színéért és elhelyezéséért a weboldalon.
Tartalomjegyzék
Mi az a CSS?
A Cascading Style Sheets, rövidítve CSS, egy olyan nyelv, amely leírja, hogyan kell a HTML-elemeket megjeleníteni a képernyőn vagy a papíron. A CSS-t a World Wide Web Consortium (W3C) hozta létre 1996-ban.
A HTML elemeket nem úgy tervezték, hogy olyan címkékkel rendelkezzenek, amelyek elősegítenék a weboldal formázását, és a fejlesztőknek csak jelölést kellett írniuk az oldalhoz. Az olyan címkék bevezetése, mint a a HTML 3.2 elindításakor, új problémákat jelentett a fejlesztők számára.
Mivel a weboldalak színes hátterűek, különböző betűtípusokkal és többféle stílussal rendelkeznek, a kód átírása költséges és fájdalmassá vált. A W3C iskolák bevezették a CSS-t, hogy megoldják ezeket a kihívásokat, és az évek során folyamatosan fejlődött.
Miért CSS?
#1. A CSS hatékony
A CSS megkímél minket attól a fájdalomtól, hogy minden weboldalon olyan címkéket kell hozzáadni, mint a betűtípus, az elemigazítás, a szegély, a szín, a háttérstílus és a méret.
#2. Időt takarít meg
Könnyedén megváltoztathatja a teljes webhely megjelenését a külső CSS-fájl módosításával.
#3. Több eszköz kompatibilitás
A modern webfelhasználók különböző képernyőméretekkel rendelkező modulokkal érik el a webhelyeket, például számítógépeken, táblagépeken és okostelefonokon. A CSS megkönnyíti a képernyőmérethez igazodó weboldalak létrehozását.
#4. Könnyen karbantartható alkalmazások
A modern webes alkalmazások folyamatosan fejlődnek. A CSS megkönnyíti az egyes összetevők vagy akár az egész webhely megváltoztatását a kódbázis megváltoztatása nélkül.
Hogyan használható a CSS a HTML-lel webhelyek létrehozására?
A HTML egy szabványos jelölőnyelv, amelyet weboldal-készítésre használnak. Másrészt a CSS leírja a (HTML használatával létrehozott) weboldalak megjelenítését. A HTML és CSS használatával létrehozott weboldal ideális esetben tartalmaz egy szöveget, képhivatkozásokat és HTML-címkéket tartalmazó HTML-fájlt.
Ehhez a HTML-fájlhoz vagy egy külön CSS-fájl kapcsolható linkcímke segítségével, vagy alkalmazhat belső vagy soron belüli CSS-stílusokat. A HTML-fájlnak lehet egy fejléce, például
, és egy bekezdés, amelyet
jelöl. A CSS segítségével utasíthatja a böngészőt, hogy a bekezdés összes tartalmát félkövérrel jelenítse meg, vagy akár 50 képpontosra és zöldre állíthatja a fejléc tartalmát.
A következő részben bemutatjuk a HTML és a CSS működését.
A CSS típusai
#1. Külső CSS
A CSS külső besorolásához szükség van egy HTML-fájlra és egy különálló, .css kiterjesztésű CSS-fájlra. Például style.css. A CSS-fájl linkcímke segítségével kapcsolódik a HTML-fájlhoz/dokumentumhoz.
Példa egy külső CSS-fájlra:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
A CSS fájl a következő HTML dokumentumhoz kapcsolható:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
A link címke a külső stíluslapot a HTML dokumentumhoz kapcsolja, míg a href attribútum a külső stíluslap helyét adja meg.
A végső weboldal a következőképpen fog megjelenni:
A külső CSS a leginkább ajánlott megközelítés, mivel megkönnyíti az újrafelhasználható összetevők létrehozását és univerzális módosításokat a kódbázison.
#2. Belső CSS
A belső CSS ideális akkor, ha egyetlen HTML-dokumentummal rendelkezik, amelyet egyedi stílusban szeretne alakítani. A stílusszabálykészlet a HTML-dokumentum fejrészében van írva.
Ez egy példa a belső CSS-re:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
A megjelenített weboldal a következőképpen fog megjelenni:
A belső CSS a legtöbb esetben nem ideális, mivel a HTML-dokumentumban lévő kódot olyan nagyra növeli, ami befolyásolja a betöltési sebességet.
#3. Inline CSS
A beépített CSS tartalmazza a CSS stílust a törzsön belül. Például stílusozhat egy bekezdést, egy címsort vagy akár egy divet a soron belüli CSS használatával.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
A renderelt dokumentum a következőképpen fog kinézni:
A beépített CSS nem ideális, ha méretezni szeretné webalkalmazását, mivel egy CSS-tulajdon hozzáadása minden HTML-címkéhez időbe telik.
Fedezze fel a legjobb online tanfolyamokat és könyveket a CSS elsajátításához.
Reszponzív webhelyek készítése HTML és CSS segítségével
Ez a reszponzív, valós webhelyek létrehozása tanfolyam megtanítja, hogyan lehet reszponzív webhelyeket készíteni HTML5 és CSS3 használatával. Nincs szükség előzetes webfejlesztési ismeretekre, hogy megtanulja ezt a kurzust, amely olyan fogalmakat tár fel, mint a dobozmodell, a választókonfliktusok megoldása, a pozicionálási sémák és az öröklődés.
Ideális kurzus akkor is, ha szeretné megtanulni, hogyan kell ötletelni, tervezni, vázolni, kódolni, tesztelni és optimalizálni egy professzionális webhelyet.
Haladó CSS és Sass
A haladó CSS és Sass kurzus bemutatja, hogyan működik a CSS a színfalak mögött azáltal, hogy olyan témákat tár fel, mint a kaszkád, a specifikusság és az öröklődés.
A kurzus számos modern CSS technikával rendelkezik hatékony, reszponzív weboldalak létrehozásához. A kurzus bemutatja a Saas-t és annak használatát projektekben CSS, globális változók tervezése és médialekérdezések kezelése közben.
Ideális kurzus akkor is, ha CSS-animációt szeretne tanulni, mivel érinti a @keyframes-eket, az animációt és az átmenetet.
Tanuld meg a CSS-t
Tanulja meg a Codecademy CSS-jét, és megtanítja, hogyan lehet a CSS-t a HTML vizuálisan látványos webhelyekké alakítani. A kurzus 8 leckére van felosztva, és 6 projekttel teszteli a megértését.
A főbb dolgok, amelyeket ezen a tanfolyamon tanulhatsz meg, az a stílus hozzáadása a HTML-elemekhez, a HTML- és CSS-fájlok összekapcsolása, valamint a weboldalak egyedi elrendezésének létrehozása.
Készítse el első weboldalát HTML és CSS segítségével
Az első weboldal elkészítése tanfolyam megtanítja a HTML5 és a CSS3 használatát reszponzív webhelyek létrehozásához. Ez az ingyenes tanfolyam 4 modulból áll, és körülbelül 10 órát vesz igénybe. A tanfolyam elsajátításához nincs szükség előzetes programozási ismeretekre.
CSS alapok
A CSS alapokat a W3Cx készítette. Néhány dolog, amit meg fog tanulni ezen a tanfolyamon: a webdesign, az alapvető CSS-választók és a CSS-tulajdonságok kiválasztásának bevált gyakorlatai. A kurzus 5 modulra oszlik; heti 5-7 órás tanulás esetén körülbelül 5 hétre van szüksége a teljesítéséhez.
Bevezetés a CSS3-ba
Ez a CSS3 kurzus bemutatja a lépcsőzetes stíluslapokat. A tanfolyamot a Michigani Egyetem készíti, és megtanítja a CSS-szabályok írását, a jó programozási szokások kialakítását és a kód tesztelését. Körülbelül 12 órára van szüksége ennek a kurzusnak a teljesítéséhez, amelyhez egy megosztható bizonyítvány tartozik.
Bevezetés a HTML-be és a CSS-be
Ez a HTML-ről és CSS-ről szóló bevezető tanfolyam megtanítja, hogyan lehet stílusos és jól strukturált webhelyeket létrehozni HTML és CSS használatával. A kurzus megtanítja a tanulóknak, hogyan készítsenek weboldalakat faszerű struktúrával, majd CSS használatával stílust készítsenek.
Ez az ingyenes kurzus kezdőknek szól, és saját tempójú tanulási modellt használ. Körülbelül 3 hétre van szüksége ennek a kurzusnak az elvégzéséhez, amelyet az iparági szakértők tanítanak.
CSS oktatóanyag
A CSS Tutorial egy ingyenes tanfolyam a W3schoolsról. A kurzus a könnyebb érthetőség érdekében fejezetekre van osztva. Minden fejezet példákat és gyakorlatokat tartalmaz. A platformon van egy online, ahol a „Próbáld ki magad” gomb segítségével kísérletezhetsz különféle koncepciókkal.
CSS: A végleges útmutató
A CSS: The Definitive Guide könyv hasznos lehet, ha meg akarja tanulni a CSS alapjait, a Selectoroktól és a specifikusságon át a kaszkádig. A könyv részletesen bemutatja a flexboxot, a pozicionálást és az úszótrükköket is.
Rendelhető könyv is, ha meg szeretné tanulni a CSS használatával 2D és 3D transzformációkat, átmeneteket és animációkat készíteni. A Definitive Guide Kindle és puhakötésű változatban is elérhető.
Reszponzív webdesign HTML5 és CSS segítségével
Ez a HTML5-öt és CSS-t használó reszponzív webtervezésről szóló könyv megtanítja, hogyan hozhat létre jövőbiztos, reszponzív webhelyeket HTML5 és CSS használatával.
Miután megtanulta a trükköket ebből a könyvből, az Ön által létrehozott webhelyek hibátlanul fognak futni asztali számítógépeken, táblagépeken és mobiltelefonokon. A könyv könnyen követhető formátumban készült, és puhakötésben és Kindle formátumban is elérhető.
HTML és CSS: Weboldalak tervezése és készítése
Ez a HTML-ről és CSS-ről szóló könyv mindenkinek ideális, legyen Ön hobbi, diák vagy szakember.
Az író a könyv tartalmát információs grafikákon és életmódfotózáson keresztül adja át, hogy megkönnyítse a különféle fogalmak megragadását. A forrás egyedi felépítésben jelenik meg, így könnyen böngészhet az összes fejezet között.
Modern CSS
Ez a könyv a Modern CSS-ről: Sajátítsa el a CSS kulcsfontosságú fogalmait a modern webfejlesztéshez kódpéldákon, diagramokon és képernyőképeken keresztül tanítja a CSS-t.
A könyv első fejezeteiben bemutatja a színeket, a szelektorokat, a dobozmodelleket, a kombinátorokat és a specifikációt. A könyv ezután bemutatja a szöveg stílusát, az elhelyezést, a színátmeneteket, a szegélyeket, a Z-indexet és a halmozási összefüggéseket. Emellett olyan haladó témákat is elsajátíthat, mint az átmenetek, animációk, átalakítások, flexbox és CSS-rácsok.
Végső szavak
Nem lehet elégszer hangsúlyozni a CSS szerepét a modern webhelyeken. Amellett, hogy a weboldalakat vizuálisan vonzóvá teszi, a CSS megkönnyíti a különféle weboldalakon való navigálást.
A CSS elsajátítása egyszerű lehet, ha használja a fent felsorolt forrásokat. A tanfolyamok egy része ingyenes, míg mások fizetősek.
Ezután megtekintheti a fejlesztőknek és tervezőknek szánt CSS csalólapokat.