<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">3. CSS code
/* CSS style sheet for your captions-1a.html] created by [serein_chan] Email: [Serein_Chan@foxmail.com] author blog: [inline * // * body style */body {margin: 0; padding: 0; Background-color: # fafac8; Font: 62.5%;/* the default text size in the browser is 16 pixels, 16px * 62.5% = 10px */Text-align: center; color: # 4d4d4d ;}. captioned_photo {margin :. 5em 0. 5em 2em; padding :. 3em; Background-color: # FFF; line-Height: 1em; width: 240px; text-align: Left ;}. captioned_photo P {width: 100%; margin: 0; padding: 1em 0; Font: 0.6em verdana, sans-serif;/* starts with setting the font size of the parent node body to 10px, that is, 1em = 10px, 0.6em = 6px */color: #666 ;}. captioned_photo IMG {margin: 0; padding: 0; display: block;/* displays block-level elements with line breaks */}4. CSS Code Description: EmThe font-size attribute sets the text size. The font-size value can be an absolute or relative value.
Absolute value:
Relative size:
Note:If you do not specify the font size, the default size of common text (such as paragraphs) is 16 pixels (16 PX = 1em ).
In css in this example, we use em to set the font size. Using the Em unit instead of pixels can avoid text adjustment problems in Internet Explorer. We recommend that you use the EM dimension unit at W3C.
1em is equal to the current font size. If the font-size of an element is 16 pixels, 1em is equal to 16 pixels. When the font size is set, the EM value changes relative to the font size of the parent element.
The default text size in the browser is 16 pixels. Therefore, the default size of 1em is 16 pixels.
You can use the following formula to convert pixels to EM:Pixels/16 =Em
(Note: 16 is equal to the default font size of the parent element. If the font-size of the parent element is 20px, the formula must be changed:Pixels/20 =Em)
In this example, the font size is set to: Font: 62.5% in CSS settings. The default text size in the browser is 16 pixels, after the percentage is specified, 16px * 62.5% = 10px is obtained. In this case, 1em = 10px. In the subsequent settings on the page font, all are based on 1em = 10px, for example, after. captioned_photo P {} sets the font size to 0.6em = 6px.
Benefits of using EM to set the font size:
The definition of the font size in IE is different from that in FF/opera. By default, 1em looks larger in IE than in other browsers. Therefore, you need to add the following definition in the body section:
Font-size: 62.5%;
It makes the font size of IE look like 1em = 10px, which is similar to FF/opera.
Reference: The Art & Science of CSS W3C School: http://www.w3school.com.cn/css/css_font.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
