Kā izmantot Google Chrome, lai atkļūdotu CSS

Elementa pārbaudes rīks ir lielisks, ja runa ir par tīmekļa lapu atkļūdošanu reāllaikā. Varat izmantot šo rīku, lai palīdzētu priekšskatīt un mainīt vietnes dizainu. Tas arī ļauj jums to izdarīt bez nepieciešamības atkārtoti ielādēt lapu, nekavējoties parādot jūsu CSS izmaiņas.

Šajā rakstā tiks apskatīts, kā logā Pārbaudīt elementu skatīt CSS klases un to lietotos stilus. Tas arī aptvers, kā varat to izmantot, lai reāllaikā priekšskatītu izmaiņas, ko veicat savā CSS.

Pārbaudes elementa atvēršana pārlūkprogrammā Google Chrome

Varat apmeklēt jebkuru vietni un atvērt logu Pārbaudīt elementu, lai redzētu, kā izskatās tās HTML vai CSS kods. Šī apmācība tiks izmantota tīmekļa vietnes paraugs demonstrēt.

Varat atvērt logu Pārbaudīt elementu pārlūkprogrammā Google Chrome, nospiežot F12 taustiņu. Varat arī ar peles labo pogu noklikšķināt jebkurā lapas vietā un noklikšķināt uz Pārbaudīt.

Logā Pārbaudīt elementu tiks atvērts tās vietnes daļas HTML kods, kurā ar peles labo pogu noklikšķinājāt. Šeit jūs varat arī rediģēt vietnes tekstu, izmantojot Google Chrome.

Cilne Stili elementa pārbaudes logā

Pašā logā Pārbaudīt elementu zem Elementi cilnē ir vieta, kur skatīt gan HTML, gan CSS kodu. Jūs varat redzēt HTML kodu loga Pārbaudīt elementu kreisajā pusē. CSS kodu varat atrast labajā pusē zem Stili cilne.

Pieņemsim, ka jums bija HTML elements ar klasi, ko sauc par "card-padding", ar labo un kreiso polsterējumu.

.card-padding {
 polsterējums-labais: 0vh;
 polsterējums-kreisais: 0vh;
}

Ja pārlūkprogrammā priekšskatījāt šo vietni, jūs varētu atlasīt div elements ar "card-padding" klasi. Jebkurš stils, kas tiek lietots klasei "Card-polsterējums", tiks rādīts labajā pusē zem Stili cilne.

Novietojot kursoru virs elementa HTML koda skatā, šī tīmekļa lapas daļa tiks izcelta tīmekļa pārlūkprogrammā. HTML elementa tips kopā ar klašu nosaukumiem arī tiks parādīts dialoglodziņā blakus elementam.

Tādā gadījumā jūs redzēsiet div konteineru ar klašu nosaukumiem "rinda", "card-padding" un "pb-5".

Kā reāllaikā veikt izmaiņas CSS

Varat mainīt CSS tieši no cilnes Stili:

1. Izmantojot šī vietne, ar peles labo pogu noklikšķiniet uz pirmā virsraksta.
2. Šajā konkrētajā h4 virsrakstā jūs redzēsiet tam piemērotu klasi, ko sauc par "teksta pelēku" ar krāsu #8a8a8a.
3. Tā vietā mainiet krāsu uz kaut ko citu, piemēram, oranžu. Jūs vēlaties mainīt tikai pašu vērtību, nevis īpašuma nosaukumu, "krāsu".
4. Jūs redzēsiet, ka virsraksts mainās no tumši pelēka uz oranžu.
5. Ja vēlaties atspējot noteiktu CSS stilu, noņemiet atzīmi no izvēles rūtiņas pa kreisi no stila.
6. Varat arī pievienot vairāk stilu oriģinālajam komplektam. Noklikšķiniet tieši zem īpašuma vai pa labi no tā, lai sāktu pievienot jaunu. Pievienojot jaunus stilus, izmantojiet to pašu sintakse, ko izmantotu parastam CSS failam.
7. Ja priekšskatāt vietējo vietni, varat turpināt CSS izmaiņu veikšanu, līdz tuvojas nepieciešamajam lietotāja interfeisa izskatam. Pēc tam veiktās CSS izmaiņas varat kopēt atpakaļ vietējā kodā.

Kā modificēt CSS no trešās puses bibliotēkām vai ietvariem

Varat arī veikt izmaiņas HTML elementos, ja izmantojat trešās puses bibliotēkas vai ietvarus, piemēram, Bootstrap.

1. Izmantojot šī vietne, ar peles labo pogu noklikšķiniet uz vienas no Bootstrap pogām lapā.
2. Jūs redzēsit divas pogai piemērotas klases: "btn" un "btn-primary". Bootstrap jau ir savs stils, kas tiek piemērots abām šīm klasēm. Krāsas, kas tiek izmantotas kā fona un apmales krāsas, ir #007bff. Mainiet to uz kaut ko citu, piemēram, Violetu.
3. Ja priekšskatāt vietējo vietni, varat pievienot jaunās izmaiņas atpakaļ vietējam kodam. Atkarībā no jūsu CSS secības jums var būt nepieciešams izmantojiet specifiskāku CSS atlasītāju. Piemēram, ievadiet atlasītāja prefiksu ar ".btn". Tas ignorēs sākotnējo Bootstrap stilu.

   .btn.btn-primary {
    fona krāsa: violeta;
    apmales krāsa: violeta;
   }

Ko cilnē Stili nozīmē elements.style?

Katram HTML elementam, ko iezīmējat logā Pārbaudīt elementu, ir elements element.styles. Tas ir līdzvērtīgs iekļautā stila pievienošanai HTML elementam, nevis mērķauditorijas atlasei, izmantojot atlasītāju.

1. Ar peles labo pogu noklikšķiniet uz HTML elementa. Pievienojiet sadaļai element.style jebkuru stilu, piemēram:

   krāsa: whitesmoke;

2. Jūs redzēsiet, ka ir mainījies arī HTML elementa kods. HTML elementa kodam tagad ir jauna rinda:

   stils ="krāsa: whitesmoke;"

Kā bērnu HTML elementi pārmanto stilu

Ja vecākelementam un pakārtotajam elementam ir lietotas divas dažādas stila vērtības, prioritāte būs pakārtotā elementa vērtībai.

1. Izmantojot šī vietne, ar peles labo pogu noklikšķiniet jebkurā vietā vietnes ārējās malās.
2. Loga Pārbaudīt elementu HTML sadaļā koncentrējieties uz diviem konkrētiem HTML elementiem. Ir vecākelements div, kuram ir piemērota "content" klase. Šim HTML elementam ir h4 pakārtots elements, kuram tiek piemērota klase "text-grey".
3. Atlasiet bērna h4 HTML elementu un atspējojiet krāsu stilu klasē "text-grey".
4. Atlasiet vecāku HTML elementu ar klasi “satura”. Pievienojiet klasei šādu CSS stilu:

   krāsa: sarkana;

   Viss teksts, kas atrodas vecākdaļā, kļūs sarkans. Šīs izmaiņas tiks veiktas arī pakārtotajos elementos, kas nozīmē, ka h4 būs arī sarkana krāsa.
5. Atlasiet bērna h4 HTML elementu un pievienojiet jaunu stilu klasei "text-grey":

   krāsa: zaļa;

   Tas ignorēs jebkuras vecāku klases stilu. H4 HTML elements kļūs no sarkana uz zaļu.
6. Jūs redzēsit arī pārsvītrojumu, ja skatīsit satura klases stilu. Tas apstiprina, ka pakārtotais elements h4 ir pārāks par vecākkrāsu.

CSS atkļūdošanas priekšrocības pārlūkprogrammā

CSS atkļūdošana pārlūkprogrammā var ietaupīt daudz laika un paātrināt kodēšanas darbplūsmu. Tas jo īpaši attiecas uz gadījumiem, kad vēlaties redzēt, kā jaunās CSS izmaiņas reāllaikā ietekmē jūsu vietnes lietotāja interfeisu.

Varat izmantot šo paņēmienu, nevis veikt izmaiņas vietējā kodā un atkārtoti ielādēt lietotni. Tādējādi jūs neļausiet uzminēt, kādas CSS vērtības darbosies, jo tagad varat skatīt lietotāja interfeisa izmaiņas, kad tās veicat.

Varat veikt izmaiņas logā Pārbaudīt elementu, līdz esat sasniedzis vēlamo dizainu. Kad tas ir izdarīts, varat kopēt kodu no loga Pārbaudīt elementu atpakaļ savā vietējā kodā. Joprojām varat atkārtoti palaist lietotni, lai pārbaudītu, vai jaunās CSS izmaiņas joprojām darbojas.

Šajā apmācībā tika apskatīti vietnes CSS atkļūdošanas pamati, izmantojot logu Pārbaudīt elementu, tostarp informācija par to, kur cilnē Stili atrast CSS.

Tajā tika apskatīts arī tas, kā veikt izmaiņas CSS un skatīt lietotāja interfeisa vizuālās izmaiņas reāllaikā. Cerams, ka jūs arī saprotat, kā veikt izmaiņas, ja CSS izmanto trešās puses bibliotēku, un kā darbojas stila pārmantošana.

Ir daudzas citas interesantas lietas, ko varat darīt, izmantojot logu Pārbaudīt elementu.

7 rotaļīgas lietas, ko varat darīt, izmantojot apskates elementu

Lasiet Tālāk

Par autoru