/ / Dekoratīvie pasvītrojumi CSS elementiem

Dekoratīvie pasvītrojumi CSS elementiem

Stila loksnes tehnoloģija nodrošina divas funkcijasreģistrējot HTML lapas. Pirmkārt, ar tās palīdzību tiek izveidota atsevišķu vietnes elementu atrašanās vieta. Otrkārt, tas padara blokus vizuāli pievilcīgu lietotājam. Otro funkciju īsteno dažādos veidos. Viens no tiem ir uzsvērts. CSS nodrošina šo atribūtu tekstadekorēšana.

Atribūtu ieraksta specifikācija

Izmantojiet īpašuma priekšrocības tekstadekorēšana vienkārši. Pietiks, ka stila faila kodā elementam rakstīt šādu rindu:

tekstaapdare: attribute_value;

Tā vietā, lai "attribute_value"CSS specifikācijai ir vairākas iespējas:

  • uzsvērt - līnija atrodas stingri zem teksta;
  • pārmērīgs - līnija iet caur teksta augšdaļu;
  • nav - visu dekoratīvo efektu noņemšana;
  • mantot - pieņem vecāku elementa vērtību.

pasvītrojums css

Iepriekš nav visi iespējamie ieraksta veidi, jo šis atribūts norāda ne tikai CSS uzsvaru, bet arī citus efektus, piemēram, "mirgo" tekstu vai tā interlacing.

Hipersaite dizaina piemēri

Iesācējiem Web dizaina un programmēšanas jomārodas jautājums: kāpēc izdarīt teksta apakšējo līniju? Pēc dawn laikmetā interneta tehnoloģijas šī metode lietotāja uz to, ka viņa priekšā ir hipersaite piešķiršanu - tekstu, noklikšķinot uz kuras veiks pāreju uz jauno lapu.

Pēc noklusējuma hipersaites ir iestatīts īpašums uzsvērt. Praksē rodas problēma, lai noņemtu līniju no neaktīviem elementiem un padarītu to redzamu, kad lietotājs novieto peles kursoru. Šeit ir piemērs kods, kas atspējo CSS pasvītrojumu:

{teksta apdare: nav;}

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

a: hover {text-decoration: underline;}

Dekoratīvs pasvītrojums progresīvai

Standarta atribūts tekstadekorēšana ir vairāki ierobežojumi:

  • Līnijas krāsa neatšķiras no saites teksta krāsas, to "krāsošana" nav iespējams atšķirt;
  • Kā pasvītrojums tiek izmantota tikai cieta līnija. CSS nenozīmē citu rakstzīmju stila izmantošanu.

pasvītrojot css saites

Bet īpašas metodes palīdz apiet klasisko teksta dizainu. Pirmajā gadījumā papildu <span>.

Piemēram:

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

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

</a>. </p>

Tā rezultātā lapā vārds hipersaite tiks rakstīts zilā krāsā, un līnijas krāsa būs sarkana.

Vēl viena uzlabota metode, kas ļauj ieviest CSS uzsvaru, - robeža-apakšā. Tālāk sniegtajā piemērā ir paskaidrots, kā to izmantot:

{border-bottom: 1px sarkans;}

Rezultāts būs tāds pats kā iepriekš minētajā piemērā. Bet šai metodei ir svarīga priekšrocība. Papildus līnijas krāsai (tagad ir iestatīta sarkana - sarkans), ir iespējams pārveidot veidu, kā tas tiek izdarīts:

  • punktēts - Vai punkts uzsver;
  • bojāts - līnija sastāv no insultiem;
  • dubultā Zīmē divas rindas.

Tātad, atribūts robežuapakšā vairāk funkcionāls. Papildus dekoratīvās līnijas parādīšanai zem teksta tas ļauj jums pielāgot tā izskatu.

Lasīt vairāk: