1 / 12

CSS -- Text

CSS -- Text. CSS -- Text. Text Color The color property is used to set the color of the text. The color can be specified by: name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000"

yamin
Télécharger la présentation

CSS -- Text

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS -- Text

  2. CSS -- Text • Text Color • The color property is used to set the color of the text. The color can be specified by: • name - a color name, like "red" • RGB - an RGB value, like "rgb(255,0,0)" • Hex - a hex value, like "#ff0000" • The default color for a page is defined in the body selector. • body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}

  3. CSS-Text • <html> • <head> • <style type="text/css"> • body {color:red;} • h1 {color:#00ff00;} • p1 {color:rgb(0,0,255);} • </style> • </head> • <body> • <h1>This is heading 1</h1> • <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> • <p1>This is a paragraph created with “p1”. This text is blue.</p> • </body> • </html> • CSS Text 1 Example

  4. CSS-Text • Text Alignment • The text-align property is used to set the horizontal alignment of a text. • Text can be centered, or aligned to the left or right, or justified. • When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

  5. CSS -- Text • <html> • <head> • <style type="text/css"> • h1 {text-align:center;} • pdate {text-align:right;} • pmain {text-align:justify;} • </style> • </head> • <body> • <h1>CSS text-align Example</h1> • <pdate>May, 2009</p> • <pmain>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p> • <p><b>Note:</b> Try to resize the browser window to see how justify works.</p> • </body> • </html> • CSS Text example 2

  6. CSS -- Text • Text Decoration • The text-decoration property is used to set or remove decorations from text. • The text-decoration property is mostly used to remove underlines from links for design purposes: • <html> • <head> • <style type="text/css"> • a {text-decoration:none;} • </style> • </head> • <body> • <p>Link to: <a href="http://www.w3schools.com">W3Schools.com</a></p> • </body> • </html> • CSS Text example 3

  7. CSS -- Text • It can also be used to decorate text: • <html> • <head> • <style type="text/css"> • h1 {text-decoration:overline;} • h2 {text-decoration:line-through;} • h3 {text-decoration:underline;} • h4 {text-decoration:blink;} • </style> • </head> • <body> • <h1>This is heading 1</h1> • <h2>This is heading 2</h2> • <h3>This is heading 3</h3> • <h4>This is heading 4</h4> • <p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p> • </body> • </html> • CSS Text example 4

  8. CSS -- Text • Text Transform • The text-transform property is used to specify uppercase and lowercase letters in a text. • It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. • <html> • <head> • <style type="text/css"> • puppercase {text-transform:uppercase;} • plowercase {text-transform:lowercase;} • pcapitalize {text-transform:capitalize;} • </style> • </head> • <body> • <puppercase>This is some text.</p> • <plowercase>This is some text.</p> • <pcapitalize>This is some text.</p> • </body> • </html> • CSS Text Example 5

  9. CSS -- Text • Text Indentation • The text-indentation property is used to specify the indentation of the first line of a text. • <html> • <head> • <style type="text/css"> • p {text-indent:50px;} • </style> • </head> • <body> • <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p> • </body> • </html> • CSS Text Example 6

  10. CSS – Text • You can also specify the space between characters where the value is in pixels. Can be (+) or (-) • <html> • <head> • <style type="text/css"> • h1 {letter-spacing:2px;} • h2 {letter-spacing:-3px;} • </style> • </head> • <body> • <h1>This is heading 1</h1> • <h2>This is heading 2</h2> • </body> • </html> • CSS Text Example 7

  11. CSS - Text • You can also specify the spaces between the lines, using line height. • <html> • <head> • <style type="text/css"> • psmall {line-height:90%;} • pbig {line-height:200%;} • </style></head><body><p> • This is a paragraph with a standard line-height. • The default line height in most browsers is about 110% to 120%. • This is a paragraph with a standard line-height. • </p> • <psmall> • This is a paragraph with a smaller line-height. • </p> • <pbig> • This is a paragraph with a bigger line-height. • </p> • </body> • </html> • CSS Text Example 8

  12. CSS - Text • You can also increase the whitespace in between text, using word spacing. • <html> • <head> • <style type="text/css"> • p{ word-spacing:30px;} • </style> • </head> • <body> • <p> • This is some text. This is some text. • </p> • </body> • </html> • CSS text example 9

More Related