search
HomeWeb Front-endHTML TutorialFront-end specification 2-CSS specification_html/css_WEB-ITnose


CSS specification

Indentation

Use Tab indentation (equivalent to four spaces )

There must be a space between the selector and {, Parameter 1

The attribute name and the following : are not allowed to contain spaces, and there must be a space between : and the attribute value.

Example

When the list attribute value is in a single line, it must be followed by a space.

For example:

Example:

Selector

When selecting with a collection and there are multiple selectors, it is recommended to declare them separately Write on one line (easy to maintain)

Example

>, , - Leave a space on both sides of the selector

Example

The value in the attribute selector must be surrounded by double quotes

Example

 

Attribute definitions of the same class are written on the same line (see -1)

Example


The attribute definition must end with a semicolon (especially the last one)

If not necessary, it must not Add type selectors to qualify the id and class selectors.

Note: It has a certain impact on performance and maintenance

Example

performance. (Compare lines 891 and 895 in the figure below)

2. It is recommended that the nesting level of the selector should not be greater than 3 levels, and the limiting conditions at the rear should be as precise as possible. (Reference 1)

3. Avoid using some attribute selectors (for example, [class^="..."]) in frequently occurring components. Browser performance can be affected by these conditions.

4. Only use descendant selectors when necessary

Examples of 1 and 2 above

Attribute abbreviation

Where possible, use abbreviations.

If you need to rewrite attributes, try to avoid unnecessary attribute abbreviations.

Example should avoid the following situations:

margin:3px 5px;

margin-left:8px; F: Declaration order)

Formatting Model related properties include: position / top / right / bottom / left / float / display / overflow, etc.

Box Model related properties include: border / margin / padding / width / height, etc.

Typographic related properties include: font / line-height / text-align / word-wrap, etc.

  • Visual related properties include: background / color / transition / list-style etc.
  • clear floats
  • !important

    Try not to use !important in a third-party environment (For example, if you define a module and use an online text editor in the module, you can try to change the attribute definition)

    z-index

    There is nothing too complicated to use at the moment, so use this attribute Just mark

    Value and unit

    Value (parameter 1)

    When it is between 0 and 1 When it is a decimal, should the 0 in the integer part be omitted?

    Example: Opacity: .8;

    But the reason for the zero before zero numerals is found, so I still write zero

    url () here for the time being

    The path in url() is not quoted

    Example: background: url(bg.png);

    The protocol name that can be omitted without using an absolute path

                                                                                                                                                                                                       

    Length

    Omitting zero units

                                                                                                                                                                                                                                                             RGB color values ​​

    must

    use the hexadecimal notation #RRGGBB.

    Use rgba() for color information values ​​with alpha (transparent).

    Use abbreviations when abbreviations are available

    Color names are not allowed, rgb()

    Ensure that hexadecimal mark symbols are in the same case. (Capital letters recommended)

    2D position (background-position)

    The values ​​in both directions of background-position must be given.

    Because the default is 0% 0%, but only the value in one direction is given, the other direction will default to the center attribute value.

    Text

    The font-family attribute should be in English

    Example: font-family:"Microfoft YaHei";

    font -Size attribute

    It must not be less than 12px Reason: Windows text display is poor, it is not easy to identify

    FONT-weight

    The attribute value is represented by numbers. (100~900)

    Actually, there are only two gears, 400 and 700, which are equal to normal and bold respectively.

    There are already browsers supporting the 600 attribute value. (Refer to 1: Font Talk)

    Line-height should use relative values ​​because it will be calculated based on the font-size value.

    Others

    Attribute prefix

    Compatibility writing attributes are paired with long to short colons.

    Examples

    🎜>

    Statement
    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
    The Versatility of HTML: Applications and Use CasesThe Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

    HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

    What is the root tag in an HTML document?What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

    TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

    Are the HTML tags and elements the same thing?Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

    The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

    What is the significance of <head> and <body> tag in HTML?What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

    The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

    What is the difference between <strong>, <b> tags and <em>, <i> tags?What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

    The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

    Please explain how to indicate the character set being used by a document in HTML?Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

    Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

    What are the various formatting tags in HTML?What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

    The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

    What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

    The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

    See all articles

    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

    Video Face Swap

    Video Face Swap

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

    Hot Tools

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment

    EditPlus Chinese cracked version

    EditPlus Chinese cracked version

    Small size, syntax highlighting, does not support code prompt function

    PhpStorm Mac version

    PhpStorm Mac version

    The latest (2018.2.1) professional PHP integrated development tool

    Atom editor mac version download

    Atom editor mac version download

    The most popular open source editor

    WebStorm Mac version

    WebStorm Mac version

    Useful JavaScript development tools