1. What is CSS?
Using CSS technology when designing web pages can effectively achieve more precise control over page layout, fonts, colors, backgrounds and other effects
2. What are the ways to edit CSS?
There are two main ways to edit CSS:
1. CSS rules written in HTML files. In HTML, it can be divided into two forms according to the position: (1) written in the attribute part of an element, as the value of the style attribute; (2) written in the head tag, contained by the style tag.
2. Write the CSS rules in a separate file. This file is called a CSS file, which is a plain text file with the extension ".css". Reference the CSS file in multiple HTML files that need to apply CSS rules to separate content and performance, and improve the maintainability of the website.
For beginners, the first method is generally used. For projects with a large amount of code, the second method is recommended
Three, CSS rules
The CSS control page is implemented by CSS rules, which are composed of selectors and declarations. In layman's terms, the selector is the "code style template", and the declaration is the "fill code in the template".
Four, CSS selector type
There are five main types of CSS selectors: tag selectors, class selectors, id selectors, pseudo-class selectors and attribute selectors.
The above five selectors are basic selectors. You can also combine selectors on this basis, resulting in four types of "combined selectors": joint selectors (also known as intersection selectors) and wildcard selectors , Union selector, derived selector (also known as descendant selector, context selector)
1. Tag selector (element selector) The
tag selector directly uses the tag name in HTML as the selector.
As shown in the figure above, the circles here body{}和p{}are all HTML tag names, and the content attributes inside are body{}defined here <body>, that is, the text is centered; p{}the `
Content attributes within. Pay attention to the priority issue here.
2. The class selector is
shown in the circle above, first set the class name through the class attribute in the HTML markup (name must start with a letter), and then set the dot "." + class name setting attribute under the head style Claim.
3.
id selector The setting method of id selector is similar to that of class selector.
As shown in the figure above, set the id name in the HTML tag (the name must start with a letter), and then set the "#"+id name setting attribute in the style attribute. Note that the same web page id name cannot be reused.
4. Pseudo-type selector
Pseudo-type selector is mainly used for hyperlinks, that is, "hyperlink pseudo-type"
as shown in the figure above
a:link{
} 设置未被访问过的超链接的状态；
a:visited{
} 设置已访问过的超链接状态；
a:hover{
} 设置鼠标悬停时的超链接状态；
a:active{
} 设置已选中的超链接状态（按住超链接不松手时的超链接的状态）
Note here: a:link and a:visited must be placed before a:hover and a:active to be effective; a:hover must be placed before a:active. The
effect is as follows:
Pseudocode link style
Pay attention to the writing format for the four basic selector types: use ";" to separate attributes and attributes, and add ";" after the last attribute value is written.
5. Intersection selector is
usually a combination of mark selector and class selector or mark selector and id selector. But it should be noted that the tag selector must be written in front of the class selector or id selector.
p.c2{
color:green;font-weight:bold;}
li#c3{
color:red;}
*Take the first line of code as an example: select the <p>element with class="c2"
6. Union selector.
Some selectors have the same style and can be defined together
h1,h2.spacial,.spacial,#one{text-decoration:underline;}
*Means: h1, spacial category h2, spacial category and one id selector style are the same
* selectors are separated by commas
7, wildcard selector
*{
color:purple;font-size:16px;}
* Means: all selectors are selected, all of which are the attributes shown above
8. Descendant selector
li strong{
font-style:italic;}
* Means: Only the content style represented by the strong tag under the li tag is italic.
Separate tags with spaces