CSS Self-Study notes (5): CSS styles

CSS has a variety of style sheets, while the basic styles have backgrounds, text, fonts, links, lists, tables, outlines.

I. css-background

A solid background is allowed in CSS, and images are allowed to create complex personality backgrounds.

P {background-color: #000;}

A solid color is used as the background. You can then define other properties and create backgrounds for different effects.

CSS can also use the picture as the background, this is the need to use the Background-image property, if the property value is a URL value, and the picture file exists, then you can see the picture as the background of the page

Body {background-image:url (4.gif);}

Note: The Background-image attribute can also be used in other tags.

You can define other properties, change the position of the image, size, and so on.

You can use the Background-repeat property to tile the background of a picture on a page and use the Background-position property to change the position of the image in the background.

Note that when you change the position of the picture background, you can use keywords or percentages, and you can use length values to determine the position of the picture.

When the document is very long and a screen is not displayed, we do not want the background to scroll together when scrolling down, which is the use of the Background-attachment property to prevent scrolling, to prevent background scrolling, to pin the background to a visible area (fixed), does not receive web page scrolling effects.

Two. css-text

Text should be the most content part of a Web page, so the style of the text is more important.

Properties in CSS define the appearance of text, including the color of text, the spacing of characters, alignment, and the ability to decorate, typeset, and so on.

CSS Text Properties

Properties	Description
Color	Set Text color
Direction	Sets the text orientation.
Line-height	Sets the row height.
Letter-spacing	Sets the character spacing.
Text-align	Aligns the text in the element.
Text-decoration	Add adornments to text.
Text-indent	Indents the first line of text in an element.
Text-shadow	Sets the text shadow. CSS2 contains this property, but CSS2.1 does not preserve it.
Text-transform	Controls the letters in the element.
Unicode-bidi	Sets the text orientation.
White-space	Sets how whitespace is handled in the element.
Word-spacing	Sets the word spacing.

Note: Some of the property values in the text properties can be set by length, percent, keywords, and so on.

Three. css-fonts

CSS font properties define the font, size, style (bold, italic), and distortion of the text.

Font family of CSS

In CSS, there are two different kinds of font family names:

• Universal Font Family-a combination of font systems with similar appearance (e.g. "Serif" or "monospace")
• Specific font family-specific font family (e.g. "times" or "Courier")

In addition to a variety of specific font families, CSS defines 5 universal font families:

• Serif fonts
• Sans-serif fonts
• monospace fonts
• Cursive fonts
• Fantasy Fonts

When you define font properties for text, apply to the Font-family property. When defining its property values, you can use either a generic font family or a specified font family, both of which can be used simultaneously.

body {Font-family:serif;}

If you want the HTML document to use the serif font, but you don't care what font it is, you can use the Universal font family.

body {Font-family:georgia;}

Sets the font of the BODY element to a specific Georgia font.

When defining font styles, apply to the Font-style property.

The Font-style property values are:

• Normal-text is displayed normally
• Italic-Text italic display
• Oblique-Text skew display

Note: Italic (italic) is a simple font style that has minor changes to the structure of each letter to reflect the changing appearance. In contrast, italic (oblique) text is an oblique version of normal vertical text.

CSS Font Properties

Properties	Description
Font	Shorthand property. The function is to set all the font-oriented properties in a single declaration.
Font-family	Sets the font family.
Font-size	Sets the size of the font.
Font-size-adjust	Intelligently scales the replacement font when the preferred font is not available.
Font-stretch	Horizontally stretches the font.
Font-style	Sets the font style.
Font-variant	Displays text in a small uppercase font or in a normal font.
Font-weight	Sets the weight of the font.

Four. css-Links

CSS, we can also set a variety of specifications for the link style. However, relative to the other, the link style is relatively simple.

The particularity of links is that they can be styled according to the state in which they are located.

Four states of the link:

• A:link-Generic, inaccessible links
• A:visited-The user has visited the link
• A:hover-the mouse pointer is over the link
• A:active-the moment the link is clicked

When setting styles for different states of a link, follow these order rules:

• A:hover must be located after A:link and a:visited
• A:active must be located after a:hover

Five. css-List

CSS List properties allow you to place, change, or label an image as a list item.

Working with lists in HTML makes the pages very rich and tidy.

The most commonly used property of a list is its flag type: List-style-type

Similarly, when a list item is not available (you do not want to use it), we can also use the picture to make the list item.

UL li {list-style-image:url (1.gif)}

Because the list is used more frequently, you can abbreviate the properties of the list

Li {list-style:url (1.gif) square inside}

CSS Listing Properties (list)

Properties	Description
List-style	Shorthand property. Used to set all properties used for the list in a declaration.
List-style-image	Sets the image as a list item flag.
List-style-position	Sets the position of the list item label in the list.
List-style-type	Sets the type of the list item flag.

Six. css-form

Using the table properties effectively makes it possible to personalize the tables that appear to be rigid.

table, TH, TD  {  border:1px solid red;;  }

The table table, TH, and TD are set with a blue border.

You can also define other properties of the table border to get a table with a variety of borders.

The size of the table (aspect) is defined to make it more consistent with the layout design of the HTML, which makes the page more aesthetically pleasing.

I can also define the text properties inside the table, Text-align and Vertical-align properties to set the alignment of the text in the table

TD  {  text-align:right;  }

Set the Padding property for the table TD and th elements to change the distance of the table contents from the inner border of the table.

As with other backgrounds, you can add a background color to a table, either as a solid color or as a picture.

CSS Table Properties

Properties	Description
Border-collapse	Sets whether to merge the table borders into a single border.
Border-spacing	Sets the distance separating the border of the cell.
Caption-side	Sets the position of the table caption.
Empty-cells	Sets whether to display empty cells in the table.
Table-layout	Sets the algorithm for displaying cells, rows, and columns.

Seven. css-profile

The contour can be understood as a line surrounding an element, emphasizing the function.

CSS Border Properties

properties	description /th>
outline	Set all profile properties in one declaration.
outline-color	Sets the color of the outline.
outline-style	Sets the style of the outline.
outline-width	Sets the width of the contour.