This chapter will make the text in your Web page more beautiful.
Some properties about the text
font-family: Text font
Font-size: Text Size
Color: Text Colors
Font-weight: Text thickness
Text-decoration: More Styles of text
font-family (font family)
Font-family how to work in CSS
Body {Font-family:verdana, Geneva, Arial, Sans-serif;}
In the customer's computer to find there is no Verdana, if there is to use Verdana display text, if not, find there is no Geneva, if not yet find Arial, If you're not looking for a Sans-serif font in the client computer (generally, each machine has a sans-serif font, note: Sans-serif is not a specific font) If the font name contains a space, you can enclose that name in quotation marks, like this: font-family: "Courier New", Courier;
If I really want the user to be able to use the font I specify, and I don't know if the user has this font
How to use
A font file was found: suffix Woff, svg, EOT, OTF, TTF
Put this font on the Web, you can use Google's font hosting service, this is free
Add @font-face property to CSS
@font-face {font-family: "Emblema One"; Src:url ("www. a Web. com");} /* The URL is the font URL */ This is the equivalent of creating a font named Emblema one on the user's machine.
Use it like a local font, notice where you use the font after @font-family
Adjust font size
h1 {font-size:220%;}
There is also a way to specify font size-keywords (xx-small, x-small, small, medium, large, x-large, Xx-large) The size of each keyword is not certain, this is related to the client
So, how should I specify the size of the text?
Change font weight
Add Style to Fonts
Color
Body {Background-color:red;background-color:rgb (80%, 40%, 0); Background-color:rgb (204, 102, 0); background-color:# 66CCFF;}
This is the four ways to set the color, the first is the keyword, this is usually used in elementary school students, support the color is not much The second is the use of RGB (red, green, blue) percentages, those percentages mean the amount of red/green/blue in turn (how to say, the larger the more it contains this color) The third and the second are similar, but changed from 0%~100% to 0~255. The last one is the hexadecimal code, meaning: The first two represent the red 16, the middle two are green, the last two are blue. Turning the hex into a 10 mechanism becomes the third way to set the color.
For text and backgrounds, use a larger contrast color, so that readability is good
Text Decorations (text-decoration)
BULLET POINTS
CSS provides many properties to control the appearance of fonts, including font-family, Font-weight, font-size, Font-style, etc.
Font-family is a group of fonts with common characteristics
The font family for the web includes serif, Sans-serif, monospace, cursive, and fantasy. Serif and Sans-serif are most commonly used
The fonts that visitors see on your Web page depend on which fonts are installed on their own computers, unless you use Web fonts
It is a good idea to specify a candidate font in the Font-family CSS property in case the user does not have your preferred font installed
The last font is to be a generic font, such as serif or sans-serif, so that if no other font is found, the browser can replace the appropriate font
If you want to use a font, and by default the user may not have the font installed, you can use the @font-face rule
Font size is usually keyword, pixel px, percent, EM specified
If you use the image to specify the font size, you are telling the browser how many pixels the letter height is.
Em and% are relative font sizes, so using EM and% to specify font size means that the font size is determined relative to the font size of its parent element
Use relative font size to make your pages more maintainable
Use the font size keyword in the body rule to set the base font size so that if the user wants the text to be larger or smaller, all browsers can scale the font size proportionally.
You can use the Font-weight CSS property to set the text to bold
The Font-style property is used to create italic or italic text. Italic or italic text is skewed
Web colors are mixed with different amounts of red, green, and blue to get
If mixed red 100%, green 100%, blue 100% can get white, all 0% is black
CSS has 16 basic colors, and more than 150 expanded colors
You can use the red, green, and blue percentages to specify the color you want, or you can use a numeric value (0~255), or a 16 binary code
To find the hexadecimal code of the color you want, you can use the color selection tool of the picture editing app
The hexadecimal code that represents the color has 6 bits, each digit refers to 0~f, the first two indicate the number of red, the middle two is green, the last two are blue
You can use the Text-decoration property to create an underscore for this. Underlined documents are often mistaken for link text by users, so use this property with caution
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
