Text style attributes
Font: font-family
Text size: font-size
Text color: font-color
Text thickness: font-weight
Text style: font-style
font-family font properties
Within the definition of an element in what font to display text
grammar:
font-family: "a font" "font two", "font three" ...
Explanation
And Chinese font name contains spaces, use quotation marks "" enclosed
Multiple fonts, separated by commas
Quotes nested outer double quotation marks, the use of single quotes
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{font-family: "幼圆","黑体","微软雅黑"} </style> </head> <body> <div >必应</div> <</class selector>= "I2"IDPp> <div>百度</div> </body> </html>
The above code indicates that the browser uses baby round font, if no font in bold, if not, use Microsoft elegant black font, or if not, then use the operating system default font
font-size text size
Define the elements within text size
grammar:
font-size: in absolute units | relative units
Absolute units is not used, the use of relative units or percentage px
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{font-size: 40px} span{font-size: 50%} </style> </head> <body> <div >必应</div> <P ID = "I2" > class selector </ P > < div > < span > Baidu </ span > </ div > </ body > </ HTML >
The above code indicates to the div tag to set the font size 40px of, span tag font size is 50%, the 50% of the mean occupancy of 50% of the parent label font size, span the parent tag is a div tag, and a div tag the font size is 40px, so 50% is 20px
color text color
Text color we have not unfamiliar, is also used before so many times over
grammar
color: color name | hex | RGB
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{color: red}/*颜色名*/ div{color:#FFC125}/*十六进制*/ span{color:rgb(0,0,255)}/*rgb*/ </style > </ head > < body > < div > will be </ div > < P ID = "I2" > class selector </ P > < div > Hello </ div > < span > Baidu </ span > </ body > </ HTML >
font-weight character thickness
Set within a text element thickness
grammar:
font-weight:normal | bold | bolder | lighter |100-900
Description:
Default normal, bold bold, bolder thicker, lighter finer
400 is equivalent to the normal, 700 is equivalent to the bold
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{font-weight: bold} div{font-weight: lighter} span{font-weight: 600} </style> </head> <body> < Div > will be </ div > < P ID = "I2" > class selector </ P > < div > Hello </ div > < span > Baidu </ span > </ body > </ HTML >
CSS text styles
text-align
Horizontal alignment elements disposed within the text
grammar:
text-align:left | right | center | justify
See preceding three to understand the meaning of, justify Justify is
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> .p1{text-align: left} .p2{text-align: right} .p3{text-align: center} .p4{text-align: justify} </style> </ Head > < body > < P class = "P1" > RGB hex tool transfected with the RGB color value for the conversion of hexadecimal strings with each other, the use of simple tools, you only need three input box: red (R), green (G), blue (B) input color values in RGB and hexadecimal string is automatically converted back, otherwise you only want the right input box hexadecimal enter the hexadecimal characters can be converted with the tool rotation hexadecimal RGB value of the RGB color values for RGB hexadecimal string interchangeable, using a simple tool, you only need to input box in the following three: red ( input R), green (G), blue (B) color values in RGB and hexadecimal string is automatically converted back, otherwise you only want an hexadecimal character entry box to the right of hexadecimal can be converted to RGB values </ P > < P class = "P2" >Hex tool having RGB to RGB color value for the conversion of hexadecimal strings to each other, the use of simple tools, you only need to input box in the following three: red (R), green (G), and blue (B ) enter the RGB color values and hexadecimal strings are automatically converted back, otherwise you only want to enter a hexadecimal character hexadecimal input box on the right turn can be converted to RGB hexadecimal value RGB means for having the RGB color value of a hexadecimal string conversion, using simple tools, you only need to enter the following three boxes: blue (B), the input RGB of red (R), green (G), and color values are automatically converted back to a hexadecimal string, whereas you only want to enter the hexadecimal characters in the input box to the right of the hexadecimal value is converted to RGB</ P > < P class = "P3" > RGB hex tool transfected with the RGB color value for the conversion of hexadecimal strings with each other, using a simple tool, you only need to input box in the following three: red (R), green (G), blue (B) input color values in RGB and hexadecimal string is automatically converted back, otherwise you only want the right input box hex 16 hex converting characters to turn the tool 16 having a hexadecimal value RGB to RGB color values for the RGB hexadecimal string interchangeable, using simple tools, you only need to input box in the following three: red (R), green (G), and blue color values of RGB input (B), and hexadecimal strings are automatically converted back, otherwise you only want to enter the hexadecimal characters in the input box to the right of the hexadecimal convert the RGB values </ P > < P class = "P4" > RGB hex tool transfected with the RGB color value for the conversion of hexadecimal strings with each other, the use of simple tools, you only need three input box : red (R), green (G), blue (B) input color values in RGB and hexadecimal string is automatically converted back, otherwise you only want to enter the right hexadecimal Enter the hexadecimal characters can be converted with the tool rotation hexadecimal RGB value of the RGB color values for RGB hexadecimal string interchangeable, using a simple tool, you only need to input box in the following three: red ( input R), green (G), blue (B) color values in RGB and hexadecimal string is automatically converted back, otherwise you only want an hexadecimal character entry box to the right of hexadecimal can be converted to RGB values </ P > <body> </html>
Then we replace the top label p span tags, found no effect, since the block-level tag attributes valid provided
Block-level label is that no matter how much content you are accounting for an entire row, for example, you have two p tags, there are only two words, it is spread over two lines, while the span tag will appear in a row, is inline elements
line- height
Chinese elements provided high bank, when the line height to the height, is centered vertically
In this way the word "la la la" will be displayed in the center of the red box
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> .d2{height: 100px;width: 200px;background: red;line-height: 100px;text-align: center} </style> </head> <body> <div class="d2">啦啦啦</div> <div class="d1"></div> </body> </html>
grammar:
line-height: length value | percentage
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{height: 400px;border: 1px solid} span{line-height: 400px} </style> </head> <body> <div> <span class="p1">RGB转16进制</span> </div> </body> </html>
Code explanation:
Div tag to set the height of 400px, and if it is to span the following div tag centered vertically, but also for height 400px
vertical-align
Content of the element vertically disposed
These values have the following
| baseline | default. Elements on the baseline of the parent element. |
| sub | Subscript text vertically aligned. |
| super | Superscript text vertically aligned |
| top | The top row to the top element the highest element is aligned with |
| text-top | The top of the parent element's font elements aligned to the top |
| middle | This element is placed in the middle to the parent element. |
| bottom | The top of the lowest elements in the top row elements are aligned. |
| text-bottom | The parent element is aligned with the bottom end of the bottom end of the element's font. |
| length | |
| % | Using the "line-height" attribute of this element are arranged in a percentage value. It allows the use of a negative value. |
| inherit | Provision should inherit the value of the vertical-align property from the parent element. |
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> div{height: 400px;border: 1px solid} .c1{vertical-align: 50%} </style> </head> <body> <div> <span class="p1">RGB转<span class="c1">16进制</span></span> </div> </body> </html>
Text Styles
Reproduced in: https: //www.cnblogs.com/zouzou-busy/p/11028750.html