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.
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 EnglishExample: 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
🎜>

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.

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

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

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.

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

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.

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.

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Atom editor mac version download
The most popular open source editor

WebStorm Mac version
Useful JavaScript development tools
