What does css mean?

css stands for Cascading Style Sheets, and its full English name is "Cascading Style Sheets". It is a computer language used to express file styles such as HTML or XML. CSS can not only statically modify web pages, but also cooperate with various Scripting languages ​​dynamically format various elements of a web page.

The operating environment of this article: windows7 system, css3 version, Dell G3 computer.

Cascading Style Sheets (English full name: Cascading Style Sheets) is a computer used to express document styles such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language). language. CSS can not only statically modify web pages, but can also cooperate with various scripting languages ​​to dynamically format various elements of web pages.

CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page objects and model styles.

Language Features

CSS provides a style description for the HTML markup language and defines how elements are displayed. CSS is a breakthrough in the field of web design. It can be used to modify a small style to update all page elements related to it.

In general, CSS has the following characteristics:

• Rich style definitions

CSS provides rich document styles Appearance, and the ability to set text and background properties; allows the creation of a border for any element, as well as the distance between the element's border and other elements, and the distance between the element's border and the element's content; allows you to freely change the capitalization, decoration, and Other page effects.

• Easy to use and modify

CSS can define styles in the style attribute of HTML elements or in HTML documents. In the header part, the style can also be declared in a special CSS file for reference by the HTML page. In short, CSS style sheets can store and manage all style declarations in a unified manner.

In addition, elements of the same style can be classified and defined using the same style, you can also apply a certain style to all HTML tags with the same name, or you can assign a CSS style to a certain in page elements. If we want to modify the style, we only need to find the corresponding style statement in the style list and modify it.

• Multi-page application

CSS style sheet can be stored in a separate CSS file, so that we can use the same A CSS style sheet. Theoretically, CSS style sheets do not belong to any page file and can be referenced in any page file. In this way, the styles of multiple pages can be unified.

• Cascading

Simply put, cascading is to set the same style multiple times on an element, which will use the last attribute value set. . For example, if you use the same set of CSS style sheets for multiple pages in a site, and if you want to use other styles for some elements in some pages, you can define a separate style sheet for these styles and apply them to the page. These styles defined later will override the previous style settings, and what you see in the browser will be the style effect set last.

• Page compression

In websites that use HTML to define page effects, a large number or repeated tables and font elements are often required to form various specifications. The result of this is that a large number of HTML tags will be generated, which will increase the size of the page file. Putting the style declaration separately in the CSS style sheet can greatly reduce the size of the page, so the time spent loading the page will also be greatly reduced. In addition, the reuse of CSS style sheets reduces the size of the page to a greater extent and reduces the download time.

[Recommended learning: css video tutorial]

Language basics

Attributes and attribute values

Attributes

The name of an attribute is a legal identifier, and they are keywords in CSS syntax. An attribute specifies an aspect of formatting. For example: color is the color attribute of the text, and text-indent specifies the indent of the paragraph.

To master the usage of an attribute, there are six aspects that need to be understood. The specific description is as follows:

①The legal value of this attribute (legal value). Obviously the paragraph indent attribute text-indent can only be assigned a value indicating the length, and the value indicating the background pattern. The image attribute should take a value indicating the image location link or the keyword none to indicate no background pattern.

②The default value of this attribute (initial value). When this attribute is not specified in the style sheet and the attribute cannot be inherited from its parent element, the browser will assume that the attribute takes its default value.

③The elements to which this attribute applies (Applies to). Some attributes only apply to certain individual elements. For example, the white-space attribute only applies to block-level elements. The white-space attribute can take three values: normal, pre and nowrap. When set to normal, the browser will ignore consecutive whitespace characters and only display one whitespace character. When pre is taken, consecutive whitespace characters are retained. When taking nowrap, consecutive whitespace characters are ignored and line wrapping is not performed automatically.

④Whether the value of this attribute is inherited by the next level.

⑤If the attribute can take a percentage value, how will the percentage value be interpreted? That is, what is the standard relative to the percentage value. For example, the margin attribute can take a percentage value, which is the width of the container relative to the element where the margin is stored.

⑥The media type group (media groups) to which this attribute belongs.

Attribute value

①Integers and real numbers

This is not much different from integers and real numbers in the ordinary sense. Only floating point decimals can be used in CSS, and scientific notation cannot be used to represent real numbers like other programming languages. That is, 1.2E3 will be illegal in CSS. Here are a few correct examples, integers: 128, -313, real numbers: 12.20, 1415, -12.03.

②Length quantity

A length quantity consists of an integer or real number plus the corresponding length unit. Length quantities are often used to position elements. Positioning is divided into absolute positioning and relative positioning, so the length unit is also divided into relative length unit and absolute length unit.

The relative length units are: em - the height of the current font, which is the value of the font.size attribute; ex - the height of the lowercase letter x in the current font; Dx - the length of one pixel, its actual The length is determined by the monitor settings.

Another point worth noting is that child elements do not inherit the relative length values ​​​​of parent elements, only their actual calculated values.

③Percentages

Percentages are numbers plus a percent sign. Obviously, percentages are always relative, so like relative lengths, percentages are not inherited by child elements. [10]

Selector

Type selector

A selector in CSS is the name of the element type. Using this selector (called a type selector), a declaration can be applied to every instance of this element type. For example, the selector of the following simple rule is H1, so the rule applies to all H1 elements in the document:

H1 {color:red}

Simple attribute selector

CLASS attribute

The CLASS attribute allows a declaration to be applied to a group of elements that have the same value on the CLASS attribute. All elements within BODY have the CLASS attribute. Essentially, you use the CLASS attribute to classify elements, create rules in your style sheet to reference the value of the CLASS attribute, and then the browser automatically applies those attributes to that group of elements.

The class selector starts with an identifier (period), which is used to indicate which type of selector follows. For the class selector, the period was chosen because in many programming languages ​​it is associated with the term "class". Translated into English, an identifier means "an element with a class name".

ID attribute

The operation of the ID attribute is similar to the CLASS attribute, but there is one important difference: the value of the ID attribute must be unique in the entire document. This allows the ID attribute to be used to set style rules for individual elements. A selector containing an ID attribute is called an ID selector.

It should be noted that the identifier of the ID selector is the hash symbol (#). The identifier is used to remind the browser that what comes next is an ID value.

STYLE attribute

Although CLASS and ID attribute values ​​can be used in selectors, the STYLE attribute can actually replace the entire selector mechanism. Rather than just having a value that can be referenced in a selector (which is what ID and CLASS have), the value of the STYLE attribute is actually one or more CSS declarations.

Normally, with CSS, the designer will place all style rules in a style sheet, which is located within the STYLE element at the top of the document (or linked externally). However, using the STYLE attribute enables you to bypass the style sheet and place the declaration directly into the opening tag of the document.

Combined selector types

Type selectors, ID selectors and class selectors can be combined into different selector types to form more complex selectors. By combining selectors, you can be more precise with the elements you want to give a certain representation to. For example, to combine a type selector and a class selector, an element must meet two requirements: it must be the right type and the right class so that style rules can act on it.

External information: pseudo-classes and pseudo-elements

In CSS1, styles were usually based on tags and attributes that appeared in the HTML source code. This approach is perfectly fine for many design situations, but it fails to achieve some common design effects that designers want to achieve.

Designing pseudo-classes and pseudo-elements can achieve some of these effects. These two mechanisms expand the expressive capabilities of CSS. In CSS1, pseudo-classes were used to change the style of links in a document based on circumstances such as whether the link was accessed, when it was accessed, and how the user interacted with the document. With the help of pseudo-elements, you can change the style of the first letter and first line of an element, or add elements that do not appear in the source document.

Neither pseudo-classes nor pseudo-elements exist in HTML; that is, they are not visible in HTML code. Both mechanisms have been carefully designed to be further expanded in future versions of CSS; that is, to achieve more effects.

The above is the detailed content of What does css mean?. For more information, please follow other related articles on the PHP Chinese website!