Gyakorlat – A HTML stílusa a CSS használatával

10 perc

A kaszkádolt stíluslapok (CSS) segítségével meghatározhatja a lap megjelenését. Az alapötlet az, hogy meg kell határoznia, hogy mi legyen a stílus a HTML-oldalakon használt elemekhez. Míg a HTML-elemek határozzák meg a tartalmat, a CSS-stílusok határozzák meg a tartalom megjelenését.

Alkalmazhat például lekerekített sarkokat, vagy színátmenetes hátteret adhat egy elemnek, vagy a CSS használatával megadhatja, hogy a hivatkozások hogyan néznek ki és válaszoljanak, amikor ön kommunikál velük. Kifinomult lapelrendezéseket és animációs effektusokat is végrehajthat.

Stílusokat alkalmazhat adott elemekre, egy adott típus összes elemére, vagy osztályokkal számos különböző elemet stílusba állíthat.

Ebben a gyakorlatban CSS-stílusokat alkalmaz a HTML-oldalelemekre, és hozzáad néhány CSS-kódot a világos és sötét témák definiálásához. Ezután a böngésző fejlesztői eszközeiben ellenőrizheti az eredményeket.

Külső CSS

A HTML-ről szóló előző leckében egy html-ből származó külső CSS-fájlhoz csatolta.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

A külső CSS egyik előnye, hogy több HTML-oldal is hivatkozhat ugyanarra a CSS-fájlra. Ha módosítja a CSS-t, az egyes lapok stílusa frissül. Ha HTML-fájlt használ az oldal tartalmához, egy CSS-fájlt a stílushoz, és egy JavaScript-fájlt az interakcióhoz, akkor a probléma elkülönítését nevezzük.

A korábban leírtaknak megfelelően a CSS-t közvetlenül HTML-ben is megírhatja, amelyet belső CSS-nek neveznek. Még egy alapszintű webhely esetében is olyan sok CSS-szabály van, hogy a HTML-oldal gyorsan zsúfolttá válhat. Egynél több oldal esetén ugyanaz a CSS gyakran ismétlődik, és nehéz kezelni.

CSS-szabályok

A CSS-szabályokkal stílusokat alkalmazhat a HTML-elemekre. A CSS-szabályok rendelkeznek egy választóval, amely azt az elemet (vagy elemeket) fejezi ki, amelyre a stílusokat alkalmazni kell.

Nyissa meg a fájlt a main.css Visual Studio Code-ban, és írja be a következőket:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Ez a kódrészlet két szabályt tartalmaz. Minden szabály a következőket rendelkezik:

Egy választó. body és ul a két szabály választói, és arra szolgálnak, hogy a stílusok melyik elem(ek)re vonatkozzanak.
Nyitó kapcsos kapcsos zárójel ({).
A kijelölt elem(ek) megjelenését meghatározó stílusdeklarációk listája.
Záró kapcsos kapcsos zárójel (}).

A választó például ul kiválasztja a <ul> html elemet a lapon, hogy stílusokat alkalmazzon rá. A deklaráció az font-family: helvetica, és meghatározza, hogy mi legyen a stílus. A tulajdonság neve , font-familyés az érték.helvetica

A következő lépésben saját egyéni neveket határozhat meg az elemekhez.

Választómezők

Az azonosító- és osztályválasztók segítségével stílusokat alkalmazhat a HTML-ben lévő egyéni attribútumnevekre. Egy elem stílusához azonosítót használ, míg az osztályokat több elem stílusához.

Másolja ki a következő kódot, és adja hozzá a CSS-fájlhoz. Illessze be a korábban hozzáadott választóhoz tartozó záró kapcsos zárójel ul után.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
Az előző kód három CSS-szabályt tartalmaz, amelyek közül az utolsó két szabály egyéni attribútumokat használ az elemek kiválasztásához: .list és #msg.
- .list egy osztályválasztó. Minden olyan HTML-elem, amely attribútumkészletet class tartalmaz, list lekéri a választóban definiált stílusokat.
- #msgazonosítóválasztó. Az attribútumkészlettel idmsg rendelkező HTML-elem lekéri a választóban definiált stílusokat.
A választókhoz használt nevek tetszőlegesek lehetnek, feltéve, hogy azok megfelelnek a HTML-ben definiált neveknek.
Mentse a munkáját a Control+S billentyűkombinációval Windows rendszeren vagy a Command+S macOS rendszeren.

Megtekintés böngészőben

A Visual Studio Code előzetes verziójának megtekintéséhez kattintson a jobb gombbal a fájlra az index.html Explorerben, majd válassza a Megnyitás alapértelmezett böngészőben lehetőséget.

Fontos

Annak ellenére, hogy csak szerkeszti a main.css fájlt, a módosítások előnézetének megtekintéséhez ki kell választania a index.html fájlt.

A weblap az alapértelmezett böngészőben nyílik meg.

Azok a betűstílusok, amelyeket várt? Érdekes, hogy az <body> elemre alkalmazott stílusok hogyan öröklődnek az <h1> elemen. Nem definiáltunk semmit <h1>, de a betűtípust továbbra is meghatároztuk <body>. Ez az öröklési mechanizmus a szülőelemektől a leszármazottaikig a CSS egyik fő aspektusa. Az <li> elemek azonban eltérő betűtípussal rendelkeznek. Az elemek stílusa <li> felülbírálja a stíluskészletet <body> , mert az <li> elem az <ul> elem leszármazottja, amelyhez egy stílust definiált.

Amikor a Open In Default Browser-t használja a Visual Studio Code-ban, az mindig megnyit egy új lapot a böngészőben. Az új lap megnyitásának elkerülése érdekében újra betöltheti a webhelyet tartalmazó lapot.

A lap ismételt betöltéséhez nyomja le az F5 billentyűt, amely a frissítési billentyűparancs, vagy a Ctrl+R billentyűkombinációt Windows vagy Linux rendszeren, a Command+R billentyűkombinációt pedig Mac gépen.

Világos téma hozzáadása

Ezután adja hozzá a webhely színtémája támogatását. Először definiáljon egy világos színű témát hexa színkódokkal.

A CSS-fájlban (main.css) adja hozzá a következő kódot a fájl végén.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
Ebben a példában #000000 fekete színt ad meg a betűszínhez, a #00FF00 háttérszínhez pedig zöldet.
A HTML-fájlban (index.html) frissítse az <body> elemet az osztálynévvel light-theme. Most a világos téma osztályválasztója helyesen alkalmazza a stílusokat.
```
<body class="light-theme">
```

Megtekintés böngészőben

Ha a Visual Studio Code-ot szeretné megtekinteni, kattintson index.htmla jobb gombbal, majd válassza a Megnyitás alapértelmezett böngészőben lehetőséget, vagy töltse be újra az előző lapot az F5 billentyű lenyomásával.

Figyelje meg, hogy megjelenik a zöld háttérrel rendelkező világos téma.

Alkalmazott CSS megtekintése

A böngészőnézetben nyissa meg a Developer Tools eszközt.

Kattintson a jobb gombbal a lapra, és válassza a Vizsgálat lehetőséget, vagy válassza az F12 vagy Ctrl+Shift+I billentyűparancsot.
Jelölje ki az Elemek lapot, és válassza az Elemek lapon a Stílusok lapot (alapértelmezés szerint már be kell jelölni).
Vigye az egérmutatót a különböző HTML-elemek fölé, és néhány elem kiválasztásakor figyelje meg, hogy a fejlesztői eszközök hogyan jelenítik meg a stílusokat a Stílusok lapon.
Jelölje ki az <body> elemet. Jegyezze fel az light-theme alkalmazottat.
Válassza ki a rendezetlen listaelemet <ul> . Figyelje meg az egyéni stílust font-family: helvetica;, amely felülírja az elem stílusát <body> .

Ha többet szeretne megtudni a CSS-stílusok fejlesztői eszközökben való megtekintéséről, tekintse meg a CSS-stílusok megtekintésének és módosításának első lépéseit ismertető cikket.

Sötét téma hozzáadása

A sötét téma esetében az infrastruktúrát a következő leckére való felkészülés során állítja be, amelyben engedélyezi a témaváltást a weblapon.

Ha egy sötét téma támogatását szeretné hozzáadni a CSS-hez, kövesse az alábbi lépéseket.

A CSS-fájlban (main.css) adjon hozzá néhány állandót a lap gyökeréhez a fájl elején.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
A :root választó a <html> HTML-lap elemét jelöli. Az ilyen típusú feladatok esetében az ajánlott eljárás a globális CSS-változók halmazának meghatározása egy CSS-szabályban a :root választóval. Ebben a példában három színváltozót definiált. Ezeket a változókat most más CSS-szabályokban is használhatja.
A CSS-fájl végén cserélje le a szabályt a light-theme következő kódra a frissítéshez és a dark-theme választó hozzáadásához.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
Az előző kódban két új változót definiált, bg amelyek fontColorháttér- és betűszínt adnak meg. Ezek a változók a var kulcsszóval állítják be a tulajdonságértékeiket a választóban korábban megadott változókra :root .
Ezután a CSS-fájlban cserélje le az aktuális body választót a következő kódra.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
Ebben a példában a választóval állítja be a bodybackground tulajdonságokat, és color mivel a weblapon látható elemek mind az <body> elemen belül vannak, öröklik a beállított <body>színeket.
A CSS-fájlban távolítsa el a szabályokat a #msgul választókkal, hogy ugyanazt a betűtípust <body>is örökölje.

Ne felejtse el menteni a fájlt a Control+S vagy a Command+S billentyűkombinációval.

A CSS-fájlnak (main.css) a következő példához hasonlóan kell kinéznie:

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

A sötét téma megtekintéséhez nyissa meg a fájlt index.html , és manuálisan szerkessze az alapértelmezett témát az osztályattribútumban a <body> sötét témára (dark-theme). Mentse a fájlt, és töltse be újra a lapot a böngészőben.
<body> Az osztályattribútum szerkesztése az alapértelmezett visszakapcsoláshoz világos témára.

A következő leckében JavaScript használatával biztosít interaktivitást, és támogatja a témák közötti váltást.

Téma hozzáadása a GitHub Copilot használatával

Az IDE-ben a GitHub Copilot használatával csS-t hozhat létre új téma hozzáadásához. Testreszabhatja a kérést, hogy tulajdonságokat adjon meg a HTML-elemek stílusának a követelményeknek megfelelően történő meghatározásához.

Az alábbi szöveg egy példakérést jelenít meg a Copilot-csevegéshez:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

A GitHub Copilot mesterséges intelligenciával működik, így meglepetések és hibák lehetségesek. További információkért lásd a Copilot gyakori kérdéseket.

További információ a GitHub Copilotról a Visual Studio Code-ban.

Visszajelzés

Hasznosnak találta ezt az oldalt?