Saišu formatēšana. Daži padomi par to, kā noņemt saites pasvītrojumu no HTML, izmantojot CSS. Pasvītrojiet vārdu HTML.

Uzdevums

Risinājums

Punktu pasvītrojums uz saitēm pēdējā laikā ir kļuvis par saišu noformējuma standartu, noklikšķinot uz kuras saite netiek atvērta, bet tiek veikta kāda darbība pašreizējā dokumentā. Aktīva AJAX tehnoloģijas izmantošana, kad lapa tiek atjaunināta, to nepārlādējot, ir novedusi pie jauna veida saitēm, kas atšķiras no parastajām saitēm punktētā līnija.

Lai izveidotu līniju, izmantojiet rekvizītu apmale-apakšā ar domupunktu un pievienojiet to atlasītājam A. Lai nodrošinātu, ka pasvītrojums netiek lietots visām saitēm, jānorāda unikāla klase, sauksim to, piemēram, punkts . Tāpat ir jānoņem sākotnējais pasvītrojums no saitēm, izmantojot teksta noformējuma rekvizītu ar vērtību nav (1. piemērs).

1. piemērs: punktēta pasvītra

HTML5 CSS 2.1 IE Cr Op Sa Fx

Piemēra rezultāts ir parādīts attēlā. 1.

Saišu līnijas biezums un pasvītrojuma krāsa tiek iestatīta arī, izmantojot rekvizītu apmale-apakšā.

Šajā lapā jūs atradīsiet piemērus, kā mainīt HTML saites, kad CSS palīdzība, kas ļauj likt tām bloķēt saites, ikonu saites, bez pasvītrošanas, ar noapaļotiem stūriem, mainīt attālumu starp tām un daudz ko citu. Nākotnē, pamatojoties uz šiem piemēriem, varat izveidot dažādas iespējas vietnes navigācijas izvēlnes.

Pirms sākat pētīt piemērus, es vēlos veikt nelielu precizējumu. Visos piemēros lielākas skaidrības labad tiks izmantota CSS pseidoklase, kas tiek izmantota, lai mainītu saišu stilus, kad peles kursors atrodas virs tām. Jāteic, ka šāda prakse ir izplatīta un tādā vai citādā mērā tiek izmantota gandrīz visās interneta vietnēs.

Šajā piemērā mēs noņemsim saitēm pasvītrojumus un pēc tam pievienosim vai noņemsim tās, novietojot peles kursoru.

HTML un CSS piemērs: kā no saitēm noņemt un pievienot pasvītrojumus

Piemēra apraksts

1. Pēc noklusējuma visas populārās pārlūkprogrammas saitēm pievieno pasvītrojumu, kas ir regulējams CSS īpašums. Tas nozīmē, ka pēc noklusējuma šim īpašumam saitēm ir pasvītrota vērtība . Izmantojot šīs zināšanas, mēs mainām saišu pasvītrojumus to dažādajos stāvokļos.

Sākotnēji saišu pasvītrojums ir cieta plāna līnija, kas ir piespiesta gandrīz cieši pie teksta. Un vairumā gadījumu šī iespēja ir diezgan pietiekama. Tomēr dažreiz dizains prasa, lai saites būtu pasvītrotas ar punktētu līniju, nevis ar nepārtrauktu līniju, vai arī lai attālums no pasvītrojuma līdz saitēm būtu lielāks par standarta, vai lai pats pasvītrojums būtu treknāks. Un dažreiz jums ir jāizveido kāds eksotisks pasvītrojums, piemēram, ar viļņotu vai daudzkrāsainu līniju. Visas šīs iespējas tiks apspriestas šajā piemērā.

HTML un CSS piemērs: punktētas saites pasvītrojums

Piemēra apraksts

1. Pirmkārt, mēs noņemam standarta pasvītrojumu no visām saitēm, jo ​​mēs izmantosim nestandarta metodes. Pēc tam, izmantojot CSS rekvizītu, pirmajai saitei pievienojam apakšējo apmali un izveidojam to svītru. Tas būs mūsu pasvītrojums. Lai noņemtu pasvītrojumu, kad virzāt kursoru virs saites, mēs izmantojam pseidoklasi un izveidojam rāmja fonu tādu pašu kā lapas fonu, tas ir, mēs to vienkārši paslēpjam. Teorētiski labāk būtu padarīt rāmja fonu caurspīdīgu, bet IE6 šo nozīmi pārprot.
2. Ar otro saiti mēs darām to pašu, ko ar pirmo, bet mēs vienkārši novelkam nepārtrauktu līniju. Lai palielinātu attālumu no teksta līdz pasvītrojumam, saitei piešķiram nelielu apakšējo piemali, izmantojot CSS rekvizītu.
3. Mūsu trešajai saitei ir daudzkrāsains pasvītrojums, tāpēc mēs to pievienosim, izmantojot fona attēls. Šim nolūkam mēs izmantojam nelielu attēlu, kuru savienojam, izmantojot CSS. Novietojiet fonu saites apakšā (0 100%) un ļaujiet to dublēt tikai horizontāli (atkārtot-x). Pasvītrojums ir gatavs, taču tas ir pārāk tuvu tekstam; lai to labotu, tālāk esošajai saitei pievienojam nelielu atkāpi. Tieši tā.
4. Vecajās IE6 un IE7 versijās var rasties problēmas ar pasvītrojuma rādīšanu pirmajā un otrajā saitē. Lai to labotu, pievienojiet tālummaiņas :1 rekvizītu, kas ietver t.s izkārtojumu. Šis īpašums nav derīgs, un tikai šīs pārlūkprogrammas to saprot, tāpēc labāk to iespējot nosacīti komentāri.

Ļoti bieži, lai izveidotu izvēlni, ir jāveido ne tikai teksta saites, bet bloķētas saites, kurās aktīvais apgabals būs gan pats teksts, gan noteikta zona ap to.

Piemēra apraksts

1. Lai izveidotu bloku saites, mēs izmantojam CSS rekvizītu :block, kas tās pārvērš par bloka elementi, izveidojot jaunu rindiņu pirms un pēc sevis. Ja rindiņas pārtraukumi nav nepieciešami, vērtību var aizstāt ar inline-block .
2. Tā kā mūsu saites tagad ir bloķētas, ja nepieciešams, mēs varam mainīt to platumu (CSS) vai augstumu (CSS).
3. Šajā piemērā mēs vispār nenorādam saišu augstumu, bet vienkārši piešķiram tām iekšējo polsterējumu (CSS), kas paplašina blokus.

Piemēra apraksts

1. Viss ir ļoti vienkārši – izmantojot CSS rekvizītu, zem kursora esošajām saitēm pievienojam vajadzīgo rāmi. Tomēr, lūdzu, ņemiet vērā, ka parastajām saitēm mēs pievienojam tieši tādu pašu rāmi, taču mēs veidojam to tādā pašā krāsā kā lapas fons. Tas ir, mēs vienkārši paslēpjam rāmi pagaidām. Tas tiek darīts, lai, virzot peles kursoru, saites nesāktu “lēkt” rāmja zīmējuma dēļ.

Tā vietā, lai apmales krāsa atbilstu lapas fonam, to varētu iestatīt uz caurspīdīgu un padarīt caurspīdīgu, taču, kā jau teicu, IE6 to neapstrādā pareizi.

HTML un CSS piemērs: 3D saišu izveide

Piemēra apraksts

1. Izmantojot CSS rekvizītu, saitēm pievienojam rāmjus un ar palīdzību iestatām to krāsu. Tajā pašā laikā mēs norādām gaišu krāsu toni kreisajai un augšējai malai un tumšu toni apakšējai un labajai. Pateicoties šim krāsu sadalījumam, mēs iegūstam saites, kas izskatās kā trīsdimensiju pogas.
2. Lai liktos, ka, virzot peles kursoru, pogas tiek nospiestas, saišu apmales krāsas apgriežam ar pseidoklasi. Lai iegūtu papildu klikšķa efektu, iestatiet relatīvo pozicionēšanu (CSS :relative) un veiciet viena pikseļa nobīdi uz augšu (CSS:-1px).
3. Nu, lai viss būtu absolūti skaists, mēs iestatījām zem kursora esošo saišu tekstu un fona krāsu nedaudz tumšāku nekā parasti. Gatavs.

Šajā piemērā mēs izveidosim saites ar ikonām, kurās būs ne tikai šo ikonu attēli, bet arī teksts zem tām. Taču turpmāk tās varēs viegli mainīt un atstāt, piemēram, tikai ikonas.

Pirms darba uzsākšanas sagatavosim vairākus ikonu attēlus, divos komplektos - parastajām saitēm un saitēm zem peles kursora. Otrajam komplektam ārēji jāatšķiras no pirmā, pie mums tas izpaužas krāsu paletē.

Piemēra apraksts

1. Lai saīsinātu kodu, saitēs mēs izmantojam divas klases - “saites” (ar kopīgiem rekvizītiem) un “attēls”, “audio”, “video” (personiski katrai saitei). Šis punkts ir detalizēti aprakstīts klases CSS atsauce.
2. Mūsu ikonas ir 50 x 50 pikseļus lielas, un tās būs redzamas saitēm kā fons (CSS), kuru mēs centrēsim augšpusē (50% 0) un neļausim to atkārtot (neatkārtoties).
3. Saitēm pievienojam polsterējumu (CSS), lai teksts saitēs nelīp pie malām. Tajā pašā laikā mēs izveidojam augšējo atkāpi vienādu ar ikonu augstumu, lai teksts nepārklātos ar tām, jo ​​mūsu ikonas ir fons.
4. Ja saitēs ir ļoti maz teksta, ikonu attēli tiks nogriezti sānos. Lai tas nenotiktu, saitēm iestatām minimālo platumu (CSS), lai tas būtu vismaz vienāds ar ikonu platumu. Mūsu gadījumā mums ir jāiegūst minimālais platums 50 pikseļi, taču mēs to iestatījām uz 40 pikseļiem, jo ​​sānu polsterējuma dēļ tiks pievienoti vēl 10 pikseļi.
5. Lai nodrošinātu minimālo platumu, mēs pārveidojam saites iekļautos blokos (CSS: inline-block).

IE6 būs nedaudz "jāārstē":

1. IE6 nesaprot minimālā platuma rekvizītu, taču tas interpretē CSS rekvizītu kā minimālo platumu. Tāpēc mēs tam izmantojam vienkāršu uzlauzt kas novērsīs šo problēmu.

Šajā piemērā saišu stūrus noapaļosim, izmantojot kādu no metodēm noapaļot stūrus, kas aprakstīts nākamajā apakšnodaļā. Mēs neapsvērsim iespēju izmantot CSS 3, jo tur viss ir ļoti vienkārši, taču labāk būtu veikt noapaļošanu, izmantojot attēlus.

Lai to izdarītu, vispirms mēs izgriezīsim vairākus tukšus attēlus divos komplektos - parastajām saitēm un saitēm zem kursora. Mums tas atšķirsies ar ēnu esamību/neesamību attēlos.

Piemēra apraksts

Mēs nekavēsimies pie pašas noapaļošanas tehnoloģijas, ja nepieciešams, par to varat lasīt attiecīgajā vietnes sadaļā.

1. Izmantojot CSS rekvizītu :inline-block, mēs izveidojam saites iekļautos blokus. Jo īpaši tas ir nepieciešams, lai mēs varētu norādīt saitēm precīzu augstumu, kas atbilst attēlu augstumam.
2. Noņemiet pasvītrojumu un centrējiet tekstu (CSS:center). Kopumā mūsu gadījumā nav nepieciešams tekstu centrēt, jo saites pielāgojas tajās esošā teksta lielumam un vienkārši nav kur to līdzināt. Bet, ja jums ir nepieciešams palielināt saišu platumu (piemēram, līdz 150 pikseļiem), tad šī izlīdzināšana noderēs.
3. lai mainītos izskats saites, kad tās atrodas zem peles kursora - pievienojiet stiliem papildu atlasītājus ar CSS pseidoklasi, kurā mēs norādām savas attēlu daļas, bet bez ēnas.

IE6 un IE7 mēs savienojam papildu stilus, izmantojot nosacīti komentāri, bet mēs nedaudz mainām pašu CSS kodu un padarām to atšķirīgu no tajā izmantotā veidi, kā noapaļot stūrus:

1. Izmaiņu būtība ir tāda, ka ar izteiksmes palīdzību saišu iekšpusē integrējam tos pašus divus tagus, bet tikai bez stilus saturošajiem atribūtiem. Tā vietā mēs pievienojam tagiem klases “left_bok” un “right_bok”, pievienojam tām stilus un ierakstām tos tālāk. Šie stili ir gandrīz tieši tādi paši kā galvenajā CSS kodā, taču šeit visi attēli tiek izmantoti kā tagu fons.

Noapaļoti saišu stūri (otrā iespēja)

Apskatīsim vēl vienu piemēru saišu stūru noapaļošanai, bet izmantojot četrus atsevišķus stūra attēlus.

Piemēra apraksts

Arī šeit mēs nerunāsim par pašu noapaļošanu, mēs tikai iezīmēsim atšķirīgos punktus.

1. Izmantojot CSS rekvizītu :inline-blok, mēs pārvēršam saites iekļautos blokos. Tad mēs noņemam no tiem pasvītrojumu, pievienojam rāmi un izlīdzinām tekstu līdz centram.
2. Tā kā pseidoelementi, ar kuriem mēs noapaļojam stūrus, atrodas saišu iekšpusē, arī to saturs ir centrēts, un tāpēc CSS rekvizīta pievienotie attēla stūri netiek novietoti stūros, kā mums nepieciešams. Lai to labotu, mēs tam pievienojam :left, atgriežot vērtību, ko pārlūkprogrammas izmanto pēc noklusējuma.

Līdz ar CSS3, HTML5 parādīšanos un tīmekļa fontu iekļaušanu vietnes izstrādes procesā ir kļuvušas dinamiskas, skaistas un tehnoloģiski progresīvākas.Daudziem cilvēkiem nepatīk pasvītrot saites, un zināmā mērā es tās saprotu. Tomēr diezgan biezas līnijas palīdz lietotājam orientēties vietnē un atšķirt saiti no parastā teksta. Bet tie nedaudz apgrūtina lasīšanu.

Līdz ar formāta parādīšanos RGBA(sarkana zaļa zila alfa) CSS3 šo problēmu var uzskatīt par atrisinātu. Izmantojot uzlaboto krāsu attēlojuma formātu, tīmekļa dizaineriem tagad ir iespēja izmantot krāsu alfa caurspīdīgumu.

Atšķirībā no necaurredzamības rekvizīta, to var lietot bloka fontam, apmalēm un fonam, nemainot bloka satura caurspīdīgumu. RGBA krāsu vērtības ir turpinājums krāsu vērtības RGB ar tikai alfa kanālu - kas nosaka objekta necaurredzamību.

Sintakse

RGBA krāsu vērtību nosaka: RGBA (sarkans, zaļš, zils, alfa).
Alfa parametrs apzīmē skaitli no 0,0(pilnīgi caurspīdīgs) līdz 1.0(pilnīgi necaurspīdīgs).

Saderība

RGBA krāsu vērtības atbalsta pārlūkprogrammas: IE9+, Firefox 3+, Chrome, Safari un Opera 10+.

Kas īstenoja

Ļebedeva studija, Artjoma Gorbunova dizaina birojs, Iļja Birmans nekavējoties izmantoja šo iespēju... Viņu vietnēs saišu pasvītrojums palika, bet kļuva elegantāks.

Koda piemērs

Tālāk ir sniegti koda fragmenti par to, kā pasvītrojumu padarīt smalku un elegantu. Protams, jūs izvēlēsities jūsu vietnei vispiemērotāko krāsu.

A:saite ( krāsa: #0060a0; apmales apakšdaļa: 1 px ciets; apmales apakšas krāsa: rgba(0,96,160,0,2); ) a: kursors (krāsa: #d04000; apmales apakšas krāsa: rgba(255,218,202) ,0,5);)

No autora: Saites pasvītrojumu veidošana ir diezgan sarežģīta, un es pastāvīgi aizmirstu, kura metode ir labākā kādā situācijā. Par laimi, Džons Džeimsons palīdzēs mums ātri to saprast savā rakstā.

Ir daudz veidu, kā veidot pasvītrojumus. Jūs, iespējams, atceraties rakstu “Saites pasvītrojumu izveide vidē”. Medium necentās darīt neko neparastu, viņi vienkārši gribēja tekstā radīt pievilcīgus pasvītrojumus.

Plānas, melnas pasvītras ar atstarpēm ap burtiem ar norādēm apakšā — Mārsinas Raganijas darbs no raksta Saites pasvītrojumu izveide vidē.

Labs standarta pasvītrojums, kas ir arī labs izmērs un ļauj nolaisties. Daudz labāk nekā lielākā daļa pārlūkprogrammu noklusējuma. Kā izrādās, Medium šajā ceļā saskārās ar daudzām problēmām. Un pat divus gadus vēlāk labs pasvītrojuma stils joprojām rada daudz problēmu.

Mērķi

Kāpēc neizmantot tikai teksta noformējumu: pasvītrot? Ja mēs runājam par ideālu scenāriju, pasvītrai vajadzētu būt:

atrodas zem bāzes līnijas;

izlaist mazos burtus;

mainīt krāsu, biezumu un stilus;

iet uz jauna līnija;

strādāt ar jebkuru fonu.

Es domāju, ka mums ir pilnīgi iespējams pieprasīt visas šīs lietas no pasvītrojumiem, taču, cik es zinu, nav intuitīva veida, kā visas šīs lietas izdarīt CSS.

Pieejas

Kādas metodes ir mūsu rīcībā, lai pasvītrotu tekstu? Es atcerējos sekojošo:

teksta dekorēšana;

fona attēls;

SVG filtri;

Pasvītrot.js(canvas);

text-decoration-*

Apskatīsim visu sarakstu un apsvērsim visus katras pieejas plusus un mīnusus.

teksta dekorācijas īpašums

Teksta noformējuma rekvizīts ir vienkāršākais veids, kā pasvītrot tekstu. Jums jāpiesakās tikai viens īpašums. Uz maza teksta šāda rindiņa izskatīsies labi, bet, palielinot fonta lielumu, tā izskatīsies neveikli.

Lielākā problēma ar teksta dekorēšanas īpašumu ir pielāgošanas trūkums. Rindā tiek izmantota teksta krāsa un fonta lielums, kuram tā tiek lietota, un nav iespējams mainīt stilus, izmantojot dažādas pārlūkprogrammas. Sīkāk par šo īpašumu runāsim nedaudz vēlāk.

plusi

viegli izmantot;

atrodas zem bāzes līnijas;

Safari un iOS pēc noklusējuma izlaiž lejupejošos rādītājus;

pārlec uz jaunu līniju;

darbojas ar jebkuru fonu.

Mīnusi

neizlaiž burtu pēcnācējus citās pārlūkprogrammās;

Krāsu, biezumu un stilu nevar mainīt.

robeža-apakšas īpašums

Robežas apakšas īpašums ir labs ātruma un pielāgošanas līdzsvars. Šī pieeja izmanto pierādīts CSS rāmji, kas nozīmē, ka varat viegli mainīt krāsas, biezumu un stilu. Šādi izskatās rekvizīts apmales-apakšā iekļautajos elementos:

Lielākais mīnuss ir tas, cik tālu ir pasvītrojums no teksta. Pasvītrojums atrodas zem burtu lejupejām. Šī problēma To var atrisināt, ja elementu veido inline-block un samazina līnijas augstumu, bet tad zaudē iespēju pāriet uz jaunām rindām. Piemērots atsevišķām rindām, bet ne vairāk.

Varat arī izmantot teksta ēnu, lai paslēptu līnijas daļas ap apakšējām norādēm. Šajā gadījumā jums būs jāatdarina fona krāsa, kas nozīmē, ka metode darbojas tikai uz vienmērīga fona. Gradienti un attēli nedarbosies.

Ieslēgts Šis brīdis Pasvītrojuma veidošanai ir 4 īpašības. Daudz labāk nekā tikai teksta dekorēšana.

plusi

Var izmantot pārejas īpašums un animēt krāsu un biezumu;

pēc noklusējuma pāriet uz jaunām rindām, ja elements nav iekļauts blokā;

Mīnusi

līnija atrodas ļoti tālu un to ir grūti pārvietot;

ir jāizmanto pārāk daudz nevajadzīgu īpašību, lai pasvītrojums izskatītos labi;

Slikta teksta izcelšana, izmantojot teksta ēnu.

kastes-ēnu īpašums

Rekvizīts box-shadow zīmē pasvītrojumu, izmantojot divas iekšējās ēnas: vienu, kas izveido taisnstūri, un otru, kas to slēpj. Tas nozīmē, ka, lai metode darbotos pareizi, ir nepieciešams vienots fons.

To pašu teksta ēnu triku var izmantot, lai simulētu izlaišanu burtu apakšējās norādēs. Ja līnijas krāsa atšķiras no teksta vai tā ir pietiekami plāna, tad nevajadzētu būt problēmām, kā tas ir ar teksta noformējumu.

plusi

var novietot zem bāzes līnijas;

varat izlaist norādes, izmantojot teksta ēnu;

jūs varat mainīt krāsu un biezumu;

lec uz jaunām rindām.

Mīnusi

stilus nevar mainīt;

Nedarbojas ar visiem foniem.

fona attēla īpašums

Fona attēla rekvizīts vislabāk atrisina mūsu problēmas, un tam ir ļoti maz trūkumu. Ideja ir tāda, ka jūs izveidojat attēlu, izmantojot lineāro gradientu un fona pozīciju, kas atkārtojas uz horizontālas ass pa teksta rindām. Elementam jābūt displeja: inline;.

Tālāk esošajā demonstrācijā netiek izmantots lineārais gradients. Lai izveidotu foršu efektu, varat izmantot savu attēlu.

plusi

var novietot zem bāzes līnijas;

varat izlaist apakšējās norādes, izmantojot teksta ēnu;

jūs varat mainīt krāsu, biezumu (pat par pusi pikseļu) un stilus;

darbojas ar pielāgotiem attēliem;

lec uz jaunām līnijām;

darbojas ar jebkuru fonu, ja vien neizmantojat teksta ēnu.

Mīnusi

Attēla izmērs var atšķirties atkarībā no dažādas izšķirtspējas, pārlūkprogrammas un tālummaiņas līmeņi.

SVG filtri

Šī ir metode, ar kuru es spēlēju. Varat izveidot iekļautu SVG filtra elementu, kas novilks līniju, un paplašināt tekstu, lai maskētu līnijas daļas, kurām jābūt caurspīdīgām. Filtram var piešķirt ID un atsaukties CSS, izmantojot filtru: url('#svg-underline').

Lieliski ir tas, ka filtrs palielina caurspīdīgumu, nepaļaujoties uz teksta ēnu. Tas nozīmē, ka varat izlaist burtu balonus uz jebkura fona, ieskaitot gradientus un attēlus! Tālāk sniegtais piemērs darbojas tikai ar vienu teksta rindiņu, tāpēc esiet piesardzīgs.

Un šādi tas izskatās pārlūkprogrammā Chrome un Firefox:

Ir problēmas ar atbalstu IE, Edge un Safari. Ir grūti pārbaudīt SVG filtru atbalstu CSS. Filtram varat izmantot kārtulu @supports, taču tas pārbaudīs tikai pašas saites darbību, nevis to, vai filtrs ir lietots. Mana metode pārlūkprogrammās ir diezgan rupja, tāpēc esiet divreiz uzmanīgs.

plusi

atrodas zem bāzes līnijas;

izlaiž zemākos līderus;

Jūs varat mainīt krāsu, biezumu un stilus;

darbojas uz jebkura fona.

Mīnusi

nepārlec uz jaunām rindām;

nedarbojas IE, Edge un Safari, taču varat norādīt teksta noformējumu kā rezerves variantu. Safari pasvītrojumi izskatās lieliski atsevišķi.

Underline.js (audekls)

Underline.js ir lieliska bibliotēka. Esmu pārsteigts par to, ko Wenting Zhang spēja paveikt ar JS, un uzmanību detaļām. Ja vēl neesat redzējis Underline.js tehnoloģiju demonstrāciju, apstājieties uz minūti un ieskatieties. Tiešsaistē ir brīnišķīga deviņu minūšu runa par darba principiem, tagad es jums to ātri pārstāstīšu. Pasvītrojumi tiek zīmēti, izmantojot audeklu. Pilnīgi noteikti jauna pieeja, kas darbojas pārsteidzoši labi.

Neskatoties uz pievilcīgo nosaukumu, šī ir tikai tehniska demonstrācija. Tas nozīmē, ka jūs nevarēsit nekavējoties iekļaut bibliotēku projektā bez daudzām izmaiņām.

Šo bibliotēku ir vērts pieminēt tikai kā koncepcijas pierādījumu. Audekls var radīt skaistus, interaktīvus akcentus, taču jums būs jāraksta papildu JS kods, lai tas darbotos pareizi.

Īpašības teksts-dekorācija-*

Vai atceries, kad es teicu, ka nedaudz vēlāk par kaut ko iedziļināsimies? Tagad darīsim to. Teksta noformējuma rekvizīts labi darbojas pats par sevi, taču mēs varam pievienot pāris eksperimentālas īpašības, lai iegūtu pievienoto vērtību. labākais skats:

teksts-dekorācija-krāsa

teksts-dekorēšana-izlaist

teksts-dekorācijas stils

Nepriecājieties pirms laika, jūs zināt par pārlūkprogrammas atbalstu.

text-decoration-color īpašums

Rekvizīts text-decoration-color ļauj mainīt pasvītrojuma krāsu atsevišķi no teksta krāsas. Īpašumam pat ir labs pārlūkprogrammas atbalsts. Tas darbojas pārlūkprogrammā Firefox un ar prefiksu pārlūkprogrammā Safari. Ir mīnuss — ja nenotīrīsit līniju ap norādēm, Safari tā gulēs virs teksta. Firefox:

text-decoration-skip īpašums

Rekvizīts Text-decoration-skip ir atbildīgs par kājenes balonu izlaišanu pasvītrotā tekstā.

Īpašums ir nestandarta un pašlaik darbojas tikai Safari. Lai strādātu citās pārlūkprogrammās, ir jāizmanto prefikss –webkit-. Programmā Safari šis rekvizīts ir iespējots pēc noklusējuma, tāpēc pasvītras izlaiž kājenes pat vietnēs, kur šis rekvizīts nav norādīts.

Ja izmantojat Normalize, jums tas ir jāzina jaunākās versijas atspējojiet īpašumu normālai darbībai visās pārlūkprogrammās. Ja vēlaties atgūt šos gandrīz maģiskos pasvītrojumus, jums tas ir jāiespējo šo īpašumu.

teksta dekorācijas stila īpašums

Teksta noformējuma stila rekvizīts piedāvā tādu pašu pasvītrojumu kopu kā apmales stila rekvizīts, taču arī pievieno jaunais veids- viļņains. Iespējamās vērtības:

Pašlaik teksta dekorēšanas stila rekvizīts darbojas tikai pārlūkprogrammā Firefox, zemāk ir ekrānuzņēmums:

Vienkrāsainu pasvītrojumu komplekts Vai izskatās līdzīgi?

Kas noticis?

Teksta noformējuma* rekvizīti ir intuitīvāki nekā citi pasvītrojumu veidošanas rekvizīti. Tomēr, ja paskatās uz iepriekš izklāstītajām prasībām citādāk, jūs ievērosiet, ka, izmantojot šīs īpašības, nevar mainīt biezumu un novietojumu. Pēc nelielas izpētes es atklāju šīs divas īpašības:

teksts-pasvītrojums-platums

teksts-pasvītrot-pozīcija

Šķiet, ka šie rekvizīti tika izņemti no agrīnas CSS versijas, jo par tiem trūka intereses. Tie nekad netika izmantoti. Hei, tā nav mana vaina.

secinājumus

Tātad, kāds ir labākais veids, kā pasvītrot tekstu? Tas viss ir atkarīgs no dažādiem faktoriem.

Nelielam tekstam iesaku izmantot teksta dekorēšanu un eksperimentālo teksta dekorēšanas izlaišanas rekvizītu, cerot, ka tas darbosies. Lielākajā daļā pārlūkprogrammu tas izskatās tik un tā, bet tas vienmēr ir bijis šāds, un cilvēki tam nepievērsa uzmanību. Ja esat pietiekami pacietīgs, iespējams, ka drīz visi jūsu pasvītrojumi izskatīsies labi, jums nekas nav jāmaina.

Pamattekstam izmantojiet fona attēlu. Metode darbojas, izskatās skaisti, un tai ir Sass mixins. Ja pasvītrojums ir plāns vai krāsa atšķiras no teksta, iespējams, varat izlaist teksta ēnu metodi. Tekstam vienā rindā izmantojiet apmales-bottom un citus rekvizītus.

Un, lai izlaistu burtu norādes uz gradienta fona vai attēliem, mēģiniet izmantot SVG filtru. Vai vienkārši nejauciet šādus fonus ar pasvītrojumiem. Nākotnē, kad uzlabosies pārlūkprogrammas atbalsts, būs iespējams izmantot rekvizītus text-decoration-*.

Pasvītrotais teksts HTML tiek izcelts, izmantojot tagu u HTML (no vārda pasvītrot). To lieto šādi (vajadzīgā teksta daļa tiek ievietota starp tagiem ):

Vietņu veidotājs "Nubex"

Bet šo kodu tiek uzskatīts par nederīgu, tāpēc daudz efektīvāk un pareizāk ir izmantot CSS stilus teksta dekorēšanai.

Pasvītrot tekstu - CSS

Kā jau teicām rakstā, teksta dekorācijas tiek iestatītas, izmantojot īpašumu teksta dekorēšana. Pasvītroto tekstu norāda parametrs pasvītrot:

Vietņu veidotājs Nubex"

Varat pasvītrot tekstu, izmantojot CSS, izmantojot ne tikai vienlaidu līniju. Apskatīsim, kādas opcijas varat izmantot, lai pasvītrotu tekstu:

• Pasvītrot tekstu ar punktētu līniju CSS:

  Vietņu veidotājs Nubex"

• Pasvītrojums ar punktiem:

  Vietņu veidotājs Nubex"

• Dubultā domuzīme:

  Vietņu veidotājs Nubex"

Kā redzat iepriekš minētajos piemēros, pasvītrošanas stilu varat kontrolēt, izmantojot īpašumu robeža-apakša(apakšējā rinda). Izmantojot šo parametru, varat iestatīt pasvītrojuma veidu, krāsu un biezumu.