6 pergjigje

Ashtu si përgjigjet e tjera, ai trashëgon pronën CSS nga elementi prind.

Ajo që përgjigjet e tjera nuk kanë arritur të thonë është pse ju nevojitet. Sepse në fund Karakteristikat e CSS gjithsesi janë të trashëguara, apo jo?

Oh jo. Shumica janë si parazgjedhje (por ngjyra e lidhjes nuk trashëgohet nga prindi, për shembull). Por merrni parasysh këtë rast:

P (ngjyra: blu;) div.i rëndësishëm (ngjyra: e kuqe;)

Tani teksti do të jetë blu në vend të kuq. Nëse e duam atë

Duke zotëruar stilin e prindërve të tij, jo stilin e paracaktuar, ne duhet të anashkalojmë CSS-në e tij. Sigurisht që ne mund të përsërisim vlerën e pronës (e kuqe), por kjo cenon DRY (mos e përsërisni veten). Në vend të kësaj, ne trashëgojmë prej tij:

Div.p i rëndësishëm (ngjyra: trashëguar;)

Fonte: Deklarata trashëguese përdoret në shumë stile CSS Reset që shpesh kopjohen nëpër biblioteka dhe korniza. CSS origjinale Reset nga Eric Meyer ka fontin: trashëgim. Nuk jepet asnjë motivim specifik. Arsyetimi i përgjithshëm thuhet të jetë "për të reduktuar mospërputhjen e shfletuesit në gjëra të tilla si lartësitë e linjës së paracaktuar, kufijtë e kokës dhe madhësitë e shkronjave, e kështu me radhë." Por Meyer i referohet një postimi të mëparshëm ku shpjegon idenë duke thënë ndër të tjera: "I dua të gjitha sepse nuk dua. Merre të mirëqena efektet e stilit. Ajo shërben për dy qëllime: Së pari, më bën të mendoj për e cila është pak më e ndërlikuar në semantikën e dokumentit tim. duke përdorur rivendosjen Unë nuk zgjedh të fortë, sepse dizajni kërkon guxim. Unë zgjedh në vend të kësaj elementi i duhur- nëse është i fortë ose em, b ose h3 ose çfarëdo tjetër - dhe më pas fshijeni sipas nevojës.

Disa elementë HTML kanë paraqitje të paracaktuar në shfletues në lidhje me vetitë e fontit: titujt, fushat e formularit, qelizat e kokës së tabelës, disa elementë frazash, etj. Duke përdorur CSS Rivendos ose specifikisht font: trashëgim do të thotë që në shfletuesit që mbështesin trashëgiminë, të gjithë elementët e tillë shfaqen në fontin e tekstit kopjoni nëse nuk specifikohet ndryshe në fletën e stilit.

Kështu që, vjen një metodologji specifike (ose, siç thonë disa njerëz, ideologji ose fe) e autorësisë dhe dizajnit. Ka fituar popullaritet dhe shpesh përdoret rregullisht.

Jo të gjithë shfletuesit trashëgojnë vetitë e fontit për të gjithë elementët. Netscape 4.x është jashtëzakonisht i keq për trashëgiminë. Merrni parasysh stilin e mëposhtëm:

Trupi (sfondi: i zi; ngjyra: i bardhë)

Në Netscape 4.x, asnjë ngjyrë nuk u aplikua në elementët e tabelës, kështu që do të merrni tekst të zi si parazgjedhje brenda tabelës në një sfond të zi.

Karakteristikat e shkronjave kanë të njëjtin lloj marrëveshjeje për disa elementë, veçanërisht elementët e formës (dhe elementet e tabelës për shfletuesit më të vjetër). Shpesh mund ta shihni këtë përkufizim:

Tabela, forma (fonti: trashëgoj)

inherit përdoret për të marrë vetitë nga elementi prind. Me fjalë të tjera, trashëgoni vetitë e elementit mëmë.

Si parazgjedhje, prona është trashëguar, që do të thotë se keni një div dhe një p.

Tani ju jepni stilin:

Div (font-familje: Tahoma;) p (font-familje: trashëgoj;)

Kjo familje e shkronjave është trashëguar për p nga prindi i saj element div.

Përdorimi i (font: trashëgoj;) në CSS ka kuptim sepse agjentë të ndryshëm përdoruesish (shfletuesit a.k.a.) kanë një fletë stili të agjentit të përdoruesit (lexo: fletë stili i parazgjedhur) me diçka si

Trupi (fonti: -magic-font-from-user-preferences;) zona e tekstit, futja (fonti: monospace;)

(font: trashëgoj;) përdoret për zgjidhje rast i veçantë kur fonti i paracaktuar ose familja e shkronjave nuk trashëgohet për shkak të fletës së stilit të agjentit të përdoruesit, por autori i përmbajtjes dëshiron që familja e shkronjave të trashëgohet.

Sjellja aktuale e agjentit të përdoruesit me vlerën e trashëguar ndryshon për fat të keq gabime të ndryshme... Megjithatë, rezultati mund të jetë më afër qëllimit të autorit sesa parazgjedhja.

Opsionet e shkronjave

Le të fillojmë me atributet e stilit që përcaktojnë parametrat e fontit me të cilin shtypet teksti. Në fund të fundit, teksti në faqet e internetit është gjithçka.

Atributi font-family style specifikon emrin e fontit që do të përdoret për të shfaqur tekstin:

font-familja: <список имен шрифтов, разделенных запятыми> | trashëgojnë

Emrat e shkronjave jepen në formën e emrave të tyre, për shembull, Arial ose Times New Roman. Nëse emri i fontit përmban hapësira, ai duhet të mbyllet në thonjëza:

P (familja e shkronjave: Arial)

H1 (font-familje: "Times New Roman")

Nëse atribut i dhënë stili është i pranishëm në stilin inline, thonjëzat zëvendësohen me apostrofa:

Nëse fonti që kemi specifikuar është i pranishëm në kompjuterin e vizitorit, shfletues uebi e përdor atë. Nëse nuk ka një font të tillë, atëherë teksti shfaqet në fontin e specifikuar në cilësimet e paracaktuara. Dhe faqja jonë e internetit mund të mos duket ashtu siç kemi menduar. (Megjithatë, fontet Arial dhe Times New Roman janë të pranishme në çdo kompjuter që funksionon Windows.) Mund të specifikoni disa emra shkronjash, të ndara me presje:

P (font-familja: Verdana, Arial)

Pastaj shfletuesi i internetit fillimisht do të kërkojë të parin nga fontet e specifikuara, në rast të një kërkimi të pasuksesshëm - të dytin, pastaj të tretën, e kështu me radhë. Në vend të emrit font specifik ju mund të vendosni emrin e njërit prej familjet e shkronjave që përfaqëson koleksione të tëra të shkronjave të ngjashme. Ekzistojnë pesë familje të tilla: serif (fontet serif), sans-serif (fontet sans serif), kursive (fontet që imitojnë tekstin e shkruar me dorë), fantazia (fontet dekorative) dhe monospace (fontet monospace):

H2 (font-familja: Verdana, Arial, sans-serif)

Vlera speciale trashëgim tregon se teksti i këtij elementi të faqes së internetit duhet të shtypet me të njëjtin font si teksti i elementit prind. Ata thonë se në në këtë rast elementi i faqes së internetit "trashëgon" fontin nga elementi prind. Meqë ra fjala, kjo është vlera e paracaktuar për atributin e stilit font-family. Atributi i stilit të madhësisë së shkronjave përcakton madhësinë e fontit:

përmasa e germave: <размер > | xx-i vogël | x-i vogël | i vogël | i mesëm | i madh | x-i madh | xx-i madh | më i madh | më i vogël | trashëgoj

Madhësia e shkronjave mund të vendoset në terma absolute dhe relative. Për këtë, një nga njësitë matëse mbështetur nga CSS (Tabela 8.1).

Tabela 8.1. Njësitë e madhësisë të mbështetura nga standardi CSS

Përcaktimi i njësisë së zgjedhur të matjes tregohet pas vetë vlerës:

P (madhësia e shkronjave: 10 pt) STRONG (madhësia e shkronjave: 1 cm) EM (madhësia e shkronjave: 150%)

Vini re se të gjitha të dhëna në tabelë. Njësitë 8.1 janë të përshtatshme për të specifikuar vlerat e atributeve të tjera të stileve CSS.

Përveç numrave, atribut i madhësisë së shkronjave mund të marrë edhe vlera simbolike. Për shembull, vlerat nga xx-small në xx-large specifikojnë shtatë madhësi të paracaktuara të shkronjave, nga më i vogli tek më i madhi. Vlerat më të mëdha dhe më të vogla përfaqësojnë përkatësisht madhësinë e shkronjave ngjitëse dhe zbritëse. Për shembull, nëse elementi prind ka një madhësi mesatare të fontit të përcaktuar, më i madhi do ta vendosë elementin aktual në madhësinë e madhe të fontit.

Vlera e trashëguar tregon se ky element i faqes së internetit duhet të ketë të njëjtën madhësi fonti si prindi i tij. Kjo është vlera e paracaktuar për atributin e stilit të madhësisë së shkronjave.

Atributi i stilit të ngjyrës specifikon ngjyrën e tekstit:

ngjyrë: <цвет> | trashëgojnë

V Kapitulli 7 përmendëm se ngjyra mund të vendoset me të ashtuquajturin kod RGB (Red, Green, Blue - red, green, blu). Është shkruar në format

#<доля красного цвета><доля зеленого цвета><доля синего цвета> ,

ku thyesat e të gjitha ngjyrave tregohen si numra heksadecimalë 00 në FF. Le të vendosim ngjyrën në të kuqe për tekstin:

H1 (ngjyra: # FF0000) Tani ngjyrë gri: ADRESA (ngjyra: #CCCCCC)

Përveç kësaj, CSS ju lejon të specifikoni ngjyrat me emër. Për shembull, e zeza është e zezë, e bardha është e bardhë, e kuqe është e kuqe, jeshile është jeshile dhe blu është blu.

H1 (ngjyra: e kuqe)

Një listë e plotë e emrave dhe ngjyrat e tyre përkatëse mund të gjenden në faqen e internetit http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx .

Vlera e trashëguar tregon se ky element i faqes së internetit duhet të ketë të njëjtën ngjyrë fonti si prindi i tij. Kjo është vlera e paracaktuar për atributin e stilit të madhësisë së shkronjave.

KUJDES!

Pothuajse të gjitha atributet mbështesin vlerën trashëgimore Stili CSS... Ai i tregon shfletuesit të internetit se elementi i faqes së internetit me të cilin lidhet stili "trashëgon" vlerën e parametrit përkatës nga elementi prind. Të gjitha atributet kanë këtë vlerë të paracaktuar. Në vijim, ne nuk do të përshkruajmë vlerën e dhënëçdo atribut stili; nëse ndonjë atribut stili nuk e mbështet atë, ne do ta përmendim në mënyrë specifike.

Duke përdorur ngjyrën e atributit të stilit, për shembull, mund të vendosim ngjyrën vije horizontale HTML.

Atributi i stilit të opacity ju lejon të specifikoni opacitetin e një elementi të faqes në internet:

errësirë:<числовое значение>| trashëgojnë

Vlera e tejdukshmërisë është një numër ndërmjet 0 dhe 1. Në këtë rast, 0 do të thotë transparencë e plotë elementi (d.m.th. elementi nuk është realisht i dukshëm), dhe 1 është plotësisht i errët (kjo është sjellje normale).

Këtu është një shembull i vendosjes së gjysmës së transparencës (vlera 0.5) për tekstin e formatuar fiks:

PRE (opaciteti: 0,5)

Vini re se si kemi treguar numër thyesor- në vend të një simboli presje, këtu përdoret një pikë.

PËR NJË SHËNIM

Transparenca zakonisht është e dobishme vetëm për krijimin efekte speciale... V Teksti i thjeshtë nuk rekomandohet përdorimi i tij pasi mund të dekurajojë vizitorin.

Atributi i stilit font-peshë përcakton "peshën" e fontit:

pesha e shkronjave: normale | e theksuar | më e theksuar | më e lehtë | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | trashëgim

Ekzistojnë shtatë vlera absolute të disponueshme nga 100 në 900, që përfaqësojnë "pesha" të ndryshme të fontit, nga minimumi në maksimum; fonti normal do të jetë 400 (ose normal) i theksuar dhe 700 (ose i trashë). Parazgjedhja është 400 (normale). Vlerat më të guximshme dhe më të lehta janë relative dhe përfaqësojnë përkatësisht shkallët e ardhshme më të larta dhe më të ulëta të "dhjamit".

KODI (pesha e shkronjave: bold)

Atributi font-style specifikon stilin e fontit:

stili i fontit: normal | italik | i zhdrejtë | trashëgoj

Ekzistojnë tre opsione të disponueshme, që përfaqësojnë zhdrejtën normale, të pjerrët dhe të veçantë dekorative.

Atributi i stilit të dekorimit të tekstit specifikon "dekorimin" (nënvizuar ose vijëzim) që do të zbatohet në tekst:

dekorimi i tekstit: asnjë | nënvizoj | mbinvizim | vijë përmes | pulsoj | trashëgoj

Këtu janë të disponueshme pesë vlera (pa llogaritur trashëgiminë):

Asnjë nuk heq çdo "zbukurim" të dhënë në fontin e elementit prind;

Nënvizoj nënvizon tekstin;

Mbivija "mbivijon" tekstin, pra, vizaton një vijë mbi rreshta;

Teksti vijues i vijës;

Blink bën që fonti të dridhet (ndizet ky moment nuk mbështetet nga Safari).

KUJDES!

Nuk duhet të vendosni pa nevojë një nënvizim për tekstin. Kjo ndodh sepse shfletuesit e internetit shfaqin hiperlidhje të nënvizuara si parazgjedhje, dhe teksti i nënvizuar që nuk është hiperlidhje mund të jetë dekurajues.

Atributi i stilit font-variant ju lejon të specifikoni se si do të duken shkronja të vogla font:

font-variant: normal | me shkronja të vogla | trashëgoj

Vlera e shkronjave të vogla specifikon sjelljen e fontit në mënyrë që shkronjat e vogla të tij të duken saktësisht të njëjta me shkronjat e mëdha, ato thjesht kanë madhësi më të vogël... Vlera normale e vendos fontin në shkronja normale të mëdha.

Atributi i stilit të transformimit të tekstit ju lejon të ndryshoni rastin e karaktereve të tekstit:

transformimi i tekstit: shkronja të mëdha | shkronja të mëdha | të vogla | asnjë | trashëgoj

Mund ta konvertojmë tekstin në shkronja të mëdha (vlera e shkronjave të mëdha të këtij atributi) ose të vogla (të vogla), ta kthejmë shkronjën e parë të secilës fjalë në shkronja të mëdha (kapitale) ose ta lëmë ashtu siç është (asnjë).

Atributi i stilit line-height përcakton lartësinë e rreshtit të tekstit:

lartësia e vijës: normale | <расстояние> | trashëgojnë

Këtu mund të vendosni absoluten dhe magnitudë relative distancat duke specifikuar njësinë e duhur Dimensionet CSS(shih tabelën 8.1). Nëse mungon, vlera që kemi vendosur fillimisht shumëzohet me lartësinë e fontit aktual dhe më pas përdoret. Kështu, për të dyfishuar lartësinë e vijës mbi lartësinë normale të vijës, mund të shkruajmë:

P (lartësia e vijës: 2)

Vlera normale e këtij atributi kthen kontrollin e lartësisë së linjës në shfletuesin e internetit.

Atributi i stilit të ndarjes së shkronjave ju lejon të vendosni hapësirë ​​shtesë midis karaktereve të tekstit:

ndarja e shkronjave: normale | <расстояние>

Vini re se kjo është pikërisht distanca shtesë; do t'i shtohet origjinalit të vendosur nga vetë shfletuesi i internetit.

Këtu mund të vendosni gjithashtu distancën absolute dhe relative duke specifikuar njësinë e duhur CSS (shih Tabelën 8.1). Distanca mund të jetë pozitive ose negative; v rastin e fundit karakteret në font do të jenë më afër njëri-tjetrit se zakonisht. Vlera normale vendos distancën shtesë të paracaktuar në zero.

Atributi i stilit të ndarjes së shkronjave nuk e mbështet vlerën trashëgimore.

Këtu është një shembull i vendosjes së hapësirës shtesë të karaktereve në pesë piksel:

H1 (hapësira midis shkronjave: 5 px)

Teksti i shtypur me karaktere të tilla do të duket i rrallë.

Dhe këtu vendosim një distancë shtesë negative midis karaktereve të barabartë me dy piksel:

H6 (hapësira midis shkronjave: -2 px)

Këto dy pikselë do të zbriten nga distanca origjinale, gjë që do t'i afrojë personazhet dhe do ta bëjë tekstin të duket i ngjeshur. Ndoshta simbolet madje do të përshtaten njëra mbi tjetrën.

Atribut i ngjashëm stili i ndarjes së fjalëve vendos hapësirë ​​shtesë midis fjalëve individuale të tekstit:

ndarja e fjalëve: normale | <расстояние>

H1 (hapësira e fjalëve: 5 mm)

Epo, 5 mm është ndoshta pak e tepërt ... Edhe pse ky është vetëm një shembull.

Dhe së fundi, le të shohim atributin e stilit të shkronjave, i cili ju lejon të vendosni disa parametra të shkronjave menjëherë:

fonti: [ <начертание> ] [<вид строчных букв> ] [<"жирность"> ] [<размер> ] <имя шрифта>

Siç mund ta shihni, kërkohet vetëm emri i fontit - parametra të tjerë mund të mungojnë.

Vendosni tekstin e paragrafit në një font Times New Roman me 10 pikë:

P (fonti: 10 pt "Times New Roman")

Dhe për titujt e nivelit të gjashtë - 12 pikë Arial dhe kursive:

H6 (fonti: italic 12pt Verdana)

Shpesh, kur ia kthejmë një projekt një klienti, ne humbasim kontrollin e kodit HTML. Ndonjëherë klienti përdor CMS (Content Management Systems), të cilat i japin atij kontroll të plotë mbi pjesë të caktuara të kodit HTML. Ndonjëherë një klient thjesht përdor shabllonet tona për të nxjerrë kodin e tij në një dokument.
Në shumicën e rasteve, është mjaft e vështirë të informosh klientin se si të përdorë shabllonet ose CMS që i ofroni, dhe ndonjëherë është thjesht e papranueshme të shtyni fjalime të zjarrta në lidhje me paraqitjen semantike dhe standardet e uebit. Klienti mund / do të përdorë "shënjimin e vjetër të mirë", atë që ai njeh, thjesht sepse funksionon dhe duket ashtu siç është mësuar. Me shumë mundësi do të përmbajë etiketa dhe atribute të padëshiruara (të vjetruara), si p.sh bgcolor, rreshtoj dhe "e perjetshme" font... Ky artikull ka të bëjë me mënyrën se si të bllokoni etiketat e padëshiruara HTML me duke përdorur CSS, duke e drejtuar me butësi klientin në drejtimin e duhur.

Ka disa zgjidhje për problemin. Njëra është shfaqja e një imazhi paralajmërues CSS kur përdoren etiketa të padëshiruara. Ka edhe shpjegime të hollësishme për këtë metodë. Zgjidhja e dytë është heqja e etiketave dhe atributeve të padëshiruara në anën e serverit. Kjo metodë është më efektive, një tjetër gjë është se nuk ka gjithmonë kontroll mbi serverin ku ndodhet faqja.
Ideja është të ruhet kaskada natyrore dhe trashëgimia e stilit në të gjithë shfletuesit duke "çaktivizuar" në mënyrë elegante HTML që klienti nuk dëshiron të përdorë. Dhe pastaj klienti do të ndalojë përdorimin e tij, sepse etiketat e padëshiruara thjesht do të ndalojnë "punën". Një mënyrë elegante dhe pa stres që e udhëheq klientin në rrugën e duhur.
Etiketat dhe atributet e padëshiruara HTML: