Introduction to CSS syntax

The definition of CSS is composed of three parts:

selector (selector),

Properties

The value of the property.

Syntax: selector {property: value} (selector {property: value})

1. Description

The selector can be in many forms, generally it is the HTML tag you want to define the style, such as BODY, P, TABLE. You can define its attributes and values ​​through this method. Attributes and values ​​should be separated by colons:

Example: body {color: black}, the effect of this example is to make the text on the page black.

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

Example: p {font-family: "sans serif"} (define the paragraph font as sans serif)

If you need to specify multiple attributes for a selector, use points Number separates all attributes and values:

Example: p {text-align: center; color: red} (the paragraph is centered; and the text in the paragraph is red)

2. Selector group

You can combine selectors with the same attributes and values ​​to write, and use commas to separate the selections. symbols, this can reduce repeated definitions of styles:

##h1, h2, h3, h4, h5, h6 {color: green} (This group includes all title elements, each The text of the title element is all green)

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

The effect is completely equivalent to:

p { font-size: 9pt }

table { font-size: 9pt }

3. Class selector

Using the class selector, you can classify the same elements and define different Style, when defining a class selector, add a period in front of the name of the custom class. If you want two different paragraphs, one aligned to the right and one centered, you can first define two classes:

p.right {text-align: right}

p.center {text-align：center}

Then don’t use it in different paragraphs, just add your definition in the HTML tag The class parameter:

right This paragraph is aligned to the right

center This paragraph is centered

Another way to use the class selector is to omit the HTML tag name in the selector, so that several different elements can be defined in the same style:

center {text-align: center} (define the .center class selector to center text). This class can be applied to any element. The following classifies both the h1 element (title 1) and the p element (paragraph) into the "center" class, which makes the styles of both elements follow the ".center" class selector:

This title is centered

This paragraph is also centered

This class selector that omits HTML tags is after The most commonly used CSS method. Using this method, you can easily apply predefined class styles to any element.

4. ID selector

#In the HTML page, the ID parameter specifies a single element, and the ID selector The symbol is used to define a separate style for this single element. The application of ID selector is similar to that of class selector, just replace CLASS with ID. Replace the class in the above example with ID: align this paragraph to the right and define the ID selector with a "#" sign before the ID name. Like the class selector, there are two ways to define the attributes of the ID selector. In the following example, the ID attribute will match all elements with id="intro":

#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

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

In the following example, the ID attribute only matches paragraph elements with id="intro":

p#intro

{

font-size：110%；

##font-weight：bold；

color:#0000ff;

background-color: transparent

}

5. Contain selectors

table a

{

font-size：12px

}

Links within the table have their styles changed and their text size is 12 pixels, while links outside the table still have their text at the default size.

6. The cascading nature of style sheets

##The cascading nature is inheritance, and the inheritance rules of style sheets are external The element style will be retained and inherited by other elements contained by this element. In fact, all elements nested within an element will inherit the attribute values ​​specified by the outer element, sometimes stacking many layers of nested styles together unless otherwise changed. For example, nest the P tag in the DIV tag:

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

The text of this paragraph It is a red 9-point font (the content in the P element will inherit the attributes defined by DIV)

In some cases, the internal selector does not inherit the value of the surrounding selector, but in theory these are special. For example, the upper boundary attribute value is not inherited. Intuitively, a paragraph will not have the same upper boundary value as the document BODY. In addition, when style sheet inheritance conflicts, the last defined style always takes precedence. If the color of P is defined in the above example:

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

p {color: blue}

CSS Album

The text in this paragraph is blue font size 9. The size of the text in the paragraph is size 9, which inherits the div attribute, while the color attribute follows the last defined . When different selectors define the same element, the priorities between different selectors must be taken into consideration. ID selector, class selector and HTML tag selector. Because the ID selector is added to the element last, it has the highest priority, followed by the class selector. If you want to transcend the relationship between these three, you can use !important to increase the priority of the style sheet, for example:

p { color: #FF0000!important }

blue { color：#0000FF}

#id1 { color：#FFFF00}

Also on the page If these three styles are added to a paragraph, it will finally be red text according to the HTML tag selector style declared by !important. If !important is removed, the ID selector with the highest priority will be yellow text.

7. Comments

Insert comments in CSS to explain the meaning of your code. Comments will help you or others understand the meaning of the code when you or others edit and change the code in the future. In the browser, comments are not displayed. CSS comments start with "/*" and end with "*/", as follows:

/* Define paragraph style sheet*/

p

{

text-align: center; /* The text is arranged horizontally in the center*/

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

font-family: arial /* The font is arial */

}

CSS Album

css can be developed with any text writing tool, such as text tools and dreamweaver development. CSS is also a language. This language must be combined with HTML or , forum, the expression form on the page at this time is a vertical list, which is not beautiful enough. You can use CSS to improve this list into a horizontal navigation bar and hyperlink:

css part ：

ul{

list-style:none;

margin:0px;/ *Set the indentation of IE browser*/

padding:0px; /*Set the indentation of standard browser*/

}

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 adding css, this list becomes a horizontal navigation bar. The hyperlink has a light background, gray font, no underline, and a height of 30 pixels. , the width is 100 pixels. When the mouse passes over this hyperlink, it turns into a gray background and white fonts. CSS technology is used when making the homepage, which can effectively achieve more precise control over the layout, fonts, colors, backgrounds and other effects of the page. As long as you make some simple modifications to the corresponding code, you can change the appearance and format of different parts of the same page, or web pages with different pages.

Its function can be achieved:

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

(2) Some functions that had to be implemented through image conversion in the past can now be easily implemented using CSS, thereby downloading the page faster.

(3) Make the fonts on the page more beautiful and easier to arrange, making the page truly pleasing to the eye.

(4) You can easily control the layout of the page.

(5) You can update the style and format of many web pages at the same time, no longer need to update page by page. You can use a CSS file to control the style of all web pages on the site. As long as the corresponding lines in the CSS file are modified, all pages of the entire site will change accordingly.

How to control the color and size of fonts and the fonts used before using CSS? It is generally implemented using HTML tags, and the code is very cumbersome. It is hard to imagine that if the font color and size need to be changed frequently on a page, the length of the HTML code generated must be bloated. CSS was born to simplify such work, but of course its function is by no means that simple. CSS controls the style of the entire page through the idea of ​​style control of the page structure. The style sheet is placed on the page and is interpreted and executed by the browser. It is a complete text and can be mastered by anyone who understands HTML. It is very easy. Even for some very old browsers, page confusion will not occur. One of the great advantages of CSS is that its image transmission speed is faster than that of a complete HTML web page.