Basic knowledge of html and css

1.HTML and CSS overview:

HTML
according to W3C definitions, HTML stands for HyperText Markup Language, used to define the content of the document structure

CSS

According to the W3C definitions, CSS stands for Cascading Style Sheets, used to define the style of an HTML document (appearance)

HTML：

head：meta、title。
2. body: other elements.

also known as the root tag html element, the root element, which is the ancestor of all the elements of other elements, all other elements in the document, it must be placed in its element content.

<html lang = "en"> </ html> The text in a document written in English
<html lang = "zh-cmn -Hans> </ html> The text in a document written in Simplified Chinese

head elements:

Also known as head of the document, it is the first child of the html element.
Head of the document may contain some other elements used to describe the page Additional Information

note! Content head element is not displayed on the page

head element typically comprises the following elements:

body elements:

body elements also called body of the document, web page contents are visible all placed in the element
body element can contain a large number of other elements of the content structure, defined documents

The term & css :

Selector element (tag name {/ *})
Class selector (. {} Class name)
ID selector (#id values {})

2.html various elements

Hyperlinks <a> elements click on the link to jump to another page

The format of <a> elements: <a href="目标"> content <a>

Absolute and relative paths

<a target="页面打开位置" href="页面路径"> content <a> <link rel = "stylesheet" href = "CSS file path">

Absolute path: When the site is deployed to the server, all resources website can be accessed by an address (path)

The address (path) written in the format: protocol: // domain name / directory

Example: http: //meyerweb.com/eric/tools/css/reset/reset.css

Protocol: http
Domain Name: meyerweb.com
Directory: root directory /eric/tools/css/reset/reset.css

Relative path: relative path is relative to the current location of the resource, only the resources for the access station

The format of a relative path is: ./ path

./: Indicates the directory of the current resource is located, must begin with a relative path may be omitted

../: means a return to the parent directory

Text elements:

h1 h6 ~: Level 1 heading stage 1-6 Title P: Paragraph
blockquote: reference full segment auf cite: of the references cited q: small text references abbr: reference abbreviations strong: important em text: emphasized text text should be highlighted i:: b text should be treated differently

Structural elements:

div: It is a very common element
it has no semantic
It merely represents a container for other elements contained
in the site layout, it is usually used to represent the area of the page

Semantic structural elements:
<header> is used to represent the head of a page or an area of
<nav> is used to represent the navigation bar
<aside> is used to indicate additional information related with the surrounding theme
<article> is used to indicate articles or other the existence of independent content pages <section> is used to represent a part of the whole theme <footer> is used to represent a certain area of the page or footnote

No semantic elements:

<div> no semantics, represents an area of the page in the
<span> no semantics, only to add a short text style
<br> no semantic, empty elements for the page wrap
<hr> no semantic, empty element , a dividing line for the manufacture of the page
<pre> no semantic preformatted elements (text formatting retained in the source code)

Entity characters:

In HTML, some characters are browser specific treatment
such as: <,>, the browser will be considered a mark symbol will not be displayed to the page
blank characters will be folded into a blank browser

The format of a character entity for & entity name; or & # entity number;

Space: Entity name & nbsp; & # 160 No entity;

<（小于符号）实体名称&lt； 实体编号&#60；

>(大于符号)实体名称&gt； 实体编码&#62；

&（并且符号）实体名称&amp； 实体编码&#38； ©（版权符号）实体名称&copy； 实体编码&#169；

Other elements:

ins: underlined
del: adding midline
ol (li): ordered list
ul (li): unordered list
dl: dt title indicates, dd = Body

Block elements, inline elements within block element row:

Within the block-level element and the inner element row line classification block element (can be converted to each other)

** ** block elements
1 can set their own width and height, absolutely no relation with the content
2. Default line by itself can not coexist with other elements of row
3 corresponds css attribute is the display: Block
4. common are div, p , h1-h6, hr, ul , ol, a variety of new h5 pre semantic tags such as header, footer

** ** inline element
1. The width and height can not be set, setting is invalid, the content determined by the width and height of
2. The default can coexist with other elements of row
3 corresponds css attribute is the display: inline
4. Common inline elements are: a , span, strong, I, b , td

** ** row within the block-level element
1. The width and height can be set, without relation to the content of the absolute 2. Default is not an exclusive line, a line can coexist with other elements 3. CSS corresponding attributes are: the display: inline-Block 4. Common element: img, td, table, video , audio, form. . .

3. Select and laminated:

Common CSS properties:

h1{color:red; text-align:center;}

CSS selectors:

CSS selectors, decided to apply the rule to which elements

Three basic selector: selector element, class selector, ID selector

In addition, CSS also provides a number of selectors

Wildcard selector

Attribute selectors

Pseudo class selector

Pseudo-element selector

Stacked Overview:

What is stacking: stacking is a mechanism for solving the CSS declarations conflict

Disclaimer conflict: many same CSS declarations (attributes), applied to the same element

Layered whole process, the browser is done automatically based on rules

Learn stacked, layered process is learning the rules of

The purpose of learning laminated, in order to better control the development of the style elements

Layered process:

Compare priority: low priority statement will be eliminated, high priority statement win
Compare particularity: low particularity statement will be eliminated, high particularity statement win
Compare source order: the order of ranking source of the statement will be eliminated, declared after the win against

After these three steps, there will be only a statement win out, all others are eliminated

Compare Priority:

Each statement has a priority

When a collision occurs, it will remain a high priority, low priority will be eliminated

A statement of priorities, and its origin and importance of the

source:

Author style sheets
The browser's default style sheet
User style sheets

importance:

If the property value to keep up with! Important, it represents an important statement, otherwise, it represents the general statement

Example: color: red; general statement

Color: Red ! Important ; Important Notice

Priority from low to high:

The browser's default stylesheet declaration
User stylesheet general statement
On the stylesheet general statement
Author style sheets Important Notice
User style sheets Important Notice

Compare particularity :

Particularity high to low:

Inline style

ID selector

Class selector

Element selector

Wildcard selector

Compare particularity - general rules:

Each statement has a particularity (Specificity)

When a collision occurs, it will retain the particularity of high and low of the special nature will be eliminated

The special nature of a declaration, depending on the size range of rules apply

The larger the scope rule, the lower the specificity, the scope of the smaller, the higher the specificity

Low specificity: inline style> ID selector> selector class> element selectors> wildcard selector

Compare source order: a statement last occurrence of the win, all the other eliminated.

The practical application of this rule:

CSS Reset code prefix
A pseudo-type writing element sequence

A pseudo-type writing element sequence

: Style link has not been visited links

: Style visited link has been visited

: Hover your mouse to hover over the style elements apply to other elements

: Style is activated when the active link

inherit:

What is Inheritance: Inheritance (inherit), refers to the child element it will automatically have some CSS properties of the parent element

Inheritance is automatically happen, developers do not need to write any additional code

Does not all CSS properties are inherited quilt element

It can be inherited attributes: color font-size font-weight text-align

Can not be inherited property: background-color

Some properties have versatility in a certain area of the page

If there is no inheritance, you must specify the style for each element of the region, resulting in bloated code duplication

Succession scenario occurs

An element of a CSS property, only the following two conditions are met, we will inherit the parent element:

The property is inheritable property
This property is not declared in the stylesheet

Forced Inheritance: compulsory inheritance, also called explicit inheritance refers to the CSS property value is set to inherit

In doing so, there are usually two reasons:

In order to inherit some non-inherited property
In order to inherit the property has been declared

Property value calculation process Introduction

About the property value calculation:

1. determine the value statement: Reference stylesheet does not declare the conflict, as the CSS property values

2. stacked conflict: There are conflicting statements on the use of style sheets stacked rules that determine the value of CSS properties

3. Using inheritance: for still not property values, if can be inherited, the inherit value of the parent element

4. Use the default value: for property is still no value, the default value

Render order of the elements: first calculate all the CSS property value of the parent element,

Then calculate child elements, and so on