CSS Getting Started: basic syntax tutorial

This example is a series of tutorials for getting started with CSS. In this tutorial, we will learn the syntax basics of CSS, it mainly learns the basic CSS syntax, selection operator group, class selector, ID selector, including selector, cascading of style sheet, and, hope to help those who are interested in creating web pages ~~

CSS Basics

1. Basic syntax

The definition of CSS consists of three parts: selector, properties, and value ).
The basic format is as follows:

Selector {property: value}

(Selector {property: Value })

The selector can be in multiple forms. Generally, You need to define the HTML tag of the style, such as BODY, P, TABLE ......, You can use this method to define its attributes and values. The attributes and values are separated by colons:

Body {color: black}

The selector body refers to the page body. color is the attribute that controls the text color, and black is the color value. In this example, the text in 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:

P {font-family: "sans serif "}

(Define the paragraph font as sans serif)

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

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

(The paragraphs are arranged in the center, and the text in the paragraphs is red)

To make the style sheet you define easy to read, you can use the branch writing format:

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

(The section is arranged in the center, the text in the section is black, and the font is arial)

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 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:

<P class = "right"> This section is right aligned
</P>
<P class = "center">
This section is arranged in the center.
</P>

Note: The class name can be any English word or a combination of numbers and numbers starting with English. Generally, it is briefly named based on its functions and effects.

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 delimiters 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 in the center
</H1>
<P class = "center">
This section is also arranged in the center
</P>

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.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page