/ / Dekoratīvais CSS pasvītrojums

Dekoratīvais CSS pasvītrojums

Stila loksnes tehnoloģija veic divas funkcijasHTML lapu veidošanā. Pirmkārt, ar tās palīdzību tiek veidots vietnes atsevišķu elementu stāvoklis. Otrkārt, tas padara blokus vizuāli pievilcīgus lietotājam. Otrās funkcijas īstenošana notiek dažādos veidos. Viens no tiem ir uzsvērts. CSS nodrošina šo atribūtu teksts-apdare.

Atribūtu ieraksta specifikācija

Izmantojiet īpašumu teksts-apdare tikai. Stila faila koda elementam ir pietiekami rakstīt šādu rindiņu:

teksts-apdare: atribūts_vērtība;

Tā vietā "atribūts_vērtībaCSS specifikācija piedāvā vairākas iespējas:

  • pasvītrot - līnija ir stingri saskaņā ar tekstu;
  • virspusē - līnija sākas virs teksta;
  • neviens nav - visu dekoratīvo efektu novēršana;
  • mantot - pieņem vecāka elementa vērtību.

css pasvītro

Iepriekš minētie nav visi iespējamie ierakstīšanas veidi, jo šis atribūts definē ne tikai CSS pasvītrojumu, bet arī citus efektus, piemēram, mirgojošu tekstu vai pārvilkšanu.

Dizaina hipersaites

Web dizaina un programmēšanas iesācējirodas jautājums: kāpēc teksta apakšējā rinda? Interneta tehnoloģijas laikmeta laikā šī atlases metode lietotājam norādīja, ka viņa priekšā ir hipersaite - teksts, kas noklikšķinātu uz jaunas lapas.

Pēc noklusējuma hipersaites ir iestatītas uz pasvītrot... Praksē rodas uzdevums noņemt līniju no neaktīviem elementiem un padarīt to redzamu, kad lietotājs novieto peles rādītāju. Šeit ir daži koda paraugi, kas atspējo CSS saites pasvītrošanu:

a {teksta noformējums: nav;}

Aktīvajām saitēm tiek izmantots šāds ieraksts:

a: virziet kursoru {text-decoration: underline;}

Dekoratīvs pasvītrojums uzlabotas

Standarta atribūts teksts-apdare ir vairāki ierobežojumi:

  • līnijas krāsa neatšķiras no saites teksta krāsas, jūs nevarat atšķirt to "krāsojumu";
  • tikai pasvītrojums tiek izmantots kā pasvītrojums. CSS nenozīmē citu teksta stilu.

pasvītrot css saites

Bet īpaši triki palīdz apiet klasisko teksta dizainu. Pirmajā gadījumā papildu tags <laidums>.

Piemēram:

<a href="#" style="text-decoration: underline; color: red">

<span style = "color: blue"> hipersaites</span>

</a>. </p>

Rezultātā hipersaites vārds lapā tiks ierakstīts zilā krāsā, un līnijas krāsa būs sarkana.

Vēl viens uzlabots veids, kas ļauj ieviest CSS pasvītrojumu, - apmale-dibens... Tālāk sniegtajā piemērā izskaidrota tā izmantošana:

a {apmale-dibens: 1 pikseļa vienkrāsains;}

Rezultāts būs tāds pats kā iepriekšējā piemērā. Bet šai metodei ir svarīga priekšrocība. Papildus līnijas krāsas maiņai (tagad iestatīta uz sarkanu - sarkans), ir iespējams pārveidot zīmēšanas veidu:

  • punktots - veido punktētu pasvītrojumu;
  • svītrots - līnija sastāv no insultiem;
  • dubultā - velk dubultu līniju.

Tātad atribūts robežaapakšā funkcionālāka. Papildus dekoratīvās līnijas parādīšanai zem teksta tas ļauj pielāgot tā izskatu.