CSS Tutorial (ii) Basic syntax

Source: Internet
Author: User

1. Basic syntax

The definition of CSS is composed of three parts: the selector (selector), the property (properties), and the value of the property (value).
The basic format is as follows:
selector {Property:value}
(Selector {property: value})
Selectors can be in many forms, usually the HTML tags you want to define the style for, such as body, P, TABLE ..., you can define its properties and values by this method, and the properties and values are separated by colons:
Body {Color:black}
The selector body is the body part of the page, color is the attribute that controls the color of the text, black is the value of the color, and the effect of this example is to make the text in the page black.

If the value of a property is made up of multiple words, you must enclose the value in quotation marks, such as the name of the font is often a combination of several words:
P {font-family: "Sans serif"}
(define paragraph font to sans Serif)

If you need to specify multiple properties for a selector, we use semicolons to separate all 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 format of the branch:
P
{
Text-align:center;
Color:black;
Font-family:arial
}
(The paragraph is centered, the text in the paragraph is black, the font is Arial)

2. Selector Group

You can combine selectors of the same attribute and value 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 heading elements, and the text of 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 classification, define the class selector, and precede the name of the custom class with a dot number. If you want two different paragraphs, a paragraph is aligned to the right and a paragraph is centered, you can define two classes first:
p.right {Text-align:right}
P.center {Text-align:center}
Then use not in different paragraphs, just add the class parameter you defined in the HTML tag:
<p class= "Right" >
This paragraph is aligned to the right
</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.

The class selector also has a use to omit the HTML tag name from the selector so that several different elements can be defined in the same style:
. Center {Text-align:center}
(Define. Center's class selector to center text)
Such a class can be applied to any element. Below we make the H1 element (Heading 1) and the P element (paragraph) all classified as the "center" class, which causes the style of the two elements to follow the ". Center" class selector:
&LT;H1 class= "center" >
This title is arranged in the center
<p class= "center" >
This paragraph is also arranged in the center.
</p>
Note: This omitted HTML tag class selector is our most commonly used CSS method, using this method, we can easily apply a predefined class style on any element.

4. ID Selector

In an HTML page, the ID parameter specifies a single element, and the ID selector is used to define a separate style for that single element.
The ID selector is similar to the class selector, as long as you change the class to an ID. Replace the class with an ID in the example above:
<p id= "Intro" >
This paragraph aligns to the right
</p>
Define the ID selector to precede the ID name with a "#" number. As with 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 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: The ID selector is very restrictive and can only be used to define the style of an element, typically only in special cases.

5. Include selectors

It is possible to have a style sheet that contains a relationship definition for a single element, and element 1 contains element 2, which is defined only for element 2 in element 1 and no definition for a separate element 1 or element 2, for example:
Table A
{
font-size:12px
}
The links within the table changed 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

Cascading is inheritance, and the rule of inheritance for a style sheet is that the outer 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 stacking the nested styles of many layers together, unless otherwise changed. For example, the P tag is nested in the P tag:
p {color:red; font-size:9pt}
......
<p>
<p>
The text of this paragraph is the red 9th Word
</p>
</p>
(The content in the P element inherits the P-defined properties.)
Note: In some cases, the internal selectors do not inherit the values of the surrounding selectors, but in theory these are special. For example, the upper boundary attribute 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 style sheet inheritance encounters a conflict, the style that is last defined is always whichever. If the color of P is defined in the example above:
p {color:red; font-size:9pt}
p {Color:blue}
......
<p>
<p>
The text of this paragraph is the blue 9th Word
</p>
</p>
We can see that the text size in the paragraph is 9th, which inherits the P attribute, and the color attribute is defined last.

When different selectors define the same elements, take into account the precedence between the different selectors. ID selectors, class selectors, and HTML tag selectors, because the ID selector is the last addition to the element, so the precedence is the highest, followed by the class selector. If you want to go beyond these three relationships, you can use!important to elevate the precedence of the stylesheet, for example:
p {color: #FF0000!important}
. Blue {color: #0000FF}
#id1 {color: #FFFF00}
We also add these three styles to a paragraph in the page, and it will end up in red text according to the HTML tag Selector style that was!important declared. If!important is removed, the highest priority ID selector is yellow text.

7. Notes

You can insert comments into your CSS to explain what your code means, and comments help you or someone else understand what the code means when you edit and change the code later. In the browser, the comment is not displayed. The CSS comments begin with "/*" and End with "*/", as follows:
/* Define a paragraph style sheet */
P
{
Text-align:center; /* Text Centered */
Color:black; /* Text is black */
Font-family:arial/* font is arial */

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.