Ako používať Google Chrome na ladenie CSS

Nástroj Inspect Element je skvelý, pokiaľ ide o ladenie vašich webových stránok v reálnom čase. Tento nástroj môžete použiť na zobrazenie náhľadu a zmenu dizajnu webovej lokality. Umožňuje vám to urobiť aj bez toho, aby ste museli znova načítať stránku, pričom zmeny CSS sa zobrazia okamžite.

V tomto článku sa dozviete, ako zobraziť triedy CSS a ich použité štýly v okne Inspect Element. Bude tiež obsahovať informácie o tom, ako to môžete použiť na zobrazenie ukážky zmien, ktoré vykonáte vo svojom CSS v reálnom čase.

Otvára sa prvok Inspect Element v prehliadači Google Chrome

Môžete navštíviť ľubovoľnú webovú lokalitu a otvoriť okno Inspect Element, aby ste videli, ako vyzerá jej kód HTML alebo CSS. Tento návod použije ukážkový web demonštrovať.

Okno Inspect Element môžete otvoriť v prehliadači Google Chrome stlačením tlačidla F12 kľúč. Môžete tiež kliknúť pravým tlačidlom myši kdekoľvek na stránke a kliknúť na Skontrolujte.

Otvorí sa okno Kontrola prvku s kódom HTML pre časť webovej lokality, na ktorú ste klikli pravým tlačidlom myši. Tu môžete tiež

upraviť text webovej stránky pomocou prehliadača Google Chrome.

Karta Štýly v okne Kontrola prvku

V samotnom okne Inspect Element pod Prvky je tu miesto na zobrazenie kódu HTML aj CSS. Kód HTML môžete vidieť na ľavej strane okna Kontrola prvku. Kód CSS nájdete vpravo pod Štýly tab.

Povedzme, že ste mali prvok HTML s triedou nazvanou „card-padding“ s pravou a ľavou výplňou:

.kartová výplň {
 polstrovanie vpravo: 0vh;
 polstrovanie vľavo: 0vh;
}

Ak ste si zobrazili túto webovú stránku v prehliadači, budete si môcť vybrať div prvok s triedou „card-padding“. Akýkoľvek štýl aplikovaný na triedu „karty s výplňou“ sa zobrazí vpravo pod Štýly tab.

Keď umiestnite kurzor myši na prvok v zobrazení kódu HTML, táto časť webovej stránky sa zvýrazní vo webovom prehliadači. Typ prvku HTML spolu s názvami tried sa tiež zobrazí v dialógovom okne vedľa prvku.

V tomto prípade uvidíte na stránke zvýraznený kontajner div s názvami tried "row", "card-padding" a "pb-5".

Ako vykonať zmeny v CSS v reálnom čase

CSS môžete zmeniť priamo na karte Štýly:

1. Použitím tento web, kliknite pravým tlačidlom myši na prvý nadpis.
2. Na tomto konkrétnom nadpise h4 uvidíte aplikovanú triedu s názvom „text-grey“ s farbou #8a8a8a.
3. Namiesto toho zmeňte farbu na niečo iné, napríklad na oranžovú. Chcete zmeniť iba samotnú hodnotu, nie názov vlastnosti, „farbu“.
4. Uvidíte zmenu nadpisu z tmavošedej na oranžovú.
5. Ak chcete zakázať konkrétny štýl CSS, zrušte začiarknutie políčka naľavo od štýlu.
6. Do pôvodnej sady môžete pridať aj ďalšie štýly. Kliknutím pod alebo napravo od vlastníctva začnite pridávať nové. Pri pridávaní nových štýlov by ste mali použiť rovnakú syntax ako v bežnom súbore CSS.
7. Ak zobrazujete ukážku miestnej webovej lokality, môžete pokračovať vo vykonávaní zmien CSS, kým sa nepriblížite požadovanému vzhľadu a štýlu vášho používateľského rozhrania. Potom môžete skopírovať vykonané zmeny CSS späť do miestneho kódu.

Ako upraviť CSS z knižníc alebo rámcov tretích strán

Môžete tiež vykonať zmeny v prvkoch HTML, ak používate knižnice alebo rámce tretích strán, ako je napríklad Bootstrap.

1. Použitím tento web, kliknite pravým tlačidlom myši na jedno z tlačidiel Bootstrap na stránke.
2. Uvidíte dve triedy použité na tlačidlo, "btn" a "btn-primary". Bootstrap už má svoj vlastný štýl aplikovaný na obe tieto triedy. Farby, ktoré sa používajú ako farby pozadia a okrajov, sú #007bff. Zmeňte to na niečo iné, napríklad Violet.
3. Ak zobrazujete ukážku miestnej webovej lokality, môžete nové zmeny pridať späť do miestneho kódu. V závislosti od poradia vášho CSS možno budete musieť použite špecifickejší selektor CSS. Napríklad pred selektor zadajte „.btn“. Tým sa prepíše pôvodný štýl Bootstrapu.

   .btn.btn-primárny {
    farba pozadia: fialová;
    farba okraja: fialová;
   }

Čo znamená element.style na karte Štýly?

Každý HTML element, ktorý zvýrazníte v okne Inspect Element, má blok element.styles. Ide o ekvivalent pridania vloženého štýlu do prvku HTML namiesto zacielenia pomocou selektora.

1. Kliknite pravým tlačidlom myši na prvok HTML. Do sekcie element.style pridajte ľubovoľný štýl, napríklad:

   farba: whitesmoke;

2. Uvidíte, že sa zmenil aj kód prvku HTML. Kód v prvku HTML má teraz nový riadok:

   štýl="farba: whitesmoke;"

Ako podradené prvky HTML dedia štýl

Ak použijete dve rôzne hodnoty štýlu na nadradený prvok a podriadený prvok, prednosť bude mať hodnota v podradenom prvku.

1. Použitím tento web, kliknite pravým tlačidlom myši kdekoľvek na vonkajších okrajoch webovej lokality.
2. V sekcii HTML v okne Kontrola prvku sa zamerajte na dva konkrétne prvky HTML. Existuje nadradený prvok div, na ktorý je aplikovaná trieda "content". Tento prvok HTML má podriadený prvok h4, na ktorý je aplikovaná trieda „text-grey“.
3. Vyberte podradený prvok HTML h4 a zakážte štýl farieb v triede „text-grey“.
4. Vyberte nadradený prvok HTML s triedou „obsah“. Pridajte do triedy nasledujúci štýl CSS:

   farba: červená;

   Všetok text v nadradenom div sa zmení na červenú. Táto zmena sa prenesie aj do podriadených prvkov, čo znamená, že h4 bude mať tiež červenú farbu.
5. Vyberte podradený prvok HTML h4 a pridajte nový štýl do triedy „text-grey“:

   farba: zelená;

   Toto prepíše štýl všetkých rodičovských tried. HTML prvok h4 sa zmení z červenej na zelenú.
6. Prečiarknutie sa tiež zobrazí, ak si pozriete štýl pre triedu „obsah“. Toto potvrdzuje, že podradený prvok h4 prepisuje farbu rodiča.

Výhody ladenia CSS v prehliadači

Ladenie CSS vo vašom prehliadači môže ušetriť veľa času a urýchliť váš pracovný postup pri kódovaní. Platí to najmä vtedy, ak potrebujete vidieť, ako vaše nové zmeny CSS ovplyvňujú používateľské rozhranie na vašom webe v reálnom čase.

Túto techniku ​​môžete použiť namiesto vykonania zmien v miestnom kóde a opätovného načítania aplikácie. To vám ušetrí hádanie, aké hodnoty CSS by fungovali, pretože teraz môžete vidieť zmeny používateľského rozhrania, keď ich robíte.

V okne Kontrola prvku môžete vykonávať zmeny, kým sa nepriblížite k požadovanému dizajnu. Akonáhle budete mať, potom môžete skopírovať kód z okna Inspect Element späť do vášho lokálneho kódu. Stále môžete svoju aplikáciu znova spustiť, aby ste otestovali, či vaše nové zmeny CSS stále fungujú.

Tento tutoriál sa zaoberal základmi ladenia CSS na webovej lokalite pomocou okna Inspect Element, vrátane toho, kde nájdete CSS na karte Štýly.

Zaoberalo sa tiež tým, ako vykonať zmeny v CSS a zobraziť vizuálne zmeny používateľského rozhrania v reálnom čase. Dúfajme, že ste tiež pochopili, ako vykonávať zmeny, keď CSS používa knižnicu tretej strany, a ako funguje dedenie štýlu.

S oknom Inspect Element môžete robiť mnoho ďalších zaujímavých vecí.

7 hravých vecí, ktoré môžete robiť s prvkom Inspect

Prečítajte si ďalej

O autorovi