Meniul
AcasăConexiune

Inscripţie. Text aldine folosind HTML și CSS

Există trei moduri de a evidenția textul cu caractere aldine pe o pagină HTML, dar nu vă grăbiți să utilizați imediat pe oricare vă place, deoarece o astfel de evidențiere poate avea semnificații diferite și poate afecta optimizarea site-ului pentru motorul de căutare.

Font aldine cu etichetă puternică

Această metodă este potrivită dacă doriți să evidențiați o parte importantă a textului cu caractere aldine. Eticheta HTML este o etichetă de formatare logică și esența sa este de a „sublinia” importanța fragmentului selectat.

Există și alte etichete de formatare logică în HTML. De exemplu, o etichetă face textul italic și indică accentul pe fraza evidențiată.

Alte tipuri de selecție de text sunt descrise în articol:.

Text simplu, evidențiat o parte importantă de text. Text simplu.

Text îngroșat folosind eticheta b

Text text obișnuit cu font aldine. Text simplu.

Stiluri CSS aldine

Textul aldine poate fi creat nu numai folosind etichete HTML speciale. Puteți obține o ieșire îngroșată pentru orice etichetă setând proprietatea font-weight: bold;. (nu funcționează pentru toate fonturile).

O astfel de evidențiere va fi de natură stilistică, fără a adăuga greutate logică textului selectat.

În plus, puteți selecta fie o etichetă specifică, fie un grup de elemente simultan, setând stiluri printr-o clasă CSS.

Proprietatea CSS din atributul style:

Text cu caractere aldine.

.bold_text ( grosimea fontului: bold; )

Text cu caractere aldine.

Text în font normal.

Text cu caractere aldine.

Ce să faci dacă nu poți face textul aldine?

Dacă nu puteți face textul aldine, este probabil ca stilurile CSS ale elementelor să fie înlocuite pe site-ul dvs. În acest caz, va trebui să ajustați aceste stiluri. În cele mai multe cazuri, acest lucru se va face prin fișierul principal al foii de stil CSS. Dacă nu înțelegeți acest lucru, contactați webmasterul. Cel mai probabil, rezolvarea acestei probleme nu va necesita mai mult de 5 minute de lucru (deși, desigur, pot exista și excepții).

27.11.14 88.7K

În html, dimensiunea fontului joacă un rol important. Vă permite să atrageți atenția utilizatorului asupra informațiilor importante postate pe pagina site-ului. Deși nu numai dimensiunea literelor este importantă, ci și culoarea, grosimea și chiar familia lor.

Etichete și atribute atunci când lucrați cu fonturi html

Limbajul hipertext are o gamă largă de instrumente pentru lucrul cu fonturile. La urma urmei, formatarea textului este sarcina principală a html.

Motivul creării limbajului HTML a fost problema afișării regulilor de formatare a textului în browsere.


Să ne uităm la etichetele care sunt folosite pentru a lucra cu fonturile în HTML și la atributele acestora. Principala este eticheta. Folosind valorile atributelor sale, puteți seta mai multe caracteristici ale fontului:
  • culoare – setează culoarea textului;
  • dimensiune – dimensiunea fontului în unități convenționale.

Sunt acceptate valorile atributelor pozitive de la 1 la 7.

  • față – folosit pentru a seta familia de fonturi de text care va fi folosită în interiorul . Sunt acceptate mai multe valori, separate prin virgule.

Doar textul care se află între părțile etichetei de font pereche este formatat. Restul textului este afișat în fontul standard standard.


De asemenea, în html există o serie de etichete pereche care specifică o singură regulă de formatare. Acestea includ:
  • — setează fontul aldine în html. Eticheta de acțiune este similară cu cea anterioară;
  • — dimensiunea este mai mare decât cea implicită;
  • — dimensiune mai mică a fontului;
  • — text italic (italic). Etichetă similară ;
  • — text cu subliniere;
  • - tăiat;
  • — afișarea textului numai cu litere mici;
  • - cu litere mari.

Text simplu

Miniatură

Miniatură

Mai mult decât de obicei

Mai puțin decât de obicei

Cursive

Cursive

Cu subliniere

Barat

Capacitățile atributelor de stil

Pe lângă etichetele descrise, există mai multe moduri de a schimba fontul în html. Una dintre ele este utilizarea atributului stil generic. Folosind valorile proprietăților sale, puteți seta stilul de afișare al fonturilor:

1) font-family – proprietatea stabilește familia de fonturi. Este posibil să enumerați mai multe valori.
Schimbarea fontului în html la următoarea valoare se va întâmpla dacă familia anterioară nu este instalată pe sistemul de operare al utilizatorului.

Sintaxa de scriere:

familia-font: font-name [, font-name[, ...]]

2) dimensiunea fontului – dimensiunea este setată de la 1 la 7. Acesta este unul dintre modalitățile principale prin care puteți crește fontul în HTML.
Sintaxa de scriere:

font-size: dimensiune absolută | dimensiune relativă | sens | interes | moşteni

De asemenea, puteți seta dimensiunea fontului:

  • În pixeli;
  • În valoare absolută (xx-mic, x-mic, mic, mediu, mare);
  • În procente;
  • În puncte (pt).

Dimensiunea fontului: 7

Dimensiunea fontului: 24px

Dimensiunea fontului: x-mare

Dimensiunea fontului: 200%

Dimensiunea fontului: 24 pt


3) font-style – setează stilul de scriere a fontului. Sintaxă:

stil font: normal | cursiv | oblic | moşteni

Valori:

  • normal – ortografie normală;
  • italic – italic;
  • oblic – font înclinat spre dreapta;
  • inherit – moștenește ortografia elementului părinte.

Un exemplu despre cum să schimbați fontul în html folosind această proprietate:

font-style:moștenire

stil font: cursiv

stil font: normal

stil font: oblic


4) font-variant – convertește toate majusculele în majuscule. Sintaxă:

font-variant: normal | cu majuscule mici | moşteni

Un exemplu despre cum să schimbați fontul în html cu această proprietate:

font-variant:moștenire

font-variant:normal

font-variant:small-caps


5) font-weight – vă permite să setați grosimea textului (saturație). Sintaxă:

greutate font: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Valori:

  • bold – setează fontul html la bold;
  • bolder – mai îndrăzneț față de normal;
  • mai ușoară – mai puțin saturată față de normal;
  • normal – ortografie normală;
  • 100-900 – setează grosimea fontului în echivalent numeric.

greutate font: bold

greutatea fontului: mai îndrăzneață

greutate font: mai ușor

greutate font: normal

greutate font: 900

greutate font: 100

Proprietatea fontului HTML și culoarea fontului

Fontul este o altă proprietate a containerului. În interiorul său, a combinat valorile mai multor proprietăți destinate schimbării fonturilor. sintaxa fontului:

font: font-size font-family | moşteni

Valoarea poate fi setată și la fonturile utilizate de sistem în etichetele de pe diferite controale:

  • legenda – pentru butoane;
  • pictogramă – pentru icoane;
  • meniu - meniu;
  • mesaj-box – pentru casete de dialog;
  • small-caption – pentru controale mici;
  • status-bar – font bara de stare.

font:pictogramă

font:legendă

font:meniu

font: caseta de mesaje

subtitrare

font:bara de stare

font: italic 50px bold „Times New Roman”, Times, serif

Salutări, prieteni.

După o altă pauză lungă, mi-am amintit că nu am mai scris o singură linie de mult timp. Desigur, există motive pentru asta, pentru că întotdeauna va exista un motiv pentru a veni cu o scuză, nu? De fapt, fac în fiecare zi Cursul video, despre care am menționat deja de câteva ori, dar deocamdată nu voi spune mai multe despre el, vei afla totul în curând.

Deci, din moment ce nu mi-a venit nimic în minte despre care să scriu. Am decis să mă uit la statistici pentru a vedea ce interesează utilizatorii RuNet în ceea ce privește HTML, WordPress, DLE și subiecte similare. Si ghici ce? Mai este ceva de scris. Toate întrebările pe care le-am găsit par să aibă răspunsuri, dar nu întotdeauna într-o formă de înțeles. Și în general a devenit interesant să scriu așa ceva.

Astăzi vom vorbi despre HTML. Și anume, vom vorbi despre cum să evidențiezi textul în aldine și cursive și vom vorbi și despre evidențierea cu culoare.

Faceți textul aldine.

Pentru a face textul îndrăzneț, nu trebuie să faceți nimic elegant cu stilurile CSS sau să veniți cu alte complicații. HTML are deja această caracteristică. În același timp, nu putem doar să evidențiem textul cu caractere aldine, ci și să punem accent pe el folosind evidențierea. Accentul poate fi pus pe motoarele de căutare sau pe orice browser sau programe speciale. Principalul lucru este să nu exagerați cu accent pe text dintr-un articol sau pe o pagină cu anumite informații, deoarece acest lucru poate avea un efect dăunător, cel puțin asupra promovării acestei pagini HTML.

Deci, pentru a face textul aldine, putem folosi eticheta. Această etichetă se referă la elemente de marcare fizică, în timp ce setează textul la aldine fără a pune niciun accent pe acesta. Această etichetă este o etichetă asociată, ceea ce înseamnă că are atât o etichetă de deschidere, cât și una de închidere. În plus, deoarece elementul este inline, trebuie să fie într-un element de bloc, de exemplu

Cod simplu:

miniatură

Rezultat:

miniatură

În acest caz, pur și simplu am evidențiat textul cu caractere aldine și gata.

Dar se întâmplă, așa că nu trebuie doar să evidențiem textul, ci să ne concentrăm asupra lui. Pentru aceasta putem folosi eticheta de markup logic. Nu numai că textul evidențiat cu această etichetă are mai multă greutate pentru motoarele de căutare. Dar, în teorie, ar trebui să difere de eticheta din browserele de vorbire, de exemplu, în intonație. Cu toate acestea, nu pot nici să confirm, nici să infirm această informație, este adevărat?

În acest caz, totul este exact la fel ca în cazul cu o simplă evidențiere cu caractere aldine, doar că facem un accent, și nu doar evidențierea.

Cod simplu:

Rezultat:

Totul este destul de simplu, nu-i așa?

Textul cu caractere italice.

În acest caz, totul nu este mai complicat decât în ​​primul. Și situația noastră este absolut aceeași. Putem evidenția text cu două opțiuni în HTML. Din nou, folosind fie o etichetă de marcare fizică, fie o etichetă logică, cu care ne concentrăm din nou pe textul selectat.

Pentru a face textul italic, vom folosi eticheta . Acest element este asociat și inline, ceea ce ne spune că ar trebui să folosim atât o etichetă de deschidere, cât și una de închidere. Ar trebui să-l folosească și în interiorul unui element bloc. Și în acest caz, cel mai potrivit element de bloc este eticheta de paragraf

Cod simplu:

text cu caractere cursive

Rezultat:

text cu caractere cursive

Și, bineînțeles, putem sublinia textul în același timp evidențiind-o cu caractere cursive folosind eticheta. Acest element este același cu , cu excepția faptului că textul este scris cu italice în loc de aldine.

Cod simplu:

textul pe care ne-am concentrat

Rezultat:

textul pe care ne-am concentrat

Și ultimul lucru despre care aș vrea să-l vorbesc astăzi este evidențierea textului cu culoare.

Din păcate, nu avem o etichetă pentru evidențierea textului cu culoare în HTML. Dar totuși, nu este nimic complicat în această metodă.

Deci, pentru a evidenția o anumită parte a textului cu culoare, putem împacheta partea dorită a textului cu o etichetă, care este o etichetă universală și este utilizată în interiorul unui element bloc. În cazul nostru, elementul bloc este eticheta

Dar adăugarea nu este suficientă. De asemenea, trebuie să specificați parametrul de stil, care vă va permite să adăugați proprietăți CSS textului necesar și să specificați proprietatea în sine (culoarea), care vă va ajuta să setați o anumită culoare. În cele din urmă, furnizați o valoare pentru proprietatea de culoare. Dar poate apărea întrebarea: „Ce ar trebui să spun?” Trebuie să specificați codul HTML al culorii în care dorim să „pictăm” textul. Codurile de culoare HTML pot fi găsite.

Acum, pentru a fi mai clar, să ne uităm la un exemplu.

Exemplu de cod.

textul de evidențiat

În acest caz, evidențiem un cuvânt: cu culoare. De asemenea, vreau să remarc că eticheta este asociată și trebuie să o închidem acolo unde ar trebui să se termine proprietatea.

Rezultat:

textul de evidențiat

În aceste moduri simple putem manipula textul de pe pagina noastră. De asemenea, aș dori să remarc că tot ceea ce tocmai am vorbit funcționează atât pe WordPress, cât și pe DLE, deoarece orice motor folosește HTML pentru a afișa pagini. De aceea HTML poate fi numit baza oricărui site web, indiferent de ce CMS aveți.

Sper că am explicat totul clar.

Mult succes, prieteni. În curând... Vor fi vești interesante...

Bună ziua, dragi cititori ai blogului! Acest articol se va concentra pe etichetele de formatare a textului. Exemplele principale includ crearea textului cu caractere aldine sau cursive. De asemenea, ne vom uita la impactul unor etichete asupra optimizării interne a site-ului web și a regulilor de scriere a acestora. Puteți citi despre asta în articolul dat. Apropo, puteți găsi elemente de design text similare în multe editoare de text, de exemplu în Word.

Etichetele sunt împărțite în 2 tipuri: bloc și inline. Când utilizați primul, puteți modifica conținutul unei părți din text (linii, fragmente individuale sau cuvinte), iar cele din urmă sunt . Etichetele de formatare pe care le vom analiza în acest articol sunt în principal litere mici.

Reguli și ordinea scrierii etichetelor Știți deja ce sunt etichetele de deschidere și de închidere. Dacă nu, atunci citiți articolul dat chiar la începutul acestui material. Pe scurt, există două tipuri de etichete: single (de exemplu, newline
) și container (în perechi). Deci, toate etichetele de formatare a textului sunt asociate. Aceasta înseamnă că orice element are o etichetă de deschidere și de închidere, iar evidențierea trebuie plasată între ele. De exemplu, selectarea corectă a unei fraze va arăta astfel: Fragment selectat

Când browserul procesează acest fragment, veți vedea următorul text: Fragment selectat. Apropo, toate etichetele nu sunt afișate în fluxul RSS ().

Principalul lucru atunci când scrieți etichete este să vă amintiți să le închideți. În caz contrar, tot textul de pe pagină va fi evidențiat cu caractere aldine (în exemplul cu eticheta). Dar există cazuri când trebuie să evidențiați un anumit fragment atât în ​​aldine, cât și în cursive în același timp. Dar nu există nicio etichetă care să efectueze această acțiune. Există o singură cale de ieșire din această situație: folosiți două etichete în același timp. Nu contează în ce ordine le folosiți. Prin urmare, scrieți text cu etichete ca aceasta:

Fragment selectat

sau cam asa:

Fragment selectat

Veți primi în continuare Fragment selectat cursiv și îndrăzneț în același timp. Cu toate acestea, este de preferat să folosiți prima variantă, deoarece inițial a fost singura și corectă. De asemenea, nu uitați că fiecare browser poate procesa etichetele în mod diferit (), în funcție de setări. Acum să trecem la etichetele de formatare în sine.

Text îngroșat și italic - etichete , și Cele mai populare etichete de formatare a textului îl fac îndrăzneț și cursive. Ele sunt de obicei folosite pentru a da importanță unui fragment. Primul caz servește la evidențierea unui fragment care conține informații utile sau cuvinte cheie. Cursivele servesc aceluiași scop ca și textul aldin, dar informațiile sunt mai puțin importante, deoarece caracterele cursive sunt mai puțin vizibile pe fundalul textului corpului decât textul aldin.

Să ne gândim mai întâi să facem textul aldine. Această acțiune folosește două etichete - și . Nu există nicio diferență de aspect. Deși, având în vedere că fiecare browser poate interpreta diferit fiecare element, este posibil să observați diferențe. Iată cum arată textul în etichete și în formularul deja procesat de browser:

Text în etichete puternic

Text în etichete b

Și iată cum arată aceste două rânduri în codul sursă al paginii:

Text în etichete puternice Text în etichete b

Aceeași situație o putem observa și în cazul etichetelor italice și . Încercați să găsiți diferențele dintre cele două exemple:

Text în etichetele em

Text în etichetele I

Și aici este codul sursă:

Text în etichetele em Text în etichetele I

Deci, etichetele considerate aldine și italice nu sunt de fapt diferite, dar atunci de ce avem nevoie, de exemplu, de o etichetă dacă există una? La urma urmei, acesta din urmă conține un singur caracter (fără a număra paranteze) și, prin urmare, este mai ușor de scris. Și ideea este că etichetele afectează. Dacă înconjurați cuvintele cheie cu aceste etichete, acest lucru va avea un efect benefic asupra promovării site-ului web. Principalul lucru este să nu exagerați - textul trebuie să conțină maximum 5% text aldine în etichetă și aceeași cantitate de italice în etichetă. etichetă.

Dacă doriți doar să evidențiați un punct din text, atunci utilizați o etichetă sau . În general, cred că și motoarele de căutare consideră textul din aceste etichete ca fiind mai important, dar au totuși o influență mai mică asupra optimizării interne decât .

Etichete pentru evidențierea textului cu o linie - și Acum să ne uităm la câteva etichete care folosesc o liniuță în formatarea textului. Cel mai faimos editor de text pe care îl cunoști este eticheta sau subliniere. Această etichetă nu are impact asupra clasamentului (din câte știu eu), dar evidențierea unui text și concentrarea atenției asupra acestuia va ajuta. Am dat un exemplu de utilizare a acestei etichete chiar mai sus.

Încă două etichete cu scopuri similare sunt și . Ambele îndeplinesc funcția de a șterge textul. Puteți utiliza această etichetă în orice situație: dacă actualizați un document (sau mai bine zis, o parte a acestuia), îl puteți tăia pe cel vechi și adăugați unul nou; dacă aveți de gând să scrieți ceva care se abate de la subiectul materialului; ceva care nu corespunde standardelor morale și etice.

Diferențele dintre aceste două etichete sunt doar în scrierea lor, drept urmare este de preferat să se utilizeze prima, deoarece în primul rând, este mai convenabil să scrii și, în al doilea rând, pagina ta va conține mai puțin cod HTML, iar motoarele de căutare le place acest lucru.

Etichetă și atribute - Opțiuni de font text

Acum luați în considerare o etichetă care nu este folosită fără atribute. Folosind-o, puteți seta parametrii pentru o anumită bucată de text. În general, acum este de preferat să se utilizeze (foile de stil în cascadă), deoarece... folosindu-le puteți reduce foarte mult întregul cod HTML al paginii. Deci, să ne uităm la aceeași etichetă. Există doar trei atribute pentru el:

  • chipul este fontul în sine. De exemplu, Arial, Courier sau Verdana. Puteți enumera mai multe, pentru că nu toți utilizatorii au un set extins de fonturi, iar prin scrierea mai multor în atributul face, browserul va putea alege pe care să îl folosească sau, mai degrabă, care este prezent în sistem;
  • dimensiunea este un atribut care indică dimensiunea textului. Poate fi exprimat atât în ​​unități convenționale, cât și în pixeli;
  • culoare — culoarea textului. Acest atribut poate fi folosit atât în ​​codurile de culoare HTML, cât și în cele word. Primele au forma #FFFFFF (unde F este orice număr sau literă de la A la F), iar cele doua sunt scrise cu cuvinte simple (de exemplu, roșu).

Iată cum arată textul din etichetă folosind fiecare atribut:

Acest text este 6px Acest text este roșu Acest text este Arial Acest text este roșu și 5px

Și iată ce veți vedea după procesarea codului scris:

Elemente de proiectare a textului bloc - titluri -, paragraf

În cele din urmă, ne vom uita la elementele bloc, care sunt utilizate în aproape fiecare document. Acestea sunt etichete de titlu și paragraf. Să luăm în considerare primul. Există 6 tipuri de titluri și fiecare are propria etichetă. Fiecare tip are doar propriul său număr de serie și este înregistrat folosind etichete , ,..., . Iată cum arată toate anteturile atunci când sunt procesate:

Numărul de după titlul cuvântului corespunde numărului din etichetă. Titlurile au un impact enorm asupra optimizării paginii, așa că includeți cuvinte cheie în etichete. Există destul de multe caracteristici ale acestui caz, despre care voi vorbi în articolele următoare.

Acum să vorbim despre eticheta de evidențiere a paragrafului

Funcția acestei etichete este de a separa textul dintre un alt text identic și o linie goală. Dacă te uiți la codul sursă al unui document, poți vedea următoarele:

Dreptunghiurile verzi conțin un paragraf, dreptunghiurile roșii conțin altul. Și iată cum arată acest cod după procesarea de către browser (săgeata indică o linie goală):

Drept urmare, obținem o separare destul de vizibilă a unui paragraf de altul, ceea ce este benefic - citirea devine mai convenabilă.

Acesta a ajuns la sfârșitul articolului despre etichetele de formatare a documentelor. Sunt mult mai multe decât am descris în acest material. Doar că trebuie spus multe despre unele dintre ele, drept urmare articole separate cu o recenzie completă le vor fi dedicate!

Cu toții suntem obișnuiți să evidențiem o parte din text sau cuvinte individuale de pe un site web cu caractere aldine, subliniate sau cursive. Cu toate acestea, dacă abuzați de aceste lucruri, motoarele de căutare vă pot filtra pagina sau site-ul web.

Astăzi voi oferi o soluție pentru cei care doresc să scoată în continuare cuvinte și text, dar să nu se teamă de sancțiunile din motoarele de căutare. Eu personal folosesc această metodă pe mai multe site-uri.

Etichetele HTML standard sunt responsabile pentru formatarea textului:

Atenţie! Am lansat o nouă temă Romb pentru scriitorii de articole și blogurile dvs. Cea mai rapidă Google PageSpeed ​​și optimizare maximă pentru SEO.

Vă sugerez să folosiți CSS pentru a evidenția textul, care va fi perceput destul de adecvat de motoarele de căutare.

Pasul 1. Scrieți parametrii CSS

Deschideți fișierul de stil (style.css, css.css, screen.css etc.) și adăugați asta la sfârșit:

Puternic (font-weight:bold;).italic (font-style:italic;).subline(text-decor:subline;)

Puternic (greutatea fontului: bold;)

Cursiv (stil font: cursiv; )

Subliniere ( text-decor : subliniere ; )

Aici am dat claselor corespunzătoare aspectul nostru. Acum puteți, în modul HTML, să luați segmentul dorit de text, sau cuvânt, într-o etichetă span cu parametrii doriti, drept urmare textul va lua forma dorită: bold, italic sau subliniat. Vedea:

Cu toate acestea, este nevoie de timp pentru a scrie manual o nouă etichetă span cu clasa de fiecare dată. Prin urmare, propun opțiunea de automatizare a acestui lucru.

Pasul 2. Adăugați butoanele dvs. la panoul de formatare a textului

Acum vom adăuga butoane noi la panoul de formatare a textului din zona de administrare a site-ului dvs. WordPress. Va arata asa:

După cum puteți vedea din imagine, am adăugat 3 butoane noi în modul HTML. Pe ele am „atârnat” spatele create cu clasele necesare (puternic, cursiv și subliniat).

Deschideți fișierul functions.php și la final, înainte de închidere ?> , adăugați următorul cod (împrumutat, dar modificat de mine):

/*propriile dvs. butoane de formatare a textului*/ add_action("admin_footer", "ex_quicktags"); funcția eg_quicktags() ( ?> jQuery(document).ready(function())( if(typeof(QTags) !== "nedefinit") ( QTags.addButton("zhirny", "Bold", "", "" ); QTags.addButton("italic", "Italic", "", ""); QTags.addButton ("subliniat", "Subliniat", "", ""); ) ));