Meny
Är gratis
checka in
den huvudsakliga  /  Problem / Hur man gör en vacker typsnitt i HTML: Mått, färger, taggar HTML-teckensnitt. Hur man skriver ner i HTML-text under bilderna varför RGBA används

Hur man gör en vacker typsnitt i HTML: Storlekar, färger, HTML-typsnitt. Hur man skriver ner i HTML-text under bilderna varför RGBA används

I HTML-typstorlek spelar en viktig roll. Det låter dig uppmärksamma användarens uppmärksamhet på viktig informationpostat på sidan. Även om inte bara storleken på bokstäverna är viktig, men också deras färg, tjocklek och till och med en familj.

Taggar och attribut med robot med HTML-teckensnitt

Hypertextens språk har en stor uppsättning medel att arbeta med teckensnitt. När allt kommer omkring är formateringen av texten den viktigaste uppgiften för HTML.

Anledningen till att man skapar HTML-språket har blivit problemet med att visa textformateringsbläddringar.


Tänk på taggar som används för att fungera med teckensnitt i HTML och deras attribut. Den viktigaste är taggen . Med hjälp av värdena för dess attribut kan du ställa in flera teckensnittsegenskaper:

  • färg - Ställer in textens färg;
  • storlek - Fontstorlek i villkorliga enheter.

Det positiva attributvärdet stöds från 1 till 7.

  • ansikte - Används för att installera textfontfamiljerna som ska användas i taggen . Några värden som anges i kommatecken stöds omedelbart.

Endast den text som är placerad mellan den del av teckensnittet är formaterad. Den återstående texten visas som standard installerad som standard.

Också i HTML finns det ett antal par taggar som bara anger en formateringsregel. Dessa inkluderar:

  • - Anger djärvt teckensnitt till HTML. Märka genom åtgärd som liknar den föregående
  • - Storleken är större än standarduppsättningen;
  • - Mindre teckensnittstorlek;
  • - lutande text (kursiv). En liknande tagg ;
  • - Text med understrykning;
  • - stressad
  • - Visa endast text i små bokstäver;
  • - I det stora fallet.

Normal text

Miniatyr

Miniatyr

Mer vanligt

Mindre vanligt

Kursiv

Kursiv

Med betoning

Krossad

Funktionerna i stilattributet

Förutom de beskrivna taggarna finns det fortfarande flera sätt att ändra teckensnittet i HTML. En av dem är användningen av det stila universella attributet. Med hjälp av värdena för dess egenskaper kan du ställa in teckensnittstilen:

1) Font-familj - fastigheten sätter fontfamiljen. Du kan räkna upp flera värden.
Ändra teckensnittet i HTML till nästa värde kommer att inträffa om den tidigare familjen inte är installerad i operativ system Användare.

Syntax av skrivning:

fOLD-FAMILJ: FONT NAMN [, FONT NAMN [, ...]]

2) Font-storlek - Storleken är inställd från 1 till 7. Detta är ett av de viktigaste sätten att heter HTML du kan öka teckensnittet.
Syntax av skrivning:

fONT-STORLEK: Absolut storlek | Relativ storlek | Värde | intresse | ärva.

Fontstorlek kan också ställas in:

  • I pixlar;
  • I absolutvärde ( xx-liten, x-liten, liten, medium, stor);
  • I procent;
  • Poäng (PT).

FONT-STORLEK: 7

FONT-STORLEK: 24px

FONT-STORLEK: X-Large

FONT-STORLEK: 200%

FONT-STORLEK: 24PT

3) Font-stil - Ställer in stilen för att skriva teckensnittet. Syntax:

typsnitt: Normal | Kursiv | Snett | ärva.

Värden:

  • normalt -normalt skrivande;
  • kursiv - kursiv;
  • snett - teckensnitt med en sluttning till höger;
  • Ärva - ärver att skriva moderelementets skrivelse.

Ett exempel på hur du ändrar teckensnittet i HTML med den här egenskapen:

font-stil: ärver

font-stil: kursiv

typsnitt: Normal

font-stil: snett

4) Font-variant - Översätter alla stora bokstäver till titeln. Syntax:

font-variant: Normal | Små kepsar | ärva.

Ett exempel på hur du ändrar teckensnittet i HTML av den här egenskapen:

font-variant: ärver

font-variant: Normal

font-variant: Small-caps

5) Font-vikt - Gör det möjligt att ställa in tjockleken på skrivandet av texten (mättnad). Syntax:

fONT-VIKT: BOLD | DROWER | Lättare | Normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Värden:

  • fet - Installerar en djärv HTML-typsnitt;
  • djupare - oljig i förhållande till det normala;
  • lättare är en mättad i förhållande till normal;
  • normalt - normalt skrivande;
  • 100-900 - Tjockleken är inställd i den numeriska ekvivalenten.

fONT-VIKT: BOLD

fONT-VIKT: DROWER

font-Vikt: Ljusare

fONT-VIKT: NORMAL

fONT-VIKT: 900

fONT-VIKT: 100

Font Fastighet och HTML Font Färg

Font är en annan containerfastighet. Inuti sig själv, det kombinerade värdena för flera egenskaper som är utformade för att ändra teckensnitt. Syntaxfont:

teckensnitt: Font-font-Familj | ärva.

De teckensnitt som används av systemet i inskriptioner på olika kontroller kan också specificeras som ett värde.

  • bildtext - för knappar;
  • ikon - för ikoner;
  • meny - Meny;
  • meddelande-box - Dialogrutor;
  • small-bildtext - för små kontroller;
  • status-bar - status sträng typsnitt.

fONT: ikon

teckensnitt: Bildtext.

fONT: Meny.

fONT: Message-box

small-bildtext.

fONT: Statusfält

teckensnitt: Italic 50px Bold "Times New Roman", Times, Serif

För att ställa in färgen på teckensnittet i HTML kan du använda färgfastigheten. Det låter dig ställa in färg som att använda nyckelordoch RGB-format. Såväl som i form av hexadecimal kod.

HTML-taggar som definierar textjustering, streck

Breddtext som används i tryckeri

I exemplet nedan visas hur man ska anpassa sig text i bredd Sidor:

Justera \u003d "vänster" Justera \u003d "Höger"

Varje dag växer antalet anställda inom tjänstesektorn och spridning av information. Om symbolerna för tidigare århundraden var en gård och en fabrik är symbolen för det aktuella XXI-talet ett kontor som är utrustat med datorer som har tillgång till informationsflödet.
Rikta \u003d "Justera" Rikta \u003d "Center"

Varje dag växer antalet anställda inom tjänstesektorn och spridning av information. Om symbolerna för tidigare århundraden var en gård och en fabrik är symbolen för det aktuella XXI-talet ett kontor som är utrustat med datorer som har tillgång till informationsflödet.

Varje dag växer antalet anställda inom tjänstesektorn och spridning av information. Om symbolerna för tidigare århundraden var en gård och en fabrik är symbolen för det aktuella XXI-talet ett kontor som är utrustat med datorer som har tillgång till informationsflödet.

Rättfärdiga värdet ger uniform nivelleringstext till höger och vänster, dvs med bredd. Denna metod används i stor utsträckning i tryck.

Nivelleringstext i HTML i mitten och bredden

Nivelleringstext i HTML-centrerad text till höger:

Resultat:

Attribut och värden

  • justera \u003d "vänster" - bestämmer nivelleringstext kvar (standard).
  • justera \u003d "Center" - nivåer text i mitten.
  • justera \u003d "Höger" - linjer text till höger.

Justering | Html penent text

Html text och hans reträtt till vänster på sidan

Producera strecktext kvar på två sätt:

Resultat:

Visa i ett nytt fönster.

Det händer att du behöver ta ut bilden och ange namnet (kort fras). För detta finns det parametrar:

Justera \u003d "TOP" - Linjer texten längst upp i bilden.
Justera \u003d "Bottom" - linjer text på botten.
Justera \u003d "Middle" - Justerar text i mitten.

Nedan visas en kod som visar operationen ovanför de beskrivna parametrarna.

<hTML\u003e <huvud\u003e <titel\u003eBild och texttitel\u003e huvud\u003e <kropp\u003e <p\u003e<img src \u003d "bilder / htmlbeeer0.jpg" Bredd \u003d. "100" Höjd \u003d. "180" justera \u003d. "TOPP" /> Vacker bip\u003e <br\u003e<br\u003e <p\u003e<img src \u003d "Bilder / htmlbeer1.jpg" Bredd \u003d. "120" Höjd \u003d. "180" justera \u003d. "Mitten" /> Väldigt söt bip\u003e <br\u003e<br\u003e<br\u003e <p\u003e<img src \u003d "bilder / htmlbeer2.jpg" Bredd \u003d. "160" Höjd \u003d. "180" justera \u003d. "Botten" /> Inget heller.p\u003e kropp\u003e hTML\u003e

Vacker bi

Väldigt söt bi

Inget heller.


Låt oss nu se hur du behöver visa en bild med ett stort antal text.
Det finns två parametrar:

Justera \u003d "vänster" - bilden "strömmar texten" till vänster.
Justera \u003d "Höger" - bilden "strömmar texten" till höger.

För tydlighet, skriv den här koden:

<hTML\u003e <huvud\u003e <titel\u003eHTML-bild på vänster - Text till högertitel\u003e huvud\u003e <kropp\u003e <img src \u003d "bilder / htmlsun.jpg" justera \u003d. "VÄNSTER" Bredd \u003d. "140" Höjd \u003d. "124" /> <stor\u003eSolenstor\u003e <br\u003e <p\u003e \u003e Det kan finnas text som innehåller information om solen.p\u003e <br\u003e<br\u003e <img src \u003d "bilder / htmlmoon.jpg" justera \u003d. "RÄTT" Bredd \u003d. "140" Höjd \u003d. "124" /> <stor\u003eMånestor\u003e <br\u003e <p\u003e Här kan du infoga en vetenskaplig artikel om månen.p\u003e kropp\u003e hTML\u003e Solen

Solformen är nära den perfekta sfären med en diameter på 1392000 km. Det rymmer månens bana, och det finns fortfarande mycket utrymme. Faktum är att mer än en miljon sådana planeter som jorden skulle passa fritt inuti solen. Dessutom, om du kunde köra bil på sin yta med en hastighet på 88 km / h, skulle du ha lämnat 5 och ett halvt år att köra runt solen en gång (utan att stoppa). Men solens storlek är inte konstant. Moderna studier visar att solens diameter minskar ca 1 meter per timme. Om detta fenomen hölls under det senaste århundradet, sedan solen, som vi ser nu 800 km mindre än vad våra förfäder såg. Kanske är den här solkomprimeringen en del av en långsiktig svängning som hjälper till att stabilisera ett stort utsläpp av energi.

Måne

Detta är jordens enda naturliga satellit. Månans massa är 0,0123 massor av jorden (ca 1/81) eller 7,6,1022 kg. Månens diameter är lite mer än en fjärdedel av jorden (0,273) eller 3 476 km. Månen belyser landet på 500 000 gånger svagare än solen). Det finns inga atmosfärer som är bekanta med oss \u200b\u200bpå månen, det finns inga floder och sjöar, vegetation och levande organismer. Gravity styrka på månen är sex gånger mindre än på jorden. Dag och natt med temperatur faller upp till 300 grader de senaste två veckorna.


Men Som du ser kan vara så att texten och bilden är för nära varandra. För att korrigera det behöver du bara ställa in en del av den önskade storleken på ramtjockleken och färgen, som den bakre bakgrunden.

<hTML\u003e <huvud\u003e <titel\u003eBildutgång med HTML-sida titel\u003e huvud\u003e <kropp\u003e <img src \u003d "bilder // htmleclipse.jpg" alt \u003d justera \u003d "VÄNSTER" Bredd \u003d. "160" Höjd \u003d. "130" Style \u003d "Border: 8px Solid #fffffff;"/> <stor\u003estor\u003e <br\u003e <p\u003e En artikel om den soliga förmörkelsen.p\u003e kropp\u003e hTML\u003e

Astronomiskt fenomen som ligger i det faktum att månen stängs (förmörkelser) helt eller delvis solen från observatören på jorden. Solförmörkelse är endast möjligt i nymåne, när sidan av månen mot marken inte är täckt, och månen själv är inte synlig. Förmörkelser är endast möjliga om den nya månen inträffar nära en av de två månnoderna (skärningspunkterna i månens och solens synliga banor), inte mer än cirka 12 grader från en av dem.

I allmänhet är frågan själv lätt. Det finns inget som kan ordna ett kvarter, ovanpå en annan. Men det finns fortfarande flera stunder som är värd diskussion i denna fråga. Jag tror att det kommer att finnas människor som kommer att vara intresserade.

Tanken är att helt enkelt applicera lite text till bilden. Texten presenteras i form av block av variabel längd, det antas att det kommer att ligga på vänster sida, med en slät fyllning runt texten. Till exempel, som i den här bilden:

Dokumentschema

Html markup

En film i parken:
Kung Fu Panda.

Det är självklart att det är lättare att använda div-elementet för att mata ut bilden som ett bakgrundsmönster, men i det här fallet antar jag att bilden är innehållet i dokumentet, och därför hör det till HTML. Div-elementet kommer att användas som en behållare för den absoluta positioneringen av texten i den.

CSS.

.Image (position: relativ; Bredd: 100%; / * för IE 6 * /) H2 (position: absolut; topp: 200px; vänster: 0; Bredd: 100%;)

Således placerade vi texten direkt över bilden. Nästa vår uppgift gör bakgrund för text. Sedan elementet

Det är ett blockelement, vi kan inte använda det för dessa ändamål. Vi använder inline-elementet . Wrap i den text inuti titeln.

En film i parken:
Kung Fu Panda.

Vi kommer att använda denna spänning för textdesign och bakgrund:

H2 Span (Färg: Vit; FONT: BOLD 24PX / 45pX Helvetica, Sans-Serif; Brevspraction: -1px; Bakgrund: RGB (0, 0, 0); / * Om nästa rad inte fungerar * / Bakgrundsplats : RGBA (0, 0, 0, 0,7); Padding: 10px;)

Problem

Såsom kan ses från figuren, i slutet av linjen slutar textblocket omedelbart efter den sista symbolen i strängen och börjar omedelbart vid den vänstra kanten på nästa linje. Property Padding för Span-A, i det här fallet, hjälper inte oss.

För att lösa problemet måste du använda extra spänner på båda sidor av taggen
I det här fallet kan vi enkelt använda vadderingen.

En film i parken:
Kung Fu Panda.

Den här nya span-am kommer uppgift att padding egendom:

H2 Span.Spacer (Padding: 0 5px;)

Vad är semantiken?

På detta stadium Designen är klar, men ett problem kvar. Nämligen, stor mängd Ytterligare HTML-element läggs till endast för design. Jag menar span-s. För att lösa detta problem använder vi jquery. För att göra detta, ta bort alla spänner i markeringen och lägga dynamiskt till dem:

En film i parken:
Kung Fu Panda.

$ (Funktion () ($ ("H2"). Wrapinner (" "); $ (" H2 BR "). Före (" ") .Efter (" "); });