Common units in CSS

1. Length Unit

The unit of length is the most commonly used unit in web page design. An unordered and disorganized page cannot impress people. Therefore, when designing the element, You need to precisely define some values for the element's position and size to achieve the expected results.

CSS gives people the ability to precisely control webpages. It allows people to define the appearance, size, space and their styles. However, the control given by CSS is also a dangerous thing, which is not only manifested in the lack of experience of designers, but also in how to give a size and space value. Why? Although a designer can determine a specific screen resolution, it is impossible for a designer to determine others' brains and others' eyesight or Customized settings with personality.

One of the main functions of CSS is CSS positioning. This positioning concept includes location positioning and size positioning. No matter which one type, the length unit must be used. Otherwise, precise positioning will be impossible.

In CSS, the length is a measurement size, it is used for width, height, font size, word and letter spacing, text shrinking, Row Height, margin, pasting, Border width, and many other attributes.

1. Define the length

To define the length in Dreamweaver 4, first write the symbolic part in the text box next to the selected option. This symbol can be "+" (positive), indicating the positive length value, it can also be "-" (negative), indicating the negative length value. If no symbol is written, the default value is "+ ". The symbol is followed by a numerical value, which can be an integer or a decimal number. Then select a length unit from the drop-down list box of the length unit option. The unit of length is generally an abbreviation of a unit consisting of two letters, such as cm, pt, and em.

2. Absolute length unit

The absolute length values commonly used in Web pages are defined by centimeter (cm), millimeter (mm), inch (in), point (pt), and card dispatch (pc.

Unit: inch (in) centimeter (cm) millimeter (mm) lb (pt) Card (pc)
Inch 1.0 2.54 25.4 72 6
Dispatcher 0.16667 0.4233 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
LB 0.01389 0.0352806 0.352806 1.0 0.83333

The use range of the absolute length value is limited. The absolute length value is used only when the external output device is fully known. That is to say, the absolute length value is best used for the printer output device. When it is only used for screen display, it is of little significance to use the absolute length value. We should try to use the relative length value. Knowsky.com

3. Relative Length Value

Each browser has its own default general size standard, which can be determined by the system or set by users according to their hobbies. Therefore, the default size is often the most suitable size. Therefore, the relative length value can be used to define the size of the elements according to the default size, and scale proportionally. In this way, it is impossible to generate a situation that is hard to identify. In fact, percentage units and keywords can produce similar results.

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

The purpose of using em and ex is to set a proper width for the given font without knowing how large the font is, it can be determined by comparing M and X in the current font. The larger the font, the larger the em and ex values.

The length in pixels is the height and width relative to the pixel (or square) on the display. The width and height of an image are usually given in pixels. Pixel measurement is generally not a good method. First, the pixel size varies greatly according to the resolution. Most users set the display to the highest possible resolution, resulting in the pixel being too small to read.

Ii. Percentage Unit

To use percentages in Dreamweaver 4, first write the symbolic part in the text box next to the selected option. This symbol can be "+" (positive), indicating the positive length value, it can also be "-" (negative), indicating the negative length value. If no symbol is written, the default value is "+ ". A numeric value is followed by a symbol. You can enter any value after the symbol. However, in some cases, the browser cannot process percentages with decimals, so it is best not to use percentages with decimals. Then select "%" in the drop-down list box of the length unit of the option ".
The percentage is always relative to another value. The value can be a unit of length or something else. Each attribute that can be specified by the unit of percentage value can also customize the reference value of this percentage value. In most cases, this reference value is the font size of the element.

3. Color Unit

Using images in large quantities may make webpages angry. However, every person on the internet is anxious to wait for a picture. In fact, the use of different colors in different parts can also play a similar image effect, attracting the reader's attention to the key part. However, the time for downloading web pages 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. The color attribute can also be used to determine the color of an element border. The general syntax for defining colors is: color value.

The simplest and most straightforward way to define a color value is to use a percentage value. In this case, the red, green, and blue color values are determined by the number of percentages. Format: color: rgb (R %, G %, B % ). Another advantage of using a percentage value to specify a color is that it can declare a set of real numbers, regardless of the value.

Another way to specify the color is to use the range of 0 ~ An integer between 255. The format is color: rgb (128,128,128 ).
The third way to define the color is to use a hexadecimal array to define the color. This definition method is familiar to people who often design programs. The color is represented by three hexadecimal arrays in sequence, for example, "# FC0EA8 ". This definition is in the format of # RRGGBB. That is, the hexadecimal value is added to the red, green, and blue positions.

The last and simplest way to define a color is to specify the color name. For example, the following code specifies that the text color is purple.

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

Iv. URL Unit

The URL unit is related to the link address. The URL is short for "Uniform Resource Locator", and the link is the soul of the web page. By means of links, various webpages can be connected to each other to form an organic whole of numerous webpages on the website, allowing visitors to jump between pages. A link can be a piece of text, an image, or other webpage elements. When you click these objects in a browser, the browser can load a new page or jump to another location of the page according to its instructions.

In the process of creating a link, the path is very important. There are two types of paths in Dreamweaver 4: absolute path and relative path. The relative path can be divided into the relative path of the root directory and the relative path of the text.

The absolute path contains the full path of the server protocol (usually http: // or ftp: // on the webpage. Absolute paths contain precise locations without considering the location of the source document. However, if the target document is moved, the link is invalid. When creating a link to a file other than the current site, you must use an absolute path.

The path relative to the root directory always starts from the root directory of the current site. All publicly accessible files on the site are stored in the root directory of the site. The path relative to the root directory uses a slash to tell the server to start from the root directory. For example,/Dreamweaver/index.html links to the index.html file in the dreamweaverfolder of the site root directory. If you want to link a file in an environment where the content is often moved, using the path relative to the root directory is always the best method. When using the path relative to the root directory, the link-included documents are moved within the site, and the link will not be interrupted. However, the path relative to the root directory and suitable for local site viewing can be used with the path relative to the document in this case.

Note: When previewing a file locally in a browser, the content linked to the path relative to the root directory does not appear. This is because the browser cannot identify the root directory of the site as the server does. to preview the content linked to the relative path of the root directory, You must place the file on the remote server and view it from there.

The path relative to the document refers to the path relative to the folder where the current document is located. For example, test.swf specifies the document in the current folder in the Flash folder .... /Test.swf specifies the document in the parent directory of the current folder, while/test/test.swf specifies the test.swf document in the testfolder under the flash folder. The path relative to the document is usually the simplest path, which can be used to link 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 the path relative to the document is invalid if no starting point is defined. Before saving the document, Dreamweaver 4 automatically uses the absolute path starting with File.