Front-end Learning Notes - CSS - Appearance Properties

CSS Appearance Properties

Color: Text color

The color attribute is used to define the color of the text in three ways:

1. Predefined color values, such as red, green, blue, etc.

2. Hexadecimal system, such as # FF0000, # FF6600, etc. In practice, hexadecimal system is the most commonly used way to define color.

3.RGB codes, such as red, can be expressed as rgb(255,0,0) or rgb(100%,0%,0%).

It should be noted that if you use the percentage color value of RGB code, you can't omit the percentage when the value is 0, you must write it at 0%.

line-height: row spacing

The ine-height attribute is used to set the line spacing, which is the distance between lines, that is, the vertical spacing of characters, commonly known as line height. There are three commonly used attribute value units of line-height, which are pixel px, relative value em and percentage. Pixel PX is the most frequently used in practical work.

Generally, the line spacing is about 7.8 pixels larger than the font size.

text-align: Horizontal alignment

The text-align attribute is used to set the horizontal alignment of text content, which is equivalent to the align attribute in html. The available attribute values are as follows:

Left: left alignment (default)

right: right alignment

center: Centralized

text-indent: First line indentation

The text-index attribute is used to set the indentation of the first line of text. Its attribute value can be the number of different units, the multiple of em character width, or the percentage relative to the browser window width. Negative values are allowed. It is recommended that em be used as the setting unit.

1em is the width of a word. If it is a paragraph of a Chinese character, 1em is the width of a Chinese character.

Practice:

<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="UTF-8">
	<title>Font synthesis column</title>
	<style>
		*{
			font-family: "Microsoft YaHei";
		}
		h1{
			font-weight: 400;  /*Set font size to normal, no unit, normal equivalent to 400*/
			text-align: center;
		}
		a{
			font-weight: bold;  /*Set font bold, no unit, blod equivalent to 700*/
		}
		em{
			font-style: normal;  /*Modify the italic em tag to be normal, because the em tag has the meaning of emphasizing, which is better than using span.*/
			color: skyblue;
		}
		div{
			text-align: center;   /*The words in the box are centered horizontally, not horizontally.*/
		}
		p{
			font-size: 16px;
			line-height:24px;     /*Line spacing is about 7.8 pixels larger than font size.*/
			text-indent: 2em;    /*Indentation of the first line*/
		}
		span{
			color: orange;
		}
		.a{
			color: red;
			font-weight: 400;
		}
	</style>
</head>
<body>
	<h1>Suddenly changing coaches before the match, the second team still beat the black horse of Yiteng plateau to stop Shun Tian.</h1>

 	<div>2017 20 July 16, 2000:11 <span>Sina Sports Comment Wins the Grand Prize</span>(<a href="#" class="a">11</a>Participation of people) <a href="#">Collect this article </a> </div>"
 	<hr />
 	<p>Sina Sports News　7 January 16 is Yanjing Beer<em>[micro-blog]</em>2017 In the third round of China Football Association Cup, Lijiang Jiayunhao Team met Harbin Yiteng Team at home. However, at noon on the match day, Li Hu, the coach of Lijiang Jiayunhao Team, and two other members quietly submitted their resignations to the club, and packed up their bags to leave. Under such circumstances, the Lijiang Jiayunhao team had to act as the former coach, Yang Guidong, to direct the match.</p>

 	<p>Li Hu, the head coach of Lijiang Jiayunhao Team, was absent from the pre-match press conference yesterday. At that time, the club explained that Li Hu went to the hospital for treatment because of his poor health. However, when Li Hu appeared at the club today, he denied this statement to reporters and admitted that he had submitted his resignation to the club.</p>

 	<p>According to reporters'information, Li Hu<em>[micro-blog]</em>In recent years, the coaching team has been under a lot of pressure in terms of coaching performance. During the intermission period, the coaching team proposed to the club that more powerful players could be introduced to strengthen the team. However, due to the divergence of investment and performance indicators with the club, Li Hu and the coaching team eventually resigned on the match day.</p>

 	<p>This situation did not affect the Lijiang Jiayunhao Team.<em>[micro-blog]</em>In the match, Lijiang team fought very fiercely at home, still played a physical advantage in the rainstorm, and eventually defeated the Chinese Super League team Harbin Yiteng by penalty kick, and successfully promoted to the next round. According to the schedule of China Football Association Cup, Lijiang Jiayunhao Team will meet Jiangsu Shuntian Team on 23rd of this month.</p>
</body>
</html>

Effect:

text-decoration Text Decoration

text-decoration is usually used to modify the decorative effect of links

value	describe
none	Default. Define standard text.
underline	Define a line under the text. Underlines are also included in our links.
overline	Define a line on the text.
line-through	Define a line through the text.