"Beef Brisket Press Release system"--CSS study

The 19th episode of Beef brisket starts with CSS-related content, and is a big step forward in making a real Web page. Here is a brief introduction to the basic content of CSS

and core content.

mom's story.

CSS is a file used to represent HTML (an application of the standard Universal Markup Language) or XML (a subset of the standard generic markup language).

The computer language of the style. In contrast to the traditional HTML representation, CSS enables precise pixel-level control of the placement of objects in a Web page, supporting

Almost all font size styles, with the ability to edit Web page objects and model styles, and be able to conduct preliminary interaction design, is currently based on text display

The best performance design language. CSS can be based on the understanding of different users to simplify or optimize the writing, for all types of people, have a strong easy to read

Of

I know that.

The basic content and core content are presented in the two video of CSS learning, which is now done for both:

1. Basic content

First of all, the characteristics of CSS: to achieve the separation of Web content and style. In large projects, the main style of the page is written in CSS,

From the title to the content can be set separately, so that the entire page display consistency. Itoo, as we are now developing, is an obvious example. For

What each function of the interface is consistent, of course design to content certainly not only css one method, but CSS is also make important contribution.

Then there is the CSS feature: selector. By priority: ID Selector > class selector > HTML tag Selector. Then they were

What's the rule?

ID selector : By setting it in CSS

#aaa {    border:1px solid #100;    padding:5px;}

calling the ID AAA on the HTML page is OK.

<span id= "AAA" > Column one </span>

class selector : in CSS settings

. title {    color: #00f;  /* News Heading style */    clear:left;/* Clear float */}

Called in an HTML page

<span class= "title" > Column one </span>

HTML Tag Selector : In HTML, in addition to the ID selector and class selector settings, as follows:

<pre name= "code" class= "HTML" > <span id= "AAA" > Column one </span> <span class= "title" > Column two </span > Column Three

In the above code, only "column three" does not have a special selector set, so it belongs to the tag Selector , as long as the body in the CSS

Set the appropriate style to let the column three also have a special style.

Body {    color: #f0f;}

Note: Here is a hint that because of the precedence relationship of the three, so long as there is a conflict, the content in the preferred selector will be

Quasi -.

Core Content

The core content of CSS is: standard flow, box model, floating and positioning. The expanded content has block-level elements and inline elements.

Here we describe the meaning of the core content separately:

1, the standard flow: is the CSS in the order of the label.

Body {    color: #f0f;}. menu {    color: #f00;/* Text color */}.title {    color: #00f;  /* News Heading style */    clear:left;/* Clear float */}

if the title in the above content is to be followed by the menu, if it appears

<span class= "title Class=menu" > Column two </span>

then first, the content of the menu is the main.

2, Box model: has the outer margin : Upper, lower, left, right; inner margin ; content Area : wide, high; picture frame : A wide page design .

A picture illustrates the box model:

So it's OK to set a value for the relevant property in the CSS.

3, floating and positioning: all the position of the box is adjusted.

Float: Allows the position of the box to move left and right.

Positioning: The relative and absolute position of the box can be changed.

4 (expanded), block-level elements, and row-level elements.

A block-level element will have a single row and its width automatically fills its parent element's width.

Inline elements do not have a single row, and adjacent inline elements are arranged in the same row, knowing that a row does not fit before wrapping, with the width of the element

Changes in content

And the row-level elements can be transformed to block-level elements, this is not elaborate.

Summarize

through the study of CSS, feel its role is quite powerful, in the next page production and then slowly realize its good ~

"Beef Brisket Press Release system"--CSS study