Home > Developer > Web Develop
First, CSS control paragraph
Description: The P tag in HTML is generally the detailed text content on the webpage, here we create 2 p tag, and copy two small piece of news on the net, if we don't use CSS to control text content, open effect is like this:
We can see that the text content and we usually read in the online news paragraph is obviously different, the following we use CSS to control the text:
The code examples are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<TITLE>CSS Control paragraph </title>
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" />
<meta name= "description" content= "Give me a new object Http://www.cnblogs.com/HOYF"/>
<style>
#p1 {
text-indent:35px;/* Control the indentation of text * /
/ * Controls the center of text, right-aligned, left-aligned, respectively
Text-align:center;
Text-align:right;
Text-align:left;
*/
text-decoration:underline;/* Control the decorative effect of text, underline underline, overline underline, Line-through strikethrough * /
letter-spacing:3px;
}
#p2 {
text-indent:35px;
letter-spacing:3px;/* control the spacing between text */
}
</style>
<body>
<p id= "P1" >2016 Spring Festival Gala director Lu Yitao Hair Weibo, said six young children Miss Spring Festival gala was fan bombing, 2016 Spring Festival Gala director Lu Yitao released a micro Bo said six little age children will not on the Spring Festival Gala, suddenly aroused the overwhelming echo of the vast number of netizens, why not let the Monkey King six young children on the Monkey Spring Festival gala? What is the reason for six young children to miss the gala? Monkey Spring Festival Gala not look at six small age children's Day to see what? These questions and anger occupy the comments of the 2016 Spring Festival Gala director Lu Yitao Weibo. </p>
<p id= "P2" > Six young children this year did not receive the Spring Festival Gala invitation, just ahead of recording the drama Gala. In fact, this year is monkey, is also the 86 "Journey to the Monkey" premiere of the 30th anniversary, I feel that CCTV does not know what the audience really want to see. This "Journey to the world" accompanied our entire childhood, to see the TV show behind the little-known stories, the crew of the staff more admiration! </p>
</body>
CSS Control post effects:
Through the CSS control, we can obviously see than not modified the appearance of a lot.
Summary:
Use CSS to control P tags:
Control the indentation of text: text-indent:35px;
Control the alignment of text: Text-align:center | Right | Left
Decorative lines for controlling text: Text-decoratio:underline | overline | Line-through (underline, underline, strikethrough, etc.)
Control spacing between text: letter-spacing:3px;
More text control can be found in the CSS Open manual for testing.
Second, CSS control text size, font type, text color
Description: Here we create two div set ID test1,test2, and give them a text content, here we set him a poem. The effect is this:
Below we use CSS to control, analyze the change of text color, size, font type
The sample code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title>css Control text </title>
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" />
<meta name= "description" content= "Give me a new object Http://www.cnblogs.com/HOYF"/>
<style>
#test1 {
Color:blue;
font-style:italic;/* Italic * /
font-weight:bold;/* Bold * /
font-size:23px;
line-height:60px/* Line Height * /
}
#test2 {
font-family:sans-serif;/* Font Type: New song, Blackbody and so on, if the browser that opens the program does not have a font set, it will appear by default, in order of precedence. separated by commas. If the font name contains spaces, then the list of font sequence names should be used in quotation marks, using the second method of declaration * /
}
#test3 {
/ * can also be written in one line, but must be in the following order * /
font:italic Bold 23px/46px "Simhei";
}
</style>
<body>
<div id= "Test1" > Spring silent Cherish thin flow, the shade of water love fine soft. <br/>
Small lotus only dew sharp point, early dragonfly stand above. </div>
<div id= "Test2" > Spring silent Cherish thin flow, the shade of water love fine soft. <br/> Small Lotus Only dew pointed point, early dragonfly stand up. </div>
<div id= "Test3" > Spring silent Cherish thin flow, the shade of water love fine soft. <br/> Small Lotus Only dew pointed point, early dragonfly stand up. </div>
</body>
The text effect after the CSS control is as follows:
Summary:
CSS control font color: color:blue;
CSS control control text style: Font-style:normal | Italic | Oblique; (Default value | Italic | Italic "Use oblique for special fonts without skewing")
CSS control text weight (bold): Font-weight:normal | Bold | Bolder | Lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
CSS control text size: font-size:23px;
CSS control text font type: font-family:ncursive | Fantasy | monospace | Serif | Sans-serif "If the browser that opens the program does not have a font set, it will be displayed by default, in order of precedence. separated by commas. If the font name contains spaces, then use quotation marks to enclose the second way of declaring the listed font sequence names "
Expand: Search to see what other properties are available to control the font.
Three, CSS font settings tips
Self-study html--htree (CSS)
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
