CSS
Le téléchargement de votre SlideShare est en cours.
×
Consultez-les par la suite
Plus De Contenu Connexe
Diaporamas pour vous (18)
Les utilisateurs ont également aimé (18)
Similaire à Website designing company | Cssfounder.com (20)
Plus par Css Founder (20)
Plus récents (20)
Website designing company | Cssfounder.com
- 1. http://cssfounder.com
- 2. 2 Outline 5.1 Introduction 5.2 Inline Styles 5.3 Embedded Style Sheets 5.4 Conflicting Styles 5.5 Linking External Style Sheets 5.6 Web Resources Cssfounder.com
- 3. In this lesson, you will learn: To control the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of a Web site the same look and feel. To use the class attribute to apply styles. To use style sheets to separate presentation from content. 3 Cssfounder.com
- 4. Cascading Style Sheets (CSS) Separation of structure from presentation Three methods of CSS: Inline Styles Embedded Style Sheets Conflicting Styles Linking External Style Sheets 4 Cssfounder.com
- 5. Declare an individual element’s format Attribute style CSS property followed by a colon and a value i.e: style = “font-size:20pt” 5 Cssfounder.com
- 6. <body> <p>This text does not have any style applied to it.</p> <p style = "font-size: 20pt">This text has the <em>font-size</em> style applied to it, making it 20pt. </p> <p style = "font-size: 20pt; color: #0000ff"> This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p> </body> 6 The style attribute allows you to declare inline styles. Separate multiple styles with a semicolon. Cssfounder.com
- 7. Embed an entire CSS document in an XHTML document’s head section Attributes Description MIME type type = “text/css” Multipurpose Internet Mail Extensions (MIME) type Describes a file’s content Property Description background-color Specifies the background color font-family Specifies the name of the font to use font-size Specifies a 14-point font 7 Cssfounder.com
- 8. <head> <style type = "text/css"> em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt } .special { color: blue } </style> </head> <h1 class = "special">Deitel & Associates, Inc.</h1> <p>Deitel & Associates, Inc. .. programming, and Object Technology.</p> <h1>Clients</h1> <p class = "special"> The company's clients include many <em>Fortune 1000 companies</em>, government agencies, branches …. and World Wide Web courses.</p> 8 this begins the style sheet section Cssfounder.com
- 9. Inheritance Descendant’s properties have greater specificity than ancestor’s properties 9 Cssfounder.com
- 10. <style type = "text/css"> a.nodec { text-decoration: none } a:hover { text-decoration: underline;color: red;background-color: #ccffcc } li em { color: red;font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; margin-left: 15px } </style> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p><a class = "nodec" href = "http://www.food.com">Go to the Grocery store</a></p> 10 Cssfounder.com
- 11. <style type = "text/css"> a.nodec { text-decoration: none } a:hover { text-decoration: underline;color: red;background-color: #ccffcc } li em { color: red;font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; margin-left: 15px } </style> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p><a class = "nodec" href = "http://www.food.com">Go to the Grocery store</a></p>11 Cssfounder.com
- 12. External style sheets Can provide uniform look and feel to entire site 12 Cssfounder.com
- 13. a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin-left: .5cm } 13 Cssfounder.com
- 14. <head> <link rel = "stylesheet" type = "text/css" href = "styles.css" /> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p> <a href = "http://www.food.com">Go to the Grocery store</a> </p> </body> 14 Cssfounder.com
- 15. 15 Cssfounder.com
- 16. www.w3.org/TR/css3-roadmap www.ddj.com/webreview/style tech.irt.org/articles/css.htm 16 Cssfounder.com
