Programaçao De Scripts - Aula 03

CSS

CSS ou Cascade Style Sheets é uma linguagem que irá comandar a aparência de nossos arquivos HTML interpretados nos navegadores. Parte fundamental para o design visual dos nossos sites.

Ele permite separar o conteúdo da apresentação, facilitando a manutenção e melhorando acessibilidade e carregamento da página.

Seletores CSS

Sendo uma linguagem de programação para estilização dos sites, temos de selecionar os componentes nos quais iremos estilizar.

Assim, surge algumas normas para a seleção.

Seletores simples

São os mais básicos, onde colocamos como seleção o próprio componente, uma classe ou um ID.

/*Seletor Simples para componente/elemento */
p {
    font-family: 'Arial';
}

/*Seletor Simples para classe */
.classe {
    font-family: 'Arial';
}

/*Seletor simples para ID*/
#meu-id {
    font-family: 'Arial';
}

Pseudo-seletores

Algo que é quase uma condição para que seja selecionado, por exemplo quando queremos estilizar se um link está com o mouse em cima dele, e queremos trocar de cor azul para a cor do nosso negócio, exemplo verde.

a:hover{
    color: green;
}

Nós usamos o :hover, :nth-child e outros pseudo-seletores, são utilizados para estilizar alguns estados ou elementos específicos.

Seletores Compostos

Nós podemos unir seletores para deixar a estilização mais específica, por exemplo quando não queremos alterar todos os parágrafos do nosso site, mas somente um que esteja dentro da classe minha-classe.

.minha-classe p{
    /*Estilização aqui*/
}

Observação: CSS tem esta questão de “cascata” (está no nome: Cascade) justamente para ter esta seleção composta, onde algo pode estar dentro de outro, estar “encascatado” em outro elemento.

Responsividade

O professor bate muito na tecla de responsividade, pois é onde o nosso design se adapta a diferentes telas. Desde dispotivos de diferentes tamanhos de tela, desde pessoas que utilizam um dispositivo de modo diferente.

Responsividade irá englobar tudo, o que entra também na acessibilidade, que o professor comentava na Programaçao de Scripts - Aula 02

Sobre o Projeto

Professor quer que já tenhamos em mente o projeto do semestre, para já começarmos a trabalhar na sua estruturação, estilização e - no tempo oportuno - em suas funcionalidades.

Para isso, ele está mostrando, desde a aula passada, um site de venda de café que ele fez. Na semana passada, somente a estrutura (HTML). Hoje, já começou a mostrar um pouco de estilização.

Semana que vem, na aula 4, ele irá nos ensinar sobre Bootstrap. Para isso ele recomendou já termos uma ideia geral deste projeto, de como seria a estilização para ele, bem como já ter alguma estrutura pronta.