The Book of CSS for Everyone read Chapter III: Fonts and text

Source: Internet
Author: User
Tags italic font

First, font and text

The difference between a font and text:

    • Fonts mainly involve the size and appearance of text (which can be applied to a single character).

    • Text mainly involves the processing of fonts (applies only to blocks of text)

 second, the specified font

The simplest way to specify a font in CSS is to use five common font collections

    • cursive: Handwritten notes, but neater than handwriting (Comic Sans MS, Brush Script)

    •  

/* specifies a generic font, and the browser chooses the default Helvetica or Arial */ /* Font-family is an inheritable property, and the value is passed to all descendants */  {font-family: sans-serif/** *body{  font-family: "Hoefler text", Times,serif;}
third, set the font size

To set the font size, you can use three types of values:

    • Absolute value: pixels, inches
    • Relative value: percent, EM
    • Sweatshirt size keywords: x-small, small, large, xx-large
 advantages of using relative size fonts: 
    • After you select larger or smaller in the text size, all the fonts can be scaled proportionally

    • Just change the font size of the body tag and proportionally change the size of the text

Disadvantages of using relative size fonts

    • The display of very small fonts may result from the inheritance of font size

    • Users can easily "destroy" CSS page layouts that do not take into account the text scaling factors

 
Body{font-family:Verdana,arial,sans-serif;/*The font is set to a reference size that can be adjusted, 1em is generally 16 pixels high*/font-size:1em;}H3{/*The default size of H3 is 1.2em (19.2px) and reset to 0.8em*/font-size:0.8em;}/*set size for OL and UL, respectively, instead of setting the size for Li, for easy follow-up customization*/ol{font-size:. 75em;}ul{font-size:. 75em;}a{font-size:. 7em;}/*Specifies that the sub-element a of UL inherits the property value from the parent element (if no inherit,a value is used, it becomes 0.75*0.7em, causing too small*/ul a{font-size:Inherit;}
Four, font properties 
font-style < Span style= "font-family: ' Times New Roman ', Times;" > define text upright or italic font-weight 100, 、...、 900, lighter, normal, bold , bolder
font-variant Convert to small capital letters
&NBSP;
 /*  font-style has two functions: to tilt the font, or to make the italic font stand upright  */ p  {:  italic ;} span  {font-style :  normal ;} /*   bold hyperlink content  */ a  {font-weight :  bold ;} /*   convert H3 title to small capital letter  */ h3  {font-variant :  Small-caps ;} 
v. Shorthand for font attributes
{/    * always ensure that the values of font-size and font-family are declared */    * Specify order: first specify Font-weight, Font-style, Font-variant (in any order), and then specify Font-size, font-family*/    font:bold Italic Small-caps. 75em Verdana, Arial, Sans-serif;}
VI. CSS Serpentine text

css places a box around the text that is in the element and is closed only at the beginning and end.

    • Text-indent can only indent the first line

    • To indent an entire paragraph, you need to use Margin-left to push the entire container toward the right

 Seven, Text properties

Text-indent

Indent the first line of text in an element

Any length value

Vertical-align

Move text upward or downward relative to the baseline

Any length value, SUP, sub, top, middle, bottom

Letter-spacing

Set character spacing

Any length value

Word-spacing

Set word spacing

Any length value

Text-decoration

Add adornments to Text

None, underline, overline, Line-through, Blink

Text-align

Aligning text to contained elements

Left, right, center, justify

Line-height

Set the row height (the distance between the row and line baseline)

Any numeric value (does not require a specified unit)

Text-transform

Change the case of text in an element

Uppercase, lowercase, capitalize, none

 
/*indent the first line of text*/P{text-indent:3em;}/*Specify a positive left margin for the paragraph that is greater than the negative indent value, resulting in the effect of hanging paragraphs*/P{text-indent:-1.5em;Margin-left:2em;Border:1px solid Red;}/*Set character spacing*/P{letter-spacing:. 2em;}/*Set Word spacing*/P{word-spacing:. 2em;}/*Remove the underline from the text*/a{text-decoration:None;}/*you need to set the Text-align property on the containing element to align its child element content*/Div{text-align: Right;}/*Set Row Height*/P{Line-height:1.5;}Div#intro{/*row height is set to 1.4 times times the font*/    /*The portion of the line height that is higher than the text is evenly distributed above and below the text*/Font:1.2em/1.4;}/*capitalize the first letter of each word*/P{Text-transform:Capitalize;}P{vertical-align:50%}

The Book of CSS for Everyone read Chapter III: Fonts and text

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.