SlideShare une entreprise Scribd logo
1  sur  12
CSS
HTML & CSS best practices CSS 3 HTML 5
Minimal HTML <ulclass="menu">     <li>           <ahref="statistics.html">                 Statistics                                                 </a>       </li>     <liclass="selected">           <ahref="menu.html">                 Menu Setup                                                 </a>       </li>     <li>           <ahref="edit.html">                 Edit Pages                                                 </a>       </li>     <li>           <ahref="design.html">                 Design                                                 </a>       </li> </ul><!-- menu -->
Modular CSS <!--       popup       adding class 'shpitz-left' will add... a shpitz to the left of the popup frame.       adding class 'shpitz-down' will add... a shpitz to the bottom of the popup frame. --> <divid="edit-popup"class="popup shpitz-left">
Multiple Classes Selector .popup.shpitz-left
CSS 1/2 .class #id * element element,element element element element>element element+element
CSS 1/2 [attribute]  [attribute=value] [attribute~=value] [attribute|=language] :link :visited :active :hover :focus
CSS 1/2 :first-letter :first-line :first-child :before :after :lang(language)
CSS 3 [attribute]  [attribute=value] [attribute~=value] [attribute|=language] :link :visited :active :hover :focus
HTML 5 <header>	 <footer>	 <nav>	 <section>	 <aside>		 <command>	 <details>	 <summary>	 <time>	 <wbr>
Minimal HTML Even more <nav>        <ahref="statistics.html">Statistics</a> <ahref="menu.html">Menu Setup</a>        <ahref="edit.html“>Edit Pages</a>        <ahref="design.html“>Design</a> </nav>
CSS Sprites

Contenu connexe

En vedette

Kidspiriation review and categorization
Kidspiriation review and categorizationKidspiriation review and categorization
Kidspiriation review and categorizationAntoniaPoyiadji
 
Social media week new york_final_grech
Social media week new york_final_grechSocial media week new york_final_grech
Social media week new york_final_grechgerardgrech
 
CéLula BáSico 1º Medio
CéLula BáSico 1º MedioCéLula BáSico 1º Medio
CéLula BáSico 1º Mediosebastian
 
Practica consultas
Practica consultasPractica consultas
Practica consultasnaikoneja
 
P O R L A P A Zgp
P O R L A P A ZgpP O R L A P A Zgp
P O R L A P A ZgpESPEJO 25
 
1metereologia 090409152702 Phpapp01
1metereologia 090409152702 Phpapp011metereologia 090409152702 Phpapp01
1metereologia 090409152702 Phpapp01VerCla
 
ITP UNS SEMESTER 2 Unit & dimensi
ITP UNS SEMESTER 2 Unit & dimensiITP UNS SEMESTER 2 Unit & dimensi
ITP UNS SEMESTER 2 Unit & dimensiFransiska Puteri
 
Supporting Private Investment in Infrastructure Finance
Supporting Private Investment in Infrastructure FinanceSupporting Private Investment in Infrastructure Finance
Supporting Private Investment in Infrastructure FinanceIwl Pcu
 
C616 report-102312-revise-v1
C616 report-102312-revise-v1C616 report-102312-revise-v1
C616 report-102312-revise-v1James Thailing
 
Tabla alimentacion preadolescentes
Tabla alimentacion preadolescentesTabla alimentacion preadolescentes
Tabla alimentacion preadolescentesCinty Fuchs
 
Hip hop moodboard
Hip hop  moodboardHip hop  moodboard
Hip hop moodboardmonaderulo
 
Welcome To Six Flags Great Escape Lodge
Welcome To Six Flags Great Escape LodgeWelcome To Six Flags Great Escape Lodge
Welcome To Six Flags Great Escape Lodgekhatin
 

En vedette (20)

Presentacion jesus
Presentacion jesusPresentacion jesus
Presentacion jesus
 
Kidspiriation review and categorization
Kidspiriation review and categorizationKidspiriation review and categorization
Kidspiriation review and categorization
 
Social media week new york_final_grech
Social media week new york_final_grechSocial media week new york_final_grech
Social media week new york_final_grech
 
CéLula BáSico 1º Medio
CéLula BáSico 1º MedioCéLula BáSico 1º Medio
CéLula BáSico 1º Medio
 
Thailand events calender 2013.pot
Thailand events calender 2013.potThailand events calender 2013.pot
Thailand events calender 2013.pot
 
Bid dynamics 2012
Bid dynamics 2012Bid dynamics 2012
Bid dynamics 2012
 
Practica consultas
Practica consultasPractica consultas
Practica consultas
 
Public health
Public healthPublic health
Public health
 
ISO_5
ISO_5ISO_5
ISO_5
 
P O R L A P A Zgp
P O R L A P A ZgpP O R L A P A Zgp
P O R L A P A Zgp
 
1metereologia 090409152702 Phpapp01
1metereologia 090409152702 Phpapp011metereologia 090409152702 Phpapp01
1metereologia 090409152702 Phpapp01
 
ITP UNS SEMESTER 2 Unit & dimensi
ITP UNS SEMESTER 2 Unit & dimensiITP UNS SEMESTER 2 Unit & dimensi
ITP UNS SEMESTER 2 Unit & dimensi
 
Celebrate thanksgiving
Celebrate thanksgivingCelebrate thanksgiving
Celebrate thanksgiving
 
Supporting Private Investment in Infrastructure Finance
Supporting Private Investment in Infrastructure FinanceSupporting Private Investment in Infrastructure Finance
Supporting Private Investment in Infrastructure Finance
 
C616 report-102312-revise-v1
C616 report-102312-revise-v1C616 report-102312-revise-v1
C616 report-102312-revise-v1
 
Tabla alimentacion preadolescentes
Tabla alimentacion preadolescentesTabla alimentacion preadolescentes
Tabla alimentacion preadolescentes
 
Pecha kucha: Viatjar - projecte
Pecha kucha: Viatjar - projectePecha kucha: Viatjar - projecte
Pecha kucha: Viatjar - projecte
 
Hip hop moodboard
Hip hop  moodboardHip hop  moodboard
Hip hop moodboard
 
Welcome To Six Flags Great Escape Lodge
Welcome To Six Flags Great Escape LodgeWelcome To Six Flags Great Escape Lodge
Welcome To Six Flags Great Escape Lodge
 
Figuras planas
Figuras planasFiguras planas
Figuras planas
 

Similaire à Css

KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7phuphax
 
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0wangjiaz
 
User Experience is dead. Long live the user experience!
User Experience is dead. Long live the user experience!User Experience is dead. Long live the user experience!
User Experience is dead. Long live the user experience!Greg Bell
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
 
Lecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPLecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPyucefmerhi
 
Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing GadgetsQuirk
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overviewreybango
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Finalematrix
 
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesOptimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesSugree Phatanapherom
 
1 06-more html-elements
1 06-more html-elements1 06-more html-elements
1 06-more html-elementsapnwebdev
 
1-06: More HTML Elements
1-06: More HTML Elements1-06: More HTML Elements
1-06: More HTML Elementsapnwebdev
 

Similaire à Css (20)

Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
HTML and CSS workshop
HTML and CSS workshopHTML and CSS workshop
HTML and CSS workshop
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
 
HTML5
HTML5HTML5
HTML5
 
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0
 
User Experience is dead. Long live the user experience!
User Experience is dead. Long live the user experience!User Experience is dead. Long live the user experience!
User Experience is dead. Long live the user experience!
 
HTML5: 5 Quick Wins
HTML5:  5 Quick WinsHTML5:  5 Quick Wins
HTML5: 5 Quick Wins
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
Lecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPLecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITP
 
XHTML basics
XHTML basicsXHTML basics
XHTML basics
 
Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing Gadgets
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
Html5
Html5Html5
Html5
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
 
Cheat codes
Cheat codesCheat codes
Cheat codes
 
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile DevicesOptimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile Devices
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Using Forms in Share
Using Forms in ShareUsing Forms in Share
Using Forms in Share
 
1 06-more html-elements
1 06-more html-elements1 06-more html-elements
1 06-more html-elements
 
1-06: More HTML Elements
1-06: More HTML Elements1-06: More HTML Elements
1-06: More HTML Elements
 

Css

  • 1. CSS
  • 2. HTML & CSS best practices CSS 3 HTML 5
  • 3. Minimal HTML <ulclass="menu"> <li> <ahref="statistics.html"> Statistics </a> </li> <liclass="selected"> <ahref="menu.html"> Menu Setup </a> </li> <li> <ahref="edit.html"> Edit Pages </a> </li> <li> <ahref="design.html"> Design </a> </li> </ul><!-- menu -->
  • 4. Modular CSS <!-- popup adding class 'shpitz-left' will add... a shpitz to the left of the popup frame. adding class 'shpitz-down' will add... a shpitz to the bottom of the popup frame. --> <divid="edit-popup"class="popup shpitz-left">
  • 5. Multiple Classes Selector .popup.shpitz-left
  • 6. CSS 1/2 .class #id * element element,element element element element>element element+element
  • 7. CSS 1/2 [attribute] [attribute=value] [attribute~=value] [attribute|=language] :link :visited :active :hover :focus
  • 8. CSS 1/2 :first-letter :first-line :first-child :before :after :lang(language)
  • 9. CSS 3 [attribute] [attribute=value] [attribute~=value] [attribute|=language] :link :visited :active :hover :focus
  • 10. HTML 5 <header> <footer> <nav> <section> <aside> <command> <details> <summary> <time> <wbr>
  • 11. Minimal HTML Even more <nav> <ahref="statistics.html">Statistics</a> <ahref="menu.html">Menu Setup</a> <ahref="edit.html“>Edit Pages</a> <ahref="design.html“>Design</a> </nav>