read table of contents
CSS Examples to see how CSS works
What is CSS?
CSS stands for Cascading Style Sheets, also known as Cascading Style Sheets.
CSS describes how to display HTML elements on screen, paper, or other media.
CSS saves a lot of work. It can control the layout of multiple web pages at the same time.
External style sheets are stored in CSS files.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wgchen</title>
<style>
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
CSS syntax
A CSS rule-set consists of selectors and declaration blocks:
selectors point to the HTML elements you want to style.
A declaration block contains one or more declarations separated by semicolons.
Each declaration consists of a CSS property name and a value, separated by colons.
Multiple CSS declarations are separated by semicolons, and declaration blocks are enclosed in curly braces.
p {
color: red;
text-align: center;
}
All <p>elements will be center-aligned with a red text color:
Example explanation
p is a selector in CSS (it points to the HTML element to style: <p>).
color is the attribute and red is the attribute value.
text-align is the property and center is the property value.
CSS selectors
CSS selectors are used to "find" (or select) HTML elements to style.
We can divide CSS selectors into five categories:
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）
CSS element selectors
Element selectors select HTML elements based on element names.
p {
text-align: center;
color: red;
}
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
Here, all <p>elements will be center-aligned with a red text color:
CSS id selector
The id selector uses the id attribute of an HTML element to select a specific element.
An element's id is unique within a page, so the id selector is used to select a unique element!
To select an element with a specific id, write a pound sign (#) followed by the element's id.
#para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
This CSS rule will be applied to the HTML element with id=”para1”:
注意:id The name cannot start with a number.
CSS class selector
Class selectors select HTML elements with a specific class attribute.
To select elements with a specific class, write a period （.）character followed by the class name.
.center {
text-align: center;
color: red;
}
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
In this example, all HTML elements with class="center" will be red and center aligned:
you can also specify that only specific HTML elements will be affected by the class.
注意: The class name cannot start with a number!
CSS Universal Selector
Generic selector （*）Selects all HTML elements on the page.
The following CSS rules affect every HTML element on the page:
* {
text-align: center;
color: blue;
}
CSS grouping selectors
Group selectors select all HTML elements with the same style definition.
Take a look at the CSS code below (the h1, h2 and p elements have the same style definition):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
It's best to group selectors to minimize code size.
To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}
In this example, we have grouped the selectors in the above code.