CSS Tutorial (2) Basic Syntax

1. Basic syntax

The definition of CSS is composed of three parts: selector (selector), properties (properties) and property value (value).
The basic format is as follows:
selector {property: value}
(selector {property: value})
The selector can be in many forms, usually it is the HTML tag you want to define the style. For example, BODY, P, TABLE..., you can define its attributes and values ​​through this method. The attributes and values ​​should be separated by colons:
body {color: black}
The selector body refers to the main part of the page , color is an attribute that controls text color, and black is the color value. The effect of this example is to make the text on the page black.

If the value of the attribute is composed of multiple words, the value must be enclosed in quotation marks. For example, the name of the font is often a combination of several words:
p {font-family: "sans serif"}
(Define the paragraph font as sans serif)

If you need to specify multiple attributes for a selector, we use semicolons to separate all attributes and values:
p {text-align: center ; color: red}
(Paragraphs are arranged in the center; and the text in the paragraph is red)

In order to make the style sheet you define easier to read, you can use a branched writing format:
p
{
text-align: center;
color: black;
font-family: arial
}
(The paragraphs are arranged in the center, the text in the paragraph is black, and the font is arial)

2. Selector group

You can combine selectors with the same attributes and values ​​and separate them with commas to reduce repeated definitions of styles:
h1, h2 , h3, h4, h5, h6 { color: green }
(This group includes all title elements, and the text of each title element is green)
p, table{ font-size: 9pt }
(The text size in paragraphs and tables is size 9)
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 styles. When defining the 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 use it in different paragraphs. Just add the class parameter you defined in the HTML tag:

This paragraph is aligned to the right

This paragraph is centered

Note: The name of the class can be any English word Or a combination starting with English and a number, generally named briefly by its function and effect.

There is another way to use the class selector, omitting 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 the text)
Such a class can be applied to any element. Next, we classify 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 arranged in the center

This paragraph is also arranged in the center
Note: This class selector that omits HTML tags is our most commonly used CSS method. Using this method, we can easily apply predefined class styles to any element.

4. ID selector

The ID parameter specifies a single element in the HTML page, and the ID selector 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

The ID selector must be defined before the ID name Add a "#" sign. 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
}
(The font size is 110% of the default size; bold; blue; background color is transparent)
In the following example, the ID attribute only matches id Paragraph element of ="intro":
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background- color:transparent
}
Note: The ID selector is very limited. It can only define the style of a certain element individually, and is generally only used in special circumstances.

5. The inclusion selector

can be used to define a style sheet for a certain element inclusion relationship. Element 1 contains element 2. This method is only defined for element 2 within element 1. , no definition for individual element 1 or element 2, for example:
table a
{
font-size: 12px
}
The link in the table has changed the style, and the text size is 12 pixels, while the text of links outside the table remains at the default size.

6. The cascading nature of style sheets

Cascading is inheritance. The inheritance rule of the style sheet is that the external element style will be retained and inherited by other elements contained in 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, nesting P tags in p tags:
p { color: red; font-size:9pt}
......

of this paragraph The text is red 9-point font

(The content in the P element will inherit the attributes defined by p)
Note: In some cases, the internal selector does not Inherits the values ​​of surrounding selectors, 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 encounters conflicts, the last defined style will always prevail. If the color of P is defined in the above example:
p { color: red; font-size:9pt}
p {color: blue}
……

< ;p>
The text in this paragraph is blue font size 9

We can see that the text size in the paragraph is font size 9 which is inherited p attribute, and the color attribute is based on the last definition.

When different selectors define the same element, the priority 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}
We add these three styles to a paragraph in the page at the same time, and 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

You can insert comments in CSS to explain the meaning of your code. Comments will help you or others understand the meaning of the code when editing and changing 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; /* Center the text Arrangement*/
color: black; /* Text is black*/
font-family: arial /* Font is arial */

The above is the detailed content of CSS Tutorial (2) Basic Syntax. For more information, please follow other related articles on the PHP Chinese website!