Home > Developer > JavaScript
CSS knowledge Summary (6). css knowledge Summary
Common CSS styles 4. Section styles
1)Row Height
Control the height of each row in a section
Line-height: Normal | length
Example source code:
/* CSS Code */. normal {line-height: normal;}. length {line-height: 30px ;}
<! -- HTML code --> <body> <p class = "normal"> This is normal row height <br> This is normal row height </p> <p class = "length"> This is the height of a 30px row <br> This is the height of a 30px row <br> This is the height of a 30px row </p> </body>
Effect:
This is normal Row Height
This is normal Row Height
This is normal Row Height
This is a 30px Row Height.
This is a 30px Row Height.
This is a 30px Row Height.
If there is a line of text in an element and the line height is equal to the height of the element, the line is vertically centered.
* Note that it is a line of text, and the original internal and external margins of the browser must be wiped out first.
Example source code:
/* CSS Code */* {margin: 0; padding: 0 ;}. box {width: 100px; height: 100px; line-height: 100px; border: 1px solid #000 ;}
<! -- HTML code --> <body> <div class = "box"> <p> This is a line of text </p> </div> </body>
Effect:
2)Paragraph indent
Controls the indent of the first line of a paragraph
Text-indent: Length
Example source code:
/* CSS Code */. indent {text-indent: 2em ;}
<! -- HTML code --> <body> <p class = "normal"> there is no indentation for the first line. </p> <p class = "indent"> here, 2em is indented for the first line. </p> </body>
Effect:
There is no first line indent
The first line is indented to 2em.
3)Paragraph alignment
The Section alignment mode is controlled. Other inline or inline-block elements in the text object can also be set by text-align.
Text-align: Left | right | center | justify
Example source code:
/* CSS Code */. box2 {width: 300px; border: 1px solid #000 ;}. left {text-align: left ;}. center {text-align: center ;}. right {text-align: right ;}
<! -- HTML code --> <body> <div class = "box2"> <p class = "left"> left-aligned text </p> <p class = "center"> center align text </p> <p class = "right"> align right text </p> </div> </body>
Effect:
Align left text
Align text
Right-aligned text
4)Text spacing
Controls the distance between paragraphs.
Letter-spacing: Normal | length
Example source code:
/* CSS Code */. normal {letter-spacing: normal;}. length {letter-spacing: 10px ;}
<! -- HTML code --> <body> <p class = "normal"> This is the default text spacing </p> <p class = "length"> This Is A 10px text spacing </ p> </body>
Effect:
This is the default text spacing.
This is the text spacing of 10px.
5)Text Overflow
Controls the style of text content Overflow
Text-overflow: Clip | ellipsis
Clip: When the inline content overflows the block container, the overflow part is cut out.
Ellipsis: When the inline content overflows the block container, replace the overflow part (...).
Because text-overflow is only used to describe how to display text overflow, you also need to define forced text display (white-space: nowrap) and overflow content to hide (overflow: in this way, the overflow text is cropped or the ellipsis is displayed.
Example source code:
/* CSS Code */. clip ,. ellipsis {width: 150px; border: 1px solid #000; white-space: nowrap; overflow: hidden ;}. clip {text-overflow: clip ;}. ellipsis {text-overflow: ellipsis ;}. clip: hover ,. ellipsis: hover {text-overflow: inherit; overflow: visible ;}
<! -- HTML code --> <body> <p> when you move the cursor over the text, you can see all the text. </P> <div class = "clip"> here we use "text-overflow: clip "</div> <div class =" ellipsis "> here we use" text-overflow: ellipsis "</div> </body>
Effect:
When you move the cursor over the text, you can see all the text.
Here we use "text-overflow: clip"
6)Line feed
Controls whether to wrap a line when the content exceeds the container's boundary (generally used in English and URL addresses)
Word-wrap:Normal | break-word
Normal: allows the content to expand or overflow the specified container boundary. Default browser Processing
Break-word: the content will wrap in the boundary. If necessary, line breaks are allowed within the word.
Example source code:
/* CSS Code */. break {width: 300px; border: 1px solid #000; word-wrap: break-word ;}
<! -- HTML code --> <body> <div class = "break"> my blog: http://www.cnblogs.com/mossbaoo/ </div> </body>
Effect: (the URL address is subject to a new line)
My blog: http://www.cnblogs.com/mossbaoo/
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
