Getting Started with CSS: the basics of grammar

css| syntax

1. Basic grammar

The definition of CSS is composed of three parts: selectors (selector), attributes (properties), and values (value).
The basic format is as follows:

selector {Property:value}

(Selector {property: value})
A selector can be a variety of forms, typically the HTML tag you want to define a style for, such as body, P, TABLE ..., you can define its properties and values by this method, and the attributes and values are separated by colons:

Body {Color:black}

Selector body is the main part of the page, color is the control of the color of the text, black is the color of the value, the effect of this example is to make the text in the page is dark.

If the value of a property is composed of more than one word, you must enclose the value in quotes, such as the name of the font that is often a combination of several words:

P {font-family: "Sans serif"}

(define paragraph font as sans serif)

If you need to specify multiple properties for a selector, we use semicolons to separate all the attributes and values:

p {text-align:center; color:red}

(The paragraph is centered, and the text in the paragraph is red)

To make your defined style sheet easy to read, you can use the writing form of a branch:

P
{
Text-align:center;
Color:black;
Font-family:arial
}

(The paragraph is centered, the text in the paragraph is black, and the font is Arial)

2. Selector Group

You can combine selectors of the same attributes and values to write, separating the selectors with commas, which reduces the style repetition definition:

H1, H2, H3, H4, H5, h6 {Color:green}

(This group includes all the header elements, and the text for each heading element is green)

P, table{font-size:9pt}

(Text size in paragraphs and tables is 9th words)

The effect is exactly equivalent to:

p {font-size:9pt}
Table {FONT-SIZE:9PT}

3. Class Selector

With the class selector you can define different styles for the same element category, and when defining a class selector, add a point number to the name of the custom class. If you want two different paragraphs, one paragraph aligned to the right, and one paragraph centered, you can define two classes first:

p.right {Text-align:right}
P.center {Text-align:center}

And then use it not in a different paragraph, just add the class argument you defined in the HTML tag:

<p class= "Right" > This paragraph is right-aligned
</p>

<p class= "center" >
This paragraph is arranged in the center
</p>

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

There is also a use of the class selector 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}

(The class selector for the definition. Center is centered in the text)
Such a class can be applied to any element. Here we make the H1 element (Heading 1) and the P element (paragraph) grouped into the "center" class, which causes the styles of the two elements to follow the ". Center" class selector:

<H1 class= "center" >
This title is centered.
<p class= "center" >
This paragraph is also arranged in the center
</p>

Note: This class selector, which omits HTML tags, is the most commonly used CSS method, and it is convenient for us to apply a predefined class style to any element.

4. ID Selector

The ID parameter in the HTML page specifies a single element, and the ID selector is used to define a separate style for this single element.
The ID selector is similar to the class selector, as long as the class is replaced with an ID. Replace the class in the previous example with an ID:

<p id= "Intro" >
This paragraph is aligned to the right
</p>

Define the ID selector to precede the ID name with a "#" number. The same as the class selector, there are two ways to define the properties of the ID selector. In the following example, the id attribute matches all elements of the 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 the paragraph element of id= "Intro":

P#intro
{
font-size:110%;
Font-weight:bold;
Color: #0000ff;
Background-color:transparent
}

Note: ID selectors are so restrictive that you can only define the style of an element individually, which is typically used only in special cases.

5. Include Selector

You can separate the stylesheet of a relationship definition for some element, and element 1 contains element 2, which is defined only for element 2 in element 1, not for individual element 1 or element 2, for example:

Table A
{
font-size:12px
}

The links in the table change the style, the text size is 12 pixels, and the linked text outside the table is still the default size.

6. Cascading of Style sheets

Cascading is inheritance, and the style sheet's inheritance rule is that the external element style is preserved and inherited to the other elements contained in the element. In fact, all elements nested within an element inherit the property values specified by the outer element, sometimes adding many layers of nested styles together, unless otherwise changed. For example, to nest a P tag in a div tag:

div {color:red; font-size:9pt}
......
<div>
<p>
The text of this paragraph is red 9th
</p>
</div>

(The content in the P element inherits the div-defined attribute)
Note: In some cases the inner selector does not inherit the value of the surrounding selector, but theoretically these are special. For example, the upper boundary property value is not inherited, and intuitively, a paragraph does not have the same upper boundary value as the body of the document.

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

div {color:red; font-size:9pt}
p {Color:blue}
......
<div>
<p>
The text of this paragraph is blue 9th Word
</p>
</div>

We can see that the text size of paragraph 9th is inherited Div attribute, and the color attribute is defined as the last.

When different selectors define the same elements, consider the precedence between different selectors. ID selector, class selector, and HTML tag Selector, because the ID selector is the last element, so the priority is highest, followed by the class selector. If you want to go beyond the relationships between these three, you can use!important to elevate the style sheet's precedence, for example:

p {color: #FF0000!important}
. Blue {color: #0000FF}
#id1 {color: #FFFF00}

We also add these three styles to one of the paragraphs in the page, which will end up with the red text in accordance with the!important-declared HTML tag Selector. If you remove!important, the highest priority ID selector is the yellow text.

7. Note

You can insert a comment in the CSS to illustrate the meaning of your code, which helps you or others to understand the meaning of the code when editing and changing the code later. In the browser, the comment is not displayed. CSS comments start with "/*" and End with "* *", as follows:

/* Define paragraph style sheet * *
P
{
Text-align:center; /* Text Center arrangement/*
Color:black; /* Text is black * *
Font-family:arial/* font is Arial * *
}