CSS allows flexible customization of text, which is represented using the HMTL language. Today we will look at the effect of the "text-transform" property, which makes it possible to change the case of the font. This option is supported by all modern browsers and is included in the specification for all versions of CSS.
Purpose
The "text-transform" property can take three main values and two additional ones. For example, you can assign upper case to all selected text. Or you can give a command opposite to the previous property, where all characters become lowercase. You can make an appointment using any method convenient for you. For example, using inline styles. Or you can create
A separate file with a description of all properties. Which assignment method to use is up to you. "Text-transform" can take the following values:
- uppercase. Makes all selected characters capitalized. In CSS, uppercase is a common occurrence, as this value helps solve many complex text-related tasks.
- lowercase. This property is completely opposite to the uppercase command.
- capitalize. Changes the case of the first letter to uppercase. The rest of the characters will not change.
- None. Allows you to undo all assigned values (required to predefine a property). Typically, this value is set by default.
- Inherit. Inherits all properties from parent element. Note that IE does not support this property.
Application
WITH using CSS upper case (or similar effects) is set with one simple command. Therefore, there is no need to change or rewrite the entire text. If we are talking about a one-page site, then this property may not be useful. But when you have a huge portal under your control, where you need to correct the case of letters in certain fragments, then "text-transform" becomes the only effective means. For example, you need to fix the font in the "h2" title tags. To do this, add the entry: "h2 ( text-transform: uppercase; )", and then all second-level headings will be uppercase.
Peculiarities
Some may think that manually processing text and changing the font using the "text-transform" property makes no difference. But it's not. If you change it manually to uppercase (uppercase), then when copying this information from your site, the characters will remain unchanged. If you use the CSS language, then everything happens differently. The "text-transform" property only visually changes the font for users. But in reality, the symbols remain unchanged. This happens to all values of this property. The copied information (text) will have the original case, which is used in source code pages. This is the only difference between manual processing and using CSS commands.
It doesn't matter which one you want to use - lower case or upper case, the main thing is not to forget the purpose. For example, if you only need changes for a decorative purpose, then you can safely use the "text-transform" property. Well, if you know that your users will probably copy the information you posted, then it is best to manually change the case of all text. Indeed, sometimes readers do not notice such a substitution of the font. This is especially critical when it comes to important documents and similar information.
The index in relation to the text is the offset of characters relative to the baseline up or down. depending on the positive or negative value offset, the index is called, respectively, the upper or lower. They are actively used in mathematics, physics, chemistry and to denote units of measurement. HTML offers two elements to create an index: (from English superscript) - superscript and (from English subscript) - subscript. Text placed in one of these containers is indicated by a smaller size than the base text, and is moved up or down relative to it. Example 1 shows how these elements and styles are combined to change the look of text.
Example 1: Creating a Superscript and a Subscript
Superscript and subscript .formula ( font-size: 1.4em; /* Formula text size */ ) sup, sub ( font-style: italic; /* Italic */ color: red; /* Character color red */ ) sub ( color: blue; /* Blue character color */ )
Characteristic equation of the surface of the second degree
λ3 - I1λ2 + I2λ - I3 = 0
In the example, both subscript and superscript occur at the same time. To change the font style of the index, styles are applied that define a single design (Fig. 1).
Rice. 1. The appearance of indexes after applying styles
You can generally refuse to use and in favor of styles. An analogue of these elements is the vertical-align property, which makes the text move vertically by a given distance. In particular, example 2 uses 0.8em for the top index and -0.5em for the bottom index as the value. Em is a relative unit equal to the size of the current font. For example, 0.5em means that the text should be shifted by half the font size.
Example 2: Using Styles to Manage Indexes
Superscript and subscript .formula ( font-size: 1.6em; /* Text size */ font-style: italic; /* Italic */ ) .sup, .sub ( font-style: normal; /* Normal * / font-size: 0.6em; /* Index size */ color: red; /* Superscript color */ vertical-align: 0.8em; /* Shift text up */ ) .sub ( color: blue; /* Color subscript */ vertical-align: -0.5em; /* Shift text down */ )
Polynomial of degree n
f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn
In the example, the formula itself is displayed in an enlarged size, the superscript characters are set to red, and the lower ones are blue (Fig. 2).
Hello. Sometimes when creating web pages, you need to set certain words using css to uppercase or superscript. Let's see how it's done.
Upper and lowercase with cssIn general, today you can enclose the desired text in tags and get the desired display, but let's also see how this can be done using css, because the technique is slightly different.
For example, you need to write the formula H 2 O in an html document. This is done like this:
- The formula itself is written
- Those words and numbers that need to be displayed in the upper or lower index are enclosed in a span tag, which needs to be assigned some class. For example: characters to be output
- In css you need to set this element:
Top-index(
vertical-align: super;
}
This property controls the vertical alignment of the text. Its value super specifies that the text is displayed in superscript. But the font size remained the same as that of regular text. To make things look prettier, you should also set the font size a little smaller with the font-size property.
This is just how the property works. Accordingly, to output in a lower index, you need to write like this:
Top-index(
Vertical-align: sub;
}
The difference from similar html tags is that these rules do not change the font size, so if you need to do this, you will have to write a new size in the style sheet.
That's all you need to know about superscript and subscript in css. None additional features property does not give, and they are not needed. If you wish, you can arrange this text in some special way, but this is rarely necessary.
Where can be usefulSuperscript and subscript text can be used when writing formulas, adding notes and notes to articles. For example, on Wikipedia, sources and notes are given for each article. In the course of the article, they are arranged in the form of small superscript marks. This does not irritate readers and at the same time allows you to give the articles the desired look.
The property is fully cross-browser and is supported in all versions of CSS.
Converting a lowercase letter to lowercase and first uppercase using CSS (8)
There is no cap clause option in CSS. Other answers suggesting text-transform: capitalize are wrong because this setting uses every word for every word .
Here rude a way to do this if you want the first letter of each element to be uppercase, but that's definitely nowhere near the actual limits:
P ( text-transform: lowercase; ) p:first-letter ( text-transform: uppercase; )
THIS IS AN EXAMPLE SENTENCE.
THIS IS ANOTHER EXAMPLE SENTENCE. AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE.
How to convert UPPERCASE letter to lowercase and first Uppercase letter for each sentence like below only with using CSS?
From: THIS IS A SAMPLE APP.
To: This is a sample sentence.
Update: when i use text-transform: capize; The result is still the same.
You can't do it purely with CSS. There is a text-transform attribute, but it only accepts none , capitalize uppercase , uppercase , lowercase , and inherit .
You might want to look into a JS solution or a server-side solution.
If you can make all characters lowercase on the server than you can apply:
Text-transform: capitalize
I don't think text conversion will work with capital letters as input.
If you want to use for it won't work, for or textarea you need to use Javascript
function capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )
which should work well for or
