Common units in CSS

CSS

The length of a unit

The unit of length is one of the most commonly used units in web page design. A disorderly, disorganized page is unlikely to leave a good impression on people. As a result, it is necessary to define values precisely for the position and size of the element in order to achieve the desired effect.

css gives people the ability to accurately control Web pages, which is a 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 dimension and space value. Why, then? Because a designer can determine a particular screen resolution, it is not possible to determine the other person's brain and other people's eyesight or the personalized customization settings.

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

In CSS, length is a metric that is used for width, height, font size, Word and letter spacing, indentation of text, row height, margins, welt, border line width, and many other properties.

1. Define length

To define the length in Dreamweaver 4, you should first write the symbol part in the text box following the selected option, which can be "+" (plus), or "-" (minus), representing the negative length value. If you do not write a symbol, the default value is "+". After the symbol is followed by a numeric value that can be either an integer or a decimal number. Then select a length unit in the Length Unit Drop-down list box for the option. The length unit is typically a two-letter unit abbreviation, such as Cm,pt,em.

2. Absolute length Unit

The absolute length values commonly used on Web page definitions are cm (cm), mm (mm), inch (in), Point (PT), Pica (PC), and so on.

Units in inches (in) cm (cm) mm (mm) lb (PT) dispatch card (PC)
Inch 1.0 2.54 25.4 72 6
Dispatch card 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
Pounds 0.01389 0.0352806 0.352806 1.0 0.83333

The absolute length value is limited in scope, and the absolute length value is only used when the external output device is fully known. That is, absolute length values are best used for printer output devices, and absolute length values are not significant when used as a screen only, and 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 by the user in accordance with their preferences. Therefore, this default size is often the most appropriate size for the user. By using the relative length values, you can be the element that needs to define the dimensions to scale proportionally according to the default size. This would not produce an illegible situation. In fact, both percent units and keywords can produce similar effects.

CSS also supports the following three lengths of relative units: 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 a pixel).

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

The length in pixels is relative to the height and width of the pixel (perhaps square) on the display. The width and height of the image are often given in pixels. Pixel measurements are often not a good method. First, the pixel size varies significantly depending on the resolution, and most users set the display to the highest possible resolution, resulting in too little pixels to read.

Unit of percentage

To use percentages in Dreamweaver 4, you should first write the symbol part in the text box following the selected option, which can be "+" (plus), or "-" (minus), to represent a negative length value. If you do not write a symbol, the default value is "+". After the symbol is followed by a number, the symbol can be entered after any value, but because in some cases, the browser can not handle the percentage with decimals, so it is best not to take a decimal percentage. Then select% in the length Unit Drop-down list box of the option.
Percent is always relative to another value. That value can be a unit of length or something. 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.

Third, color units

A lot of the use of pictures may make the Web page rich and angry. However, every person who has been on the internet has an anxious experience to wait for a picture. In fact, the proper use of different colors in different parts, can also play a similar picture effect, the reader's attention to attract the key parts, however, the time to download the page has been greatly reduced.

The color property is used to define the foreground color of an element, and in most cases the element contains a text object. You can also use a color property to determine the color of an element's border. The common syntax for defining colors is color: color values.

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

Another way to specify a color is to set it by using integers that range between 0~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 more familiar to people who are often programmed. When you define a color, you use three hexadecimal arrays in sequential order, such as #FC0EA8. The way this is defined is in the form of a #rrggbb format. That is, add the hexadecimal value you want to the red, green, and blue locations.

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

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

Four, the URL unit

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 to connect together, so that a number of pages in the site constitute an organic whole, so that visitors can jump between the various pages. A link can be a piece of text, an image, or another page element, and when you click the object in the browser, the browser can load a new page or jump to the other location of the page according to 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 the relative path can be divided into a path relative to the root directory and a path relative to the text.

The absolute path contains the full path of the server protocol (usually http://or ftp://on a Web page). An absolute path contains an exact location without regard to the location of the source document. However, if the target document is moved, the link is not valid. You must use an absolute path when creating links to files outside the current site.

The path relative to the root directory always starts at the root directory of the current site. All publicly available files on the site are stored in the root directory of the site. The path to the root directory uses a slash to tell the server to start at the root directory. For example,/dreamweaver/index.html will link to the index.html file in the Dreamweaver folder of the site root directory. If you want to link files in an environment where content is often moved, using a path relative to the root is often the best approach. When you use a path that is relative to the root directory, the document that contains the link is moved within the site and the link is 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 a browser, the content linked to the path that is relative to the root directory does not appear. This is because the browser cannot recognize the site root as the server does, and to preview what is linked to the 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 resides. For example, the 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, and/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 a 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.

turn from: Dynamic Network production guide www.knowsky.com