CSS
CSScascade style sheets
CSSfogli di stile a cascata
CSSfogli di stile
i CSSsono una serie di regole    che si occupano  dell’aspetto grafico   di una pagina web  (documento HTML)
TESTATA   TESTATA
TESTATA                       TESTATA                                  MENÙ DI NAVIGAZIONEMENÙ DI NAVIGAZIONE             ...
TESTATA                       TESTATA                                  MENÙ DI NAVIGAZIONEMENÙ DI NAVIGAZIONE     CONTENUT...
TESTATA                       TESTATA                                  MENÙ DI NAVIGAZIONEMENÙ DI NAVIGAZIONE             ...
<div>
<div><h1>
<div><h1><h2>
<div><h1><h2> <p>
<div><h1><h2> <p><ul><li>
<div><h1><h2> <p>    CSS<ul><li>
<div>         LARGHEZZA<h1><h2> <p>    CSS<ul><li>
<div>         LARGHEZZA<h1>           ALTEZZA<h2> <p>    CSS<ul><li>
<div>         LARGHEZZA<h1>            ALTEZZA<h2>           POSIZIONE <p>    CSS<ul><li>
<div>         LARGHEZZA<h1>            ALTEZZA<h2>           POSIZIONE                 TESTO <p>    CSS<ul><li>
<div>         LARGHEZZA<h1>            ALTEZZA<h2>           POSIZIONE                 TESTO <p>    CSS    carattere tipog...
<div>         LARGHEZZA<h1>            ALTEZZA<h2>           POSIZIONE                 TESTO <p>    CSS    carattere tipog...
<div>         LARGHEZZA<h1>            ALTEZZA<h2>           POSIZIONE                 TESTO <p>    CSS    carattere tipog...
<div>         LARGHEZZA<h1>            ALTEZZA<h2>           POSIZIONE                 TESTO <p>    CSS    carattere tipog...
<div>         LARGHEZZA<h1>            ALTEZZA<h2>           POSIZIONE                 TESTO <p>    CSS    carattere tipog...
<div>          LARGHEZZA<h1>             ALTEZZA<h2>            POSIZIONE                  TESTO <p>    CSS      carattere...
?
style.css
<html>  <head>     <title>La Musica</title>  </head>  <body>     ...  </body></html>
<html>  <head>     <title>La Musica</title>  </head>  <body>     ...  </body></html>
<html>  <head>     <title>La Musica</title>  </head>  <body>     ...  </body></html>
<link rel="stylesheet"type="text/css"href="style.css" />
<link rel="stylesheet"type="text/css"href="style.css" />
COME SCRIVERE   LE PROPRIETÀ   NEL FILE .cssIN MODO CORRETTO
elemento
elemento {}
elemento {   }
elemento { proprietà;}
{   ALT Gr + SHIFT + [}   ALT Gr + SHIFT + ]
<body>  <div id=”contenitore”>         <div id=”header”>              <h1> Il mini sito della Musica </h1>         </div> ...
<body>  <div id=”contenitore”>         <div id=”header”>              <h1> Il mini sito della Musica </h1>         </div> ...
<div id=”contenitore”>  NEL FILE .css SI RICHIAMA CONdiv#contenitore { }
id   CSS           #
div#contenitore { }
div#contenitore {}
div#contenitore {background: #ffffff;}
div#contenitore {background: #ffffff;color: #000000;}
div#contenitore {background: #ffffff;color: #000000;}
VALORE ESADECIMALE DEI COLORI      IL MODO PIÙ SEMPLICEPER INDICARE UN COLORE NEI CSS ESADECIMALE = 0123456789abcdef
VALORE ESADECIMALE DEI COLORI#FFFFFF
VALORE ESADECIMALE DEI COLORI#FFFFFF   #000000
VALORE ESADECIMALE DEI COLORI#FFFFFF   #000000   #FF0000
VALORE ESADECIMALE DEI COLORI#FFFFFF   #000000   #FF0000 #0000FF
VALORE ESADECIMALE DEI COLORI#FFFFFF   #000000   #FF0000 #0000FF #FFFF00
VALORE ESADECIMALE DEI COLORI#FFFFFF   #000000   #FF0000 #0000FF #FFFF00#FF6600 #00FF00 #00CCFF #FF00FF #3300FF
VALORE ESADECIMALE DEI COLORI#FFFFFF   #000000   #FF0000 #0000FF #FFFF00#FF6600 #00FF00 #00CCFF #FF00FF #3300FF#CCCCCC #99...
div#contenitore {background: #ffffff;color: #000000;}
div#contenitore {background: #ffffff;color: #000000;}
div#contenitore {background: #ffffff;color: #000000;bordermarginpadding}
div#contenitore {background: #ffffff;color: #000000;bordermarginpadding}
border = bordomargin = marginepadding = rientro
div
border         div
border         divmargin
border               padding         divmargin
div#contenitore {background: #ffffff;color: #000000;bordermarginpadding}
div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;marginpadding}
div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;margin: 0px;padding}
div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;margin: 0px;padding: 0px;}
div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;margin: 0px auto;padding: 0px;}
div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;margin: 0px auto;padding: 0px;width: 960px;}
<body>  <div id=”contenitore”>         <div id=”header”>              <h1> Il mini sito della Musica </h1>         </div> ...
<body>  <div id=”contenitore”>         <div id=”header”>              <h1> Il mini sito della Musica </h1>         </div> ...
<div id=”header”>    <h1> Il mini sito della Musica </h1></div>
<div id=”header”>    <h1> Il mini sito della Musica </h1></div>                  CSS
<div id=”header”>    <h1> Il mini sito della Musica </h1></div>                  CSS           div#header
div#header {}
div#header {background: #FF0000;}
div#header {background: #FF0000;color: #FFFFFF;}
div#header {background: #FF0000;color: #FFFFFF;}
div#header {background: #FF0000;color: #FFFFFF;margin: 0px;padding: 0px;}
div#header {background: #FF0000;color: #FFFFFF;margin: 0px;padding: 0px;width: 960px;height: 120px;}
Il mini sito della Musica
<div id=”header”>    <h1> Il mini sito della Musica </h1></div>
<div id=”header”>    <h1> Il mini sito della Musica </h1></div>
h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
Il mini sito della Musica
Il mini sito della Musica
Il mini sito della Musica                            ???
Il mini sito della Musica                            ???
h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
div#header h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
div#header h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
Il mini sito della Musica
Il mini sito della Musica
<body>  <div id=”contenitore”>         <div id=”header”>              <h1> Il mini sito della Musica </h1>         </div> ...
<div id=”menu”>  <ul>     <li> Home </li>     <li> Chi Siamo </li>     <li> Foto </li>     <li> Video </li>  </ul></div>
<div id=”menu”>  <ul>     <li> <a href=”#”> Home </a> </li>     <li> <a href=”#”> Chi Siamo </a> </li>     <li> <a href=”#...
div#menu   {}
div#menu   {background: #0000FF;color: #FFFFFF;}
div#menu   {background: #0000FF;color: #FFFFFF;margin: 0px;padding: 0px;}
div#menu   {background: #0000FF;color: #FFFFFF;margin: 0px;padding: 0px;width: 960px;height: 30px;}
Il mini sito della Musica
div#menu ul {margin: 0px;padding: 0px;width: 960px;height: 30px;list-style: none;}
div#menu ul li {margin: 0px;padding: 0px;font-family: Arial;font-size: 32px;font-weight: bold;display: inline;}
Il mini sito della MusicaHome   Chi Siamo   Foto   Video   Archivio   Contattaci                                          ...
Il mini sito della MusicaHome   Chi Siamo   Foto   Video   Archivio   Contattaci                                          ...
div#menu ul li a { color: #FFFFFF; text-decoration: none;}
Il mini sito della MusicaHome   Chi Siamo   Foto   Video   Archivio   Contattaci
Il mini sito della MusicaHome   Chi Siamo   Foto   Video   Archivio   Contattaci
androe.com
CSS - Primi Passi
CSS - Primi Passi
CSS - Primi Passi
Upcoming SlideShare
Loading in …5
×

CSS - Primi Passi

903
-1

Published on

Primi passi con i Fogili di Stile (CSS): la sintassi base e le proprietà più diffuse.
Lezione svolta nel corso del 5° A.T.A. dell’I.I.S.S. "De Pace" di Lecce.
http://androe.com

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
903
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CSS - Primi Passi

    1. 1. CSS
    2. 2. CSScascade style sheets
    3. 3. CSSfogli di stile a cascata
    4. 4. CSSfogli di stile
    5. 5. i CSSsono una serie di regole che si occupano dell’aspetto grafico di una pagina web (documento HTML)
    6. 6. TESTATA TESTATA
    7. 7. TESTATA TESTATA MENÙ DI NAVIGAZIONEMENÙ DI NAVIGAZIONE CONTENUTO
    8. 8. TESTATA TESTATA MENÙ DI NAVIGAZIONEMENÙ DI NAVIGAZIONE CONTENUTO CONTENUTO
    9. 9. TESTATA TESTATA MENÙ DI NAVIGAZIONEMENÙ DI NAVIGAZIONE COLONNA LATERALE CONTENUTO CONTENUTO COLONNA LATERALE
    10. 10. <div>
    11. 11. <div><h1>
    12. 12. <div><h1><h2>
    13. 13. <div><h1><h2> <p>
    14. 14. <div><h1><h2> <p><ul><li>
    15. 15. <div><h1><h2> <p> CSS<ul><li>
    16. 16. <div> LARGHEZZA<h1><h2> <p> CSS<ul><li>
    17. 17. <div> LARGHEZZA<h1> ALTEZZA<h2> <p> CSS<ul><li>
    18. 18. <div> LARGHEZZA<h1> ALTEZZA<h2> POSIZIONE <p> CSS<ul><li>
    19. 19. <div> LARGHEZZA<h1> ALTEZZA<h2> POSIZIONE TESTO <p> CSS<ul><li>
    20. 20. <div> LARGHEZZA<h1> ALTEZZA<h2> POSIZIONE TESTO <p> CSS carattere tipografico (font)<ul><li>
    21. 21. <div> LARGHEZZA<h1> ALTEZZA<h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione<ul><li>
    22. 22. <div> LARGHEZZA<h1> ALTEZZA<h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione peso crenatura<ul><li>
    23. 23. <div> LARGHEZZA<h1> ALTEZZA<h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione peso crenatura<ul> altezza di riga<li>
    24. 24. <div> LARGHEZZA<h1> ALTEZZA<h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione peso crenatura<ul> altezza di riga allineamento<li>
    25. 25. <div> LARGHEZZA<h1> ALTEZZA<h2> POSIZIONE TESTO <p> CSS carattere tipografico (font) dimensione peso crenatura<ul> altezza di riga allineamento<li> ... E MOLTO ALTRO
    26. 26. ?
    27. 27. style.css
    28. 28. <html> <head> <title>La Musica</title> </head> <body> ... </body></html>
    29. 29. <html> <head> <title>La Musica</title> </head> <body> ... </body></html>
    30. 30. <html> <head> <title>La Musica</title> </head> <body> ... </body></html>
    31. 31. <link rel="stylesheet"type="text/css"href="style.css" />
    32. 32. <link rel="stylesheet"type="text/css"href="style.css" />
    33. 33. COME SCRIVERE LE PROPRIETÀ NEL FILE .cssIN MODO CORRETTO
    34. 34. elemento
    35. 35. elemento {}
    36. 36. elemento { }
    37. 37. elemento { proprietà;}
    38. 38. { ALT Gr + SHIFT + [} ALT Gr + SHIFT + ]
    39. 39. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
    40. 40. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
    41. 41. <div id=”contenitore”> NEL FILE .css SI RICHIAMA CONdiv#contenitore { }
    42. 42. id CSS #
    43. 43. div#contenitore { }
    44. 44. div#contenitore {}
    45. 45. div#contenitore {background: #ffffff;}
    46. 46. div#contenitore {background: #ffffff;color: #000000;}
    47. 47. div#contenitore {background: #ffffff;color: #000000;}
    48. 48. VALORE ESADECIMALE DEI COLORI IL MODO PIÙ SEMPLICEPER INDICARE UN COLORE NEI CSS ESADECIMALE = 0123456789abcdef
    49. 49. VALORE ESADECIMALE DEI COLORI#FFFFFF
    50. 50. VALORE ESADECIMALE DEI COLORI#FFFFFF #000000
    51. 51. VALORE ESADECIMALE DEI COLORI#FFFFFF #000000 #FF0000
    52. 52. VALORE ESADECIMALE DEI COLORI#FFFFFF #000000 #FF0000 #0000FF
    53. 53. VALORE ESADECIMALE DEI COLORI#FFFFFF #000000 #FF0000 #0000FF #FFFF00
    54. 54. VALORE ESADECIMALE DEI COLORI#FFFFFF #000000 #FF0000 #0000FF #FFFF00#FF6600 #00FF00 #00CCFF #FF00FF #3300FF
    55. 55. VALORE ESADECIMALE DEI COLORI#FFFFFF #000000 #FF0000 #0000FF #FFFF00#FF6600 #00FF00 #00CCFF #FF00FF #3300FF#CCCCCC #999999 #333333 #3366FF #CCFF66
    56. 56. div#contenitore {background: #ffffff;color: #000000;}
    57. 57. div#contenitore {background: #ffffff;color: #000000;}
    58. 58. div#contenitore {background: #ffffff;color: #000000;bordermarginpadding}
    59. 59. div#contenitore {background: #ffffff;color: #000000;bordermarginpadding}
    60. 60. border = bordomargin = marginepadding = rientro
    61. 61. div
    62. 62. border div
    63. 63. border divmargin
    64. 64. border padding divmargin
    65. 65. div#contenitore {background: #ffffff;color: #000000;bordermarginpadding}
    66. 66. div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;marginpadding}
    67. 67. div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;margin: 0px;padding}
    68. 68. div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;margin: 0px;padding: 0px;}
    69. 69. div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;margin: 0px auto;padding: 0px;}
    70. 70. div#contenitore {background: #ffffff;color: #000000;border: 1px solid #000000;margin: 0px auto;padding: 0px;width: 960px;}
    71. 71. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
    72. 72. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
    73. 73. <div id=”header”> <h1> Il mini sito della Musica </h1></div>
    74. 74. <div id=”header”> <h1> Il mini sito della Musica </h1></div> CSS
    75. 75. <div id=”header”> <h1> Il mini sito della Musica </h1></div> CSS div#header
    76. 76. div#header {}
    77. 77. div#header {background: #FF0000;}
    78. 78. div#header {background: #FF0000;color: #FFFFFF;}
    79. 79. div#header {background: #FF0000;color: #FFFFFF;}
    80. 80. div#header {background: #FF0000;color: #FFFFFF;margin: 0px;padding: 0px;}
    81. 81. div#header {background: #FF0000;color: #FFFFFF;margin: 0px;padding: 0px;width: 960px;height: 120px;}
    82. 82. Il mini sito della Musica
    83. 83. <div id=”header”> <h1> Il mini sito della Musica </h1></div>
    84. 84. <div id=”header”> <h1> Il mini sito della Musica </h1></div>
    85. 85. h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
    86. 86. h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
    87. 87. Il mini sito della Musica
    88. 88. Il mini sito della Musica
    89. 89. Il mini sito della Musica ???
    90. 90. Il mini sito della Musica ???
    91. 91. h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
    92. 92. h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
    93. 93. h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
    94. 94. h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
    95. 95. div#header h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
    96. 96. div#header h1 {color: #FFFFFF;font-family: Arial;font-size: 32px;font-weight: bold;margin: 0px;padding: 0px;}
    97. 97. Il mini sito della Musica
    98. 98. Il mini sito della Musica
    99. 99. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> ... ...
    100. 100. <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul></div>
    101. 101. <div id=”menu”> <ul> <li> <a href=”#”> Home </a> </li> <li> <a href=”#”> Chi Siamo </a> </li> <li> <a href=”#”> Foto </a> </li> <li> <a href=”#”> Video </a> </li> </ul></div>
    102. 102. div#menu {}
    103. 103. div#menu {background: #0000FF;color: #FFFFFF;}
    104. 104. div#menu {background: #0000FF;color: #FFFFFF;margin: 0px;padding: 0px;}
    105. 105. div#menu {background: #0000FF;color: #FFFFFF;margin: 0px;padding: 0px;width: 960px;height: 30px;}
    106. 106. Il mini sito della Musica
    107. 107. div#menu ul {margin: 0px;padding: 0px;width: 960px;height: 30px;list-style: none;}
    108. 108. div#menu ul li {margin: 0px;padding: 0px;font-family: Arial;font-size: 32px;font-weight: bold;display: inline;}
    109. 109. Il mini sito della MusicaHome Chi Siamo Foto Video Archivio Contattaci ???
    110. 110. Il mini sito della MusicaHome Chi Siamo Foto Video Archivio Contattaci ???
    111. 111. div#menu ul li a { color: #FFFFFF; text-decoration: none;}
    112. 112. Il mini sito della MusicaHome Chi Siamo Foto Video Archivio Contattaci
    113. 113. Il mini sito della MusicaHome Chi Siamo Foto Video Archivio Contattaci
    114. 114. androe.com

    ×