CSS Basics of Introductory Course CSS

HTML CSS JavaScript three relationships

• HTML is the carrier of Web content
• CSS is the performance of Web content, appearance control
• JavaScript is web page logic processing and behavior control

advantages of CSS with respect to HTML tag properties

CSS simplifies tag code, facilitates download and improves efficiency

Resolves the separation of Web content from appearance

Facilitates maintenance and provides productivity

CSS Syntax Basics

CSS syntax: Selectors + declarations, where declarations refer to attribute-value forms, note that CSS styles are case-sensitive

How to use CSS1) inline style, also known as inline style

Is the style that is written inside the label by the style property of the label

2) Internal style, also known as embedded style

is to define the CSS style inside the style tag of the page header

3) External style, also known as the outer-union style

is to refer to the CSS file address via the link tag

4) Import style

is a CSS file that uses @import to import the specified URL path, and the import style is typically used inside the style tag, at the beginning of the style tag, the imported CSS style sheet is loaded after the entire HTML file has been loaded

CSS Reference Precedence

In general, inline style internal style external style

But the inner and outer styles, depending on who was last loaded, is the nearest principle

CSS Selector1) class selector

Using the. Clallname method definition, the class CSS style is applied through the tag's class attribute, and a label can refer to multiple classes at the same time, separated by a space character, and the class selector can reuse multiple tags;

2) Tag Selector

Tag Selector means styling the entire document type of label

3) ID selector

Isomorphism # defines CSS styles, ID selectors are not too common, too often lead to ID flooding, increased document DOM ID object retrieval time is not conducive to improving Web page response

4) Group Selector

Also known as a combination selector, refers to multiple selectors that define styles together, separating them with commas

5) descendant selector

Tags that are close to each other in the DOM are referred to as parent-child relationships, and then to ancestor-descendant relationships, the descendant selector is a child of the value label and a subordinate child element label, separated by a space character between descendant selectors.

Understand to find the target tag inside a tag;

Note that the definition of descendant selectors is often done from a wide range to a small range, while a large range of portals is the 6 selectors;

6) Universal Selector *

This means that all tags are applied to the selector

7) Pseudo-class selector

: Link: Before the label has been accessed

: Visited tag after access

: Hover mouse moves to the label

: Active tag is clicked but not released before mouse

Priority: Active "hover" visited "link, this directly through the logical judgment can be known;"

Note: Hover must be placed after link and visited to be effective

Active must be placed after hover

Pseudo-class is not case sensitive

8) Pseudo-Object

: Before

: After

same style sheet interior style precedence

In general, it is the nearest principle, but it is also judged by calculating the weight value.

Label weight value: +1

Class weight value: +10;

ID Weight value: +100

In-line weight value: +1000

For the same weight value, that is to catch up, the back will cover the previous

Highest priority! Important, refers to the style is the highest priority, using the way for example fontcss{font-size:14px!important;}

CSS style naming conventions

Cannot start with a number or underscore, '-' connection line

the common naming conventions are

Hump method: First letter lowercase, the remaining words capitalized

Connector: That is, the first letter of the word is lowercase, and the word is connected with the word-or underlined _

The common page names are

Header: Header navigation: NAV page body: main sidebar: Sidebar footer: Footer column: Column

Content: Content/container page perimeter control: Wrapper container: Container left center right

The common CSS navigation is named

Navigation: Nav left navigation: Leftsidebar main navigation: Mainnav Right Nav: Rightsidebar sub navigation: Subnav Menu: Menus

Top Navigation: Topnav submenu: submenu side navigation: Sidebar title: Title Abstract: summary

common CSS styles are named with the

Logo: Logo registration: Register ads: Banner Search: Login: Logon ribbon: Shop

Login bar: Loginbar title:

CSS Basics of Introductory Course CSS