6 raspunsuri

Ca și alte răspunsuri, moștenește proprietatea CSS de la element părinte.

Ceea ce celelalte răspunsuri nu au spus este motivul pentru care aveți nevoie de el. Pentru că până la urmă Proprietăți CSS oricum sunt mostenite, nu?

Oh nu. Majoritatea sunt implicite (dar culoarea linkului nu este moștenită de la părinte, de exemplu). Dar luați în considerare acest caz:

P (culoare: albastru;) div.important (culoare: roșu;)

Textul va fi acum albastru în loc de roșu. Dacă vrem asta

Deținând stilul părinților săi, nu stilul implicit, trebuie să suprascriem CSS-ul său. Desigur, am putea repeta valoarea proprietății (roșu), dar asta încalcă DRY (nu te repeta). În schimb, moștenim din el:

Div.important p (culoare: moștenire;)

Fontul: declarația de moștenire este utilizat în multe stiluri de resetare CSS care sunt adesea copiate în biblioteci și cadre. Originalul Reset CSS de Eric Meyer are font: inherit. Nu se oferă o motivație specifică. Se spune că rațiunea generală este „reducerea inconsecvenței browserului cu privire la lucruri precum înălțimile implicite ale liniilor, marginile antetului și dimensiunile fonturilor și așa mai departe”. Dar Meyer se referă la o postare anterioară în care explică ideea spunând, printre altele, „Îmi doresc totul pentru că nu vreau. Să iau efectele elegante de la sine înțeles. Are două scopuri: în primul rând, mă face să mă gândesc la ceea ce este puțin mai complicat în semantica documentului meu. folosind resetare Nu aleg puternic pentru că designul necesită îndrăzneală. eu aleg in schimb element corect- indiferent dacă este puternic sau em sau b sau h3 sau orice altceva - și apoi ștergeți-l după cum este necesar."

Mai multe elemente HTML au randare implicită în browsere în ceea ce privește proprietățile fontului: anteturi, câmpuri de formular, celule antet tabel, unele elemente de frază etc. Folosind CSS Resetați sau în mod specific font: moștenire înseamnă că în browserele care acceptă moștenirea, toate aceste elemente apar în font text copiați dacă nu se specifică altfel în foaia de stil.

Asa de, este vorba o metodologie specifică (sau, după cum spun unii oameni, ideologie sau religie) de autor și design. A câștigat popularitate și este adesea folosit în mod regulat.

Nu toate browserele moștenesc proprietățile fonturilor pentru toate elementele. Netscape 4.x este notoriu rău în ceea ce privește moștenirea. Luați în considerare următorul stil:

Corp (fond: negru; culoare: alb)

În Netscape 4.x, nu a fost aplicată nicio culoare elementelor tabelului, așa că veți obține text negru în mod implicit în interiorul tabelului pe un fundal negru.

Proprietățile fonturilor au același tip de acord pentru unele elemente, în special elementele de formular (și elementele de tabel pentru browserele mai vechi). Puteți vedea adesea această definiție:

Tabel, formular (font: moștenire)

moștenire este folosit pentru a obține proprietăți de la elementul părinte. Cu alte cuvinte, moșteniți proprietățile elementului părinte.

În mod implicit, proprietatea este moștenire, ceea ce înseamnă că aveți un div și un p.

Acum dai stilul:

Div (familie de font: Tahoma;) p (familie de font: moștenire;)

Această familie de fonturi este moștenită pentru p de la părintele său element div.

Folosirea (font: inherit;) în CSS are sens, deoarece diferiți agenți de utilizator (browsere a.k.a.) au o foaie de stil pentru agent de utilizator (a se citi: foaie de stil implicită) cu ceva de genul

Corp (font: -magic-font-from-user-preferences;) zona de text, intrare (font: monospace;)

(font: inherit;) este folosit pentru soluție caz special când fontul implicit sau familia de fonturi nu este moștenită din cauza foii de stil a agentului utilizator, dar autorul conținutului dorește ca familia de fonturi să fie moștenită.

Comportamentul real al agentului utilizator cu valoarea de moștenire diferă, din păcate, de diverse erori... Cu toate acestea, rezultatul poate fi mai aproape de intenția autorului decât de cel implicit.

Opțiuni de font

Să începem cu atributele de stil care definesc parametrii fontului cu care este tastat textul. La urma urmei, textul de pe paginile Web este totul.

Atributul font-family style specifică numele fontului care va fi utilizat pentru afișarea textului:

familie de fonturi: <список имен шрифтов, разделенных запятыми> | mostenesc

Numele fonturilor sunt date sub forma numelor lor, de exemplu, Arial sau Times New Roman. Dacă numele fontului conține spații, acesta trebuie inclus între ghilimele:

P (familie de font: Arial)

H1 (familie de fonturi: „Times New Roman”)

Dacă atribut dat stilul este prezent în stilul inline, ghilimelele sunt înlocuite cu apostrofe:

Dacă fontul pe care l-am specificat este prezent pe computerul vizitatorului, browser webîl folosește. Dacă nu există un astfel de font, atunci textul este afișat în fontul specificat în setările implicite. Și pagina noastră web poate să nu arate așa cum ne-am propus. (Cu toate acestea, fonturile Arial și Times New Roman sunt prezente pe orice computer care rulează Windows.) Puteți specifica mai multe nume de fonturi, separate prin virgule:

P (familie font: Verdana, Arial)

Apoi, browserul web va căuta mai întâi primul dintre fonturile specificate, în cazul unei căutări nereușite - al doilea, apoi al treilea și așa mai departe. În loc de un nume font specific puteți seta numele unuia dintre familii de fonturi reprezentând colecții întregi de fonturi similare. Există cinci astfel de familii: serif (fonturi serif), sans-serif (fonturi fără serif), cursive (fonturi care imită textul scris de mână), fantasy (fonturi decorative) și monospace (fonturi monospace):

H2 (familie de font: Verdana, Arial, sans-serif)

Valoarea specială moștenită indică faptul că textul acestui element de pagină Web trebuie introdus în același font ca și textul elementului părinte. Ei spun că în în acest caz elementul de pagină Web „moștenește” fontul de la elementul părinte. Aceasta este valoarea implicită pentru atributul stil familie de fonturi, de altfel. Atributul stil font-size determină dimensiunea fontului:

marimea fontului: <размер > | xx-mic | x-mic | mic | mediu | mare | x-mari | xx-mari | mai mare | mai mic | mostenesc

Mărimea fontului poate fi setată în termeni absoluti și relativi. Pentru aceasta, unul dintre unitati de masura suportat de CSS (Tabelul 8.1).

Tabelul 8.1. Unități de dimensiune acceptate de standardul CSS

Denumirea unității de măsură selectate este indicată după valoarea în sine:

P (dimensiunea fontului: 10 pt) STRONG (dimensiunea fontului: 1 cm) EM (dimensiunea fontului: 150%)

Rețineți că toate sunt date în tabel. Unitățile 8.1 sunt potrivite pentru specificarea valorilor altor atribute ale stilurilor CSS.

Pe lângă cifre, atributul font-size poate lua şi valori simbolice. De exemplu, valorile de la xx-small la xx-marie specifică șapte dimensiuni de font predefinite, de la cel mai mic la cel mai mare. Valorile mai mari și mai mici reprezintă următoarea dimensiune a fontului ascendentă și, respectiv, descendentă. De exemplu, dacă elementul părinte are o dimensiune medie a fontului definită, mai mare va seta elementul curent la dimensiunea mare a fontului.

Valoarea de moștenire indică faptul că acest element de pagină Web trebuie să aibă aceeași dimensiune a fontului ca și părintele său. Aceasta este valoarea implicită pentru atributul stil font-size.

Atributul stil de culoare specifică culoarea textului:

culoare: <цвет> | mostenesc

V Capitolul 7 am menționat că culoarea poate fi setată cu așa-numitul cod RGB (Roșu, Verde, Albastru - roșu, verde, albastru). Este scris în format

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

unde fracțiile tuturor culorilor sunt indicate ca numere hexazecimale 00 la FF. Să setăm culoarea la roșu pentru text:

H1 (culoare: # FF0000) Acum culoare gri: ADRESĂ (culoare: #CCCCCC)

În plus, CSS vă permite să specificați culorile după nume. De exemplu, negru este negru, alb este alb, roșu este roșu, verde este verde și albastru este albastru.

H1 (culoare: roșu)

O listă completă de nume și culorile corespunzătoare pot fi găsite pe pagina web http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx .

Valoarea de moștenire indică faptul că acest element de pagină Web trebuie să aibă aceeași culoare de font ca și părintele său. Aceasta este valoarea implicită pentru atributul stil font-size.

ATENŢIE!

Aproape toate atributele acceptă valoarea de moștenire Stilul CSS... Spune browserului web că elementul paginii web la care este legat stilul „moștenește” valoarea parametrului corespunzător din elementul părinte. Toate atributele au această valoare implicită. În cele ce urmează, nu vom descrie valoare dată fiecare atribut de stil; dacă un anumit atribut de stil nu îl acceptă, îl vom menționa în mod specific.

Folosind atributul de stil culoare, putem, de exemplu, seta culoarea linie orizontală HTML.

Atributul de stil opacitate vă permite să specificați opacitatea unui element de pagină Web:

opacitate:<числовое значение>| mostenesc

Valoarea translucidității este un număr între 0 și 1. În acest caz, 0 înseamnă transparenta totala element (adică elementul nu este de fapt vizibil), iar 1 este complet opac (acesta este un comportament normal).

Iată un exemplu de setare a jumătății de transparență (valoare 0,5) pentru text formatat fix:

PRE (opacitate: 0,5)

Observați cum am indicat număr fracționar- în locul unui simbol virgulă, aici se folosește un punct.

PE O NOTĂ

Transluciditatea este de obicei utilă numai pentru creare efecte speciale... V text simplu nu se recomandă utilizarea acestuia deoarece poate descuraja vizitatorul.

Atributul stil font-weight stabilește „greutatea” fontului:

greutatea fontului: normal | îndrăzneț | mai îndrăzneț | mai ușor | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | moștenire

Există șapte valori absolute disponibile de la 100 la 900, reprezentând diverse „greutăți” ale fontului, de la minim la maxim; fontul normal va fi 400 (sau normal) bold și 700 (sau bold) bold. Valoarea implicită este 400 (normal). Valorile mai îndrăznețe și mai ușoare sunt relative și reprezintă următoarele grade mai mari și, respectiv, mai mici de „grăsime”.

COD (greutate font: bold)

Atributul font-style specifică stilul fontului:

stil de font: normal | cursiv | oblic | moștenire

Există trei opțiuni disponibile, reprezentând oblic decorativ normal, italic și special.

Atributul de stil text-decor specifică „decorul” (subliniat sau barat) care trebuie aplicat textului:

text-decor: niciunul | subliniat | supraliniu | line-through | clipi | moștenire

Există cinci valori disponibile aici (fără a lua în considerare moștenirea):

Niciunul nu elimină orice „decorare” dată fontului elementului părinte;

Sublinierea subliniază textul;

Overline „supralinează” textul, adică trasează o linie peste linii;

Text baraj cu linie;

Clipirea face ca fontul să pâlpâie (pornit acest moment nu este acceptat de Safari).

ATENŢIE!

Nu trebuie să setați în mod inutil o subliniere pentru text. Acest lucru se datorează faptului că browserele web afișează hyperlinkuri subliniate în mod implicit, iar textul subliniat care nu este un hyperlink poate fi descurajator.

Atributul de stil font-variant vă permite să specificați cum vor arăta literă mică font:

font-variant: normal | majuscule mici | moștenire

Valoarea cu majuscule mici specifică comportamentul fontului, astfel încât literele mici să arate exact la fel ca literele mari, ele doar au dimensiune mai mică... Valoarea normală setează fontul la litere mari normale.

Atributul de stil text-transform vă permite să schimbați majusculele caracterelor text:

text-transform: capitalizare | majuscule | minuscule | niciunul | moștenire

Putem converti textul în majuscule (valoarea majusculei acestui atribut) sau minuscule (minuscule), convertim prima literă a fiecărui cuvânt în majuscule (majusculă) sau îl putem lăsa așa cum este (nici unul).

Atributul de stil line-height stabilește înălțimea liniei de text:

înălțimea liniei: normal | <расстояние> | mostenesc

Aici puteți seta absolutul și magnitudine relativă distanțe prin specificarea unității corespunzătoare Dimensiuni CSS(vezi tabelul 8.1). Dacă este absentă, valoarea pe care o setăm este mai întâi înmulțită cu înălțimea fontului curent și apoi folosită. Astfel, pentru a dubla înălțimea liniei peste înălțimea normală a liniei, putem scrie:

P (înălțimea liniei: 2)

Valoarea normală a acestui atribut returnează controlul înălțimii liniei browserului web.

Atributul de stil de spațiere între litere vă permite să setați o spațiere suplimentară între caracterele textului:

spațiere între litere: normal | <расстояние>

Rețineți că aceasta este exact distanța suplimentară; va fi adăugat la cel original stabilit de browserul web însuși.

Aici puteți seta și distanța absolută și relativă specificând unitatea CSS corespunzătoare (vezi Tabelul 8.1). Distanța poate fi pozitivă sau negativă; v acest din urmă caz caracterele din font vor fi mai aproape unele de altele decât de obicei. Valoarea normală setează distanța suplimentară implicită la zero.

Atributul de stil de spațiere între litere nu acceptă valoarea de moștenire.

Iată un exemplu de setare a spațierii suplimentare dintre caractere la cinci pixeli:

H1 (spațiere între litere: 5 px)

Textul tastat cu astfel de caractere va părea rar.

Și aici setăm o distanță suplimentară negativă între caractere egală cu doi pixeli:

H6 (spațiere între litere: -2px)

Acești doi pixeli vor fi scăzuți de la distanța inițială, ceea ce va apropia caracterele și va face textul să pară comprimat. Poate că simbolurile se vor potrivi chiar unele peste altele.

Atribut similar stilul de spațiere între cuvinte stabilește o spațiere suplimentară între cuvintele individuale ale textului:

spațierea cuvintelor: normal | <расстояние>

H1 (spațiere între cuvinte: 5 mm)

Ei bine, 5 mm este probabil un pic prea mult... Deși acesta este doar un exemplu.

Și, în sfârșit, să ne uităm la atributul stil de font, care vă permite să setați mai mulți parametri de font simultan:

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

După cum puteți vedea, este necesar doar numele fontului - alți parametri pot lipsi.

Setați textul paragrafului la un font Times New Roman de 10 puncte:

P (font: 10pt „Times New Roman”)

Și pentru titlurile de nivelul șase - Arial de 12 puncte și cursive:

H6 (font: italic 12pt Verdana)

Adesea, atunci când predăm un proiect unui client, pierdem controlul asupra codului HTML. Uneori clientul folosește CMS (Content Management Systems), care îi oferă control total peste anumite părți ale codului HTML. Uneori, un client folosește doar șabloanele noastre pentru a-și scoate codul într-un document.
În cele mai multe cazuri, este destul de dificil să informezi clientul despre cum să folosească șabloanele sau CMS-urile pe care i le furnizați și, uneori, este pur și simplu inacceptabil să împinge discursuri aprinse despre aspectul semantic și standardele web. Clientul poate/va folosi „markup-ul vechi bun”, cel pe care îl cunoaște, pur și simplu pentru că funcționează și arată așa cum este obișnuit. Cel mai probabil va conține etichete și atribute nedorite (depreciate), cum ar fi bgcolor, aliniază si "etern" font... Acest articol este despre cum să blocați etichetele HTML nedorite folosind CSS, ghidând astfel ușor clientul în direcția corectă.

Există mai multe soluții la problemă. Una este să afișați o imagine de avertizare CSS atunci când sunt utilizate etichete nedorite. Există, de asemenea, explicații detaliate pentru această metodă. A doua soluție este să eliminați etichetele și atributele nedorite de pe partea serverului. Această metodă este cea mai eficientă, un alt lucru este că nu există întotdeauna control asupra serverului pe care se află site-ul.
Ideea este de a păstra cascada naturală și moștenirea stilului în toate browserele prin „dezactivarea” elegantă a HTML-ului pe care clientul nu dorește să-l folosească. Și apoi clientul va înceta să-l mai folosească, deoarece etichetele nedorite pur și simplu nu vor mai „funcționa”. O modalitate elegantă și fără stres care ghidează clientul pe calea cea bună.
Etichete și atribute HTML nedorite: