-
Selector
ID selector
Specific styles can be assigned to HTML elements marked with specific ids. It is a type of selector in CSS and is unique. One id can only identify one attribute. Selectors are identified with “#”. (Note: id cannot start with a number) The following style sheet is id=”pare”
#para1
{
text-align:center;
color:red;
}
Class selector
Used to describe the style of a group of elements. The class selector is different from the id selector. Class can be used in multiple elements. Selectors are identified with “.”.
<p clss="center">This is a paragraph</p>
.center {text-align:center;}
Type selector
The type selector directly uses the name of the element or object as the selector, which is the most common selector.
h1{
Attribute: attribute value;
}
Universal selector
The * sign represents the selection of all tags in the page. Generally, you can use this selector to clear the inner and outer margins of the page. The specific usage is as follows:
*{
padding:0px;
margin:0px;
}
Descendant selector
The descendant selector, also known as the containing selector, can select child elements within the parent element. The way to write it is to write the outer label at the front and the inner label at the back, separated by spaces. When tags are nested, the inner tag becomes a descendant of the outer tag.
Element 1 Element 2 { style declaration }
The above syntax means selecting element 2 (descendant elements) inside element 1.
Children selector
Child selectors (child selectors) can only select elements that are the most recent child of an element. The simple understanding is to choose the son element.
Element 1 > Element 2 { style declaration }
Adjacent sibling selector
If you need to select an element immediately following another element, and both elements have the same parent element, you can use the adjacent sibling selector.
Element 1 + Element 2 { style declaration }
Common sibling selector
Refers to all elements connected to another element, both of which have the same parent element. The difference from adjacent sibling selectors is that ordinary sibling selectors can select all sibling selectors under the same parent element, while The adjacent sibling selector can only select two adjacent brothers.
Element 1 ~ Element 2 { style declaration }
Union selector
The union selector is composed of various selectors connected by English commas (,). Any form of selector can be used as part of the union selector. Usually used for collective statements.
Element 1, Element 2 { style declaration }
Link pseudo-class selector
Used to add special effects to certain selectors, such as adding special effects to links, or selecting the 1st or nth element.
The biggest feature of writing pseudo-class selectors is that they are expressed by colons (:), such as: hover, :first-child.
/* a is the tag selector for all links */
a {
color: gray;
}
/* :hove is a link pseudo-class selector when the mouse passes over */
a :hover {
color:red; /*When the mouse passes over, it changes from gray to red */
}
a:link /: Select all unvisited links
a:visited: select all visited links
a:hover: Select the link the mouse pointer is on
a:active: Select the active link (the link that does not pop up when the mouse is pressed)
-
Introduction of CSS
External style (external style)
It means to create a .css file externally, and then write the specified processing instructions in the header of XML/HTML to link the css style sheet into the main file. The specific link formats are as follows:
<?xml-stylesheet type="type/css" href="URL of CSS file"?>
HTML:
<head>
<link rel="stylesheet" type="text/css" href=" URL of CSS file ">
</head>
Description: The
type=”text/css” indicates using a CSS type style sheet
href= used to specify the path to the style sheet file
The tag represents the style sheet that the current HTML file is linked to.
Internal style (embedded)
It refers to embedding CSS styles directly into XML/HTML documents. Note: XML and HTML use different introduction tags. XML uses the tag “