Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
04-CSS3
Compartilhar
Prévia do material em texto
C CSS3 SS significa Cascading Style Sheet (Folha de estilos em cascata) é uma das principais tecnologias responsáveis por tornar um site responsivo. Assim como o HTML, o CSS é uma linguagem com suas próprias regras e serve para, junto com uma página HTML, dar aparência a cada elemento, realizar todos os ajustes e posicionamentos necessários e, até mesmo, animações. Isso tudo com um único arquivo ou poucos arquivos, evitando assim repetição de código, deixando as páginas mais performáticas e centralizando os estilos de todas as páginas em um único local. A única coisa que temos que fazer é “dizer” ao HTML que ele precisa utilizar uma determinada folha de estilos. Existem, essencialmente, três maneiras de fazermos isso ou de aplicar um estilo à uma TAG, conforme: • Inline: Aqui você coloca a propriedade “style” dentro de uma TAG. Este processo funciona bem, mas não é muito prático, pois você acaba repetindo muito código. Exemplo: <p style=”color=blue”>Parágrafo azul! </p> • Interno: Você escreve a folha de estilos dentro do <head> de seu arquivo HTML. Este é um processo muito usado para sites pequenos, funciona bem, entretanto se tiver mais de uma página com o mesmo estilo, será necessário copiar o código inteiro. Uma alteração aqui, teria de ser feita em todos os arquivos. Vide exemplo no vídeo apresentado e relacionado à essa aula. • Externo: Neste caso você cria um arquivo de estilo separado (extensão “.css”) e na página que você quer aplicar o estilo inclui, dentro do <head> este código: <link rel="stylesheet" type="text/css" href=”estilo.css">. Em nossas aulas usaremos este formato, pois é como o mercado profissional utiliza. Para exemplificarmos o processo de aplicação de um CSS à um HTML, vamos à um exemplo (o mesmo mostrado no vídeo desta aula). Abaixo temos o código da folha de estilos, colocada dentro da pasta “css” dentro de nosso projeto. O arquivo em questão foi nomeado de “estilo.css” e serve para formatar o corpo da aplicação, um cabeçalho <h1> e um parágrafo. Veja: Formatando seletores Conforme visto no exemplo anterior, a formatação fora aplicada a elementos do próprio HTML e isso chama-se formatação de seletores HTML. Podemos aplica a formatação sobre qualquer seletor HTML com o CSS. Para isso, no CSS, basta incluir o nome do seletor HTML e dentro das chaves sua formatação desejada. Podemos, ainda, incluir propriedades de ação do mouse, por exemplo: O código acima especifica uma formação em links e, quando o mouse estiver sobre o link (hover), o texto receberá outra cor. Classes e IDs Um dos recursos mais interessantes do CSS é podemos criar nossos próprios estilos e aplicá-los livremente, sem termos que generalizar aplicando-os para todos os seletores de uma página. São as classes e os ids. Imagine uma sala de cinema com cadeiras numeradas. Você compra seu ingresso e escolhe a sua cadeira. Essa cadeira possui um id único e, portanto, se você for chamado na sala, facilmente é localizado com este id. Já a classe refere-se à classificação. Por exemplo, no mesmo cenário do cinema, se chamarmos todos que têm menos de 18 anos, mais de uma pessoa poderá “levantar-se”, ou seja, criamos uma chamada para uma classificação da pessoa. O mesmo podemos fazer com o CSS. Podemos aplicar para uma classificação (classe), no CSS identificada com um ponto “.” e aplicar sempre que precisarmos a nossos elementos HTML. O ID normalmente pertence, em cada página, à um único elemento e, portanto, aquele elemento único poderia receber algum tipo de formatação, baseado em seu ID. Os IDs no CSS são identificados pela cerquinha (ou jogo da velha, ou “sharp”) ou, simplesmente, “#”. Não deixe de assistir o vídeo associada à esta parte do conteúdo para entender como aplicar as classes e os IDs do CSS em elementos HTML. Flutuação de elementos A possibilidade de flutuarmos elementos HTML dentro da página inicia nosso processo de incluir o conceito de responsivo em nossas aplicações. A flutuação dos elementos é uma propriedade que serve para posicionarmos nossos componentes. Originalmente cada uma das TAGs HTML é exibida na ordem que é reconhecida pelo browser, ou seja, de cima para baixo. A propriedade de CSS “float” pode mudar essa construção. Temos quatro tipos de flutuação disponíveis para os elementos, são elas: • “left” (esquerda): O elemento flutua à esquerda de seu container • “right” (direita): O elemento flutua à direita de seu container • “none” (nenhum): O elemento segue sua construção convencional, ou seja, o padrão é este • “inherit” (herdado): O elemento herda o mesmo float do container dele. Usaremos muito pouco este Para entender melhor todas as principais flutuações, não deixe de assistir o vídeo associado a esta aula, onde os testes são devidamente realizados com cada um dos floats. Boa programação. Atividade extra Leita atentamente a documentação do float e seus subcapítulos, como o clear e veja alguns exemplos, disponíveis em: https://www.w3schools.com/css/css_float.asp https://www.w3schools.com/css/css_float_clear.asp https://www.w3schools.com/css/css_float_examples.asp Não deixe de procurar vídeos, também, sobre o assunto para fixação do conteúdo. Referência Bibliográfica Flatschart, F., HTML5 – Embarque imediato, Editora Brasport, 1ª Ed., 2011 Segurado, S. V., Projeto de Interface com Usuário, Editora Pearson, 1ªEd., 2016 Frain, B., Responsive Web Design with HTML5 and CSS, Editora Packt Publishing, 3ª Ed., 2020 Libby, A., Gupta G., Talesra A., Responsive Web Design with HTML5 and CSS3 Essentials, Editora Packt Publishing, 1ª Ed., 2016 Kyrnin, J., Learning Responsive Web Design, Editora Addison-Wesley Professional, 2017 Ir para questão https://www.w3schools.com/css/css_float.asp https://www.w3schools.com/css/css_float_clear.asp https://www.w3schools.com/css/css_float_examples.asp
Continue navegando
Materiais relacionados
112 pág.
Perguntas relacionadas
Compartilhar