(1) There are generally three ways to use CSS styles in HTML:
1 Inline reference
2 Internal reference
3 External reference.
The first type: inline reference (also called inline reference)
is to apply CSS styles directly to HTML tags.
Use CSS inline references to represent paragraphs.
< ;/p>
Features: Inline styles are more flexible than other methods, but they need to be confused with the displayed content. Inline styles will lose some of the advantages of style sheets.
The second type: internal reference (also called inline)
Use the style tag to directly load the content of the CSS file into the HTML document in the
tag.
…
The text in the p tag is in the following style*/ >
Features: Suitable for use when an HTML document has a unique style.
The third type: external reference
CSS external reference uses external CSS files. General browsers have caching functions, so users do not need to Download this CSS file every time.
External references are efficient and save bandwidth compared to internal references and inline references.
External references are recommended by W3C
There are two ways to implement external references:
(1) Use the link tag to reference CSS
(2) Use @import to import CSS
…
/css">
@import "mystyle2.css"
.... /*Other CSS definitions*/
/head>
Note: If you use several different style sheets on the same selector, this attribute value will overlap several style sheets and encounter conflicts. The final definition will prevail.
(2) CSS selector has six types of selectors:
1 HTML selector
2 types of selectors
3 ID selector4 Association selector
5 Combination selector
6 Pseudo element selector
1 HTML selector: It is an HTML tag, used to change the style of a specified tag. Any HTML element can be a CSS selector.
Syntax: HTML tag name {attribute: value}
p { text-indent:3em; } /*The selector is p*/
h1{ color:red; } /*The selector is h1*/
2. Class selector: Match the element whose class attribute value is classname of element E in the document
Syntax: tag name. class name {attribute: value} or . class name {attribute: value}
类选择符名称的定义方式是,"."符号,英文"dot",后加类名称classname
类选择符的定义需要有.符号(.符号标明是类选择符),但是HTML文档中的标签的class属性名不能出现.符号,见下面示例:
p.dark-row{ background:#EAEAEA; } /*设置p标签中class属性为dark-row的*/
.note{ font-size:small } /*为note的类可以被用于任何元素*/
第一段
第二段
第三段
The ID selector name is defined as the # symbol, English "pound", followed by the ID name idname
ID selector The definition needs to have the # symbol (the # symbol indicates the ID selector), but the # symbol cannot appear in the id attribute name of the tag in the HTML document, see the example below
The special thing about the id attribute is that a document Only one element can use an ID selector (just the opposite of the class attribute). The id attribute can be used to uniquely identify an element.
Text indentation 3em
4 association selectors: also It is called the inclusion selector. It can be used to define a style sheet for a certain element inclusion relationship. Element 1 contains element 2. This method is only defined for element 2 in element 1. There is no definition for individual element 1 or element 2.
Syntax: selector 1 selector 2...{attribute: value}
table a{font-size:12px}
Links within the table The style has been changed so that the text size is 12 pixels, while the text for links outside the table remains at the default size.
5 Combination selectors: also called selector groups, you can combine selectors with the same attributes and values to write, and separate the selectors with commas, which can reduce the style Repeat definition.
Syntax: selector 1, selector 2,.,..{attribute: value}
h1, h2, h3, h4, h5, h6 { color: green }
p, table{ font-size: 9pt }
The effect is completely equivalent to:
p { font-size: 9pt }
table { font-size: 9pt }
6 Pseudo-element selectors refer to a way of defining different states of the same HTML element. For example, the normal state, access state, selected state, and the state when the cursor moves to the hyperlink text of the tag can be defined using a pseudo-element selector.
Syntax: tag: pseudo-element {attribute: value;}
a:link {color: #FF0000; text-decoration: none} /* Unvisited link*/
a:visited {color: #00FF00; text-decoration: none} /* Visited links*/
a:hover {color: #FF00FF; text-decoration: underline} /* Mouse over link*/
Tip: a:hover must be placed It is only valid after a:link and a:visited.
Tip: a:active must be placed after a:hover to be effective.
If there are any mistakes, please correct me.

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

Issues with native select on mobile phones When developing applications on mobile devices, we often encounter scenarios where users need to make choices. Although native sel...

Exploring the implementation principle of mouse scrolling events When browsing some websites, you may notice that some page elements still allow scrolling the entire page when the mouse is hovering...


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

SublimeText3 English version
Recommended: Win version, supports code prompts!

SublimeText3 Linux new version
SublimeText3 Linux latest version

Notepad++7.3.1
Easy-to-use and free code editor
