12 legjobb online tanfolyam és könyv a CSS elsajátításához

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.

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.

  Két AirPod készlet párosítása ugyanazzal az iPhone készülékkel

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.