CSS Learning notes (1)

1, "div+css" this term is actually an inaccurate term, is that everyone began to understand this technology is not thorough, to this Layout standard page method

What is the name of the standard? xhtml+css!

2, usually said that the world wide Web Wide is the abbreviation of the consortium, the Chinese language is the organization or WWW Alliance, the organization is what?

Simply put, it is the standard of the Web page, then the standards introduced by the organization are known as the standard or web standards.

3, what is the Web standard?

Web standards are not a standard, but a collection of standards set by the website and other standardization organizations, including the familiar HTML, XHTML,

JavaScript, CSS, and more

4, the purpose of web standards?

is to create a unified technical standard for the Web presentation layer so that information content can be presented to end users through different browsers or terminal devices.

5, the use of standard benefits:

A, improve page browsing speed. The use of CSS method, than the traditional web design method to save at least 50% of the file size;

B, shorten the revision time, the performance (style/appearance) and content (information/data) separated. Simply modify a few CSS files to re-design a successful

Tens of thousands of pages of the site;

c, reduce the cost of website traffic, bandwidth requirements lower (code more concise), cost reduction;

D, more likely to be searched by the search engine, improve the site in Baidu or Google rankings.

E, content can be accessed by a wider range of devices, including screen readers, handheld devices, search robots, printers, refrigerators and so on.

6, the Web Standard mainly consists of three parts: structure (Structure), Performance (Presentation) and Behavior (Behavior).

The main language corresponding to the structure standard is XHTL

The main language that corresponds to the performance criteria is CSS

The main language that corresponds to the behavior standard is JavaScript

Made into a static page, the main use is XHTML and CSS, so the technology to make standard pages is XHTML+CSS

7. One of the benefits of Web standards is "understanding performance and separation of content"---what does that mean?

You must first understand some basic concepts: content, structure, performance, and behavior

A, content: is the creator placed in the page really want to let visitors browse information;

b, Structure: Make content more logical and easy to use [similar to: Level 1 2 headings, text, lists, etc. call them structure];

C, performance: Used to modify the appearance of the content of the style of things called performance;

D, Behavior: the interaction of the content and operational effects, such as the use of JavaScript to determine the form submission.

8, Web development gadgets----Firefox Firebug (Tools-add-ons-search firebug-installation).

9, as a web-front work to be compatible with the browser: ie/6/7/8/9/, Firefox, Google, Apple, etc.

10. Introduction to CSS

Concept: CSS is the abbreviation for cascading style Sheets (cascading style sheets).

CSS can be used as the Html,xhtml,xml style control language.

11. CSS Syntax structure

Selector {property: value} for example: body{font-size:12px;}

Parameter description:

A, selector (selector): Indicates the object to which this set of styles is intended. Can be an XHTML tag, such as BODY,H1, or it can be defined as a specific

The ID or class label, such as the #main selector, represents the selection of <div id= "main", which is an object that is assigned the ID of main.

B, Attribute (proprety): The style attributes of the selector, such as color, size, positioning, floating, and so on.

C, Value: Refers to the value of the property.

D. You can also define multiple attributes for a selector, separated by a semicolon ";" between each attribute.

12, Web page has CSS style, test--Change the font size in the browser, see the results.

13, CSS definition of the skills

A, for future CSS code optimization, it is recommended that all property values should be followed by a semicolon ";".

b, some HTML tags have their own default CSS property values, for example: H1 tag has its own property values, automatic bold display, larger font size.

C, in order to compatible with the mainstream browser, in order to unify the effect suggested that we set the CSS properties of all elements, reset to standard.

D, different browsers, have their own different CSS property values---Deadly, is browser compatibility.

E, there is a more special font to use, how to do? --turn it into a picture.

In Chinese and English fonts. Sets the order of the fonts. Set the English font to the front and the Chinese in the back.

F, want to center the text vertically, set the row height to the height of the element, row height = element height,

The content of the text cannot exceed the width of the element, that is, the line cannot be wrapped.

G, CSS can be reset, XHTML tag default style.

14. CSS Control font

Functional syntax

Set Font size font-size:12px

Set character color color: #00000

Set font font-family:arial, ' Arial '

Set line height line-height:150% line-height:1.5em

Set the weight of the font font-weight:normal[normal]bold[bold]

CSS Length Units

Relative Length Unit description

Em relative to the font size of the text within the current object

px Pixels (Pixel) Recommended use

in inch

CM cm

mm mm

PT points (Point)

CSS Color units

Color Unit Description

Hex: Color: #ff0000

Color names such as: color:red

Three primary color units such as: rgb (255,0,)

Generally the most commonly used is hexadecimal, the principle of the three primary color units "Red (R), Green (g), Blue (b)" mixed, each value range between 0-255.

15, CSS font use precautions, to try to use Universal song, with everyone on the computer fonts.

16. There are 4 ways to add CSS to the Web page:

A, inline style sheet: Write directly in the existing markup such as: <p style= "color:red" > here the text is red </p>

b, embedded style sheet: Use the "<style></style>" tag embedded in the header

such as: <style type= "Text/css" >

<!--body {background:white;color:black;}--

</style>

C, external linked style sheet: Write the style sheet in a separate. css file, and then use the <link> tag to invoke it in the page Head area

To achieve performance and structure separation

such as: <link href= "Main.css" rel= "stylesheet" type= "text/css>

D, imported style sheets: Imported style sheets are basically the same as linked style sheets, except that they are slightly different in syntax and action, and are also imported into style code

Within the

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

@import url ("Basic.css");

</style>

Import, will occupy the HTML file space, some browsers, parsing will be problematic, the browser will finally read the contents of the @import. Import multiple style files into a

Style file.

17, the CSS style written to a separate file style.css, to use the page, only need to call, this is the core of our learning XHTML+CSS, structure and sample

Type separation.

18. CSS Selector type

A, label (type) Selector

That is, for the tags in the HTML document (which HTML tags apply which CSS styles), such as: p{font-size:12px;} div{background:blue;}

B, type selector: You can define the style yourself, apply to one or more page elements, and the class can appear multiple times in a Web page to define a repeating style. Class in English

The text "." First, the following name is defined by itself, and the class definition needs to be called by adding the Class-class name to the page.

such as:. Warning{property: Value}

<p class= "Waring" > </p>

Apply multiple classes to an element at the same time

<p class= "A1 A2" > </p>

C, ID selector: Basically similar to the class, just start with the English "#", because the ID is unique, so it can only appear once in the Web page, to define only one occurrence of the

Style.

such as: #main {property: Value}

<p id= "main" > </p>

Apply multiple classes and IDs to an element at the same time

<p class= "A1 A2" id= "A6" > </p>

* Class or ID names do not start with a number.

D, wildcard selector: * {attribute value}, used to define all HTML elements, with a wide range of functions, but with the lowest efficiency.

*{NARGIN:0;PADDING:0} resets the margins and padding of all elements to zero

E, contains selectors (nested/derived): Syntax e1 E2 {property: value},

Meaning that all are E1 contain E2,

For example: Table TD {property: value} #hearder li a {property: value}

The advantage is that it does not need to be in a separate label for ID Hearder, the A tag within the LI tag is defined as a separate class or id,css code is less, and is also optimized

The CSS code.

If we control the electronic elements in an element, we can use nested methods, no longer have to set the ID for child elements, syntax: parent element child element

{Property: Value}

F, Selector grouping (collective control): the same style definition is used for multiple selectors, and the selectors are separated by commas. such as: P,div,. Waring {property: Value}

G, label-specific selector: If you want to use either ID or class, you also want to use the tag Selector

h1#content{} White Oh is the H1 tag for all content ID

h1.p1{} for all H1 tags that are class P1

H, Combo selector: Use the above selectors in combination

H1.P1, #content h1{}

CSS selector function? Specifies the object (range) to which the CSS style works.

19, we want to target the page, an element or some element, set the style---can be through different CSS selectors. The CSS selector is the object you want to control.

20. CSS style Features

A, inheritance

A character element in a Web page inherits the style of the parent element (inheriting some styles, because some child elements themselves have default values, so no parent element is used).

For example, to control the text size in paragraph p, you can add a style directly to the body tag.

C, Cascade

When a child element of a Web page defines the same style as the parent element, its style overrides the parent element's style.

The style that is defined later overrides the previous teenie style.

CSS Learning notes (1)