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!