This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

text-align

Text-align = “left”, “center”, and “right”; text-align = “left”, “center”, “right”; text-align = “left”, “center”, “right”; Must be a single character and can only be used for cells. In addition, characters and keyword attribute values can be used together. When we do not use keyword attribute values, the characters are displayed on the right side.

td {
    text-align: '. ' center;
}
Copy the code

/ / dom code

<table>
    <col width="55" height="100">
    <tr> <th>Learning JavaScript<tr> <td>Primary school tuition 50.9<tr> <td>Middle school tuition 545.3<tr> <td>High school tuition 1105.3<tr> <td>Lost 0.01 yuan</table>
Copy the code

In the example above, the alignment will be “.”

text-decoration

Text-decoration is usually used to operate text, such as None, underline or line-through. Del and text-decoration are used to delete throughlines.

<del style="text-decoration: line-through;" "> < p style =" max-width: 100%; clear: both; min-height: 1emdel>
Copy the code

The renderings are as follows:

The text-decoration property is an abbreviation of the property, which has the following forms: text-decoration- can be followed by line, style, color, and thickness parameters.

The following are the attributes of line: None, underline, line-through and overline indicate that there is no xianhuax respectively

// Ununderline <p style="text-decoration-line: none;" > Learn the front end </p> // Add underline <p style="text-decoration-line: underline;" >javaScript</p> // Add a middle line <p style="text-decoration-line: line-through;" >web</p> // Add underline <p style="text-decoration-line: overline;" >web</p>
Copy the code

In addition to using it individually, CSS text-decoration supports multiple values:

// Use multiple values at the same time, underscore and underscore <p style="text-decoration-line: overline underline;" >java</p>
Copy the code

Style related attributes: solid, double, dotted, bounding, wavy respectively represent the solid line, double solid line, dotted line, dotted line, wavy line.

// add solid line <div style="text-decoration-style: solid;" > to learn < /div> // Add double solid line <div style="text-decoration-style: double;" < / > front enddiv> // Add dot line <div style="text-decoration-style: dotted;" >liunx</div> // Add dashed line <div style="text-decoration-style: dashed;" >python</div> // Add wavy lines <div style="text-decoration-style: wavy line;" < / > backenddiv>
Copy the code

Note: If we use the same CSS properties for both parent and child elements, we will find a new effect. For example, when the text-decoration effect is set in both parent and child elements, the effect is not overwritten, but added.

The text-decoration property and the border property can be double lines, double solid lines and other effects. But border is better because border and padding can be used together to control spacing and multiple lines of underlining. The advantage of text-decoration is the wavy line effect.