Elemente CSS subliniere decorative

Tehnologia foilor de stil are două funcții atunci când creează pagini HTML. În primul rând, cu ajutorul său, se formează poziția elementelor individuale ale sitului. În al doilea rând, face blocurile vizibil atractive pentru utilizator. A doua funcție este implementată în moduri diferite. Unul dintre ele este subliniat. CSS oferă acest atribut text-

Specificarea înregistrării atributului

Profitați de proprietate text-decorare simplu. Este suficient să scrieți următorul rând pentru elementul din codul fișierului de stil:

text-decorare: attribute_value-

În loc de "znachenie_atributa"Specificația CSS oferă o serie de opțiuni:

• sublinia - linia este situată strict sub text;
• overline - linia trece din partea de sus a textului;
• nici unul - îndepărtarea tuturor efectelor decorative;
• moșteni - adoptă valoarea elementului părinte.

Cele de mai sus nu sunt toate formele posibile ale înregistrării, deoarece acest atribut specifică nu numai sublinierea CSS, ci și alte efecte, de exemplu, "clipind" textul sau intercalarea acestuia.

Exemple de design hyperlink

Începătorii în proiectarea și programarea web au întrebarea: de ce face linia de jos a textului? La începutul erei tehnologiei Internet, acest mod de evidențiere a indicat utilizatorului că există un hyperlink în fața acestuia - un text care va fi făcut clic pe o pagină nouă.

Implicit, hyperlink-urile au un set de proprietăți sublinia. În practică, apare problema de a elimina linia din elementele inactive și de ao face vizibilă atunci când utilizatorul se află pe pointerul mouse-ului. Iată un exemplu de cod care dezactivează linkurile CSS subliniază:

a {text-decoration: none;}

Următoarea intrare este utilizată pentru link-urile active:

a: hover {text-decorare: subliniați-}

Poziție decorativă pentru avansată

Atributul standard text-decorare are mai multe limitări:

• Culoarea liniei nu diferă de culoarea textului legăturii, este imposibil să se facă distincția între "colorarea" acestora;
• Doar o linie solidă este folosită ca un subliniere. CSS nu implică utilizarea altor stiluri de inscripționare.

Dar tehnicile speciale ajută la ocolirea designului clasic al textului. În primul caz, o etichetă suplimentară este utilizată pentru a specifica hyperlink-ul <deschidere.

De exemplu:

hyperlink-uri

a>.p>

Prin urmare, în pagină cuvântul hiperlink va fi scris în albastru, iar culoarea liniei va fi roșie.

Un alt mod avansat care vă permite să implementați sublinierea CSS este border-bottom. Exemplul de mai jos explică utilizarea sa:

o {border-bottom: 1px roșu solid-}

Rezultatul va fi același ca în exemplul de mai sus. Dar această metodă are un avantaj important. În plus față de schimbarea culorii liniei (acum setată la culoarea roșie - roșu), este posibilă transformarea modului în care este trasată:

• punctat - Subliniază un punct;
• punctată - linia constă în lovituri;
• dublu Desenează o linie dublă.

Deci, atributul granițăfund mai funcțional. În afară de afișarea unei linii decorative sub text, vă permite să personalizați aspectul acesteia.