Web Design-css Style Basics

1. CSS style sheet

(1) in-line

Inline is also known as inline style, which is the style of the element that is set by the tagged style property.

Syntax format:< tag name style= "Property 1: Property value; Property 2: Property value; Property 3: Property value;" > Content </Tag name >

The style in the syntax is a property of the tag, and virtually any HTML tag has a style property that is used to set inline.

(2) Embedded type

Inline is to set the CSS code in the

Syntax Format:

<style type= "Text/css" >

Selector {Attribute 1: Property value; Property 2: Property value; Property 3: Property value;}

</style>

The syntax of the <style> tag can be placed anywhere in the HTML document, but because the browser is from top to bottom parsing code of the CSS code in the head to facilitate early download and parsing, in order to avoid the content of the Web page after downloading no style decoration caused embarrassment.

(3) Chain-in

Chaining is to place all styles in one or more external style sheet files with a. css extension, and link the external style sheet file to the HTML document with the <link/> tag.

Syntax Format:

<link href= "path to CSS file" type= "Text/css" rel= "stylesheet"/>

In this syntax, the <link/> tag must be placed in the

HREF: The URL that defines the linked external style sheet file, which can be a relative or absolute path.

Type: Defines the types of linked documents, specifying that TEXT/CSS represents the linked external file as a CSS style sheet.

Rel: Defines the relationship between the current document and the linked document, specified as stylesheet to indicate that the linked document is a style sheet file.

(4) Import type

The import is the same as the chain, both for external style sheet files. You can import an external style sheet file by applying a style tag to the HTML header document and using the @import statement at the beginning of the <style> tag.

Syntax format: <style type= "Text/css" >

@import url (CSS file path), or @import "CSS file path";

/* Other CSS styles can also be stored here */

</style>

2. CSS Base Selector

(1) Tag Selector

Tag selectors are the use of HTML tag names as selectors, grouped by tag name, to specify a uniform CSS style for a category of tags in the page.

Syntax Format: Tag name {Attribute 1: Property value; Property 2: Property value; Property 3: Property value;}

Styles defined with the tag Selector are valid for all new tags in the class on the page.

(2) class selector

The class selector uses the "." is identified, followed by the class name.

Syntax format:. class Name {Attribute 1: Property value; Property 2: Property value; Property 3: Property value;}

The class name is the class attribute value of the HTML element, and most HTML elements can define the class attribute. The advantage is that you can define individual or identical styles for element objects.

(3) ID Selector

The ID selector is identified with "#" followed by the ID name.

Syntax format: #id名 {Attribute 1: Property value; Property 2: Property value; Property 3: Property value;}

The ID name is the id attribute value of the HTML element, and most HTML elements can define the id attribute, and the ID value of the element is unique and can only correspond to a specific element in the document.

(4) Wildcard Selector

The wildcard selector uses "*" to indicate that it is the widest range of all selectors and matches all elements of the page.

Syntax format: *{attribute 1: Property value; Property 2: Property value; Property 3: Property value;}

3. CSS text-related styles

(1) Font style properties

1. Font-size (font size): Set Font size

(1) EM: Font size relative to the text within the current object (4) cm: cm

(2) PX: pixels (5) mm: MM

(3) in: inch (6) PT: Point

2. font-family (font): Set font

3. Font-weight (font weight): Set the font weight

(1) Normal: Default value, define standard character

(2) Bold: defines bold characters

(3) Bolder: Define more coarse characters

(4) Lighter: Define finer characters

(5) 100~900 (integer multiples of 100): Defines the characters from thin to thick. Where 400 equals normal,700 equals bold, and the value is larger than the larger character.

4. Font-variant (variant): Setting font changes

(1) Normal: Default value, browser will display standard font

(2) Small-caps: The browser will display small uppercase fonts

5. Font-style (font style): Set font style

(1) Normal: Default, browser will display standard font style

(2) Italic: The browser will display italic font style

(3) Oblique: The browser will display italic font style

6. Font (integrated font style): Comprehensive settings for font styles

Format: selector {font:font-style font-variant font-weight font-size/line-height font-family;}

Unwanted properties can be omitted, but the Font-size and font-family properties must be preserved, otherwise the Font property will be invalidated.

(2) CSS text appearance properties

1. Color (text colors): Defines the color of the text

2, letter-spacing (word spacing): Define word Spacing

3, word-spacing (word spacing): Defines the English word spacing, the Chinese characters are not valid.

4. Line-height (line spacing): Set line spacing

(1) PX: pixels (2) EM: Relative value (3)%: percent

5, Text-transform (text conversion): Control the case of English characters

(1) None: No conversion (default value)

(2) Capitalize: Capitalize first letter

(3) Uppercase: Convert all characters to uppercase

(4) Lowercase: Convert all characters to lowercase

6, Text-decoration (text decoration): Set the decorative effect of text

(1) None: no decorations (default values for normal text)

(2) Underline: Draw Line

(3) Overline: Draw Line

(4) Line-through: Strikethrough

7. Text-align (horizontal alignment): Sets the horizontal alignment of text content

(1) Left: Align aligned (2) Right: Justified (3) Center: Center Align

8. Text-indent (first line indent): Sets the indentation of the first lines of text (negative values are allowed), and the value of the property can be used in different units of values

(1) EM: Multiples of the character width (2)%: percent relative to the width of the browser window

9, White-space (whitespace processing): Set the white space character processing method

(1) Normal: normal (default), blank space in text, empty line is not valid, line wrap after full line

(2) Pre: preformatted, preserves spaces in the document's writing format, and displays empty lines as they are

(3) NoWrap: Blank line is invalid, force text cannot be wrapped unless a newline tag is encountered <br/>. Content is out of bounds and does not wrap, and the scroll bar is added automatically if the browser page is exceeded.

4. CSS style advanced Features

(1) Label-designated selector

The label designation selector, also known as the intersection selector, consists of two selectors, the first is a tag selector, the second is a class selector or an ID selector, and no spaces between two selectors

(2) Descendant selector

The descendant selector is used to select the descendants of an element or group of elements, which is written in front of the outer tag, the inner tag is written in the back, and the middle is separated by a space. Applies only to nesting cases.

(3) Set Selector

The set selector is a comma-connected selector, and any form of selector can be used as part of the set selector.

Web Design-css Style Basics