※ Define Spacing
How do we use CSS to define the font, color, and background properties, and how do we format it?
Let's talk about the text properties of the CSS, or look at the detailed list of text attributes first:
We can see from the table here you can define text spacing, letter spacing, decoration, alignment, indentation, and row-high properties. Take a look at it for example. For example, the following text (like the bottom left):
We re typesetting this text with text attributes, and the effect of typesetting is shown in the upper-right image.
We see more spacing between words and words that are processed by text attributes, more rows between lines and rows, alignment to both ends, and more than two spaces in the first paragraph. How is this achieved? It's simple, just add the following code to the HTML:
<p style= "Letter-spacing:1em;text-align:justify;text-indent:
4em;line-height:17pt ">......</p>
*letter-spacing sets the word spacing to 1em, where 1em is a unit of length; Text-align set
Alignment is justified; indent set the indent to 4em;line-height set the row height to
17pt*//
From the above example, we can see that using the text properties of CSS can easily typesetting the text in the page. In the next section I'll introduce you to a small application of the Text-decoration property of the text.
※ Decorative Hyperlinks
The default link for a Web page is this: the links that are not visited are blue text with a blue underline, and the hyperlinks you visit are Deep Purple text with a deep purple underline. If all of your pages are in this style, isn't it monotonous?
In fact, you can use the Text-decoration property in the Text property to implement the adornment of the hyperlink. Let's look at the following code:
<title>link css</title>
<style>
&L t;! --
//* defines the pseudo-class element (a:), which defines the foreground and text decoration properties within curly braces,
hover plus the ' font-size ' property to change the font *//
A:link{color:green when the mouse activates the link; Text-decoration:none}
//* state when not accessed, color green, Text decoration property (text-decoration) value
is not (none) *//
a:visited{ Color:red;text-decoration:none}
//* The state visited, the color is red, the text decoration property value is not *//
A:hover{color:blue; TEXT-DECORATION:OVERLINE;FONT-SIZE:20PT}
//* Mouse-activated state, color blue, Text decoration property value is up (overline),
font size is 20pt*//
-- >
</style>
<body>
<p style= "font-family: a line of calligraphy; font-size:18pt" ;
<a href= "http://www.hongen.com" > Links </a></p>
//* links to display three different states, and defines the font and size of the linked text *//
& lt;p> <a href= "http://www.hongen.com" > Visited links </a></p>
<p> <a href= "http://" www.hongen.com > Mouse-activated links </a></p>
</body>
If you want to see the effect of the above code, please click here .
We see from the example that the links that have not been visited are displayed in green and the underline is removed, and the visited links are red and not underlined; In addition, when the mouse activates the link, the link is displayed in blue and underlined. How is this effect achieved? In addition to using the Text-decoration attribute in the text attribute, it uses the pseudo class element.
With the code comments above, I believe you should have a general idea of pseudo-class elements. In fact, the pseudo class we use should be called "anchor Pseudo Class", which stipulates the effect of linking in different states.
How, is not very simple can realize the effect of dynamic link, hurriedly try it yourself! I'll introduce you to the Container property in the next section.
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
