CSS Common Units _ Experience Exchange

One, length units

A unit of length is the most commonly used unit in a Web page design. An unordered, disorganized page is unlikely to impress people. So, when designing, you need to define some values precisely for the position and dimensions of the element so that it achieves the desired effect.

CSS gives people the ability to control Web pages precisely, and this is something that people relish. It allows people to define appearance, size, space, and other styles. However, the control given by CSS is also a dangerous thing, not only in the designer's lack of experience, but also in how to give a size and space values. Why is it? Because a designer can determine a particular screen resolution, it is impossible to determine the other person's brain and other people's vision or the rich personality of the custom settings.

One of the main functions of CSS is the positioning of the CSS, the concept of positioning, including the positioning of the location, but also the size. Either way, you need to use a unit of length, otherwise, precise positioning is impossible to talk about.

In CSS, length is a metric dimension for width, height, font size, Word and letter spacing, text indentation, row height, margin, welt, border lineweight, and many other properties.

1. Define length

To define the length in Dreamweaver 4, you should first write the symbol section in the text box after the selected option, which can be a "+" (plus sign), a positive length value, or a "-" (minus sign) that represents a negative length value. If you do not write a symbol, the default value is "+". Immediately after the symbol is a numeric value, which can be either an integer or a decimal. Then select a unit of length in the length units drop-down list box for this option. A unit of length is typically a two-letter unit abbreviation, such as Cm,pt,em.

2. Absolute length Unit

The absolute length values commonly used on page definitions are defined by centimeters (cm), millimeters (mm), inches (in), Dots (PT), picas (PC), and so on.

Unit inch (in) cm (cm) mm (mm) lb (PT) dispatch card (PC)
Inches 1.0 2.54 25.4 72 6
Picas 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
lbs 0.01389 0.0352806 0.352806 1.0 0.83333

Absolute length values are limited in scope, and absolute length values are only used if the external output device is fully known. In other words, the absolute length value is best used for the printer output device, and the absolute length value is not significant when used as a screen only, and the relative length value 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 it can be set by the user according to their hobbies. Therefore, this default size is often the size that the user finds most suitable. Using relative length values, you can then scale the elements that need to be defined by the default size as a standard. This makes it impossible to create an illegible situation. In fact, percentage units and keywords can produce similar effects.

CSS also supports the following three-length relative units: Em (the width of the letter m in the current font), ex (the height of the letter x in the current font), PX (the size of a pixel).

The purpose of using EM and ex is to set the appropriate width for the given font, without having to know how large the font is, and when it is displayed, it can be determined by comparing M and x in the current font. The larger the font, the greater the corresponding EM and ex.

The length in pixels is relative to the height and width of the pixel (or perhaps square) on the monitor. The width and height of the image are often given in pixels. Pixel measurement is usually not a good method. First, the pixel size varies greatly by resolution, and most users set the display to the highest resolution possible, causing the pixel to be too small to read.

Second, percentage units

In Dreamweaver 4, to use percentages, you should first write the symbol section in the text box after the selected option, which can be a "+" (plus sign), a positive length value, or a "-" (minus sign) that represents a negative length value. If you do not write a symbol, the default value is "+". After the symbol is followed by a numeric value, you can enter any value after the symbol, but because in some cases the browser cannot process a percentage with decimals, it is best not to have a percentage with decimals. Then select "%" in the length units drop-down list box for this option.
Percentages are always relative to another value. That value can be a unit of length or something else. Each attribute that can be specified with a percentage value unit also customizes the reference value for this percentage value. In most cases, this reference value is the font size of the element itself.

Three, color units

Using a lot of pictures can make your Web page more vibrant. However, every person who has been on the net has an anxious experience waiting for a picture. In fact, appropriate in different parts of the use of different colors, can also play a similar picture effect, the reader's attention to the key part, however, the time to download the page has been greatly reduced.

The Color property is used to define the foreground color of an element, which in most cases contains the text object that is contained in the element. Using the Color property can also be used to determine the colors of an element's border. The common syntax for defining colors is: color: The value of the colors.

The simplest and most straightforward way to define color values is to use percent values. In this case, the rank of the red, green, and blue color values is determined by the number of percentages. The format is: Color:rgb (r%,g%,b%). Using a percent value to specify a color also has the advantage that it can declare a true set of numbers, regardless of its value.

Another way to specify a color is to use an integer range between 0~255 to set. The format is Color:rgb (128,128,128).
The third way to define colors is to use a hexadecimal array to define the colors. This method of definition is familiar to people who are often programmed. The color is defined by using three hexadecimal array representations, such as "#FC0EA8", that are arranged before and after the order. This definition is in the form of a #rrggbb format. That is, add the hexadecimal value you want on the red, green, and blue positions.

Defining the color The last method is also the simplest way to specify the name of the color. For example, the code shown below specifies that the color of the text is purple.

In Dreamweaver 4, you can click the Color Picker's icon to select an appropriate color from the open color picker.

Iv. URL Units

The URL unit is related to the address of the link. The so-called URL is "Uniform Resource Locator" Shorthand, link is the soul of the Web page. Links can be linked to each page, so that a large number of pages in the site form an organic whole, so that visitors can jump between the pages. A link can be a piece of text, an image, or other page element, and when you click the object in a browser, the browser can load a new page or jump to another location on the page, depending on its instructions.

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

An absolute path contains the full path of the server protocol (usually http://or ftp://on a Web page). Absolute paths contain exact locations without regard to the source document's location. However, if the target document is moved, the link is not valid. You must use an absolute path when creating a link to a file other than the current site.

The path relative to the root directory always starts at the root of the current site. All publicly available files at the site are stored at the root of the site. The path relative to the root directory uses slashes to tell the server to start from the root directory. For example,/dreamweaver/index.html link to the index.html file of the site root Dreamweaver folder. If you want to link files in an environment where content is often moved, it is often the best approach to use the path relative to the root directory. When you use a path that is relative to the root, the document that contains the links moves within the site and the links are not interrupted. However, the path relative to the root directory and the local view site are appropriate, in which case the path relative to the document can be used.

Note: When you preview a file locally in the browser, the link to the path that is relative to the root directory does not appear. This is because the browser does not recognize the site root as the server does, and to preview what is linked to the path that is relative to 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, document test.swf in Folder Flash, which specifies the document within the current 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 test folder under the Flash folder. The path relative to the document is usually the simplest path and 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 you create the path relative to the document, because the path relative to the document is not valid without defining a starting point. Dreamweaver 4 automatically uses an absolute path starting with file://before the document is saved.

