CSS (cascading Style Shee)

1, CSS is cascading style sheet the abbreviation of several English words, translated into Chinese is "cascading style sheet" meaning

CSS allows web page creators to effectively customize and improve the effect of web pages.

CSS is a supplement to the HTML, web designers have been unable to control the display of the Web page is very distressed, the appearance of CSS to solve the problem.

CSS enables a complete separation of Web content and page effects.

Resources:

Full version W3cschool offline tutorial link: http://pan.baidu.com/s/1jGSIqxg Password: Iuch

Takecolor 8.0 CN Green Color tool Link: http://pan.baidu.com/s/1skl3naP%20 Password: 3qdl

Ctrl+j shortcut keys for pop-up smart tips

2. Several CSS settings (how you can write CSS code to HTML pages)

There are three ways to add style sheets to an HTML document, each with its own pros and cons, in three ways:

Inline style sheet (Set the style of the element within the tag)

Embedding Style Sheets (Need to write in the head tag <style type= "Text/css" ></style>)

external style sheet link

Inline style sheet Disadvantage: If you want to set the same style style to all the paragraphs in the page, you will need to repeat the settings for each <p> tag.

Embedded style sheet Disadvantage: If you want to define a common style style for the entire site, that is, when the same style style is applied to many pages, the embedded style sheet is used,

You will need to include the same <style></style> code snippet in each

3. Style Rule selector (what is the way to get the elements on the page to set the style)

1: HTML Selector

2: class Selector (you need to assign a value to the class property of the element you want to set the style to)

3: ID Selector (need to assign a value to the id attribute of the element to set the style)

4: Association selector P em{Combo Selector <table></table>

6: pseudo element Selector

A pseudo-element selector is a way of defining the various states of the same HTML element and part of the content that it contains.

For example, for a hyperlink label (<a></a>) 's normal state (before any action), visited state, checked state, and cursor moves to the status on the hyperlink text, the first and first lines of the paragraph can be defined using a pseudo element selector.

There are several pseudo-elements that are commonly used today:

a:active Status when a hyperlink is selected

a:hover The cursor moves to the state on the hyperlink

a:link Normal status of hyperlinks

a:visited The status of hyperlinks visited

P:first-line The first line of text in a paragraph

P:first-letter The first letter in a paragraph

3, CSS style properties of the detailed

CSS has a very large number of properties, which can be broadly divided into the following categories: Font, background, text, location, layout, Edge, List

1: Font

Font properties mainly include the text font, size, color, display effects and other basic styles, the following is a detailed description of the various font properties

font-family: This property is used to set the font family

font-size: This property defines the size of the text, you can use the units of measure to set the size of the font, or you can use a relative font size. You can also use an absolute size tag

The absolute size is set to either Xx-small, X-small, small, medium, large, x-large, or Xx-large. Xx-small is the smallest and Xx-large is the largest

Font-style: This property is used to define a font style of normal, italic, or oblique (italic)

text-decoration: This property is used to underline, underline, underline, and blink effects in text

font-weight: This property is used to set the point size of a bold word

The values for this property are: Normal, bold, bolder, lighter, 100~900

2: Background

Backgrounds include background color, background image, and background image control

background-color: Set background color, transparent indicates transparent background color

background-image: Setting the background image of an element

background-repeat: Determine if and how the background image repeats

The value of this property No-repeat: Indicates that the background image appears only once in the display area of the element

Repeat: Vertical in both horizontal and vertical directions. Repeat-x and repeat-y are repeated horizontally or vertically, respectively.

background-attachment: Determines whether the background image follows content scrolling,

When set to fixed, represents a fixed background image, which, when scroll, represents the movement of the image following the content.

background-position: Specifies the horizontal and vertical position of the background image. The horizontal position value can be left, center, right. It can also be a numeric value.

The vertical value can be top, center, bottom. It can also be a numeric value.

3: Text

The properties of text include: text spacing, alignment, superscript, subscript, arrangement, first line indentation.

word-spacing: Set the spacing between words

letter-spacing: Set the spacing between characters

text-align: Sets the horizontal alignment of the text, with the value can be left, right, center, Justfy

text-indent: Sets the indent value of the first line of text eg: indent 2 font text-indent:2em in the first row ;

line-height: Sets the line height of the line where the text is located

Document Flow : div+css layout using position/ float/clear

4: Location

The Location property is where the element is drawn.

Position: Sets how objects are positioned. There are three types of values: absolute (absolute positioning), relative (relative positioning), and static (no special positioning) default to static.

Left: Sets the horizontal position of the element

Top: Sets the vertical position of the top of the element

Width: Sets how wide the element is displayed

Height: Sets how high the element is displayed

z-index: After using positioning

5: Edge

The margin class is used to set the gap size of the element's boundary and other elements

margin-top: Sets the upper boundary of an element and the size of the void between it and other elements

margin-right: Sets the void size between the right boundary of an element and other elements

Margin-bottom: Sets the space between the bottom boundary of an element and other elements

margin-left: Sets the void size between the left and the other elements of an element

Margin: Used as a write-down for the above 4 properties

The Padding class property is used to set the void size between the element boundary and the internal content

padding-top: Sets the size of the gap between the upper and inner contents of an element

padding-right: Sets the gap size between the right edge of an element and the internal content

Padding-bottom: Sets the size of the gap between the bottom boundary of the element and the content

padding-left: Sets the size of the void between the left and inner contents of an element

Padding: Used as a slight write for the above 4 properties

The Width class property is used to set the thickness of the element border

You can use one of the thin (thin), medium (medium), thick (coarse) three values

border-top-width: Specifies the width of the border on the element

border-right-width: Used to specify the width of the right border of an element

border-left-width: Used to specify the width of the left border of an element

border-bottom-width: Used to specify the width of the bottom border of an element

border-width: Used as a slight write to the above four properties

The Color property is used to set the colors of the element border

Border-top-color:

Border-left-color:

Border-bottom-color:

Border-right-color:

Border-color: For the above four properties of the slightly write

The Style class property is used to format the border of an element

You can make it none, dotted (dotted line), dashed (dashed), solid (implemented), double (dual), Groove (Groove), Ridge (convex), inset (concave), outset (convex).

Layout:

Display: Inline|block|none

CSS (cascading Style Shee)