Css understruket teckensnitt. Understruken text i CSS

Beskrivning

Lägger till textdekoration i form av understrykning, genomstrykning, linje ovanför texten och blinkning. Mer än en stil kan tillämpas samtidigt genom att lista värden separerade med mellanslag.

Syntax

text-dekoration: [blink || linje-genom || överlinje || understryka] | ingen | ärva

Värdena

blink Ställer in blinkande text. Sådan text försvinner med jämna mellanrum, ungefär en gång i sekunden, och dyker sedan upp på samma plats igen. Det här värdet är för närvarande utfasat av webbläsare och är utfasat i CSS3; animering rekommenderas istället. line-through Skapar genomstruken text (exempel). overline Linjen går över texten (exempel). understrykning Ställer understruken text (exempel). none Avbryter alla effekter, inklusive standardunderstrykning för länkar. ärva Värdet ärvs från föräldern.

HTML5 CSS2.1 IE Cr Op Sa Fx

Strategisk attack

Objektmodell

document.getElementById ("elementID") .style.textDecoration

document.getElementById ("elementID") .style.textDecorationBlink

document.getElementById ("elementID") .style.textDecorationLineThrough

document.getElementById ("elementID") .style.textDecorationNone

document.getElementById ("elementID") .style.textDecorationOverLine

document.getElementById ("elementID") .style.textDecorationUnderline

Webbläsare

Internet Explorer upp till och med version 7.0 stöder inte ärvt värde. Linjen som erhålls med linjegenomgångsvärdet är högre i IE7 än i andra webbläsare; IE8 har fixat detta fel.

Uppgift

Lösning

Prickad understrykning för länkar har nyligen blivit standarden för länkdesign, genom att klicka på den öppnas inte länken, utan utför någon åtgärd i det aktuella dokumentet. Den aktiva användningen av AJAX-teknik, när sidan uppdateras utan att laddas om den, har lett till en ny typ av länkar som skiljer sig från vanliga länkar med en prickad linje.

För att skapa raden, använd egenskapen kant-botten med ett streckat värde och lägg till det i A-väljaren. För att förhindra att understrykning tillämpas på alla länkar måste du ange en unik klass, låt oss kalla den till exempel punkt. Du måste också ta bort den ursprungliga understrykningen från länkar med hjälp av egenskapen text-decoration inställd på none (exempel 1).

Exempel 1. Prickad underlinje

HTML5 CSS 2.1 IE Cr Op Sa Fx

Resultatet av exemplet visas i fig. 1.

Linjens bredd och understrykningsfärg för länkar ställs också in via egenskapen kant-botten.

Layouten för all informativ text innebär att semantiska hyperlänkar eller ankare ingår. Dessa element läggs till med "a"-taggen (ankare). Moderna webbläsare visar ett sådant element som standard. Ofta föredrar layoutdesigners eller webbdesigners att antingen ändra denna stil eller ta bort den helt.

I vissa fall är detta verkligen nödvändigt. Till exempel i ett tätt länkblock, där onödig design bara kommer att överbelasta uppfattningen och göra det svårt att läsa dokumentet. I vissa fall är det dock tillrådligt att hålla åtskillnaden mellan text och länkar. Om webbplatsdesignen helt utesluter sådan formatering, bör någon annan typ av framhävning av sådana element tillämpas. Den vanligaste typen av differentiering idag är färgkontrasten på ankare i texten. Det är effektivt. Den enda lilla nackdelen med detta alternativ kommer att vara problemet med textval av personer som inte kan uppfatta olika färger (färgblindhet). Men detta är en så låg andel användare att den kan försummas.

Om det ändå beslutades att ta bort understrykningen av länkar, kommer viss kunskap om strukturen för bildandet av webbsidan, nämligen CSS, att behövas.

Ta bort understrykningar från länkar på hela webbplatsen

För någon som är väl insatt i webbdesign och i synnerhet i CSS kommer det inte att vara svårt att ta bort understrykningen av länkar. För att göra detta behöver du bara hitta och öppna filen som är ansvarig för stylingen i webbplatsfilerna. Den ligger vanligtvis i rotkatalogen och har tillägget .css. Du kan ta bort understrykningen av länkar med en enkel kod:

text-dekoration: ingen;

Denna lilla rad kommer att helt ta bort understrykningen av alla element skrivna med "a"-taggen på hela webbplatsen.

Men vad händer om du inte har tillgång till CSS-filen?

I det här fallet är det lämpligt att använda Style-taggen i början av dokumentet. Fungerar på samma sätt som en CSS-fil. För att tillämpa stilar är det nödvändigt i början av dokumentet (eller HTML-sidor) lägg till en struktur där de vanliga reglerna för CSS-stil gäller.

Dessa stilar gäller bara för en specifik sida. De kommer inte att fungera i andra avsnitt eller dokument på webbplatsen.

Ta bort understrukna länkar när du håller muspekaren

Men vad händer om du behöver ta bort understrykningen av en länk när du håller muspekaren? CSS kan också hjälpa oss i det här fallet. Koden kommer att se ut så här:

text-dekoration: ingen;

Det är pseudoklassen ": hover" som är ansvarig för att dekorera element vid hover.

Genom att komponera de två kan vi göra att länkens understrykning endast visas när du svävar, annars kommer allt att se ut som vanlig text:

text-dekoration: ingen;

text-dekoration: understryka;

Använda identifierare och klasser

Som du kan se av ovanstående är det ganska enkelt att ändra stilen på ett element på en webbplats eller html-dokument. Nackdelarna med sådana alternativ är omöjligheten att selektivt tillämpa stilar: inte på hela webbplatsen eller dokumentet, utan på en specifik länk.

Det finns flera lösningar på detta problem.

Du kan ta bort understrykningen av länkar inline. Även om detta starkt avråds från synpunkten att optimera webbplatsen.

För att göra detta måste du ange Style-parametern direkt i länktaggen:

Det andra alternativet är mer acceptabelt.

Vi introducerar ytterligare en klass eller id i elementet och tilldelar de stilar vi behöver till dessa väljare:

Klassen skrivs med en punkt framför namnet:

Ingen_ dekoration (

text-dekoration: ingen;

Identifieraren betecknas med ett #-tecken:

#ingen_ dekoration (

text-dekoration: ingen;

Denna regel gäller både CSS-filen och Style-taggen.

Ändra visningsstilen för länkar i text

Förutom möjligheten låter det dig tillämpa andra typer av styling. Ofta använder webbdesigners eller layoutdesigners att ändra dess färg i förhållande till huvudtexten för att markera referenstext.

Detta är också ganska enkelt att göra:

Färg : * ange önskad färg i valfritt format (* röd, # c2c2c2, rgb (132, 33, 65) *) *;

En liknande styling tillämpas enligt samma regler som beskrivits för att ta bort understrykningen av en länk. CSS-reglerna är identiska i detta fall. Att ändra färg på länken och ta bort understrykningen kan tillämpas som en separat stil (då förblir länken understruken, men ändrar färgen från standardblå till önskad färg).

Ersätter standardstyling

Ännu en kommentar till slut. Istället för att ta bort understrykningen CSS-länkar gör det möjligt att byta ut standardvärden undanröjning. För att göra detta räcker det att ersätta följande värden i textdekorationskonstruktionen:

text-dekorationsstil:

• Om du behöver en heldragen linje, ange värdet solid.
• För en vågig linje, vågig.
• Dubbel linje - respektive dubbel.
• Linjen kan ersättas med en sekvens av prickar - prickade.
• Stryk under ett ord med en prickad linje - streckad

Du kan också ändra linjens position i förhållande till texten:

Linje-text-dekorations-linje-konstruktionen kan ha följande värden:

Och färg (inte att förväxla med textfärg!):

text-decoration-line: (valfri färg i valfritt format * röd, # c2c2c2, rgb (132, 33, 65) *).

För enkelhetens skull kan alla tre positionerna skrivas samman i en konstruktion:

textdekoration: röd, genomgående, vågig.

eller utforska taggar som formaterar HTML-text

Din uppmärksamhet presenteras för en av de viktigaste och enklaste lektionerna i handledningen.

• HTML-textär huvudkomponenten på de flesta av internetsidorna.
• Med nyckelfraser i HTML-sidans brödtext användare kan hitta din webbplats.
• HTML-text kan vara av valfri storlek och färg efter eget gottfinnande. Du kan också definiera typ av teckensnitt och dess volym.
• HTML-storlek font vanligtvis satt i pixlar.
• HTML-formatering text utbredda, formateringstaggar används.

Se nedan taggar som formaterar HTML-text:

• Taggar → fetstil HTML-text(fetstil).
• Taggar → fetstil HTML-text(fetstil).
• Taggar → monospace HTML-text(typsnitt med monospace).
• Taggar → monospace HTML-text(typsnitt med monospace).
• Taggar → monospace HTML-text(typsnitt med monospace).
• Taggar → HTML-text, storleken är större än vanligt (stort tryck).
• Taggar → HTML-text, storleken är mindre än vanligt (småtryck).
• Taggar → snett HTML-text(kursivt teckensnitt).
• Taggar → snett HTML-text(kursivt teckensnitt).
• Taggar → snett HTML-text(kursivt teckensnitt).
• Taggar → understruken HTML-text(understruket teckensnitt).
• Taggar → genomstruken HTML-text(genomstruket teckensnitt).
• Taggar → HTML-text(teckensnitt) i subskript.
• Taggar → HTML-text(teckensnitt) upphöjd.

HTML-textformatering: genomstruken, understruken text

Resultat: ... teckensnitt med monospace

Resultat: ... teckenstorlek större än normalt

Resultat: ... kursivt teckensnitt

Resultat: genomstruken text (genomstruken teckensnitt)

Resultat: upphöjd

C Formateringen ovan bör endast tillämpas på små textavsnitt. Använda sig av CSS om du vill ställa in ett specifikt teckensnitt för hela sidan, eller för flera rader till exempel.

Med hjälp av html kan texten ges en vacker design. Understrykningselementet är väldigt populärt, men inte alla vanliga användare vet hur man använder det.

Understrykning i HTML

Så hur gör man en understrykning? i html formateras den med taggen ... Det används i alla html- och xhtml-specifikationer, men endast under förutsättning att det är en övergående eftersom webbläsarversionen av märkningen måste anges. I det här fallet klarar dokumentet valideringen. Elementet måste specificeras på ett standard sätt, det vill säga högst upp på sidan.

Märka stängning ska den åtföljas av... Det måste läggas till i uppmärkningen på detta sätt:

1. Rubrik nummer ett

Vår text i paragraf

Ordet "text" kommer att vara understruket.

Du kan också stryka under en enstaka bokstav i ett ord:

1. Rubrik nummer två

Våra de Till artikel i paragraf

Traditionellt i html-uppmärkning understrukna länkar visas när du svävar med musen eller till och med stillastående, och detta är fallet som standard i alla webbläsare. Sätt därför taggen fortlöpande är starkt avskräckt.

Dessutom gör skrivstilar i css koden mer kompakt, vilket gör att sidan laddas snabbare.

Oftast tillämpar layoutdesigners stilar genom att lägga till kanter eller understrykningar i html, eller flytta ut dem till en separat css-fil.

Understrykning i CSS

Att dekorera text med css är ett bekvämt och praktiskt sätt. Mest enkla sätt en sådan höjdpunkt: med text-dekoration eller kant-botten.

För att understryka text med text-dekor måste egenskapen läggas till önskad klass.

• önskad klass (
• text-dekoration: understryka;

Man bör komma ihåg att klassnamn alltid skrivs med latinska bokstäver.

Dekorera kan göras med bårder också. Kanter låter dig göra både en vanlig (heldragen) understrykning och en prickad. För detta är nödvändiga kantegenskaper föreskrivna, men textdekorationsegenskapen tas bort.

• önskad klass (
• text-dekoration: ingen;

Sedan är texten dekorerad med följande egenskap:

• .required-class (
• text-dekoration: ingen;
• kant-botten: 2px streckad svart;

Så här kommer dekoration ut med. För att göra det fast, istället för "streckat" använd "solid". För den som gillar att dekorera text med understrykningar med prickar kan du prova att använda "prickad".

Ramstilar skrivs på en rad. Utöver typen av understrykning måste du också ange tjockleken på understrykningen och färgen. Du kan experimentera för att bestämma storleken, men vanligtvis räcker det med 1 eller 2 pixlar. Textfärgen kan också ställas in på understruken färg:

• önskad klass (
• text-dekoration: ingen;
• border-bottom: 1px blå prickad;
• färgen blå;

Detta kommer att skapa blå text med blå typografi. För att bifoga en stil till html måste du lägga till en klass i uppmärkningen.

• Tredje rubriken

Vår text i ett stycke

Det är allt, det här är grunderna för att understryka i html.