Hogyan lehet megváltoztatni webhelye szövegének színét CSS segítségével

A weboldal irányítása fontos eleme a webdesignnak. Egy ideális világban képesnek kell lennie arra, hogy megváltoztassa webhelye kialakításának minden aspektusát anélkül, hogy kompromisszumokat kellene kötnie a késztermékkel kapcsolatban.

Természetesen a webhelyek gyakran makacsok lehetnek. Nem mindig lehet elérni a kívánt eredményeket anélkül, hogy belemerülnénk a CSS világába. Nézzük meg, hogyan változtathatja meg a szöveg színét a webhelyén található CSS ​​segítségével, hogy képet kapjon arról, hogyan érhet el többet a CSS erejével.

A webhely szövegének megváltoztatása CSS segítségével

A CSS -t gondosan úgy tervezték, hogy biztosítsa a tervezők hatalmát a weboldalukra vonatkozó projektek felett. Hihetetlenül egyszerű a szöveg színének megváltoztatása a CSS segítségével a webhelyen; csak egy szabály kell hozzá.

szín: kék;

Természetesen a CSS -szabályok önmagukban nem működnek túl jól. Párosítani kell őket elemosztályokkal, azonosítókkal és azonosítókkal, hogy a webböngészők tudják, mire vonatkozik a stílus. Példákat láthat erre a szabályra a H1 címsorral, a P bekezdéssel és az alábbi gombbal.

h1 {szín: kék; }
p {szín: piros; }
gomb {szín: piros; }

Ennek alapvető ismeretekkel kell rendelkeznie arról, hogy mit kell tennie a webhelye szövegének színének CSS használatával történő megváltoztatásához. Általában ennél többre van szükség, különösen, ha különböző színeket szeretne adni a webhely különböző szövegeinek.

Összefüggő: A CSS Box modell példákkal magyarázva

A megfelelő CSS osztály megtalálása

Mielőtt módosíthatná az adott szöveget a webhelyén, tudnia kell, hogyan azonosíthatja azt a CSS -ben. A legtöbb webböngésző rendelkezik olyan eszközkészlettel, amely segít a fejlesztőknek, és valószínűleg az Ön által használt valami úgynevezett Ellenőr. Ezzel bekukkanthat a webhelyet építő HTML és más kódokba.

Az ellenőr megnyitása

Az ellenőr megnyitása a piacon lévő böngészők mindegyikében eltérő. Az alábbiakban néhány legnépszerűbb böngészőt ismertettünk, hogy előnyt biztosítsunk:

• Google Chrome: CTRL + Shift + C vagy Menüpontok > További eszközök > Fejlesztői eszközök
• Microsoft Edge: CTRL + Shift + C vagy Menüpontok > További eszközök > Fejlesztői eszközök
• Mozilla Firefox: CTRL + Shift + C vagy Menüpontok > További eszközök > Webfejlesztői eszközök
• Apple Safari: preferenciák > Fejlett > A Fejlesztés menü megjelenítése a menüsorban és akkor Fejleszteni > Webes ellenőr megjelenítése

A megfelelő CSS szövegstílus megtalálása

Zavaró lehet, ha először megnyitja az Inspector -t a böngészőben. Sok olyan dolog lesz, amit nem értesz, de egyelőre nem kell aggódnod emiatt. Csak meg kell találnia a módosítani kívánt szöveg stílusnevét.

Példaként megtaláljuk és megváltoztatjuk a MakeUseOf programozás szakasz főfejlécében használt CSS szövegstílust. Ezt a folyamatot úgy indíthatja el, hogy megvizsgálja a módosítandó elemet.

• Google Chrome: Jobb klikk > Ellenőrizze
• Microsoft Edge: Jobb klikk > Ellenőrizze
• Mozilla Firefox: Jobb klikk > Ellenőrizze vagy Q
• Apple Safari: Jobb klikk > Elem vizsgálata

Ha ezt megteszi, akkor a webhely konzolja/ellenőrző ablaka a módosítani kívánt elemre fókuszál. A Chrome, a Safari, az Edge és a Firefox rendszerben egy feliratos részt kell látnia Stílusok amely tartalmazza az éppen vizsgált elem összes CSS -kódját.

Ezenkívül a HTML elemét kiemeltnek kell látnia egy ablaktáblán. Ezzel megállapítható a módosítandó elem osztálya vagy azonosítója. Esetünkben a fő H1 címsort nézzük az oldalunkon, és ez a .listing-title nevű osztályhoz tartozik.

Ezen a ponton tesztelheti azt a CSS szövegstílust, amelyet hozzáad a webhelyéhez. A webhelykonzol CSS stílus szakaszának felső része szabályokat alkalmazhat a megcélzott konkrét elemre. Persze ez azonban nem állandó.

Összefüggő: Reagáló navigációs sáv létrehozása HTML és CSS használatával

Új CSS hozzáadása

Itt az ideje, hogy hozzáadja az új CSS -t a webhelyéhez. Ennek módja az Ön által használt webhelyplatform típusától függ, például a Shopify olyan bővítményeket igényel, amelyek lehetővé teszik a CSS hozzáadását a fájlok megváltoztatása nélkül.

Annak ellenére, hogy hozzáadja a CSS -kódot, meg kell győződnie arról, hogy helyes. A szöveges CSS-szabályok használata nem túl nehéz, de frusztráló tud lenni, ha nem tudja kitalálni, hogyan módosíthatja a szöveg színét. Példánkban ezt a kódot kell hozzáadnunk webhelyünkhöz.

.listing-title {
szín: kék;
}

Mi van, ha a szöveg színe nem változik?

Miután szerkesztette a CSS -fájlt, látnia kell az elvégzett módosítást, amint frissíti az oldalt. Ez azonban nem mindig ilyen egyszerű. A CSS összetettebb lehet, mint az emberek várják, és lehet, hogy ebben a szakaszban többet kell tennie.

• A gyorsítótár kiürítése: A webhelyek gyakran használnak gyorsítótárat a betöltési idő csökkentése érdekében. Előfordulhat, hogy a gyorsítótár megakadályozza, hogy láthassa a webhely változásait, és ki kell ürítenie, amikor módosítja a CSS -t.
• Magasabb a stíluslapban: A CSS sorban tölti be a stílusokat, és ez azt jelenti, hogy a stíluslap első szabályai azok lesznek, amelyek megjelennek a webhelyén. A mozgó stílusok jó módja lehet annak, hogy elsőbbséget élvezzenek más stílusokkal szemben.
• Fontos címkék használata: Ez a következő lehetőség nem tekinthető a legjobb gyakorlatnak, és akkor legjobb, ha nincs más választása. Hozzáadhat egy fontos címkét a CSS szövegstílusokhoz, hogy elsőbbséget biztosítson az összes többi stílushoz képest, és ez az alábbiakban látható:

.listing-title {
szín: kék! fontos;
}

Egyéb szövegstílusú CSS Fun

A CSS egy hihetetlenül erőteljes eszköz, amely számos különböző lehetőséghez biztosít hozzáférést, amikor szöveget és más elemeket dolgoz fel webhelyén. Ez nem csak a CSS szöveg színével áll meg, hanem a szöveggel is megterheli, ha úgy dönt, hogy megtanul egy kis CSS -t. Az alábbiakban néhány alapvető CSS szövegstílus -szabályt talál:

• Betűméret: Ez megváltoztatja a webhelyén található szöveg méretét, pl. Betűméret: 12 képpont;
• Betűsúly: A súly a betűtípus vastagságára utal, a vastag betű nagy, a vékony szöveg pedig alacsony, pl. Betűsúly: 400;
• Szöveg igazítás: Ez megváltoztatja a szöveg igazítását, amellyel dolgozik, pl. Text-align: right;
• Szöveg-árnyék: Ezzel árnyékot adhat hozzá a szöveghez számos attribútummal, például szöveg-árnyék: 2 képpont 2 képpont 3 képpont fekete;
• Szöveg-átalakítás: Ez megváltoztatja a szöveg kis- és nagybetűit, például a text-transform: nagybetű;
• Szövegdíszítés: Ezzel aláhúzásokat, kötőjeleket és egyéb dekorációkat adhat hozzá a szöveghez, pl. Szövegdíszítés: aláhúzás;

Ez pusztán a felületét karcolja annak, hogy mit lehet tenni a CSS szövegstílusaival. Rengeteg útmutató található az interneten, amelyek segíthetnek ebben a folyamatban, és mindig jó ötlet kutatni az indulás során.

Összefüggő: Hogyan lehet megváltoztatni webhelye szövegét a CSS betűcsalád-tulajdonsággal?

Tudjon meg többet, mint a CSS szöveg színe

A gyakorlat, kísérletezés, próba és hiba a legjobb módja annak, hogy megtanuljunk egy olyan eszközt, mint a CSS. A stíluslapok félelmetesnek tűnhetnek, amikor először kezdenek velük dolgozni, de hihetetlenül könnyű velük dolgozni, miután eltöltött velük egy kis időt.

10 egyszerű CSS -példa, amelyet 10 perc alatt megtanulhat

Segítségre van szüksége CSS munkájában? Először is próbálja ki ezeket az alapvető CSS -kódpéldákat, majd alkalmazza őket saját weboldalain.

Olvassa tovább

A szerzőről