Text Material Preview
<p>1</p><p>30</p><p>1</p><p>Profª Margarete Klamas</p><p>Fundamentos da Programação Web</p><p>Aula 2</p><p>30</p><p>2</p><p>Conversa Inicial</p><p>30</p><p>3</p><p>No tema 1 – Sintaxe do CSS, tipos de</p><p>seletores, como aplicar CSS.</p><p>No tema 2 – Comentários em CSS. Cores.</p><p>Background. Bordas. Margin. Padding.</p><p>No tema 3 – width, height, formatação de</p><p>texto/fonte. Box Model.</p><p>No tema 4 – float, clear, elementos block e</p><p>inline</p><p>No tema 5 – Display, Position e z-index.</p><p>Temas</p><p>30</p><p>4</p><p>CASCADING STYLE SHEETS (CSS))</p><p>30</p><p>5</p><p>Sintaxe</p><p>Fonte: w3schools</p><p>h1 {color:blue; font-size:12px}</p><p>Selector Declaration Declaration</p><p>Property Value Property Value</p><p>30</p><p>6</p><p>Seletores</p><p>p {</p><p>text-align: center;</p><p>color: red;</p><p>}</p><p>#p {</p><p>text-align: center;</p><p>color: green;</p><p>}</p><p>Elemento Id</p><p>.p {</p><p>text-align: center;</p><p>color: blue;</p><p>}</p><p>class</p><p>*{</p><p>text-align: center;</p><p>color: blue;</p><p>}</p><p>Universal</p><p>2</p><p>30</p><p>7</p><p><head></p><p><link rel="stylesheet" href="mystyle.css"></p><p></head></p><p>Externo</p><p>Como utilizar CSS</p><p>30</p><p>8</p><p><head></p><p><style></p><p>body {</p><p>background-color: linen;</p><p>}</p><p>h1 {</p><p>color: maroon;</p><p>margin-left: 40px;</p><p>}</p><p></style></p><p></head></p><p>Interno</p><p>Como utilizar CSS</p><p>30</p><p>9</p><p><h1 style="color:blue;text-align:center;">Título</h1></p><p><p style="color:red;">Parágrafo.</p></p><p>Inline</p><p>Como utilizar CSS</p><p>30</p><p>10</p><p>CSS – (comentários, cores,</p><p>background, bordas, margin e</p><p>padding)</p><p>30</p><p>11</p><p><style></p><p>/* Comentários*/</p><p>p {</p><p>color: red;</p><p>}</p><p></style></p><p>Comentários</p><p>30</p><p>12</p><p><head></p><p><style></p><p>body {</p><p>background-color: black;</p><p>color: white;</p><p>}</p><p></style></p><p></head></p><p>Cores</p><p>3</p><p>30</p><p>13</p><p><head></p><p><style></p><p>p {</p><p>border: 5px solid red;</p><p>}</p><p></style></p><p></head></p><p>Bordas</p><p>30</p><p>14</p><p><style></p><p>div {</p><p>border: 1px solid black;</p><p>margin: 25px;</p><p>background-color: lightblue;</p><p>}</p><p></style></p><p>Margin</p><p>30</p><p>15</p><p><head></p><p><style></p><p>div {</p><p>border: 1px solid black;</p><p>padding: 25px;</p><p>background-color: green;</p><p>color:white;</p><p>}</p><p></style></p><p></head></p><p>Padding</p><p>30</p><p>16</p><p>CSS - (width, height, text, Box Model)</p><p>30</p><p>17</p><p>Largura</p><p><style></p><p>body{</p><p>background-color: black;</p><p>color: white;</p><p>}</p><p>div.um {</p><p>width: auto;</p><p>border: 1px solid white;</p><p>}</p><p>div.dois {</p><p>width: 200px;</p><p>border: 1px solid white;</p><p>}</p><p>div.tres {</p><p>width: 60%;</p><p>border: 1px solid white;</p><p>}</p><p></style></p><p>30</p><p>18</p><p><head></p><p><style></p><p>div.um {</p><p>height: auto;</p><p>border: 1px solid black;</p><p>}</p><p>Altura</p><p>div.dois {</p><p>height: 50px;</p><p>border: 1px solid black;</p><p>}</p><p></style></p><p></head></p><p>4</p><p>30</p><p>19</p><p><style></p><p>h1 {</p><p>font-family: cursive;</p><p>text-align: center;</p><p>color: blue;</p><p>}</p><p>h2 {</p><p>text-align: left;</p><p>}</p><p>h3 {</p><p>font-family: Arial;</p><p>text-align: right;</p><p>}</p><p></style></p><p>Formatação de texto</p><p>30</p><p>20</p><p>30</p><p>21</p><p>Box Model</p><p>Fonte: w3schools</p><p>30</p><p>22</p><p>Float, Clear, Elementos block e inline</p><p>30</p><p>23</p><p>Float</p><p><style></p><p>img {</p><p>float: right;</p><p>}</p><p></style></p><p>left- O elemento flutua à esquerda de seu</p><p>contêiner</p><p>right- O elemento flutua à direita de seu</p><p>contêiner</p><p>none- O elemento não flutua (será exibido</p><p>exatamente onde ocorre no texto). Isso é</p><p>padrão</p><p>inherit- O elemento herda o valor float de</p><p>seu pai</p><p>30</p><p>24</p><p>Quando usamos a float, e queremos o</p><p>próximo elemento abaixo (não à direita ou à</p><p>esquerda), teremos que usar a propriedade</p><p>clear</p><p>Clear</p><p>5</p><p>30</p><p>25</p><p>Elementos Block</p><p><hr></p><p><li></p><p><main></p><p><nav></p><p><noscript></p><p><ol></p><p><output></p><p><p></p><p><pre></p><p><section></p><p><table></p><p><tfoot></p><p><ul></p><p><video></p><p><address></p><p><article></p><p><aside></p><p><canvas></p><p><dd></p><p><div></p><p><dl></p><p><dt></p><p><fieldset></p><p><figcaption></p><p><figure></p><p><footer></p><p><form></p><p><h1>-<h6></p><p><header></p><p>30</p><p>26</p><p>Elementos inline</p><p><em></p><p><i></p><p><img></p><p><input></p><p><kbd></p><p><label></p><p><map></p><p><object></p><p><q></p><p><samp></p><p><a></p><p><acronym</p><p>></p><p><b></p><p><bdo></p><p><big></p><p><br></p><p><button></p><p><cite></p><p><code></p><p><dfn></p><p><script></p><p><select></p><p><small></p><p><span></p><p><strong></p><p><sub></p><p><sup></p><p><textarea</p><p>></p><p><time></p><p><tt></p><p><var></p><p>30</p><p>27</p><p>Display, Position e Z-index</p><p>30</p><p>28</p><p>Display especifica como um elemento será</p><p>exibido na tela</p><p>Display</p><p>30</p><p>29</p><p>Position ajuda no posicionamento de</p><p>elementos do lay-out</p><p>Position pode ter os valores: estático, fixo,</p><p>absoluto e relativo</p><p>Position</p><p>30</p><p>30</p><p>A propriedade z-index permite alterar a</p><p>ordem de empilhamentos dos elementos,</p><p>porém só funciona com elementos que</p><p>possuem a propriedade position</p><p>Z-index</p><p>6</p><p>30</p><p>31</p>More content from this subject
S_AnliseDesenvoSistema_FundameProgramWeb_Aula_Pratica_1- S_AnliseDesenvoSistema_FundameProgramWeb_Aula_Pratica_3
- S_AnliseDesenvoSistema_FundameProgramWeb_Aula_Pratica_2
- slides_aula_3
- Fundamentos do HTML
- Fundamentos do CSS
- Aula Javascript completa
- Acessibilidade na Comunicação docx MÓDULO 4
- Mapa Mental Química Decantação ENEM 2019
- Trabalho - Populando o Banco de Dados
- Algoritmo e programação- atividade 2