Shulou(Shulou.com)06/03 Report--

Editor to share with you how to get rid of the inline style in web development, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

When you often modify magento, you encounter element.style. This takes precedence over style.css. So modifying css has no effect. How can you raise the level beyond element.style? We need it! Important

Add! after the value of the css attribute! Important . Its priority goes beyond element.style.

There are three ways to apply CSS to HTML.

Inline

Inline styles are nested directly into HTML through the style attribute.

It looks like this:

The code is as follows:

Text

This will be the specified paragraph turns red.

Our suggestion is that HTML should be independent, style-free documents, so inline styles should be avoided in any case.

Inside

The internal style serves the entire current page. In the header tag head, the style tag style contains all the styles of the current page.

It looks like this:

The code is as follows:

CSS Example p {color: red;} a {color: blue;}...

This will make all paragraphs of the page red and all links blue.

Similar to the inline style, you should separate HTML documents from CSS documents. Here comes our salvation.

External

External styles serve multiple pages of the entire site. This is a separate CSS document, and a simple example is as follows:

The code is as follows:

P {color: red;} a {color: blue;}

If the document is saved as "web.css", it can be connected to the HTML document like this:

The code is as follows:

CSS Example

...

We'll also see other ways to connect external stylesheets in the CSS advanced guide, but so far, that's enough.

To learn more from this guide, try creating a new document in your text editor and saving the code as "web.css" in the same directory as the HTML document.

Now improve your HTML document as follows:

The code is as follows:

My first web page...

Save the HTML document. HTML and CSS are now connected, but they are still blank and nothing has changed. With further study of the CSS beginner's guide, you can add or change CSS documents and refresh the HTML documents in your browser to easily see the results, as we have done before.

The above is all the contents of the article "how to get rid of inline styles in web development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.