Introduction to CSS style classification (basic knowledge)
|
Classification of CSS styles 1. Internal style ---- inline style Using the style tag <style type="text/css"> /* Style */ </style> Learn one more trick: write the common style of the page (if there are not many) in the style tag 2. Inline styles Write it directly in the style attribute on the tag
<div style="color:red;">
I am a box</div>Learn one more trick: Usually used by backend programmers to modify the page 3. External Style Create a new css file and associate it with the html page a) Use tag association <!-- In the head tag of the html --> <link rel="stylesheet" type="text/css" href="css file path"> b) Use instruction association
<style type="text/css">
/* In the style tag */
@import url("css file path")
</style>Learn one more trick: The most commonly used external style and link tag in projects Summary of three style sheets
Knowledge point supplement: CSS style classification CSS styles can be divided into three categories: inline styles, internal style sheets, and external style sheets 1. Inline style (the style is written in the HTML tag and only works on the content of the tag)
2. Internal style (the style is written between the head tags of the HTML and only works on the content of the HTML)
<html>
<head>
<title></title>
<style type="text/css">
body{font-size:12px}
</style>
</head>
<body></body>
</html>3. External style (style reference is written between the head tags and works on the web page that references the CSS file)
<html>
<head>
<title></title>
<link href="common.css" rel="stylesheet" type="text/css">
</head>
<body></body>
</html>In the css style, # represents the id selector, and . represents the class selector
Summarize This is the end of this article about the classification introduction of CSS styles (basic knowledge). For more relevant CSS style classification content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: How to write the introduction content of the About page of the website
>>: MySQL Query Cache Graphical Explanation
Recommend
Solve the docker.socket permission problem of vscode docker plugin
Solution: Kill all .vscode related processes in t...
A few steps to easily build a Windows SSH server
The SSH mentioned here is called Security Shell. ...
HTML basics summary recommendation (paragraph)
HTML Paragraph Paragraphs are defined by the <...
How to let https website send referrer https and http jump referrer
This article describes a proposal for a metadata ...
Tomcat CentOS installation process diagram
Tomcat CentOS Installation This installation tuto...
Super detailed tutorial to implement Vue bottom navigation bar TabBar
Table of contents Project Introduction: Project D...
mysql8.0 forgotten password modification and net command service name invalid problem
Enter net start mysql in cmd and the prompt is: T...
Vue3 navigation bar component encapsulation implementation method
Encapsulate a navigation bar component in Vue3, a...
Front-end state management (Part 2)
Table of contents 1. Redux 1.1. Store (librarian)...
An example of how Tomcat manages Session
Learned ConcurrentHashMap but don’t know how to a...
Detailed explanation and classic interview questions of Vue life cycle and hook functions
Table of contents 1. Vue life cycle 2. Hook funct...
An article teaches you how to implement a recipe system with React
Table of contents 1. Recipe Collection 1.1 Projec...
Solution to MySQL master-slave delay problem
Today we will look at why master-slave delay occu...
Understanding the MySQL query optimization process
Table of contents Parsers and preprocessors Query...
Html+css to achieve pure text and buttons with icons
This article summarizes the implementation method...