The uppercase html tag. Capitalizing on css styles using pseudo elements. Cultural monument of the Middle Ages
Good day, geeks of site building. In today's publication, we will consider a topic related to the design of text content. That is why you will learn how to set capital letters by css - by means, get acquainted with several options for creating a drop cap and of course you can try everything in practice. Now let's get down to the fun part!
Let's transform the text
With cascading style sheets, you can change both the first character of the block and the entire text. I'll show you how you can do both. Moreover, all the tools named in this article are supported in three language levels: css1, css2, css2.1 and css3.
I'll start with an interesting property that modifies all text content in the selection. it text-transform.
The named element can convert characters to uppercase, lowercase, and also capitalize every first character of the word. I wrote more about the values \u200b\u200bin the table.
Now, to consolidate the theoretical material, take an example.
Attention!
! Discount on all beauty products tomorrow!
The promotion is valid in all branches located in your city.
Create a drop cap
If you do not know what the term “drop cap” means, then it’s time to find out, as it is directly related to the current topic.
The initial letter (or sometimes they say the initial) is the first letter of the chapter, which differs from the rest in its large size, color and, in some cases, even font design. In real life, an example of such a letter can be found in old manuscripts and books.
There are several ways to create an initial. Often a character is distinguished with a markup language tag and after that, certain properties are prescribed in the styles that modify it. This is a good way, but this publication talks about css mechanisms (which, in my opinion, in this case are much more logical and convenient to use).
To solve the problem, you can use a tool such as.
So, in this case: first-letter is used. Like all pseudo-elements, it is assigned to the selector, separated by colons. After, according to all the rules of style sheets, properties are specified. However, you can only apply properties related to editing fonts, padding, color, background, margins, and borders.
I propose to consider a specific example. While implementing the presented small program, I decided to make not just a colored drop cap, but fill it with flowers. To do this, you need to use a few tricky tricks with setting the font color to transparent and filling the letter with the selected image.
This paragraph contains a sentence with very interesting content.
Let's continue an interesting story in the next paragraph.
The result looks very attractive and unusual, which is the perfect solution for.
As you can see, this topic is very simple. You can easily use the code given by me for your web resources, modifying and adjusting to your style.
If the presented material was useful to you, then subscribe to updates on my blog and do not forget to share the knowledge gained (and of course a link to my blog) with your friends. Good luck!
Bye Bye!
Best regards, Roman Chueshov
In html, font size plays an important role. It allows you to draw the user's attention to important information posted on the website page. Although not only the size of the letters is important, but also their color, thickness and even family.
Tags and attributes when robot with html fonts
Hypertext language has a large set of tools for working with fonts. After all, it is text formatting that is the main task of html.
The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.
Consider the tags that are used to work with fonts in html and their attributes. The main one is the tag ... Using the values \u200b\u200bof its attributes, you can set several characteristics of the font:
- color - sets the color of the text;
- size - font size in conventional units.
Positive attribute values \u200b\u200bfrom 1 to 7 are supported.
- face - used to set the font family of the text to be used inside the tag ... Several values \u200b\u200bare supported at once, separated by commas.
Only the text between the parts of the paired font tag is formatted. The rest of the text is displayed in the standard default font.
Also in html there are a number of paired tags that specify only one formatting rule. These include:
- - sets bold font in html. Tag the action is similar to the previous one;
- - the size is larger than the default;
- - smaller font size;
- - italicized text. Similar tag ;
- - underlined text;
- crossed out;- - display text only in lower case;
- - in upper case.
Plain text
Thumbnail
Thumbnail
More than usual
Less than usual
Italics
Italics
Underlined
Crossed out
Style attribute capabilities
In addition to the described tags, there are several more ways to change the font in html. One of them is using the generic style attribute. Using the values \u200b\u200bof its properties, you can set the font display style:
1) font-family - property sets the font family. Enumeration of several values \u200b\u200bis possible.
Changing the font in html to the next value will happen if the previous family is not installed on the user's operating system.
Writing syntax:
font-family: font name [, font name [, ...]]
2) font-size - the size is set from 1 to 7. This is one of the main ways you can increase the font in html.
Writing syntax:
font-size: absolute size | relative size | value | interest | inherit
You can also set the font size:
- In pixels;
- In absolute value ( xx-small, x-small, small, medium, large);
- In percents;
- In points (pt).
Font-size: 7
Font-size: 24px
Font-size: x-large
Font-size: 200%
Font-size: 24pt
3) font-style - sets the style of writing the font. Syntax:
font-style: normal | italic | oblique | inherit
Values:
- normal - normal spelling;
- italic - italic;
- oblique - right-leaning font;
- inherit - inherits the spelling of the parent element.
An example of how to change the font in html using this property:
font-style: inherit
font-style: italic
font-style: normal
font-style: oblique
4) font-variant - converts all uppercase letters to uppercase. Syntax:
font-variant: normal | small-caps | inherit
An example of how to change the font in html with this property:
font-variant: inherit
font-variant: normal
font-variant: small-caps
5) font-weight - allows you to set the thickness of the writing of the text (saturation). Syntax:
font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Values:
- bold - sets the html bold font;
- bolder - fatter relative to normal;
- lighter - less saturated relative to normal;
- normal - normal spelling;
- 100-900 - sets the font thickness in numeric equivalent.
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: normal
font-weight: 900
font-weight: 100
The font property and html font color
Font is another container property. Internally, it combined the values \u200b\u200bof several properties designed to change fonts. The font syntax is:
font: font-size font-family | inherit
Also, fonts used by the system in inscriptions on various controls can be set as a value:
- caption - for buttons;
- icon - for icons;
- menu - menu;
- message-box - for dialog boxes;
- small-caption - for small controls
- status-bar - status bar font.
font: icon
font: caption
font: menu
font: message-box
small-caption
font: status-bar
font: italic 50px bold "Times New Roman", Times, serif
In order to set the font color in html, you can use the color property. It allows you to set the color using both a keyword and rgb format. And also in the form of a hexadecimal code.
Controls the conversion of element text to uppercase or lowercase characters. When the value is other than none, the case of the source text will be changed.
short information
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of value. | <размер> |
| A && B | The values \u200b\u200bmust be displayed in the order shown. | <размер> && <цвет> |
| A | B | Indicates that only one of the suggested values \u200b\u200bshould be selected (A or B). | normal | small-caps |
| A || B | Each value can be used alone or in conjunction with others in any order. | width || count |
| Groups values. | [crop || cross] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times, separated by commas. | <время># |
The values
capitalize The first character of each word in the sentence will be capitalized. The rest of the symbols do not change their appearance. lowercase All text characters become lowercase (lowercase). uppercase All text characters are uppercase (uppercase). none Does not change case.
Sandbox
Winnie the Pooh was always not averse to a little refreshment, especially at eleven o'clock in the morning, because at this time breakfast had long since ended, and dinner had not even thought to begin. And, of course, he was terribly happy to see Rabbit taking out cups and plates.
div (text-transform: capitalize;)
Example
Cultural monument of the Middle Ages
The Amazonian lowlands take on a small transport of cats and dogs, and Hayosh Bay is famous for its red wines.
The result of this example is shown in Fig. 1.
Figure: 1. Applying the text-transform property
Object Model
An object.style.textTransform
Specification
Each specification goes through several stages of approval.
- Recommendation - This specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it is in line with its objectives, but the help of the developer community is required to implement the standard.
- Proposed Recommendation ( Suggested recommendation) - At this point, the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of the draft, after discussion and revision for community review.
- Editor "s draft ( Editorial draft) - a draft version of the standard after editing by the project editors.
- Draft ( Draft specification) is the first draft of the standard.
Often in a hurry when adding materials to the site or, for example, creating a new topic on the forum, the user can start writing a sentence (title) with a small (lowercase) letter. This is to some extent a mistake.
I'll show you several options for solving this problem: PHP and CSS are more suitable for already published materials, when how jQuery can fix the situation even before publication.
The first letter of a string is uppercase in PHP
In PHP there is a function called “ ucfirst", Which just converts the first character of the string to uppercase, but its minus is that it does not quite work correctly with Cyrillic.
For this, we will write our own small function. The implementation will look like this:
In this version, we will receive a sentence that begins with a capital letter, which, in fact, is what we need.
The first letter of a string is uppercase in CSS
This method visually (that is, in the source code of the site, the offers will appear as is) also converts the first character to uppercase.
Usage is as follows:
first sentence
second sentence
third sentence
fourth sentence
Using the pseudo-element " first-letter"And properties" text-transform»We have set the appearance for each first letter of the paragraph.
The first letter of a string is uppercase in jQuery
As I said earlier, this conversion method is best suited for materials that are yet to be published.
As an example, we will take a text field (it will act as a field for entering a title for us) and write a small script for it that, when entering a sentence with a lowercase letter, makes it with a capitalization:
The script works both when writing text and simply pasting it. Do not forget that for the scripts to work on your site, you must have the jQuery library connected.
A drop cap is the first letter of a paragraph that is larger than the rest and is placed so that its top is at the level of the first line of the paragraph. In the image, you can see an example of a drop cap embedded in the text.
By the way, WordPress has a special plugin (wordpress.org/extend/plugins/drop-caps) that allows you to automatically create embedded in the text (and offset down) capital letters... Wonderful! However, what if you don’t want to use a plugin (I’m sure you don’t) and you just need to create a drop cap for several posts, and perhaps in a specific location?
The good news: you don't need to use a plugin to create capital letters, all you need is a little css and a span tag. Open your css file and add the following code:
Span.dropcaps (font-family: Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0.09em; position: relative;)
Something like this. Of course, you will need a style that matches your design and text. For example, the property values: font-size, margins and line-height will need to be selected based on your design and text.
Span tag
In order for the style to be applied to the capital letter of the text, you need to "wrap" the capital letter in the span tag and write the appropriate class.
A
Pseudo-element: first-letter
You can also style the first character in the text using the: first-letter pseudo-element. However, a limited number of properties can be applied to the: first-letter pseudo-element: these are properties related to font, color, background, borders, margins, and padding. It should also be noted that the: first-letter pseudo-element will not work in older browsers.
P: first-letter (font-family: Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -right: 0.09em; position: relative;)
Here are a couple of editing methods. capital letters using CSS.