Table of Contents
Common css style errors
1. Not associated with external style sheet
2. Style Encoding error in table saving
3. Wrong selection of selector If the order and name of the selectors are written incorrectly, errors may occur; the tags in
Home Web Front-end CSS Tutorial What are the common errors in css styles?

What are the common errors in css styles?

Jul 14, 2021 pm 02:41 PM
css style

css style errors include: 1. Not associated with an external style sheet; 2. The coding error when saving the style sheet; 3. Wrong selection of the selector; 4. Syntax errors, such as wrong attribute names and inconsistent attribute values. Standard, use Chinese or full-width symbols, etc.

What are the common errors in css styles?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Common css style errors

1. Not associated with external style sheet

This is a very speechless error, but I did encounter it before I've been here before, I worked hard to write the code, and found that none of the styles took effect. I worked stupidly for a long time, and finally found that I forgot to associate the external style. I felt really bad at that time. .

If all your styles do not take effect, first confirm whether the style sheet is associated, or whether the associated style position and name are correct

<link rel="stylesheet" href="css/index.css"/>
Copy after login

2. Style Encoding error in table saving

If you suspect that the encoding of the CSS table is incorrect, you can directly save the css file as a file in UTF-8 encoding.

3. Wrong selection of selector If the order and name of the selectors are written incorrectly, errors may occur; the tags in

  • #html forget to write the class name and id, and the selector uses these missed class names, id, etc., the style will naturally not take effect.

  • Whether the descendant selector is written with spaces;

  • Will selectors like p.box{} be written as p. box{}, that is, an extra space is written

  • 4. Syntax error

Take the developer tools of Google Chrome as an example, generally Grammatical errors will be displayed as the style is crossed out, there will be an icon prompt on the left side of the style, and an English prompt will be displayed when the mouse is moved into it. As shown in the figure below:

General grammatical errors include:


What are the common errors in css styles?1), wrong attribute name, attribute value does not comply with the specification;
2), the following symbols use Chinese or full-width symbols:

,;{}:
Copy after login
3), the html tag is not completely written, missing "", etc.

(Learning video Share:

css video tutorial

)

The above is the detailed content of What are the common errors in css styles?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to create a slideshow layout page using HTML and CSS How to create a slideshow layout page using HTML and CSS Oct 16, 2023 am 09:07 AM

How to create a slide layout page using HTML and CSS Introduction: Slide layout is widely used in modern web design and is very attractive and interactive when displaying information or pictures. This article will introduce how to create a slide layout page using HTML and CSS, and provide specific code examples. 1. HTML layout structure First, we need to create an HTML layout structure, including a slide container and multiple slide items. The code looks like this: &lt;!DOCTYPEhtml&

How to use:nth-child(-n+5) pseudo-class selector to select the CSS style of child elements whose position is less than or equal to 5 How to use:nth-child(-n+5) pseudo-class selector to select the CSS style of child elements whose position is less than or equal to 5 Nov 20, 2023 am 11:52 AM

How to use:nth-child(-n+5) pseudo-class selector to select the CSS style of child elements whose position is less than or equal to 5. In CSS, the pseudo-class selector is a powerful tool that can be selected through a specific selection method. Certain elements in an HTML document. Among them, :nth-child() is a commonly used pseudo-class selector that can select child elements at specific positions. :nth-child(n) can match the nth child element in HTML, and :nth-child(-n) can match

How to implement a simple chat page layout using HTML and CSS How to implement a simple chat page layout using HTML and CSS Oct 18, 2023 am 08:42 AM

How to use HTML and CSS to implement a simple chat page layout With the development of modern technology, people increasingly rely on the Internet for communication and communication. In web pages, chat pages are a very common layout requirement. This article will introduce you to how to use HTML and CSS to implement a simple chat page layout, and give specific code examples. First, we need to create an HTML file, you can use any text editor. Taking index.html as an example, first create a basic HTML

How to implement a detailed page layout using HTML and CSS How to implement a detailed page layout using HTML and CSS Oct 20, 2023 am 09:54 AM

How to use HTML and CSS to implement a detailed page layout HTML and CSS are the basic technologies for creating and designing web pages. By using these two appropriately, we can achieve various complex web page layouts. This article will introduce how to use HTML and CSS to implement a detailed page layout and provide specific code examples. Create an HTML structure First, we need to create an HTML structure to place our page content. The following is a basic HTML structure: &lt;!DOCTYPEhtml&g

How to create a responsive card wall layout using HTML and CSS How to create a responsive card wall layout using HTML and CSS Oct 25, 2023 am 10:42 AM

How to create a responsive card wall layout using HTML and CSS In modern web design, responsive layout is a very important technology. By using HTML and CSS, we can create a responsive card wall layout that adapts to devices of different screen sizes. Here’s a closer look at how to create a simple responsive card wall layout using HTML and CSS. HTML part: First, we need to set up the basic structure in the HTML file. We can use unordered list (&lt;ul&gt;) and

How to create a responsive music player layout using HTML and CSS How to create a responsive music player layout using HTML and CSS Oct 19, 2023 am 10:02 AM

How to use HTML and CSS to create a responsive music player layout In today's era of rapid development of information technology, music, as a form of entertainment, has penetrated deeply into people's lives. For a better music experience, many websites and applications provide online music players. This article will introduce how to create a responsive music player layout using HTML and CSS, and provide specific code examples. First, we need to create a basic structure using HTML. Here is a simple HTML layout example: &lt;!

How to embed CSS styles in HTML How to embed CSS styles in HTML Sep 20, 2023 am 11:37 AM

Methods for embedding CSS styles in HTML include inline styles, internal style sheets, and external style sheets. Detailed introduction: 1. Inline style refers to writing the CSS style directly in the HTML tag and setting the style of the element through the style attribute. The advantage of this method is that it is simple and intuitive, and can quickly set the style for a specific element. But its shortcomings are also obvious. The style is tightly coupled with the HTML structure, making it difficult to maintain and reuse. At the same time, when the style needs to be modified, the entire HTML document needs to be traversed, which is inefficient; 2. Internal style sheets, etc.

How to create a web sidebar layout using HTML and CSS How to create a web sidebar layout using HTML and CSS Oct 18, 2023 pm 12:27 PM

HTML and CSS are two of the most commonly used technologies in modern web design. They can be used to create a variety of different types of web page layouts, including sidebar layouts. In this article, we will introduce in detail how to use HTML and CSS to create a simple web page sidebar layout, with specific code examples. First, create a basic HTML document structure. In the &lt;head&gt; tag, add a &lt;link&gt; tag to reference an external CSS style sheet file. Then, in &lt;b

See all articles