CSS design thorough research section 5.1
Attribute |
Description |
Remarks |
|
Font-family |
Font |
Multiple fonts can be declared at the same time, and the fonts are separated by commas. Example: font-family: Arial, "Times New Roman "; |
|
Font-size |
Text Size |
Length Unit |
|
Relative unit |
(1) px: 1 px is equivalent to 1 pixel; (2) em: 1em indicates that the length is the standard width of m in its parent element; (3) ex: 1ex indicates the standard height of the letter x; (4) % |
||
Absolute Unit |
(1) pt: point: the number of printed points. 1pt is relative to 1/72 inch in a general display; (2) in: inch, inch; (3) cm: centimeter, cm; (4) mm: millimeter, mm; (5) pc: pica, 1 pc = 12pt. |
||
Line-height |
Row Height |
It indicates the distance between two lines of text (the underline position is the text baseline. |
|
Note: Mixed write of the three attributes: font: Size/Row Height font; |
|||
Color |
Text color |
|
|
Background-color |
Background Color |
|
|
Font-weight |
Bold Text |
Normal | bold |
|
Font-style |
Text skew |
Normal | oblique (skewed) | italic (Italian) |
|
Text-decoration |
Text Effect |
None | underline (underline) | overline (upper line) | line-through (strikethrough) | blink (flickering, not supported by IE) Note: When multiple effects are applied at the same time, separate them with spaces. |
|
Text-align |
Horizontal Alignment |
Left | right | center | justify (aligned on both ends) |
|
Vertical-align |
Vertical Alignment |
It can only be used for vertical alignment of objects in table cells. |
|
Text-indent |
First indent |
For example, text-indent: 2em; (indent 2 characters) |
|
TIPS:
1.Set the first word to sink
. FirstLetter {
Font-size: 3em;
Line-height: 3em;
Float: left;
}
2.Vertical center of a paragraph
(1) Method 1: Set line-height to the same value as height.
Disadvantage: For more than one line of text, increase the text length, or narrow the browser window, so the text needs to be displayed in lines, this method will be ineffective.
(2) Method 2: Improvement Method: multi-vertical.htm
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Universal vertical center with CSS</title>
<style>
#outer {height: 100px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
.withBorder{
border:1px green solid;
}
</style>
<body>
<div id="outer" class="withBorder">
<div id="middle">
<div id="inner">
any text any height any content,
everything is vertically centered.
</div>
</div>
</div></body>
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
