How to remove inline styles defined by the style attribute (element.style)
|
When modifying Magento frequently, you may encounter element.style. This takes precedence over style.css. So modifying the css has no effect. How can we make the level surpass element.style? Need to use! important Add ! after the css property value. important. Its priority exceeds element.style There are three ways to apply CSS to HTML. Inline <br />Inline styles are directly inserted into HTML through the style attribute. It looks like this: Copy code The code is as follows:<p style="color: red">text</p> This will turn the specified paragraph red. Our recommendation is that HTML should be a standalone, style-free document, so inline styles should be avoided wherever possible. Internal <br />Internal styles serve the entire current page. In the head tag, the style tag contains all the styles of the current page. It looks like this: Copy code The code is as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <style type="text/css"> p { color: red; } a { color: blue; } </style> ... This will make all the paragraphs on this page red and all the links blue. Similar to inline styles, you should separate the HTML document from the CSS document. Now, our salvation comes... External <br />External styles serve multiple pages throughout the website. This is an independent CSS document. A simple example is as follows: Copy code The code is as follows:p { color: red; } a { color: blue; } If this document is saved as "web.css", it can be linked to the HTML document like this: Copy code The code is as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="web.css" /> ... We’ll look at other ways to link external style sheets in the CSS Advanced Guide, but for now, this will suffice. To get more out of this guide, try creating a new document in your text editor and saving the code as “web.css” in the same directory as your HTML document. Now improve your HTML document like this: Copy code The code is as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> <link rel="stylesheet" type="text/css" href="web.css" /> </head> ... Save the HTML document. Now we have linked the HTML and CSS together, but it is still blank and nothing has changed. As you progress through the CSS Beginner's Guide, you can add to or change the CSS document and easily see the effects by refreshing the HTML document in your browser, just as we did before. |
<<: How to create dynamic QML objects in JavaScript
>>: mysql security management details
Recommend
Nginx uses the Gzip algorithm to compress messages
What is HTTP Compression Sometimes, relatively la...
Nginx's practical method for solving cross-domain problems
Separate the front and back ends and use nginx to...
Installing linux7.2 Internet access configuration tutorial on VMware virtual machine under win7
Install linux7.2 Internet access configuration on...
Best Practices for Implementing Simple Jira Projects with React+TS
A set of projects for training react+ts Although ...
Detailed explanation of how to use the vue3 Teleport instant movement function
The use of vue3 Teleport instant movement functio...
uniapp Sample code for implementing global sharing of WeChat mini-programs
Table of contents Create a global shared content ...
Mysql database recovery actual record by time point
Introduction: MySQL database recovery by time poi...
About the correct way to convert time in js when importing excel
Table of contents 1. Basics 2. Problem Descriptio...
Vue-CLI multi-page directory packaging steps record
Page directory structure Note that you need to mo...
Solution to the problem "Table mysql.plugin doesn't exist" when deploying MySQL
Today I deployed the free-installation version of...
Analysis of the cause of docker error Exited (1) 4 minutes ago
Docker error 1. Check the cause docker logs nexus...
Detailed explanation of the setting of background-image attribute in HTML
When it comes to pictures, the first thing we thi...
Detailed explanation of how Vue components transfer values to each other
Table of contents Overview 1. Parent component pa...
How to configure MySQL master-slave replication under Windows
MySQL master-slave replication allows data from o...
In-depth understanding of the matching logic of Server and Location in Nginx
Server matching logic When Nginx decides which se...