CSS learning-Basic Knowledge

CSS Overview

In the previous article, we had a preliminary understanding of CSS. CSS is a language. Since it is a language, it naturally has its syntax, in this article, we will learn some grammar knowledge about CSS.

CSS syntax

CSS rules are composed of two main parts: the selector and one or more declarations. The following is a complete CSS statement.

Selector

Selector is usually the html element we need to change the style, that is, h1. There are three types of CSS selector in sequence. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHAgbGFuZz0 = "en-US">

Tag Selector

Generally, it is also called a context selector or a derived selector. We can use a tag to make it more concise. It allows us to determine the style of a tag Based on the context in the document, the image code shown above is a tag selector.

li {    font-style: italic;    font-weight: normal;  }

Li is an html Tag.

CATEGORY Selector

In CSS, the category selector is displayed as a dot. It allows you to specify a style in a way independent of document elements. It can be used independently or in combination with other elements.

.important{color:red;}

This heading is veryimportant.

To associate a category selector style with an element, you must specify a value for the class of the label.

ID Selector

The id selector can specify a feature style for html elements marked with a feature id. The id selector is defined by the "#" number,

#intro{font-weight:bold;}

 
  This is a paragraph of introduction.
  

 

Unlike the category selector, when an ID selector is used, an ID can only be used once in an html document, and the ID selector cannot be used together, because the ID is familiar with the list of words that cannot be separated by spaces.

Statement

Each declaration can be seen from the above figure that each declaration is composed of an attribute and a value. In our first graph, color and font-size are attributes, red and 14px are values. We use braces to enclose the Declaration. If the attribute value we want to declare is a number of words, double quotation marks are added to the value. If we define multiple declarations, separate each declaration with a semicolon, and do not need a semicolon at the end of the last declaration.

CSS text Effect

Including CSS font attributes to define the font family, font size, bold, style (italic), and deformation of the text. It also includes text attributes, which can define the appearance of the text, we can change the text color, Character spacing, align text, decoration text, and indent text.

CSS background image creation is quite complex. The background solid color is relatively simple, so I will not mention it. I will focus on the background image and put the image into the background. The background-image attribute is used. Other knowledge about the background is as follows, background duplication, background positioning, keywords, percentage value, length value, and background Association knowledge.

Link

The special feature of CSS links lies in the ability to set their styles based on their statuses. The four statuses of links are as follows:

A: link-common, unaccessed link

A: visited-the user's accessed Link

A: hover-The mouse pointer is above the link

A: active-time when the link is clicked

A: link {color: # FF0000;}/* unaccessed link */a: visited {color: #00FF00;}/* accessed link */: hover {color: # FF00FF;}/* move the mouse pointer to the link */a: active {color: # 0000FF;}/* the link being clicked */

Table

Tables in CSS can help us greatly improve the appearance of tables, for a table, we set the border, collapse border, width and height, text alignment, padding, and color of the table.

Others

The outline is also frequently used in CSS. The outline is a line drawn around the element and located at the periphery of the border edge, which can highlight the element, the CSS outline attribute is used to set the style, color, and width of the element outline. In addition, menus and filters are used.

In short

These basic knowledge about CSS can be continuously recognized and improved in practice, so that we can get to know the truth. As an important knowledge about CSS, we will explain the box model in the next article.