CSS style Definition

Common CSS attributes in web design

Color of text or element

Background color background-color

Background Image background-Image

Font-family

Text Size font-size

List style list

Mouse style cursor

Border style border

Inner padding

Margin margin

...

[Edit this section]

CSS syntax:

The definition of CSS consists of three parts:

Selector, properties, and value ).

Syntax: Selector {property: Value} (selector {property: Value })

Note:

· The selector can be in multiple forms. Generally, You need to define HTML tags for styles, such as body, P, table ......, You can use this method to define its attributes and values. The attributes and values are separated by colons:

Example: body {color: Black}. In this example, the text on the page is black.

· If the attribute value is composed of multiple words, quotation marks must be placed on the value. For example, the font name is often a combination of several words:

Example: P {font-family: "sans serif"} (defines the paragraph font as sans serif)

· To specify multiple attributes for one selector, use semicolons to separate all attributes and values:

Example: P {text-align: center; color: Red)

2. Select a Contact Group

You can combine the delimiters of the same attributes and values to separate the delimiters with commas (,) to reduce repeated style definitions:

H1, H2, H3, H4, H5, H6 {color: Green} (This group contains all the title elements, and the text of each title element is green)

P, table {font-size: 9pt} (the text size in paragraphs and tables is 9 characters)

The effect is equivalent:

P {font-size: 9pt}

Table {font-size: 9pt}

3. class selector

You can use class delimiters to define different styles for the same element classification. When defining class delimiters, add a dot before the name of the custom class. If you want two different paragraphs, one of which is aligned to the right and the other is centered, you can first define two classes:

P. Right {text-align: right}

P. Center {text-align: Center}

Then you can add the class parameter that you defined in HTML tags to different paragraphs:

This section is aligned to the right

This section is arranged in the center.

Another usage of class selector is to omit the HTML Tag name in the selector, so that several different elements can be defined as the same style:

. Center {text-align: Center} (class Separators of the definition. Center are arranged in the center of the text)

Such a class can be applied to any element. In the following example, both the H1 element (Title 1) and the P element (paragraph) are classified as the "center" class, so that the style of the two elements follows the class selector ". Center:

<H1 class = "center"> this title is centered

This section is also arranged in the center

Note: This class selector for omitting HTML tags is the most commonly used CSS method. Using this method, we can easily apply pre-defined class styles to any element.

4. ID Selector

On the HTML page, the ID parameter specifies a single element. The ID selector defines a separate style for this single element.

The application of the ID selector is similar to the class selector. You only need to replace the class with the ID. Replace the class in the above example with ID:

This section is aligned to the right

The definition ID selector must add a "#" sign before the ID name. Similar to the class selector, there are two methods to define the attributes of the ID selector. In the following example, the ID attribute matches all the elements of ID = "Intro:

# Intro

{

Font-size: 110%;

Font-weight: bold;

Color: # 0000ff;

Background-color: transparent

} (The font size is 110% of the default size; bold; blue; the background color is transparent)

In the following example, the ID attribute only matches the paragraph elements of ID = "Intro:

P # intro

{

Font-size: 110%;

Font-weight: bold;

Color: # 0000ff;

Background-color: transparent

}

Note: The ID selector has many limitations. You can only define the style of an element separately. It is generally used only in special cases.

5. Contains the selector.

You can define a style table with a link definition for an element. element 1 contains element 2. In this way, only element 2 in element 1 is defined, there is no definition for element 1 or element 2, for example:

Table

{

Font-size: 12px

}

The link in the table changes the style, the text size is 12 pixels, and the text of the link outside the table is still the default size.

6. cascading of Style Sheets

Cascade is inheritance. The style table inheritance rule is that external element styles are retained and inherited to other elements contained in this element. In fact, all nested elements in an Element Inherit the attribute value specified by the outer element. Sometimes, a lot of nested styles are superimposed together unless they are changed separately. For example, nested P tags in Div tags:

Div {color: red; font-size: 9pt}

......

The text of this paragraph is red 9

(The content in the P element inherits the attributes defined by Div)

Note: In some cases, the internal selector does not inherit the values of the surrounding selector, but theoretically these are all special. For example, the value of the upper boundary attribute cannot be inherited. intuitively, a paragraph does not have the same upper boundary value as the document body.

In addition, when the style sheet inheritance encounters a conflict, the last defined style always prevails. If the color of P is defined in the above example:

Div {color: red; font-size: 9pt}

P {color: Blue}

......

The text in this paragraph is blue 9.

We can see that the text size in the section is 9, which inherits the DIV attribute, while the color attribute is defined according to the final.

When different delimiters define the same element, the priority of different delimiters must be considered. Id selector, class selector, and HTML Tag selector. Because the ID selector is added to the last element, the highest priority is followed by the class selector. If you want to surpass the relationship between the three, you can use it! Important improves the priority of a style sheet, for example:

P {color: # ff0000! Important}

. Blue {color: # 0000ff}

# Id1 {color: # FFFF00}

At the same time, we add these three styles to a paragraph on the page, which will be followed! The HTML Tag style of important declaration is red. If not! Important, the highest priority ID is selected as yellow text.

7. Note :/*...*/

You can insert comments in CSS to describe you.CodeAnnotations help you or others understand the meaning of the code when editing and changing the code later. Annotations are not displayed in the browser. CSS Comments start with "/*" and end with "*/", as follows:

/* Define the paragraph style table */

P

{

Text-align: center;/* Text center arrangement */

Color: black;/* The text is black */

Font-family: Arial/* The font is Arial */

}

CSS can be developed using any text writing tool, such as text tool and Dreamweaver development.

CSS is also a language that works only when combined with HTML or XHTML,

In simple terms, CSS is used to beautify webpages. CSS is used to control the appearance of webpages.

For example

XHTML section:

<Ul>

<Li> Home page </LI>

<Li> Leave a message </LI>

<Li> Forum </LI>

</Ul>

The expression on the page is a vertical list, which is not beautiful enough,

CSS can be used to improve the List as a horizontal navigation bar and hyperlink.

CSS section:

Ul {list-style: none; margin: 0px; padding: 0px}

Ul Li {margin: 0px; padding: 0px; float: Left ;}

Ul Li a {display: block; width: 100px; Height: 30px; Background: # efefef; color: #333; text-Decoration: none; text-align: Center}

Ul Li A: hover {Background: #333; color: # FFF ;}

After CSS is added, the list becomes a horizontal navigation bar. The hyperlink is a light background, a gray font, no underline, a height of 30 pixels, and a width of 100 pixels.

When we move the mouse over this hyperlink, it turns into a gray background and a white font.

CSS technology is used in homepage creation to control page layout, Font, color, background and other effects more accurately.

You only need to make some simple changes to the corresponding code, you can change the appearance and format of different parts of the same page, or pages of different webpages.

It can achieve the following functions:

(1) It can be used in almost all browsers.

(2) previously, some functions that had to be implemented through image conversion can now be easily implemented with CSS to download pages faster.

(3) make the page font more beautiful and easier to orchestrate, so that the page is truly pleasing to the eye.

(4) You can easily control the page layout.

(5) you can update the style formats of many web pages at the same time without updating them one page at a time. You can use a CSS file to control all the webpage styles on the site. As long as you modify the corresponding lines in the CSS file, all the pages of the whole site will change accordingly.

Think about how we can control the color and size of the font and the font we use before using CSS? We generally use HTML tags for implementation, and the code is very cumbersome.

It is hard to imagine that if the font color needs to be replaced frequently on a page, the length of the final HTML code must be bloated.

To be honest, CSS was born to simplify such a job. Of course its functions are not that simple.

CSS controls the style of the entire page by controlling the style of the page structure.

The style sheet is placed on the page. It is completely plain text and can be easily understood by anyone who understands HTML. Even some very old browsers will not cause page chaos.

One of the major advantages of CSS is that its image transmission speed is faster than HTML pages.

For more information about CSS, I have discussed CSS on the Internet.CommunityBut it is necessary to systematically study CSS and select a good book. We recommend that you read the CSS practice manual, one of the three muskeys of CSS.

CSS:

Chinese, surface-to-surface

China face-to-face missile Co., CSS-N.

CSS has two sides. Just as it is great in formatting text, navigation bar, images, and other small web pages, when you are ready to lay out the complete web page, it is truly terrible.

CSS layout has two styles: absolute positioning and floating. Absolute positioning allows you to locate an element in pixel-level accuracy anywhere on a webpage-or theoretically. This kind of overall control is exciting, as you will see in the next chapter, but it is actually hard to implement. This is the reason why a large number of web pages use floating la S. It is also the topic of this chapter.

Three general naming rules for CSS standardized naming are described in detail.

Camel naming method:

As its name indicates, it means a combination of uppercase and lowercase letters to form the names of variables and functions. For example, the following is the same function named by the camel naming method and the underline method respectively:

Printemployeepaychecks ();

Print_employee_paychecks ();

The first function name uses the camel naming method. Each logical breakpoint in the function name is marked with an uppercase letter. The second function name uses the underline method, each logical breakpoint in the function name is marked with an underscore.

The camel naming method has become increasingly popular in recent years. It is widely used in many new functions libraries and Microsoft Windows environments. On the other hand, the underline method is popular after the appearance of C, in many oldProgramIt is widely used in environments such as UNIX.

Hungarian naming law:

It is widely used in environments like Microsoft Windows. The naming rules for variables (including macros) used in Windows programming are developed by Charles Simonyi, a competent Microsoft programmer.

The Hungarian naming method identifies the scope and type of the variable by adding the symbol of the corresponding lowercase letter before the variable name as the prefix. These symbols can be used at multiple times. The sequence is first M _ (member variable), then pointer, then simple data type, and then others.

For example, m_lpszstr indicates a long pointer member variable pointing to a string ending with 0 characters.

The key to the Hungarian naming method is that the identifier name starts with one or more lower-case letters as the prefix. The prefix is followed by one or more words in the upper-case letters, this word indicates the purpose of the variable.

Pascal's naming method:

Similar to the camel naming method. However, the trigger name method is lower-case, while the Pascal method is upper-case, for example:

Displayinfo ();

String username;

Both adopt the Pascal naming method. In C #, Pascal naming and camel naming are mostly used.

Summary of the three naming rules:

Mydata is an example of Pascal's name.

Mydata is a camel naming method. The first letter of the first word is lowercase, and the first letter of the next word is uppercase, which looks like a camel.

Imydata is a Hungarian name. Its lowercase I indicates its type. The latter name is the same as Pascal's, indicating the purpose of the variable.

CSS style solves a common problem

HTML tags are originally designed to define document content. By using tags such as

Because the two major browsers (Netscape and Internet Explorer) constantly add new HTML tags and attributes (such as font tags and color attributes) to the HTML specification, it is increasingly difficult to create sites whose content is clearly independent from the document presentation layer.

To solve this problem, the W3C, a non-profit standardization alliance, shoulder the mission of HTML standardization and create styles beyond HTML 4.0 ).

All mainstream browsers support Cascading Style Sheets. [Tbody] [/tbody] [/table]