CSS stila prioritātes līmeņa pārskatīšana

Cascading Style Sheet (CSS) , manuprāt, ir visvienkāršākā valoda, salīdzinot ar citām ar valodu saistītām valodām, tāpēc nav pārsteidzoši, ka daudzi cilvēki, kuri tikai sāk mācīties, kā izveidot tīmekļa vietni, vispirms iemācīsies šo valodu un HTML.

Šajā ziņojumā mēs atgriezīsimies pie CSS pamatiem. Mēs pārskatīsim, kā sākotnēji tiek izmantoti CSS stili, kādi stili tiks piemēroti, kā dažu stilu deklarācija pārraksta viens otru, kamēr citi nav.

Tātad, šis amats ir īpaši paredzēts iesācējiem, kuri tikko sāk saņemt izaicinājumus, iespējams, joprojām kļūdās un kļūdās, veidojot pirmo stilu. Tātad, pieņemsim tikai sākt.

Noklusējuma pārlūka stili

Firefox, Chrome, Safari, Opera un Internet Explorer pašlaik ir piecas galvenās darbvirsmas pārlūkprogrammas. Šīs pārlūkprogrammas un visas pārējās pārlūkprogrammas ievēro standarta noteikumus, lai iekļautu iebūvētos noklusējuma stilus, lai padarītu HTML elementus.

Tātad, kad mēs ievietojam dažus nejaušus HTML elementus bez jebkādiem pievienotiem stiliem, jūs redzēsiet, ka pārlūkprogrammā tas joprojām ir pareizi atveidots.

Bet, ja mēs rūpīgi pārbaudām šos elementus, katrai pārlūkprogrammai ir (nedaudz) atšķirīgas vērtības “noklusējuma” deklarācija, kas izraisa neatbilstību pārlūkprogrammās, jo īpaši vecajā, piemēram, IE6, 7 un Firefox 3.0.

Piemēram, kā redzams no iepriekšējās ekrānuzņēmuma, jaunākais Firefox sniedza bloķēt pēc noklusējuma ar starpība: 16px 40px 16px 40px, bet otrā pusē - Internet Explorer 7 sniegs bloķēt ar starpība: 0px 40px.

Lai pārvarētu iepriekš norādītās pretrunas, daudzi tīmekļa dizaineri un izstrādātāji izvēlas pārrakstīt visus šos stilus CSS atiestatīšana. Šis CSS fails parasti satur gandrīz visu HTML Tips atlasītājus, definējot tos ar vienādiem noteikumiem.

Ir pieejami daudzi CSS atiestatījumi, bet šeit ir manas trīs labākās izlases:

• Normalize.css
• CSS atiestatīšana
• HTML5 atiestatiet stilu

Atlasītāji

Jūs, iespējams, bieži izlasījāt šo terminu visā tīmekļa dizaina / izstrādes blogā, kuru apmeklējat; Atlasītāji.

CSS atlasītājs ir sintakse, ko izmanto, lai mērķētu jebkuras HTML dokumenta daļas, lai piemērotu stilu. Šeit mēs apspriedīsim trīs galvenos atlasītājus, jo, iespējams, tie būs kopējie atlasītāji, kas tiek izmantoti jūsu pirmajā tīmekļa vietnē. Nākamajos amatos mēs segsim citus.

Tipa atlasītājs

Mēs esam minējuši iepriekš, tipa selektors atlasīs visus norādītos HTML elementus dokumentā. Piemēram:

 p / ** deklarācija ** / 

atbilst visiem p vai paragrāfs elementi un to izmantošana galu galā pārrakstīs no pārlūkiem piešķirtos noklusējuma stilus.

Klases atlasītājs

Ja elementam esat pievienojis klasi vai pat daudzas klases, varat arī atlasīt šīs klases. The Klases atlasītājs sākas ar a dot parametru.

 .lodziņš / ** deklarācija ** / 

Iepriekš minētais fragments atbilst visiem elementiem, kuriem ir kastes klase, vai arī mēs varam izvēlēties precīzāk.

 p.box / ** deklarācija ** / 

Tas būs vērsts tikai uz p elements, kam ir lodziņā klasē.

Kad mēs izmantojam Klase selektors, visi tie paši stila deklarācijas gan no Tips selektors un Noklusējuma pārlūks tiks pārrakstīts.

ID atlasītājs

The ID ir ļoti ierobežojošs atribūts, mums var būt tikai viens ID uz elementa, un tam jābūt arī unikālam.

 
Saturs
 

Gadījumā, ja mums ir ID elementā mēs varam izmantot ID selektors mērķēt šo elementu; ID selektors ir definēts ar hash # parametru.

 #uniqueID / ** deklarācija ** / 

Kopš ID ir unikāls, tam ir visaugstākais prioritātes līmenis selektoram. Tātad, kad mēs paziņojam stilu ar ID selektors galu galā pārrakstīs visu to pašu deklarāciju no Klase, Tips selektori un Noklusējuma pārlūks stili.

Stilu iekļaušana

Mēs esam nonākuši cauri visiem būtiskākajiem pamata atlasītājiem, un tagad mēs izskatīsim, kā šie stili ir iestrādāti HTML dokumentā.

Ārējie stili

Ārējie stili ir stili, kas tiek pievienoti atsevišķā failā, parasti a .css fails, kas pēc tam ir saistīts ar HTML dokumentu, izmantojot tagu, lai piemērotu šos stilus.

Un visi faili, kas deklarēti failos, rīkosies tāpat kā tas, ko esam pieminējuši Atlasītāji iepriekš, jo tas pārsvarā tiks pārrakstīts noklusējuma pārlūka stilu un pārrakstiet citu stila deklarāciju atkarībā no selektoru prioritātes līmeņa.

Šī prakse ir ieteicamākais veids, kā pievienot stilus, īpaši, ja jums ir tūkstošiem CSS kodu rindu ar daudzām lapām, kas jāpievieno.

To darot, stili būs viegli pārvaldāmi, piemēram, CSS failus var atdalīt vairākos failos atkarībā no tā īpašās lomas, piemēram, typography.css, lai kontrolētu visus ar Typography saistītos stilus utt..

Iekšējie stili

Iekšējie stili ir stili, kas ir iestrādāti tieši HTML dokumentā, parasti iekšpusē tag.

Bet šī prakse nav ieteicama, ja jums būs simtiem rindu stilu, jo jūsu HTML lapa būs pārāk gara, un stils ietekmēs tikai to, kur stili ir iestrādāti. Kad esat atļāvis teikt desmit lapas, jums būs jāpārkopē šie stili un jāiekļauj tos visās lapās, un, kad ir jāmaina stili, tas ir jāmaina uz desmit dažādām lapām, kas, protams, ir garlaicīgs uzdevums.

Balstoties uz prioritātes līmeni, iekšējais stils ir augstāks, tāpēc tas pārrakstīs ārējos stilus.

Iekšējie stili

Inline stili ir stili, kas ir tieši iestrādāti HTML elementā.

 
Šis ir punkts
 

Šis piemērs tiks pievienots 5px punkta elementam, un tas arī pārrakstīs robežas, kas ir deklarētas šim elementam gan iekšējā, gan ārējā stilā..

Bet izvairieties no tā, jo jūsu atzīme tiks pārblīvēta ar visām šīm stila deklarācijām; ja ir iestrādāts daudz stilu, tas pat kļūs par murgu, lai redzētu un uzturētu visus jūsu html un stilus.

Turpmāka lasīšana: Trīs veidi, kā ievietot CSS - W3CSchools.

Svarīgs noteikums!

Ir daži apstākļi, kad elementam ir jāpiemēro īpašs stils, bet tas pats stils ir arī deklarēts citur stillapā vai dokumentā. Piemēram:

Mums ir šāds enkura tags ar iegulto stilu

 Šī ir saite 

Un mums ir arī atsevišķs stila lapas stila veids šim enkura tagam.

 robeža: 1px cietais # 333; fona krāsa: # 555;  

Šajā piemērā mēs varam izmantot !svarīgs noteikums, lai piespiestu pārlūku izmantot stila lapas stilu, nevis elementu.

 robeža: 1px cietais # 333! fona krāsa: # 555!  

The !svarīgs noteikums norāda, ka šis stils ir visvairāk svarīgs un ir jāpiemēro pārējo stilu pat tad, ja tas ir tieši iestrādāts elementā (Inline stili).

Turpmāka lasīšana:! svarīgas CSS deklarācijas: kā un kad tās izmantot - Smashing Magazine.

Secinājums

Mēs esam nonākuši caur visu šī raksta tematu. Tagad mēs varam redzēt, ka katram selektoram un veidam, kādā mēs ieliekam stilus, pārlūkprogrammas mehānismā ir atšķirīgi prioritātes līmeņi. Kā jau iepriekš minēju, šie priekšmeti ir domāti iesācēju līmenim, lai viņi noteikti nebūtu jauni pieredzējušiem web dizaineriem.

Bet, es domāju, ka katrs tīmekļa dizaineris kopumā piekrīt, ka atgriešanās pie pamatiem dažkārt ir nepieciešama, lai pārskatītu mūsu fundamentālās zināšanas par tēmu. Patiesībā mēs bieži vien izlaižam dažus no pamatmateriāliem, jo ​​mums ir vairāk iespaidu ar lieliskām (un traks) lietām, piemēram,.

Visbeidzot, es esmu iesniedzis demo un avota failu, lai jūs varētu pārbaudīt mūsu diskusiju šajā rakstā.

• Demo
• Lejupielādēt avotu

Es ceru, ka jums patiks šī ziņa, un, ja jūs atradīsiet kādu neprecizitāti vai neesat ievērojis dažus svarīgus punktus, lūdzu, informējiet mani tālāk sadaļā Komentāri.