How to write css

CSS is a web page style design language and a technology used to control the style of web page elements. Through CSS, you can control the style and layout of various elements such as text, images, backgrounds, and borders on web pages. This article will introduce the basic syntax and common properties of CSS in detail to help web designers better master the use of CSS.

1. Basic syntax of CSS

1. Comment syntax of CSS

Comments in CSS start with "/" and end with "/" end. Nothing in the comment statement will be parsed and displayed by the browser.

Example:

/*这是注释语句*/

2. CSS selector syntax

In CSS, selectors are used to specify the elements to which styles are to be applied. The selector can specify the attribute, type, ID, category, etc. of the element.

Selectors can be divided into the following types:

(1) Element selector

Element selector can directly specify the tag name in the HTML tag.

Syntax example:

p { color: red; }

(2) ID selector

The ID selector is specified with the "#" symbol.

Syntax example:

#box { width: 200px; height: 200px; }

(3) Category selector

The category selector is specified with the "." symbol.

Syntax example:

.box { background-color: #fff; }

(4) Descendant selector

The descendant selector separates two selectors with a space, and you can select descendant elements in a hierarchical relationship.

Syntax example:

div p { color: red; }

(5) Pseudo-class selector

Pseudo-class selector is used to select elements in a certain state, such as mouse hover, visited Links etc.

Syntax example:

a:hover { color: red; }

(6) Attribute selector

Attribute selector can select elements based on their attributes or attribute values.

Syntax example:

input[type="text"] { border: 1px solid #ccc; }

(7) Combination selector

Combination selector can specify multiple conditions at the same time, separated by commas.

Syntax example:

h1, h2, h3 { color: #000; }

3. Commonly used properties of CSS

CSS properties can control the appearance, layout, size, color, font, etc. of web page elements.

The following are commonly used properties of CSS:

(1) font-size: font size

Syntax example:

body { font-size: 14px; }

(2) color: font Color

Syntax example:

h1 { color: #ff0000; }

(3) background: background color

Syntax example:

body { background-color: #f7f7f7; }

(4) width: width

Grammar example:

img { width: 100px; }

(5) height: height

Grammar example:

img { height: 100px; }

(6) border: border

Grammar example:

.box { border: 1px solid #ccc; }

(7) padding: inner margin

Grammar example:

.box { padding: 10px; }

(8) margin: outer margin

Grammar example:

.box { margin: 10px; }

(9) text-align: text centered

Syntax example:

h1 { text-align: center; }

4. CSS inheritance and priority

CSS inheritance refers to child elements Can inherit style properties from parent elements. For example, if you set the font size of the body element to 14px, all elements located within the body element will inherit this style attribute.

CSS priority rules refer to which style will take effect when multiple CSS styles act on the same element at the same time. CSS priority rules are judged in the following order:

(1) The more specific the style attribute value, the higher the priority.

For example, ID selectors take precedence over category selectors, and category selectors take precedence over element selectors. If an element is selected by multiple selectors at the same time, the style rule with the more specific selector will be applied first.

(2) The later the style attribute appears, the higher the priority.

For example, when an element defines multiple same style attributes at the same time, the style rules that appear later will overwrite the previous rules.

(3) The style set by the !important rule has the highest priority.

In this case, the value of the corresponding style attribute will not be overridden by other selector rules.

2. Summary

CSS is an extremely important technology in web design. Correctly understanding and mastering the syntax and common properties of CSS can greatly improve the level of web design. This article provides a detailed explanation of the basic syntax and common properties of CSS, hoping to help web designers better apply CSS technology.

The above is the detailed content of How to write css. For more information, please follow other related articles on the PHP Chinese website!