Top tag. We do in CSS top register
HTML Tags and - Substitution and Padded Text
Definition and use
Tag Determines the substitution text. The substitution text has a height of two times less and appears under the baseline. Substational text can be used when writing a chemical formula, for example H 2 O.
Tag Defines the advanced text. Padded text has a height of two times less and appears above the baseline. Padded text can be used when writing footnotes, such as WWW.
Support browsers
Tags and Supported by all major browsers.
Differences between HTML and XHTML
Standard attributes
Column Dtd. Indicates which type of document HTML 4.01 / XHTML 1.0 DTD is allowed. S \u003d STRICT, T \u003d Transitional and F \u003d Frameset.
Tags and Support the following standard attributes:
Attribute | Value | Description | Dtd. |
---|---|---|---|
class | nameKlassa | Specifies the name of the class for the element | STF. |
dir. | rTL LTR. |
Specifies the text direction for the contents in the element | STF. |
id | identifier | Indicates a unique identifier for an item | STF. |
lang. | code_ language | Specifies the language code for the contents of the item | STF. |
style. | definition_stile | Specifies the built-in style for the element | STF. |
title | text | Specifies additional information about the element | STF. |
xML: Lang. | code_ language | Defines the language code for the contents of the element in the XHTML documents | STF. |
Additional information about standard attributes.
Attributes of events
Tags and Support the following event attributes:
Attribute | Value | Description | Dtd. |
---|---|---|---|
onClick. | script | Script, launched when clicking the mouse | STF. |
ondBlClick. | script | Script started with double-clicking mouse | STF. |
onmousedown. | script | Script running when you press the mouse button | STF. |
onmousemove. | script | Script running when moving the mouse pointer | STF. |
onmouseout. | script | Script, started when the mouse pointer goes beyond the element | STF. |
onmouseover | script | Script, started when the mouse pointer moves above the element | STF. |
onmouseUp. | script | Script started when releasing the mouse button | STF. |
oNKEYDOWN. | script | Script running when you press the key | STF. |
onKeypress. | script | Script running when the key is pressed and then released | STF. |
onKeyup. | script | Script running when the key is released | STF. |
Additional information Obo
The index in relation to the text is called the symbol displacement relative to the baseline up or down. Depending on the positive or negative bias value, the index is called, respectively, the upper or lower. They are actively used in mathematics, physics, chemistry and to designate units of measurement. HTML offers two elements to create an index: (from English SuperScript) - upper index and (From English Subscript) - lower index. The text placed in one of these containers is denoted by a smaller size than the base text, and shifts relative to it up or down. Example 1 shows the sharing of these elements and styles to change the type of text.
Example 1. Creating the upper and lower index
Characteristic equation of the second degree surface
λ 3 - I. 1λ 2 + I. 2λ - I. 3 = 0
In the example, both the lower and the upper index are encountered simultaneously. To change the font of the index font, styles are used that define a single design (Fig. 1).
Fig. 1. View of indexes after applying styles
You can generally refuse to use and in favor of styles. The analogue of these elements is the Vertical-Align property that causes the text to shift vertically to the specified distance. In particular, in Example 2, 0.8EM is used as a value for the upper index and -0.5em for the lower. EM is a relative unit equal to the size of the current font. For example, 0.5EM suggests that the text must be shifted half the font size.
Example 2. Using styles for managing indexes
Polynomial degree n.
f (x) \u003d a 0 + A. 1 x + ... + a n-1. X. n-1. + A. n. X. n.
In the example, the formula itself is displayed in an increased size, the symbols of the upper index are mounted in red, and the bottom - blue (Fig. 2).
Conversion of the lowercase letters to the lower case and the first top register using CSS (8)
In CSS there is no option of the KP-offers. Other answers offering Text-Transform: Capitalize are incorrect because this parameter uses every word for each word .
Here rude way to do it if you want to the first letter of each element was in the upper case, but this is definitely anywhere next to the actual restrictions:
P (text-transform: LowerCase;) P: First-Letter (Text-Transform: UpperCase;)
This Is An Example Satence.
This is Another Example Satence. And This Is Another, But It Will Be Entirely LowerCase.
How to convert the Uppercase letter to the lower case and the first Uppercase letter for each sentence, as shown below, only with CSS?
From: This is an example of an application.
To: This is an exemplary offer.
Update: When I use Text-Transform: Capize; The result is still the same.
You can not do it solely with CSS. There is an TEXT-TRANSFORM attribute, but it only accepts None, Capitalize Uppercase, UpperCase, LowerCase and Inherit.
You may want to look at the JS solution or on the server solution.
If you can make all the characters with lower case letters on the server than you can apply:
TEXT-TRANSFORM: CAPITALIZE
I do not think that the text transformation will work with capital letters as input.
If you want to use for It will not work for or text area you need to use javascript
which should work well for or
For several lessons, we are already sophisticated with text formatting by CSS, and this time we learn to change the text register. In this regard, cascading style sheets open with us very wide opportunities, and if more precisely, we can:
- Display the entire text with capital letters;
- Highlight the entire text with lower case letters;
- Make so that the first letter of each word began from the top register.
"This is all, of course, well, but when can it be needed?" - you ask. Imagine this situation when you need to display all the menu items with capital letters. To do this, it is not necessary to type them, including the Capslock key, or holding a shift button down. It will be enough to set all the items of the list display in the upper case by creating the appropriate rule in the CSS file. And this is just one of many possible situations.
TEXT-TRANSFORM property
We will manage the text register using the TEXT-TRANSFORM property. She has 4 main values \u200b\u200b- uppercase (capital letters), LowerCase (lowercase letters), Capitalize (upper register for each first word letter, the remaining values \u200b\u200bdo not change), None (formatting does not apply). At first glance, you all may seem very difficult.
The main thing is not to panic ...
But in practice, everything is quite simple, what are you now and make sure. The main thing is to choose the correct selector, because the values \u200b\u200bof the Text-Transform property are inherited.
Selecting capital letters
First of all, I suggest to ask the entire text of the capital letters, for what we create the following CSS rule:
Body (Text-Transform: UpperCase;)
In principle, nothing complicated, we just used the UpperCase value. As they say, everything is intuitive. This is how it looks in life:
All with a capital letter ...
Lower register - apply for all
The next step let's widely apply lowercase letters, for which we write the following:
Body (Text-Transform: LowerCase;)
As you probably guessed, the two meanings with whom we just met are in some extent antonyms. And on the illustration below you can see the result of the property just created.
Web page when enabled LowerCase
We allocate the first letter of each word to the top register
To do this, it is enough for us to use the appropriate value:
Body (Text-Transform: Capitalize;)
I do not know how often you will use such a CSS rule, but it does not prevent you about such an opportunity, especially when solving nontrivial problems. The result is visible in the image below.
Text after applying Capitalize
Finally, let's briefly focus on the last value - none. As I said, it can be used to cancel inheritance from the parent. For example, imagine that we have all previous rules, and for paragraphs we should cancel them, for this we write the following:
P (TEXT-TRANSFORM: NONE;)
I dare to assume that everything is clear to you if not - ask your questions in the comments. And on this I have everything. I hope this lesson on CSS was useful for you. If it is true:
- Make a repost of this article on social networks so that more people benefit from it;
- Subscribe to my newsletter so as not to miss useful and interesting publications on the blog.
I do not say goodbye to you. Thank you for your attention to the meeting in the following publications!
CSS allows you to make a flexible text setting, which is presented using the HMTL language. Today we consider the action of the "Text-Transform" property, which gives you the ability to change the font register. This option is supported by all modern browsers and is included in the specification of all CSS versions.
Purpose
The TEXT-TRANSFORM property can take three main values \u200b\u200band two additional. For example, you can assign the top register to the entire dedicated text. Or you can give the command to the opposite previous property, where all the characters become line. You can use an appointment using any method convenient for you. For example, using embedded styles. Or you can create
Separate file with a description of all properties. What to use the method of assignment, solve only you. "TEXT-TRANSFORM" can take the following values:
- Uppercase. Makes all selected characters in capital. CSS UpperCase is often found, as this value helps to solve many complex tasks associated with the text.
- LowerCase. This property is completely opposite to the UpperCase command.
- Capitalize. Changes the register of the first letter to the top. The remaining characters will not change.
- None. Allows you to cancel all assigned values \u200b\u200b(it is necessary to predetermine the property). As a rule, this value is set by default.
- Inherit. Inherits all the properties of the parent element. It should be noted that IE does not support this property.
Application
Using CSS, the top register (or similar effects) is installed using one simple command. Therefore, there is no need to change or rewrite the entire text. If we are talking about a single-page site, then this property may not be useful. But when under your control is a huge portal, where you need to fix the register of letters in certain fragments, the "Text-Transform" becomes the only effective means. For example, you need to fix the font in the header tags "H2". To do this, add an entry: "h2 (text-transform: uppercase;)", and then all second level headers will have the top register.
Features
Some may believe that manual text processing and changing the font using the Text-Transform property does not have any differences. But it is not. If you change manually to the uppercase (top register), 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 is only visually for users changing the font. But in reality, the characters remain unchanged. This happens with all the values \u200b\u200bof this property. Copy information (text) will have an initial register, which is used in the source code of the page. This is the only difference between manual processing and using CSS commands.
No matter what you want to use - the bottom or top register, the main thing, do not forget the purpose. For example, if you are needed only with a decorative goal, you can safely apply the Text-Transform property. Well, if you know that your users will surely copy the information posted, it is best to manually change the register of the entire text. After all, sometimes readers do not notice such a font substitution. This is especially critical when it comes to important documents and similar information.