CSS Text style and box model

First, Text style 3.1 color

Text color:

Attribute value: Three color value notation can be used

1 color: #B30000; hexadecimal notation 2 Color:rgb (255,0,0); RGB () 3 color:red; Word notation

3.2 Font-style

Set whether text is skewed

Default value:Normal (OK)

Tilt: Oblique ( normal tilt )

Tilt: Italic ( use, will have italic font in English to replace )

1. OB { 2 Font-style:oblique; 3} 4. It { 5 font-style:italic; 6}

3.3 Font-weight

Set whether text is bold

Default value: Normal ( OK )

Bold: Bold

Property value:100-900(no units)

1. f700 { 2 font-weight:700; 3}

3.4 font-size

Font Size: Unit is px

Read designer annotations at work

Now you need to manually measure it yourself.

Coarse measurement: Direct measurement of text height.

The browser has a minimum font size, exceeds the minimum font size, and displays the minimum font size by default. (Chrome Minimum size 12px)

3.5 line-height

Row height: The height at which a line of text actually occupies.

Features: The text is centered vertically within the height of the row.

Unit is px;

1 line-height:200px;

Single-line text is centered vertically: The box is the same height as the row.

1 Div.box1 { 2 width:300px; 3 height:100px; 4 font-size:30px; 5 line-height:100px; 6 7}

Percent indication:% ( representation and font size ratio )

1. Box2 { 2 width:400px; 3 height:100px; 4 border:1px solid #000; 5 font-size:20px; 6/*line-height:100px;*/ 7/*line-height is the relative font ratio: * 500% = 100px*/ 8 line-height:500%; 9}

3.6 font-family

Font.

Generally we use the font, using the computer default comes with fonts, special fonts, not on the calculation, then not normal rendering.

English font: Arial

English: Microsoft Yahei, alternate font SimSun;

1/* fonts are written in English, written in Chinese characters * / 2 font-family: "Arial", "Microsoft Yahei", "SimSun";

Font: is a composite property that can be written in a compound notation. Each attribute is separated by a space.

Attribute values can be omitted, indicating the default value, at least to write the font size.

1 font: whether italic or not bold font size / line height ; 2 font:italic Bold 30px/100px "Arial", "Microsoft Yahei";

Text Control Properties:

3.7 Text-indent

Sets the indent of the first line of text.

Unit is em. 2em to indent 2 characters in the first line

1 text-indent:2em;

Unit: percentage (relative to the width of the parent box)

1 ext-indent:20%;

Unit: px

1 text-indent:100px;

3.8 Text-align

Sets the text horizontally centered around.

Property value:

Default value: left

On the right

Center (Center)

1 Text-align:center;

IMG: inserting pictures (text)

Text-align:center; Set text centered (single line, multiple lines)

1

3.9 Text-decoration

Whether the text is set underlined

Default value (except for a label):

No underline: none

Underline: underline

1 Text-decoration:none; 2 text-decoration:underline;

Two, Box model 4.1Overview

Width: box content width

Height: box Content Heights

border: Border

padding: inner margin

margin: margin

Content area:

Content width = width

Content height = height

Actual occupied area:

Actual occupied width = width + padding * 2 + border * 2

Actual occupancy Height = height + padding * 2 + border * 2

Calculation:

Actual width = 2 + * 2 = 620px

Actual height = + 2 + * 2 = 420px

Usually given is the box occupies a wide height, we need to calculate the contents of the box and high.

Box content Width = box actual width -Padding * 2-border * 2

Box content High Height = box actual height -Padding * 2-border * 2

The box width is 500px, the box height is 300px, the paddingis 50px, the border is 20px, Calculate box content width and height

width = 500-50 * 2-20 * 2 = 360px

Height = 300-50* 2-20 * = 160px

Background (background color and background) render area: within border (padding area can render background)

1 Background-image:url (images/star.gif);

4.2 Padding

padding: The distance between the contents and the inner border.

1

padding: is also a composite property that can be split by direction

Padding-left

Padding-right

Padding-top

Padding-bottom

You can write a compound notation:

Four-value method: upper right lower left;

1 padding:30px 40px 50px 60px;

Three-value method: Upper right (left) under;

1 padding:30px 50px 60px;

Two-value method: Upper (lower) right (left);

1 padding:30px 50px;

Single-value method: Four directions are the same ;

1 padding:30px;

Generally in use we are accustomed to write a single-value method, the special direction with a single attribute cascade off.

1 padding:30px; 2 padding-left:100px;

4.3 margin

Margin: the distance between boxes

Usage is the same as padding .

Margin is also a composite attribute that can be split in the direction of

1 Margin-left 2 Margin-right 3 Margin-top 4 Margin-bottom

You can write a compound notation:

Four-value method: upper right lower left; (three-value method, two-value method, single-valued method)

1 margin:20px 30px 40px 50px;css

CSS Text style and box model