Home > Developer > Web Develop
CSS provides powerful control over text, and can control text color changes, text alignment, text indentation, and other lines of content. This lesson we mainly learn how CSS controls text
setting of text sizeFont-sizewith this property we can set the size of the text, the possible values % , the specific pixels can also be EM
Example
<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>www.divcss8.com Text Size font-size</title>
<style type= "Text/css" >
h1 {font-size:14px;}
</style>
<body>
Hex Example
</body>
Control text Font properties:Font-family<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>www.divcss8.com Font Properties font-family</title>
<style type= "Text/css" >
H1 {font-family: " black Body", " Arial ";}
</style>
<body>
Set Fonts
</body>
PS: Apply font to H1 text, if the user's computer is installed on a black body, it is shown in bold, if not, display the Arial.
Font WeightFont-weight<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>www.divcss8.com font weight font-weight</title>
<style type= "Text/css" >
H1 {font-family: " black Body", " Arial "; font-weight:normal;}
</style>
<body>
Set Fonts
</body>
Ps: Through this property we can be a few words to focus on the implementation of bold, of course, like our example H1 in the browser is shown by default is bold, we can use the above text to set it to not bold, of course, you can also take a value of 100-900 , getting thicker, or it can be bold equals 900
font Color settings color: The value of the colors;
Text Decoration PropertiesText-decoration<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>www.divcss8.com text decoration text-decoration</title>
<style type= "Text/css" >
H1 a{font-family: " black Body", " Arial "; font-weight:bold;text-decoration:none;}
H1 A:hover{text-decoration:underline;}
</style>
<body>
set Fonts </a>
</body>
PS: We use this property to regularly set whether the link is underlined, and when the value is NONE, it is not underlined. Mouse hover can be underlined, the value overline is underlined, the value of Line-through for the strikethrough
Text IndentText-indent<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>divcss8 text Indent </title>
<style type= "Text/css" >
P{width:200px;text-indent:2em;}
</style>
<body>
<P>DIVCSS8 website is dedicated to providing CSS tutorials, sharing some examples of CSS wonderful, and writing some articles for beginners to learn, but also provides a CSS to learn free answers to the place t</p>
</body>
PS: This property is often used to indent the first line of text in a paragraph, as well as to take a negative value when you are swapping words in a picture.
Row Height Properties:Line-height<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<TITLE>DIVCSS8 Line High attribute lin-height</title>
<style type= "Text/css" >
p{width:200px;text-indent:2em;line-height:22px;}
</style>
<body>
<P>DIVCSS8 website is dedicated to providing CSS tutorials, sharing some examples of CSS wonderful, and writing some articles for beginners to learn, but also provides a CSS to learn free answers to the place t</p>
</body>
PS : This property allows you to set the row and row height of a paragraph, and if there is only one row, we can also make the content vertically centered. The general setting method is height:22px;line-height:22px;
Word Spacing Properties: letter-spacing<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>divcss8 kerning letter-spacing</title>
<style type= "Text/css" >
p{width:200px;text-indent:2em;line-height:22px;}
pspan{letter-spacing:4px;}
</style>
<body>
<p><span>divcss8.com</span> website is focused on providing CSS tutorials, sharing some examples of CSS wonderful, and writing some articles for beginners to learn And also provides a place to learn free answers to CSS t</p>
</body>
This article is from "Shijingshan Computer Training" blog, please be sure to keep this source http://jiefei.blog.51cto.com/6994042/1589370
CSS Basics Series Tutorial 4: Text Properties
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
