Commonly used units in CSS_Experience exchange

1. Length unit

Length unit is the most commonly used unit in Web page design. An unorganized and disorganized page is unlikely to leave a good impression on people. Therefore, when designing, you need to accurately define some values ​​for the position and size of elements to achieve the desired effect.

CSS gives people the ability to precisely control web pages, which is something people like to talk about. It allows people to define appearance, size, space and other styles. However, the control given by CSS is also a dangerous thing. This is not only reflected in the designer's lack of experience, but also in how to give a size and space value. Why? Because although a designer can decide a particular screen resolution, it is impossible to decide other people's brains, other people's eyesight, or those personalized custom settings.

One of the main functions of CSS is CSS positioning. The concept of positioning includes positioning and size positioning. No matter which one, you need to use the length unit, otherwise, precise positioning is impossible.

In CSS, length is a measurement dimension, used for width, height, font size, word and letter spacing, text indentation, line height, margins, welts, border line width and many, many other properties.

1. Define the length

To define the length in Dreamweaver 4, you should first write the symbol part in the text box behind the selected option. This symbol can be "+" (positive sign), which represents a positive length value, or Can be "-" (minus sign), indicating a negative length value. If no sign is written, the default value is "+". Immediately after the symbol is a numerical value, which can be an integer or a decimal. Then select a length unit in the Length Unit drop-down list box of this option. The unit of length is generally a unit abbreviation consisting of two letters, such as cm, pt, em, etc.

2． Absolute length units

Absolute length values ​​commonly used in web page definitions include centimeters (cm), millimeters (mm), inches (in), points (pt), picas (pc), etc.

Units Inches (in) Centimeters (cm) Millimeters (mm) Pounds (pt) Picas (pc) 4.233 12 1.0
cm 0.3937 1 10 28.3464 4.7244
mm 0.03937 0.1 1.0 2.83464 0.47244
lbs 0.01389 0.0352806 0.352806 1.0 0.83333

Usage range of absolute length values It is more limited and only uses absolute length values ​​if the specifics of the external output device are fully known. In other words, absolute length values ​​are best used for printer output devices. When used only for screen display, it is of little significance to use absolute length values. Relative length values ​​should be used as much as possible. knowsky.com

 3. Relative length value

Each browser has its own default universal size standard, which can be determined by the system or set by the user according to their own preferences. Therefore, this default size is often the size that users find most suitable. Therefore, using relative length values, elements that need to be sized can be scaled proportionally according to the default size. This makes it impossible to create illegible situations. In fact, percentage units and keywords can produce similar effects.

CSS also supports the following three relative units of length: em (the width of the letter M in the current font), ex (the height of the letter X in the current font), and px (the size of one pixel).

The purpose of using em and ex is to set the appropriate width for the given font. There is no need to know how big the font is. When displaying, it can be determined by comparing the M and X in the current font. The larger the font size, the larger the corresponding em and ex.

Length in pixels is relative to the height and width of a pixel (perhaps a square) on the display. Image width and height are often given in pixels. Pixel measurement is generally not a good method. First, the size of pixels varies greatly depending on the resolution. Most users will set the display to the highest resolution possible, resulting in pixels that are too small to read.

2. Percent unit

To use percentage in Dreamweaver 4, you should first write the symbol part in the text box behind the selected option. This symbol can be "+" ( Positive sign), indicating a positive length value, or "—" (negative sign), indicating a negative length value. If no sign is written, the default value is "+".There is a numerical value immediately after the symbol. You can enter any value after the symbol, but because in some cases, the browser cannot handle percentages with decimals, it is best not to use percentages with decimals. Then select "%" in the length unit drop-down list box of this option.
Percentage is always relative to another value. That value can be a unit of length or something else. Each property that can be specified using a percentage value unit also defines a reference value for that percentage value. In most cases, this reference value is the font size of the element itself.

3. Color Units

Extensive use of images may make the web page lively. But everyone who has ever surfed the Internet has experienced the anxiety of waiting for a picture. In fact, the appropriate use of different colors in different parts can also have a picture-like effect, attracting readers' attention to the key parts. However, the time to download the web page is greatly reduced.

The color attribute is used to define the foreground color of an element. In most cases, the text object contained in this element is used. Using the color attribute can also be used to determine the color of an element's border. The general syntax for defining colors is: color: color value.

The simplest and most direct way to define color values ​​is to use percentage values. In this case, the levels of red, green, and blue color values ​​are determined as percentages. The format is: color:rgb(R%,G%,B%). An additional advantage of using a percentage value to specify a color is that it declares a real set of numbers, no matter what the value is.

Another way to specify a color is to use an integer ranging from 0 to 255. The format is color:rgb(128,128,128).
The third way to define a color is to use a hexadecimal array to define the color. This method of definition is familiar to people who often do programming. When defining a color, use three hexadecimal arrays arranged in sequence, such as "#FC0EA8".This definition is in the format #RRGGBB. That is, add the required hexadecimal values ​​to the red, green, and blue positions.

The last and easiest way to define a color is to specify a name for the color. For example, the code shown below specifies the color of the text to be purple.

In Dreamweaver 4, you can click the color picker icon to select a suitable color from the opened color picker.

4. URL unit

URL unit is related to the link address. The so-called URL is the abbreviation of "Uniform Resource Locator", and the link is the soul of the web page. Through links, various web pages can be connected, so that many pages in the website form an organic whole, allowing visitors to jump between various pages. A link can be a piece of text, an image or other web page element. When these objects are clicked with the mouse in the browser, the browser can load a new page or jump to other locations on the page according to its instructions.

In the process of creating links, the path is very important. There are two kinds of paths in Dreamweaver 4: absolute paths and relative paths. Relative paths can be divided into paths relative to the root directory and paths relative to the file.

The absolute path contains the full path of the server protocol (usually http:// or ftp:// on a web page). An absolute path contains the exact location regardless of the location of the source document. But if the target document is moved, the link will be invalid. Absolute paths must be used when creating links to files outside the current site.

Paths relative to the root directory always start from the root directory of the current site. All publicly available files on the site are stored in the root directory of the site. Paths relative to the root directory use slashes to tell the server to start from the root directory. For example, /Dreamweaver/index.html will link to the index.html file in the Dreamweaver folder at the root of your site. If you are linking files in an environment where content is frequently moved, using a path relative to the root directory is often the best approach. When using paths relative to the root directory, documents containing links move within the site without the links breaking. However, paths relative to the root directory are suitable for viewing the site locally, in which case you can use paths relative to the document.

Note: When previewing the file locally in the browser, the content linked to the path relative to the root directory will not appear. This is because browsers do not recognize the site root in the same way that servers do, and to preview content linked to a path relative to the root, the file must be placed on a remote server and viewed from there.

The path relative to the document refers to the path relative to the folder where the current document is located. For example, the document test.swf is in the folder Flash, and it specifies the document in the current folder. …/test.swf specifies the document in the upper-level directory of the current folder; and /test/test.swf specifies the test.swf document in the test folder under the Flash folder. Document-relative paths are usually the simplest paths that can be used to link to files that are always in the same folder as the current document.

Note: You must save the new file before creating a path relative to the document, because a path relative to the document is invalid without a starting point defined. Dreamweaver 4 automatically uses an absolute path starting with File:// before saving the document.