Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the basic knowledge and usage of CSS". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the basic knowledge and usage of CSS" can help you solve the problem.

CSS introduction

CSS (Cascading Style Sheet, cascading style sheets) defines how HTML elements are displayed.

When the browser reads a style sheet, it formats (renders) the document according to that style sheet.

Each CSS style has two components: a selector and a declaration. The declaration also includes attributes and attribute values. Each declaration ends with a semicolon.

Comments are the mother of code. -- excerpt from the quotation of Nezha

Inline style sets the CSS style in the style attribute of the tag. Large-scale use is not recommended.

Embedded is to centralize the CSS style in the tag pair of the web page. The format is as follows:

The external style is to write the css in a separate file and then introduce it on the page. This method is recommended.

Note:

The style class name should not start with a number (some browsers do not recognize it).

If you have more than one class attribute in the tag, separate it with a space.

Universal represents all

Parsing: the div after the first div, including nested tags, will be rendered

Div div {color: deeppink}

An uncommonly used attribute selector

When multiple elements have the same style, there is no need to style each element repeatedly, we can style elements uniformly by using comma-separated grouping selectors among multiple selectors.

For example:

The above code sets the font to red for both the div tag and the p tag.

Usually, we write in two lines to make it clearer:

A variety of selectors can be mixed, such as:. All p tags within class C1 set the font color to red.

About tag nesting: usually block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, it can only contain other inline elements.

It is commonly used to set a special style for the initials:

Before and after are mostly used to clear floats.

Inheritance is a major feature of CSS, which depends on the ancestor-descendant relationship. Inheritance is a mechanism that allows styles to be applied not only to a particular element, but also to its descendants. For example, a font color value defined by body will also be applied to the text of a paragraph.

All tags on the page will inherit the font color of body. However, the weight of CSS inheritance is very low, which is even lower than the weight of ordinary elements.

We only need to set the font color to the corresponding tag to override the style it inherits.

In addition, inheritance is an important part of CSS, and we don't even have to think about why it can do so, but CSS inheritance is also limited. There are some properties that cannot be inherited, such as border, margin, padding, background, etc.

We've learned a lot about selectors, that is, there are many ways to find and style an element in a HTML page, so what does the browser decide which style should be applied?

In fact, it is determined according to the weight of different selectors. The specific method for calculating the weight of selector is shown below:

In addition, you can also force styles to take effect by adding! important, but it is not recommended. Because if you use too much! Important can make style files confusing and difficult to maintain.

You can use it as a last resort! Important

The width attribute sets the width for the element.

The height attribute sets the height for the element.

Only block-level tags can set the width, and the width of inline tags is determined by the content.

Font-family can save multiple font names as a "fallback" system. If the browser does not support the first font, the next one will be tried. The browser uses the first value it can recognize.

Simple example:

If set to inherit, it inherits the font size value of the parent element.

Font-weight is used to set the weight (weight) of the font.

Value

Description

Normal

Default value, standard weight

Bold

Bold type

Bolder

Thicker

Lighter

Finer

100m / m / m 900

Set the specific thickness, 400 is equivalent to normal, and 700 is equivalent to bold

Inherit

Inherit the weight value of the parent element font

The color property is used to set the color of the text.

Colors are most often specified by CSS:

Hexadecimal value-for example: # FF0000

A RGB value-such as: RGB (255j0p0p0)

The name of the color-e. G. red

There is also rgba (255j0j0co.0. 3), and the fourth value is alpha, which specifies the transparency / opacity of the color, which ranges from 0.0 to 1.0.

This is the end of the introduction to "what is the basic knowledge and how to use CSS". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.