Friday, April 6, 2012

Lesson 1.


For study we're going to use a small text.

TEXT-ALIGN

Through text-align we can set the horizontal alignment for a text within an element.
Font's possible values are:


text-align: center;
text-align: justify;
text-align: left;
text-align: right;
text-align: inherit;

Exercise 1!

For example:
text-align: center;
text-align: justify;
text-align: left;
text-align: right;

Please, write on blackboard and then hit the Preview button.

Lesson 2.


TEXT-ALIGN-LAST

Through text-align-last property we can set the horizontal for the last of a text within an element of a box.
The possible values are:


text-align-last: auto;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
text-align-last: inherit;

Exercise 2!

Try one of this examples!
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

Please, write on blackboard and then hit the Preview button.

Lesson 3.

TEXT-AUTOSPACE

Through text-autospace property we can set the spacing between ideografic and nonideographic.


The possible values are:


text-autospace:none;
text-autospace:ideograph-alpha;
text-autospace:ideograph-numeric;
text-autospace:ideograph-parenthesis;
text-autospace:ideograph-space;

Exercise 3!

Try one of this examples!

Sorry, we need any Asian language!

Please, write on blackboard and then hit the Preview button.


Lesson 4.

TEXT-DECORATION

Through text-decoration property we can set a decoration style for a text.
The possible values are:


text-decoration: blink;
text-decoration: line-through;
text-decoration: none;
text-decoration: overline;
text-decoration: underline;
text-decoration: inherit;

Exercise 4!

Try this examples!

text-decoration: blink;
text-decoration: line-through;
text-decoration: overline;
text-decoration: underline;

Please, write on blackboard and then hit the Preview button.

Lesson 5.

TEXT-INDENT

Through text-indent property we can set the size of the first line of a text.
The possible values are:

text-indent: ;
text-indent: % ;
text-indent: inherit;

 

Exercise 5!

Try this examples!

Sorry, we need include any block item!

text-indent: 20px;
text-indent: 150% ;
text-indent: 15px;
text-indent: 50% ;

Please, write on blackboard and then hit the Preview button.

Lesson 6.

TEXT-JUSTIFY

Through text-justify property we can set the type to justify of a text as a block-level element.
The possible values are:

text-justify: auto;
text-justify: distribute;
text-justify: distribute-all-lines;
text-justify: inter-cluster;
text-justify: inter-ideograph;
text-justify: inter-word;
text-justify: kashida;
text-justify: newspaper;

Exercise 6!

Try this examples!

Sorry, we need include any block item!

text-justify: distribute-all-lines;
text-justify: inter-cluster;
text-justify: inter-ideograph;
text-justify: inter-word;
text-justify: kashida;
text-justify: newspaper;

Please, write on blackboard and then hit the Preview button.

Lesson 7.

TEXT-KASHIDA-SPACE

Through text-kashida-space property we can use for Arabic text.
The possible values are:


text-kashida-space: ; /*number*/
text-kashida-space: % ;
text-kashida-space: inherit;

Exercise 7!

Try this examples!

Sorry, we need any Arabic text!

Please, write on blackboard and then hit the Preview button.

Lesson 8.

TEXT-OVERFLOW

Through text-overflow property we can set for block-level elements.
The possible values are:


text-overflow: clip;
text-overflow: ellipsis;

Exercise 8!

Try this examples!

Sorry, we need include any block item!

text-overflow: ellipsis;

Please, write on blackboard and then hit the Preview button.

Lesson 9.

TEXT-SHADOW

Through text-shadow property we can set shadow effects.
The possible values are:

text-shadow: none;
text-shadow: ; /*horiz length & vert length*/
text-shadow: #ffaaee;
text-shadow: inherit;

Exercise 9!

Try this examples!

text-shadow: red 8px 4px 2px; /*horizlength vertlength blurradiuslength*/

Please, write on blackboard and then hit the Preview button.

Lesson 10.

TEXT-TRANSFORM

Through text-transform property we can transform the text's font.
The possible values are:


text-transform: capitalize;
text-transform: lowercase;
text-transform: none;
text-transform: uppercase;
text-transform: inherit;

Exercise 10!

Try this examples!

text-transform: capitalize;
text-transform: lowercase;
text-transform: none;
text-transform: uppercase;

Please, write on blackboard and then hit the Preview button.

Lesson 11.

TEXT-UNDERLINE-POSITION

Through text-underline-position property we can set when at first we have set text-decoration property.
The possible values are:

text-underline-position: above;
text-underline-position: below;
text-underline-position: auto;
text-underline-position: auto-pos;


Exercise 11!

Try this examples!

text-decoration:underline;
text-underline-position: below;

Please, write above given two statements on blackboard and then hit the Preview button.

No comments:

Post a Comment