CSS3: Set a style for the content

CSS3: Set a style for the content
The text style align attribute is used to specify the alignment of text blocks. Optional values include:
1) start: content alignment start boundary. Default Value;
2) end: the end boundary of content alignment;
3) left: The content is left aligned;
4) right: right-aligned content;
5) center: Align the content in the center;
6) justify: The content is aligned at both ends.
When the text-align attribute uses the justify value, you can use the text-justify attribute to specify the method for adding blank text. The optional values of this attribute are as follows;
1) auto: the browser selects the alignment rule. Note that the rendering methods of different browsers are slightly different;
2) none: Disable text alignment;
3) inter-word: white space is distributed between words. It is suitable for English and other words that are empty;
4) inter-ideograph: white space is distributed between words and Ideographic words, and the two sides of the text are aligned. It is suitable for Chinese, Japanese, Korean, and other languages;
5) inter-cluster: the blank space is distributed across the boundary of word and font set. It is applicable to languages without spaces, such as taiwen;
6) distribute: the blank space is distributed across the boundaries of word and font set, except for continuous text or grass body;
7) kashida: Adjust the alignment by extending the selected characters (only applicable to grass ). Blank Space processing when the browser encounters multiple spaces, it will compress them into one space; line breaks, tabs, etc. will be ignored directly.
You can use the whitespace attribute to specify the processing method of white space characters. The allowed values are as follows:
1) normal: the default value. Do not compress the blank space and wrap the text line automatically;
2) nowrap: the blank space is compressed and the text line does not wrap;
3) pre: the blank space is retained, and the text is wrapped only when a line break is encountered;
4) pre-line: the blank space character is compressed, and the text will be wrapped when a line is full or when a line break is encountered;
5) pre-wrap: the blank space is retained, and the text will wrap when a line is full or line break is encountered. The ction attribute of the specified text direction is used to set the text direction. Valid values include:
1) ltr: Left to right;
2) rtl: from right to left. Attributes related to the spacing between specified words, letters, and rows include:
Letter-spacing: Set the spacing between letters;
Word-spacing: Set the spacing between words;
Line-height: Set the Row height.
The attribute value can be normal or a specified value, and the line-height value can be used to specify the percentage. Controls the word-wrap attribute to tell the browser how to handle a word that exceeds the width of the contained block. Optional values include:
1) normal: words are constantly open, even if they cannot be completely placed into block elements;
2) break-word: disconnect a word and place it into a block element. The text-indent attribute of the first line is used to specify the indent of the first line of a text block. The value is the length value or percentage. The text decoration text-decoration attribute is used to decorate text. Optional values include:
1) none: defines standard text. Default Value;
2) underline: defines a line under the text; text
3) overline: defines a line in the text;
4) line-through: defines a line passing through the text;
5) blink: defines flickering text;
6) inherit: The definition should inherit from the parent node. The text-transform attribute is used to convert the case of text. Optional values include:
1) none: defines standard text with lower-case letters and upper-case letters;
2) capitalize: each word in the text starts with an uppercase letter;
3) uppercase: Only uppercase letters are defined;
4) lowercase: defines no upper-case letters, only lower-case letters;
5) inherit: inheritance. The text shadow attribute can apply the shadow effect to text blocks. Optional values include:
1) h-shadow: horizontal offset of shadow;
2) v-shadow: the vertical offset of the shadow;
3) blur: The blur degree of the Shadow. Optional;
4) color: the shadow color. Select the font-family attribute to specify the font to use. The values are sorted by priority. The browser starts from the first type in the font table until a proper font is found.
To prevent the specified font from nonexistent on the user's computer, CSS defines common fonts that can be used in any situation. Below are the general fonts:
1) serif: the example is Times.
2) sans-serif: the example is Helvetica.
3) cursive: the example is zpassive-Chancery.
4) fantasy: the example is Western.
5) monospace: the example is Courier.

p {padding: 5px;border:medium double black;background-color: lightgrey;margin: 2px;float: left;font-family: "HelveticaNeue Condensed", monospace;}

The HelveticaNeue Condensed font is specified here. If the Font does not exist, the monospace font is used. Set font-size to specify the font size. Optional values:
1) xx-small, x-small, small, medium, large, x-large, and xx-large: the font size is small to large, and the specific size is determined by the browser;
2) smaller and larger: default font size relative to the element;
3) : Use the CSS length value to precisely set the font size;
4) <%>: indicates the font size as the percentage of the font size of the parent element. Set the font-weight attribute to set the font width. You can select:
1) normal: Default Value, standard character;
2) bold: Specifies the bold character;
3) bolder: Specifies a thicker character;
4) lighter: defines finer characters;
5) 100 ~ 900 (All integers in the unit of 400): defines the characters from fine to coarse, 700 is equivalent to normal, and is equivalent to bold; set the font-style attribute to set the font style. The optional values are as follows:
1) normal: the default value. The browser displays a standard font style;
2) italic: the browser displays an italic font style;
3) oblique: the browser will display a skewed font style. The problem with the Web font CSS font is that the font you want to use may not be installed on your machine. Web font can solve this problem, we can directly download Web Fonts and use them on our own pages without the need for users to do anything. Use @ font-face to specify the Web font:

@font-face {font-family: 'MyFont';font-style: normal;font-weight: normal;src: url('http://titan/listings/MyFont.woff');}

You can download the ready-made fonts online, such as Font Squirrel. The font attribute is a simplified font attribute. The format is as follows;
Font:You can use the color attribute to set the foreground color of an element, and the opacity attribute to set the transparency of the color.

#banana {font-size: x-large;border: medium solid white;background-color: green;color: rgba(255, 255, 255, 0.7);}a:hover {color: red;opacity: 0.4;}

Set table style set border processing style border-collapse attribute to set the border processing style of adjacent cells:
1) separate: default value. Borders are separated. The border-spacing and empty-cells attributes are not ignored;
2) collapse: if possible, the border is merged into a single border. The border-spacing and empty-cells attributes are ignored. Processing the empty cell empty-cells attribute tells the browser how to handle the empty cell:
1) hide: draws borders not around empty cells;
2) show: draw borders around empty cells. Default Value. Set the title position. The caption of the table element is displayed at the top of the table by default. You can use the caption-side attribute to change the default behavior:
1) top: top, default value;
2) bottom: bottom. Specifying the table layout table-layout attribute determines how the browser displays the table. Supported values include:
1) auto: by default, the browser sets the width of the entire column of cells based on the widest cell in each column of the table, which means that the browser must obtain all the table content before determining the page layout;
2) fixed: The table size is set by the table itself and the width value of each column separately. If no column width value is available, the browser will set the column width at an equal distance. Therefore, the browser can determine the column width as long as a row of data is obtained. Data in other rows will be automatically wrapped to adapt to the width. Set the list style settings list tag type list-style-type attribute to set the tag style. The allowed values are as follows:
1) none: no mark;
2) box, check, circle, diamond, disc, dash, and square: Use the specified shape mark;
3) decimal: Use a decimal number as a marker;
4) binary: uses binary numbers as tags;
5) lower-alpha: Use lowercase letters as the marker;
6) upper-alpha: Mark with uppercase letters.

...... ......

1. Bananas
2. Mangoes
3. Plums

You can use the image as the list tag list-style-image attribute to mark the image as a list.

ul {list-style-image: url('banana-vsmall.png');}

Set the position list-style-position attribute of the list tag to specify the position of the tag relative to the content box of the li element. The supported values are as follows:
1) inside: Mark the content inside the content box;
2) outside: The tag is located outside the content box.

li.inside {list-style-position: inside;}li.outside {list-style-position: outside;}li {background-color: lightgray;}

The list-style attribute is short for setting the list style. The format is as follows:
List-style: Set the cursor attribute of the cursor style to change the shape of the cursor. The supported values are as follows:
1) auto: The cursor set by the browser by default;
2) crosshair: the cursor is displayed as a cross line;
3) default: the default cursor (usually an arrow );
4) help: This cursor indicates available help (usually a question mark or a balloon );
5) move: The cursor indicates that an object can be moved;
6) pointer: the cursor is a pointer indicating the Link (one hand );
7) progress: indicates that the job is being processed;
8) text: the cursor indicates the text;
9) wait: The cursor indicates that the program is busy (usually a table or hourglass );
10) n-resize: The cursor indicates that the edge of the rectangle frame can be moved up (North;
11) s-resize: The cursor indicates that the edge of the rectangle frame can be moved down (South );
12) e-resize: The cursor indicates that the edge of the rectangle can be moved to the right (East;
13) w-resize: The cursor indicates that the edge of the rectangle frame can be moved to the left (West );
14) ne-resize: The cursor indicates that the edge of the rectangle frame can be moved up and right (North/East );
15) nw-resize: The cursor indicates that the edge of the rectangle frame can be moved up and left (North/West );
16) se-resize: The cursor indicates that the edge of the rectangle frame can be moved down and right (South/East );
17) sw-resize: The cursor indicates that the edge of the rectangle frame can be moved down and left (South/West ).

<span style="cursor:progress">Auto</span><span style="cursor:crosshair">Crosshair</span><span style="cursor:default">Default</span><span style="cursor:pointer">Pointer</span><span style="cursor:move">Move</span><span style="cursor:e-resize">e-resize</span><span style="cursor:ne-resize">ne-resize</span><span style="cursor:nw-resize">nw-resize</span><span style="cursor:n-resize">n-resize</span><span style="cursor:se-resize">se-resize</span><span style="cursor:sw-resize">sw-resize</span><span style="cursor:s-resize">s-resize</span><span style="cursor:w-resize">w-resize</span><span style="cursor:text">text</span><span style="cursor:wait">wait</span><span style="cursor:help">help</span>