Windows.  Virus.  Bärbara datorer.  Internet.  Kontor.  Verktyg.  Förare



Konvertera gemener till gemener och första versaler med använder CSS (8)

Det finns inget cap-klausulalternativ i CSS. Andra svar som föreslår textomvandling: versaler är felaktiga eftersom det här alternativet använder varje ord för varje ord .

Här ohyfsad Ett sätt att göra detta är om du vill att den första bokstaven i varje element ska vara versal, men det är definitivt inte i närheten av de faktiska begränsningarna:

P ( text-transform: gemener; ) p: första bokstav ( text-transform: versaler; )

DETTA ÄR EN EXEMPEL MENING.

DETTA ÄR EN ANNAN EXEMPELMENING.

OCH DETTA ÄR EN ANNAN, MEN DET KOMMER ATT VARA HELT SMÄRT. Hur man konverterar bokstaven VERSALER till gemener och den första bokstaven i versaler för varje mening som visas nedan, endast med?

använder CSS

Från: DETTA ÄR EN EXEMPELAPPLIKATION.

Till: Detta är en exempelmening.

Uppdatering: När jag använder text-transform: capize; Resultatet är fortfarande detsamma.

Du kan inte göra detta enbart med CSS. Det finns ett text-transform-attribut, men det accepterar bara inga , versaler , versaler , gemener och ärv .

Du kanske vill titta på en JS-lösning eller en lösning på serversidan.

Om du kan göra alla tecken med små bokstäver på servern kan du använda:

Textomvandling: versal Jag tror inte att textkonvertering kommer att fungera med med versaler

som input.

Om du vill använda för kommer det inte att fungera, för eller textarea måste du använda Javascript

function capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )

som borde fungera bra för eller CSS låter dig producera flexibel inställning text som representeras med HMTL-språket. Idag kommer vi att titta på effekten av egenskapen "text-transform", vilket gör det möjligt att ändra teckensnittets skiftläge. Detta alternativ stöds av alla moderna webbläsare

och ingår i specifikationen för alla versioner av CSS.

Egenskapen "text-transform" kan ha tre huvudvärden och ytterligare två. Till exempel kan du tilldela versaler till all vald text. Eller så kan du ge kommandot motsatsen till föregående egenskap, där alla tecken blir gemener. Du kan boka tid med vilken metod som helst som passar dig. Till exempel att använda inline-stilar. Eller så kan du skapa

En separat fil med en beskrivning av alla egenskaper. Vilken tilldelningsmetod du ska använda är upp till dig. "Text-transform" kan ha följande värden:

  • Versal. Får alla valda tecken att skriva stora bokstäver. Versaler är vanligt i CSS eftersom detta värde hjälper till att lösa många problem. komplexa uppgifter relaterat till texten.
  • Små bokstäver. Den här egenskapen är helt motsatt till kommandot med versaler.
  • Kapitalisera. Ändrar skiftläge för den första bokstaven till versaler. De återstående tecknen kommer inte att ändras.
  • Ingen. Låter dig ångra alla tilldelade värden (behövs för att fördefiniera en egenskap). Vanligtvis är detta värde inställt som standard.
  • Ärva. Ärver alla egenskaper från det överordnade elementet. Det bör noteras att IE inte stöder denna egenskap.

Ansökan

Med CSS ställs versaler (eller liknande effekter) in med ett enkelt kommando. Därför finns det inget behov av att ändra eller skriva om all text. Om vi pratar om om en ensidig webbplats, kanske den här egenskapen inte är användbar. Men när du kontrollerar en enorm portal där du behöver korrigera skiftläge för bokstäver i vissa fragment, då blir "textomvandling" det enda effektiva verktyget. Till exempel måste du fixa typsnittet i rubriktaggarna "h2". För att göra detta måste du lägga till posten: "h2 ( text-transform: versaler; )", och sedan kommer alla andra nivåns rubriker att vara versaler.

Egenheter

Vissa kanske tror att manuell bearbetning av text och ändra teckensnitt med "text-transform"-egenskapen inte gör någon skillnad. Men det är inte sant. Om du manuellt ändrar till versaler (versaler) kommer tecknen att förbli oförändrade när denna information kopieras från din webbplats. Om du använder CSS-språket händer allt annorlunda. Egenskapen "text-transform" ändrar endast teckensnittet visuellt för användarna. Men i verkligheten förblir symbolerna oförändrade. Detta händer för alla värden av denna fastighet. Den kopierade informationen (texten) kommer att ha originalfodralet som används i källkod sidor. Detta är den enda skillnaden mellan manuell bearbetning och att använda CSS-kommandon.

Det spelar ingen roll vilken du vill använda - gemener eller versaler, det viktigaste är att inte glömma syftet. Till exempel, om du bara behöver ändringar för dekorativa ändamål, kan du säkert använda egenskapen "text-transform". Tja, om du vet att dina användare förmodligen kommer att kopiera informationen du lägger upp, så är det bäst att manuellt ändra skiftläge för all text. När allt kommer omkring, ibland märker inte läsarna en sådan typsnittsersättning. Detta är särskilt viktigt när det kommer till viktiga dokument och liknande information.

Indexet i förhållande till texten är förskjutningen av tecken i förhållande till baslinjen uppåt eller nedåt. Beroende på det positiva eller negativa värdet av offset, kallas indexet övre respektive lägre. De används aktivt inom matematik, fysik, kemi och för att beteckna måttenheter. HTML erbjuder två element för att skapa ett index: (från engelska upphöjd) - upphöjd och (från engelska nedsänkt) - nedsänkt. Text placerad i en av dessa behållare är betecknad mindre storlekän bastexten och skiftas uppåt eller nedåt i förhållande till den. Exempel 1 visar delning angivna element och stilar för att ändra utseendet på texten.

Exempel 1: Skapa en upphöjd och en nedsänkt

Upphöjd och nedsänkt .formula ( font-size: 1,4em; /* Formel textstorlek */ ) sup, sub ( font-style: italic; /* Kursiv */ färg: röd; /* Röd färg på tecken */ ) sub ( färg: blå; /* Blå färg på tecken */ )

Karakteristisk ekvation för en yta av andra graden

λ3 - I1λ2 + I2λ - I3 = 0

I exemplet visas både nedsänkt och upphöjd text samtidigt. För att ändra indexteckensnittsstilen används stilar som anger enhetlig design(Fig. 1).

Ris. 1. Visa index efter applicering av stilar

Du kan vägra att använda dem helt och hållet till förmån för stilar. En analog av dessa element är egenskapen vertikal-align, som gör att texten flyttas vertikalt med ett specificerat avstånd. Specifikt, i exempel 2, används 0,8em som värde för exponent och -0,5em för den nedersta. Em är en relativ enhet lika med storleken på det aktuella teckensnittet. Till exempel anger 0,5 em att texten ska förskjutas med halva teckenstorleken.

Exempel 2: Använda stilar för att hantera index

Upphöjd och nedsänkt .formula ( teckenstorlek: 1,6em; /* Textstorlek */ teckensnittsstil: kursiv; /* Kursiv stil */ ) .sup, .sub ( teckensnittsstil: normal; /* Normal stil * / font-size: 0.6em; /* Indexstorlek */ färg: röd /* Superscript color */ vertikal-align: 0.8em /* Shift text up */ .sub ( färg: blå; /* Color subscript; vertical-align: -0.5em /* Flytta texten nedåt */ )

Polynom av grad n

f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn

I exemplet visas själva formeln i en förstorad storlek, de upphöjda symbolerna är inställda i rött och de lägre i blått (Fig. 2).

I den senaste videolektionen lärde vi oss hur man tar bort och lägger till ny information ny version HTML-dokument, samtidigt som du rapporterar detta sökmotorer och framhäva visuellt så att besökarna också kan se förändringarna. För detta använde vi del och ins-taggar.

I den här självstudievideon fortsätter vi ämnet formatering av text i ett HTML-dokument. Vi ska titta på två HTML-taggar som anger textens upphöjda och nedsänkta text.

sup HTML-taggen är upphöjd text i HTML.

En HTML-tagg är utformad för att indikera upphöjd text i HTML. I vissa webbplatsämnen är den här taggen helt enkelt oersättlig. Till exempel, om du har, eller planerar, en webbplats relaterad till någon formler, matematisk eller kemisk. Eller, om du har en byggrelaterad webbplats, kommer taggen att vara mycket användbar och kommer att hjälpa när du formaterar artiklar, när du skriver formler eller andra kvantiteter, till exempel kvadratmeter i konstruktionsämnen.

Men om din webbplats inte relaterar till de angivna ämnena, betyder det inte att taggen inte kommer att vara användbar. Det räcker med att visa fantasi och uppfinningsrikedom och hitta en användning för detta element.

HTML-undertagg är en nedskrivning av text i HTML.

När det gäller HTML-taggen är den motsatsen till taggen, och är ansvarig för att indikera textens subscript. Nedsänkt text kan användas när du skriver formler eller matematiska ekvationer. Men förutom detta kanske du kan hitta andra användningsområden för taggen.

Nästa videolektion är tillägnad ytterligare två taggar, som i vissa situationer helt enkelt kan vara oersättliga. Dessutom kan de inte bara formatera text, till exempel i en artikel, utan också när de indikerar olika information på webbplatsen under sidlayout. En av taggarna utför översättningen till HTML, och den andra drar en horisontell linje.

HTML-taggar och - Nedsänkt och upphöjd textdefinition och användning

Taggen definierar nedsänkt text. Sublinjär text är halva höjden och visas under baslinjen. Interlinjär text kan användas när du skriver kemiska formler, såsom H 2 O.

Taggen anger upphöjd text. Upphöjd text är halva höjden och visas ovanför baslinjen. Upphöjd text kan användas när du skriver fotnoter, till exempel WWW.

Webbläsarstöd

Taggar stöds av alla större webbläsare.

Skillnader mellan HTML- och XHTML-standardattribut

DTD-kolumnen anger i vilken dokumenttyp HTML 4.01/XHTML 1.0 DTD-attributet är tillåtet. S=Strikt, T=Transitional och F=Frameset.

Taggar stöder följande standardattribut:

Attribut Värde Beskrivning DTD
klass klassnamn Anger klassnamnet för elementet STF
dir rtl
ltr
Anger textriktningen för innehållet i ett element STF
id identifierare Anger en unik identifierare för ett element STF
lang språkkod Anger språkkoden för elementets innehåll STF
stil style_definition Anger en inline-stil för ett element STF
titel text Indikerar ytterligare information om elementet STF
xml:lang språkkod Definierar språkkoden för elementinnehåll i XHTML-dokument STF

Mer information om standardattribut.

Händelseattribut

Taggar och stödjer följande händelseattribut:

Attribut Värde Beskrivning DTD
onclick manus Skriptet startas vid musklick STF
ondblklick manus Dubbelklicka på skript STF
onmousedown manus Skript som körs när musknappen trycks ned STF
onmousemove manus Skript som körs när muspekaren flyttas STF
onmouseout manus Skript som körs när muspekaren rör sig utanför ett element STF
på musen över manus Skript körs när muspekaren rör sig över ett element STF
onmouseup manus Skript som körs när musknappen släpps STF
onkeydown manus Skript körs på tangenttryckning STF
onkeypress manus Skript körs när en tangent trycks ned och sedan släpps STF
onkeyup manus Skript som körs när nyckeln släpps STF

Mer information om



Om du upptäcker ett fel markerar du ett textstycke och trycker på Ctrl+Enter
DELA: