This study material mainly explains:
How to use CSS style definition method to describe the usage of text .
Section (1): Set the text style with CSS.
a , understand the production of text, use CSS style to define layout.
1. Color definition, background color of text
(1) There are four ways to define colors in CSS:
One, with the name of the color;
such as:h1{color:red;}
Two, in hexadecimal number;
such as:H1{color: #FF0000;}
Three, set the color with RGB integer;
such as:h1{Color:rgb (255,0,0)}
Four, set the color in RGB percentage;
such as:h1{Color:rgb (0%,0%,100%)}
(2) Set the background color of the text as follows:
h1{
Background: #000; */* Black * /
color:white; * * White * /
}
2. Length Unit
In CSS, the size of the text settings, the image of the length of the settings, there are many options to set, can be used in a variety of length units, but mainly divided into two categories, one is the relative type, the other is the absolute type.
<1> Relative types
(1) "px" Pixels:
Depending on the resolution of the display device, it represents a different length, so it belongs to a relative type.
For example: In the resolution of 1024x768 to set a picture of the height of the high px, the same size of the display for the 1366*768 resolution, you will find that the picture is relatively small.
<2> Absolute Type
"Absolute": represents the same length regardless of the resolution of the display device.
* * In Web page production has been default in pixel-scale units, if not scaled units, the browser will default in pixels display.
3, set the text.
(1) font, (2) tilt, (3) bold, (4) size, (5) English letter case conversion,
(6) decoration effect, (7) Paragraph first line indent,(8) Word spacing, (9) The text line inside the paragraph is high
(10) The distance between paragraphs, (11) The horizontal position of the text
(1) Setting font for text
In CSS, the font for text is set by using the font-family property. Next, "Feel free" to prepare a small section of the page of the article , to explain the font of the text set.
As follows:
* * * * * HEAD Code omitted * * *
<body>
Kangxi
<p> The Kangxi Emperor ( May4,1654–december -,1722is the third Emperor of the Manchu Qing dynasty, and the second Qing Emperor to rule over all of China, from 1661To1722.</p>
<p>Aixinjueluo Xuan Ye (Möllendorff de: Hiowan yei,1654 May 4-December 20, 1722), the fourth emperor of the Qing Dynasty, Qing Dynasty after the second emperor of Beijing. ERA name "Kangxi" [1], hereafter called the Emperor Kangxi. Mongolian people called Nkhaamuguran (Enkh Amgahan) or Amugulang (Mongolian "peace and quiet" meaning, for the Chinese "Kangxi" translation). Emperor Kangxi was the defender of China's unified multi-ethnic State, laying the foundation for the flourishing of the Qing dynasty and creating the situation of Kang-gan flourishing, [2] By later generations of scholars as the "eternal One Emperor" [3-5], Xiaozong St Julien, posthumous, and the Wu Gong Thrifty generous good faith merit Cheng Ren Emperor, buried in the king Mausoleum. </p>
</body>
Css:
<style type= "Text/css" >h1{font-family: black body;}p{ font-family:Arial, "Times New Roman"}
</style>
The above CSS statement declares the HTML page ("A small piece of article pages") with the font name of the H1 title and text paragraph in bold, and the name of the two fonts in the text paragraph.
Arial font and Times New Roman font, respectively. It means to tell the browser to first look for Arial font on the visitor's computer, and if not, look for the Times New Roman font,
If the visitors do not have both fonts on their computers, they are displayed using the browser's default font.
(first case chart):
As you can see in the case diagram, the font in the title and the first body paragraph has changed, and the second paragraph is in Chinese, so the English font is not valid for Chinese in this paragraph.
The Font-family property can declare multiple fonts at the same time, as long as the fonts are separated by commas .
(2) set the tilt of text
In CSS, the italic effect of setting text is achieved by using the Font-style property. The tilt of the text is not true by the text "pull the oblique" implementation, in fact, the italic font itself is a separate existence of the font.
The Font-style property controls the font tilt, which can be set to normal, Italian, italic, and three styles as follows:
font-style:normal; /* Normal */ Font-style:oblique; /* Italian Body */ font-style:italic; /* Tilt */
You can use the above page ( first case list ) in the first paragraph that set an ID selector to try, here is not detailed explanation.
(3) Set the text bold
In CSS, the bold effect of setting text is achieved by using the Font-weighT property.
The Font-weight property is the thickness of the control text, which can be set to, bold, as follows:
font-weight:normal; /* Normal */ font-weight:bold; /* Bold */
(4) Control the size of the text
In CSS, the effect of controlling the size of text is achieved by using the font-size property.
as follows: font-size:15px;
(5) English letter case Conversion
In CSS, the English letter case conversion is accomplished by using the Font-transfrom property, which can be set to capitalize the first letter of the word, all uppercase letters, all lowercase letters, as follows:
P.one {Font-transfrom:capitalize;} /* capitalize the first letter of the word */ p.two{font-transfrom:upercase;} /* All letters capitalized */ P.three {font-transfrom:lowercase;} /* All Letters lowercase */You can use the above page (the first case list ) in the first paragraph that set an ID selector try to capitalize the initial letter, here is not detailed explanation.
(6) The decoration of the text
In CSS, text underline , strikethrough and top line a variety of decorative effects are achieved by using the text-decoration property.
text-decoration:none; /* normal display */ text-decoration:underline; /* underline text text-decoration:line-through; /* for text and strikethrough */ text-decoration:overline; /* top line for text text-decoration:blink; /* text flashes, only some browsers support */
This property can set multiple property values at the same time, separated by a space. such as:h1{text-decoration:underline overline; }
(7) Indent in first line of paragraph
In CSS, there is a special Text-decoration property that controls the distance between the first line of the paragraph and the indentation.
#p2 {text-decoration:2em;}You can use the second paragraph in the "first case diagram" above to set it as follows: (red circle there)
(8) Set word spacing
In CSS, you can control the spacing between letters and words, respectively, by using the letter-spacing and word-spacing properties.
letter-spacing:-1px;word-spacing:-2px;
If you want to set the distance between text, you need to set the Letter-spacing property instead of the Word-spacing property.
(9) Set the text line height inside the paragraph.
In CSS, the control of the distance between rows and rows is achieved through the Line-height property.
. P2 {line-height:4;}As follows:
You can see that the distance between the lines and lines of the inner text of the second paragraph is greater than the distance between the lines and lines of the text inside the first paragraph.
(10) The distance between paragraphs
In CSS, setting the distance between paragraphs is achieved through the margin property. Margin/* outer margin */
P {margin:50px 0px; /* up and down distance is 5 pixels *//////// * 0 pixels/*}The previous effect has not been set:
The effect after setting:
The contrast between the two graphs clearly shows that the distance between paragraphs is different.
(11) Horizontal position of text
In CSS, the horizontal position of the control text is implemented by the Text-align property.
left /* left-aligned, also the default for the browser */ Right /* Align Right */ Center /* Center Alignment */ Justify /* Justify on both sides */
This is not a detailed introduction ...
(3) Text style
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
