Desenvolvimento Web - Criação e formatação de páginas web com CSS - COD 9203

Prévia do material em texto

<p>Desenvolvimento Web</p><p>Universidade Regional Integrada do Alto Uruguai e das Missões -</p><p>Campus Erechim</p><p>Prof. Jackson Felipe Magnabosco</p><p>Criação e formatação de páginas</p><p>web com CSS</p><p>Introdução</p><p>● Identificar os estilos CSS.</p><p>● Definir estilos CSS, aplicando-os nas páginas</p><p>HTML.</p><p>● Reconhecer como ocorre a estilização de</p><p>páginas web com CSS.</p><p>Qual o significado do CSS ?</p><p>CSS { Cascading Style Sheets }</p><p>Folhas de Estilo em Cascata</p><p>Qual o objetivo do CSS ?</p><p>Descrever como os elementos HTML devem</p><p>ser exibidos na tela</p><p>Regras de estilo CSS</p><p>● Inline</p><p>Definida dentro de uma tag HTML</p><p>● Interna</p><p>Definida no HEAD do documento HTML</p><p>● Externa</p><p>Definida em um documento CSS</p><p>separado</p><p>Como integrar o CSS Inline no HTML</p><p>Como integrar o CSS Interna no HTML</p><p>Como integrar o CSS Externa HTML</p><p>Tipos de seletores CSS</p><p>● Tag</p><p>Utiliza o nome da própria tag</p><p>Ex: body{margin:0;]</p><p>● Classe</p><p>Utiliza uma classe na tag</p><p>Ex: <h1 class=”titulo”> e na Css</p><p>.titulo{background-color:#000;color: #FFF;}</p><p>Tipos de seletores CSS</p><p>● Id</p><p>Utiliza na classe uma tag</p><p>Ex: <div id=”rodape”> e na CSS</p><p>#rodape{margin:auto; padding:20px;}</p><p>● Atributo</p><p>Utiliza o atributo de uma tag</p><p>Ex: <input type =”text” e na CSS</p><p>input{type=text}{border:solid 2px;}</p><p>Tipos de seletores CSS</p><p>● Pseudo Classe</p><p>Utilizado mais nos links</p><p>Ex: a:hover{text-decoration:none;}</p><p>● Grupo</p><p>Utilizado para vários seletores em grupos</p><p>Ex: p, .titulo, #rodape, a:link{margin:0;}</p><p>Tipos de seletores CSS</p><p>● Descendente</p><p>Utilizado para um seletor dentro de um seletor</p><p>Ex: #menu ul{list-style-type:none}</p><p>● Universal</p><p>Utilizado para todas as tags de uma só vez</p><p>Ex: *{font-fammily:Arial;}</p><p>Figma</p><p>https://www.figma.com/design/2g4bAm7EnKUsyaS7KBmwBD/Portifolio---Desenvolvimento-Web?node-id=1-7&t=4oFjtVjIi5cUBlvA-0</p><p>Hora de codificar!</p><p>Vamos mergulhar no CSS e</p><p>construir a base de uma página</p><p>web.</p><p>Disponível em:</p><p>● Github:https://github.com/jacksonn45</p><p>5/desenvolvimento-web-aula-css/tree/</p><p>master</p><p>● Github Pages:</p><p>https://jacksonn455.github.io/desenv</p><p>olvimento-web-aula-css/</p><p>https://github.com/jacksonn455/desenvolvimento-web-aula-css/tree/master</p><p>https://github.com/jacksonn455/desenvolvimento-web-aula-css/tree/master</p><p>https://github.com/jacksonn455/desenvolvimento-web-aula-css/tree/master</p><p>https://jacksonn455.github.io/desenvolvimento-web-aula-css/</p><p>https://jacksonn455.github.io/desenvolvimento-web-aula-css/</p><p>Introdução</p><p>● Diferenciar requisitos de negócio, de cliente, de sistema e</p><p>de usuários.</p><p>● Elaborar a documentação de requisitos e regras de</p><p>negócio.</p><p>● Classificar os requisitos por prioridade (essencial,</p><p>importante e desejável</p><p>Dúvidas ou sugestões ?</p><p>Desenvolvimento Web</p><p>Universidade Regional Integrada do Alto Uruguai e das Missões -</p><p>Campus Erechim</p><p>Prof. Jackson Felipe Magnabosco</p>