Kā CSS mantojums darbojas tīmekļa dokumentos

Svarīga tīmekļa vietnes ar CSS veidošanas sastāvdaļa ir izpratne par mantojuma jēdzienu.

CSS mantojumu automātiski nosaka izmantojamā īpašuma stils. Kad jūs meklējat stila īpašības fona krāsu, jūs redzēsit sadaļu ar nosaukumu "Mantojums". Ja jūs, piemēram, lielākā daļa tīmekļa dizaineru, ignorējāt šo sadaļu, bet tas ir mērķtiecīgs.

Kas ir CSS Mantojums?

Katrs HTML dokumenta elements ir koka daļa, un katram elementam, izņemot sākotnējo elementu , ir vecāks elements, kas to ietver. Neatkarīgi no tā, kādi stili tiek pielietoti šim mātes elementam, var pielietot tajā ietvertajos elementos, ja īpašumi ir tie, kurus var mantot.

Piemēram, šim HTML kodam ir H1 tags, kas ietver EM tagu:

Šī ir lielā virsraksts

EM elements ir H1 elementa bērns, un visi mantotās H1 stili tiks nodoti arī EM tekstam. Piemēram:

h1 {font-size: 2em; }

Tā kā fonta lieluma īpašums ir mantots, teksts ar nosaukumu "Big" (kas ir tas, kas ir ietverts EM tagu iekšpusē) būs tādā pašā izmērā kā pārējā H1. Tas ir tāpēc, ka tas pārmanto vērtību, kas noteikta CSS īpašumā.

Kā izmantot CSS mantojumu

Visvienkāršākais veids, kā to izmantot, ir iepazīties ar CSS īpašībām, kuras ir mantotas un kuras netiek mantotas. Ja īpašums ir mantots, tad jūs zināt, ka vērtība katram dokumenta bērna elementam saglabāsies vienāda.

Vislabākais veids, kā to izmantot, ir iestatīt savus pamatstilus ļoti augstā līmenī, piemēram, BODY. Ja jūsu ķermeņa īpašumam iestatīsiet fontu saimi , tad, pateicoties mantojumam, viss dokuments saglabās to pašu fontu saimi. Tas faktiski padara mazākas stilu lapas, kuras ir vieglāk pārvaldīt, jo ir mazāk vispārējo stilu. Piemēram:

iestāde {font-family: Arial, sans-serif; }

Izmantojiet mantojuma stila vērtību

Katrā CSS īpašumā ir iespējama opcija "mantot". Tas informē tīmekļa pārlūkprogrammu, ka pat tad, ja īpašums parasti netiek mantots, tai vajadzētu būt tādai pašai vērtībai kā vecākam. Ja jūs iestatāt stilu, piemēram, marķējumu, kas nav mantots, varat izmantot nākamo īpašumu mantojuma vērtību, lai piešķirtu tām tādu pašu rezervi kā vecākam. Piemēram:

ķermenis {margin: 1em; } p (margin: inherit; }

Mantojums izmanto aprēķinātās vērtības

Tas ir svarīgi mantotās vērtības, piemēram, fontu izmēriem, kas izmanto garumu. Aprēķinātā vērtība ir vērtība, kas ir salīdzināma ar kādu citu Web lapas vērtību.

Ja iestatījāt fonta izmēru 1em savā elementā BODY, visa lapa nebūs tikai 1em lieluma. Tas ir tādēļ, ka tādi elementi kā virsraksti (H1-H6) un citi elementi (dažās pārlūkprogrammās atšķirīgi tabulas raksturlielumi) tīmekļa pārlūkā ir relatīvi lieli. Ja nav citu informācijas par fontu lielumu, tīmekļa pārlūkprogramma vienmēr padarīs virsrakstu H1 lielāko tekstu lapā, kam seko H2 un tā tālāk. Kad jūs iestatāt BODY elementu konkrētam fonta izmēram, tas tiek izmantots kā "vidējais" fonta izmērs, un galvenie elementi tiek aprēķināti no tā.

Piezīme par mantojumu un fona īpašībām

Ir vairāki stili, kas ir uzskaitīti, W3C nav mantojuši CSS 2, bet tīmekļa pārlūkprogrammas joprojām manto vērtības. Piemēram, ja jūs rakstījāt šādu HTML un CSS: