Home > Web Front-end > Front-end Q&A > How to write css

How to write css

PHPz
Release: 2023-05-29 16:52:07
Original
2451 people have browsed it

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:

/*这是注释语句*/
Copy after login

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; }
Copy after login

(2) ID selector

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

Syntax example:

#box { width: 200px; height: 200px; }
Copy after login

(3) Category selector

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

Syntax example:

.box { background-color: #fff; }
Copy after login

(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; }
Copy after login

(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; }
Copy after login

(6) Attribute selector

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

Syntax example:

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

(7) Combination selector

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

Syntax example:

h1, h2, h3 { color: #000; }
Copy after login

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; }
Copy after login

(2) color: font Color

Syntax example:

h1 { color: #ff0000; }
Copy after login

(3) background: background color

Syntax example:

body { background-color: #f7f7f7; }
Copy after login

(4) width: width

Grammar example:

img { width: 100px; }
Copy after login

(5) height: height

Grammar example:

img { height: 100px; }
Copy after login

(6) border: border

Grammar example:

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

(7) padding: inner margin

Grammar example:

.box { padding: 10px; }
Copy after login

(8) margin: outer margin

Grammar example:

.box { margin: 10px; }
Copy after login

(9) text-align: text centered

Syntax example:

h1 { text-align: center; }
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template