Home > Article > Web Front-end > CSS Authoritative Guide Reading Notes Values and Units_html/css_WEB-ITnose
CSS Authoritative Guide Reading Notes Values and Units_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:52864browse
Equivalent color table
What are web safe colors
The so-called "web safe" colors are Refers to colors that can always avoid dithering on a 256-color computer system.
Web safe colors can be expressed as RGB values of 20% and multiples of 51 (the corresponding hex value is 33).
If you use RGB percentage, all three components must be either 0%, or a number that can be divided into 20 integers
Similarly, if you use the range of 0~255 RGB value, then each component value is either 0 or an integer that can be 51.
If using hexadecimal notation, using the triplet of values 00, 33, 66, 99, CC and FF is the web safe color.
Absolute length unit
There are 5 absolute length units. Inches (in), centimeters (cm), millimeters (mm), points (pt), picas (pc)
Inches: units on US rulers
Centimeters: on rulers around the world unit. 1in=2.54cm 1cm=0.394in
Millimeter: 10mm=1cm 1in=25.4mm 1mm=0.0394in
Point: Point is a standard unit of printing measurement 1 inch is 72 points (for example For example, if the first letter of the text is set to 12 points, it is equivalent to 1/6 of the height of 1 inch)
Picas: 1 pica is equivalent to 12 points, 6 picas is equal to 1 inch
Relative length unit
Relative unit: measured according to its relationship with other things. There are three relative length units: em, ex, px
Among them, em represents em-height, ex stands for x-height and px stands for pixel.
An em is defined as the font-size value of a given font. (For example: if the font-size of an element is 14 pixels, then 1em is equal to 14 pixels for the element)
When setting the font size, the em value will be relative to the font of the parent element Size changes.
ex refers to the height of the lowercase x in the font used, but this is just a theory. Generally, 1ex=0.5em
The reason why pixels are relative lengths is because the small color box on the monitor is pixels. When printing, 1px may need to use 96ppi reference pixels.
em is the most flexible because it scales with the font size, so elements and element manipulation can be more consistent.
Scattered but useful CSS knowledge
1. In CSS, relative URLs should be relative to the style sheet itself, not to the HTML document that uses the style sheet
2. Use background:url (picture path). Note that there can be no spaces between the url and the opening bracket. If there are spaces, the entire statement will be invalid and will be ignored.
3. inherit is a keyword common to all attributes, making the value of an attribute the same as the value of its parent element
<head> <style type="text/css"> #toolbar { background: blue; color: white; } #toolbar a { color: inherit; /*只有加上了这句话之后 a链接的颜色才为白色 否则就为默认浏览器设置的蓝色*/ } </style></head><body> <div id="toolbar"> <a href="'#">one</a>| <a href="#">two</a>| <a href="#">trhee</a> </div></body> CSS2 unit
1. Angle values: degrees (deg), gradient (grad), radians (rad) No matter how declared, these values will be interpreted as degrees in the range of 0~360. For example: -90deg=270deg
2. Time value: milliseconds (ms), seconds (s)
3. Frequency value: Hertz (Hz), Megaz (Mhz) after the value Tags Hz or Mhz are not case sensitive