CSS text related styles
1. CSS font style attributes
1.font-size font size
You can use relative length units or absolute length units, in general, use px
| Relative length unit | Explanation |
|---|---|
| in | The font size relative to the text in the current object |
| px | Pixels, most commonly used, recommended |
| Absolute length unit | Explanation |
|---|---|
| in | inch |
| cm | cm |
| mm | Mm |
| pt | point |
2.font-family font
You can set multiple fonts at the same time (you can also set only one), separated by a comma in the middle, indicating that if the browser does not support the first font, it will try the next one until you find a suitable font, for example
body{font-faily:"华文彩云"，"宋体"，"黑体";}Note: ① All fonts must be separated by commas in English.
②Chinese fonts need to add quotation marks in English state, English fonts generally do not need to add quotation marks, when only English fonts were used, the English font name must be in front of the Chinese font name
③If the font name contains, #, $ and other symbols, then change the font You must add double quotes or single quotes in English. For example:
font-family: "Times New Roman"
④ Try to use the system default font to ensure that it can be displayed normally in any browser
3.font-weight font weight
| value | description |
|---|---|
| normal | Default value, defines standard characters |
| bold | Define bold characters |
| bolder | Define thicker characters |
| lighter | Define finer characters |
| 100 ~ 900 (integer multiple of 100) | Define fine to thick characters. Among them, 400 is equivalent to normal, 700 is equivalent to bold, the larger the value, the thicker the font |
4.font-variant variant
Generally used to define small capital letters, only valid for English characters
| normal | The browser will display standard fonts |
|---|---|
| small-caps | The browser will display a small uppercase font, that is, all lowercase letters will be converted to uppercase. However, all letters in small capital letters have a smaller font size than the rest of the text |
5.font-style font style
| normal | By default, the browser will display the standard font style |
|---|---|
| italic | The browser will display the italic font style |
| oblique | The browser will display italic font style |
6.font comprehensive set font
Basic syntax format:
选择器{font:font -style font-variant font-weight font-size/line-weight font-family;}E.g:
p{font-family:Arial,"宋体";font-size:30px;font-style:italic;
font-weight:bold;font-variant:small-caps;linr-weight:40px;}Equivalent to:
p{font: italic small-caps bold 30px/40px Arial,"宋体";}Among them, the attribute value that does not need to be set can be omitted (take the default value), but the font-size and font-family attributes must be retained, otherwise the font attribute will not work
Second, CSS text appearance properties
1.color text color
There are three ways to get the value:
| Predefined colors | Such as red, blue, green, etc. |
|---|---|
| Hex | Such as: # FF0000, # FF6600, etc. In practical work, hex is the longest used way to define color |
| RGB code | Such as red can be expressed as rgb (255,0,0) or rgb (100%, 0%, 0%) |
2.letter-spacing word spacing
The empty table between self-healing characters, its attribute value can be a value in different units, it can be a negative value, by default it is normal
3. word-spacing
Attribute values can be values in different units. Negative values are allowed. The default is normal
4.line-height line spacing
5.text-transform text transformation
Control the case of English characters, the attribute values are as follows:
| ninth | No conversion (default) |
|---|---|
| capitalize | Capitalize |
| uppercase | Convert all characters to uppercase |
| lowercase | Convert all characters to lower case |
6.text-decoration text decoration
Set decorative effects such as upper line drawing, lower line drawing, strikethrough, etc. of the text. The attribute values are as follows:
| none | No decoration (default for normal text) |
|---|---|
| underline | Underline |
| overline | Draw line |
| line-through | Strikethrough |
(You can assign multiple attribute values at the same time)
7. text-align horizontal alignment
Equivalent to the align attribute in HTML, the attribute values are as follows:
| left | Left justify (default) |
|---|---|
| right | Right |
| center | Align center |
For example, setting the center of the secondary title to display can be:
h2{text-align:center;}注意：text-align属性仅适用于块级元素，对行内元素无效
如果需要设置图像设置水平对齐，可以为图像添加一个父标记如< p >或< div >,然后对父标记应用text-align属性，即可实现图像的水平对齐。
8.text-indent 首行缩进
9.white-space 空白符处理
在使用HTML中，无论源代码有多少个空格，浏览器只会显示一个字符的空白。在CSS中，使用white-space属性可以设置空白符的处理方式，其属性值如下：
| normal | 常规(默认值），文本的空格，空行无效，满行（到达区域边界）后自动换行 |
|---|---|
| pre | 预格式化，按文档的书写格式保留空格，空行原样显示 |
| nowrap | 空格空行无效，强制文本不能换行，除非遇到换行标记< br/ >.内容超出元素的边界也不换行，若超出浏览器的页面则会自动增加滚动条 |
