Dsi Aula03 Css

DSI: CSS
Profª. Msc. Sahra Karolina

Introdução
Enquanto o HTML tem como objetivo criar a estrutura
principal do documento, a função do CSS é justamente
otimizar o aspecto visual das páginas, de uma maneira
mais organizada e menos complexa na hora realizar
manutenção.
01/03/20XX EXEM PLO DE T EXTO DE RODAP É 2

CSS
CSS é uma linguagem de estilo, também conhecida como
folhas de estilo em cascata. É usada para personalização
visual de um site. Ou seja, elas servem para otimizar o
conteúdo das páginas e permitir uma apresentação mais
amigável para o usuário.
Clique no ícone para adicionar uma imagem
Por essa razão, o CSS complementa o HTML, que tem como
função apenas a estruturação e marcação dos principais
componentes das páginas. Nesse sentido, para entender CSS,
é preciso saber HTML.
01/03/20XX EXEM PLO DE T EXTO DE RODAP É 3

CSS
O HTML cria a ordem dos elementos e a
forma básica, como um esqueleto, e o CSS é
o que deixa o website visualmente atraente,
como o corpo e as roupas que vestimos. Sua
criação foi motivada justamente por essa
necessidade de mais estilização e também
pela limitação de aplicar personalizações
com os arquivos HTML.
CSS
As folhas de estilo trabalham com um grande
conjunto de informações visuais, como fontes,
cores, grids e frames, posicionamento de
elementos, relação entre componentes, bordas,
margens e sombras. Se um desenvolvedor
quisesse alterar tudo isso antes da criação de
uma linguagem para estilização, teria que editar
o código de cada arquivo HTML por vez.
Responsividade
O HTML é responsável por definir quais os elementos que farão parte de
uma página web, bem como estruturá-los de uma forma mais simples.
O CSS, por sua vez, permite organizar layouts de modo a adaptar os

blocos visuais para diferentes telas e tamanhos, garantindo
responsividade. Em poucos minutos e linhas, o desenvolvedor é capaz de
criar regras para mudar a organização de informações de acordo com o
dispositivo que acessará aquele site.
Responsividade
 Ou seja, o tamanho do menu e das fontes, bem como a posição dos elementos
muda de acordo com a tela. Em celulares, por exemplo, as partes do conteúdo
surgem sequencialmente de cima para baixo, ao passo que em computadores,
elas ficam lado a lado.
 Isso
pode ser feito de maneira fácil com um framework CSS chamado
Bootstrap. Os frameworks são conjuntos de códigos prontos que executam
alguma funcionalidade específica. Se o objetivo é assegurar responsividade, o
Bootstrap se encarrega de ajudar o programador e prevenir dores de cabeça.
A maneira de
começar é parar
de falar e
começar a fazer.
Walt Disney
01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 8

Aplicando estilos
Existem diferentes formas de aplicarmos estilos CSS
nos elementos de uma página HTML. É importante
entender como funciona cada uma e que existe uma
hierarquia entre elas. Ou seja, podemos declarar
estilos em locais diferentes ao mesmo tempo, e
acontecer de um deles ser ignorado pelo navegador.

Aplicando estilos
Inline internos e externos padrão do navegador
 primeiro lugar;  declarados na seção  terceiro lugar e
head: segundo lugar e corresponde ao valor
a prioridade de definido para cada
aplicação entre eles elemento de acordo
será para o que for com o navegador.
declarado por último;

Interno
 deve ser inserida no elemento head do HTML:
<style> /* código CSS */ </style>

Interno <!DOCTYPE html>
<html lang="en">
<head>
 Perceba que escrevemos o
<meta charset="UTF-8">
código CSS na área indicada, <meta http-equiv="X-UA-Compatible" content="IE=edge">
ou seja, no head da página e <meta name="viewport" content="width=device-width, initial-scale=1.0">
entre as tags <style></style>. <title>CSS com código interno</title>
Ao escrevermos o código, <style>
podemos utilizar diferentes h2{ /* estilo aplicado em tag */
tipos de seletores entre eles: color: darkgreen;
}
tags, classes e id.
#meuTitulo{ /* estilo aplicado em id */
color:red;
}
 Vale ressaltar que a utilização
.tituloModificado{ /* estilo aplicado em classe */
desse formato não é a mais color: blue;
recomendada, pois dificulta a }
manutenção e o </style>
reaproveitamento do código, já </head>
que todas as definições ficam <body>
<h2>Título aplicado no seletor do tipo tag.</h2>
dentro do arquivo HTML e
<h2 id="meuTitulo">Título aplicado no seletor tipo id.</h2>
não podem ser utilizadas em
<h2 class="tituloModificado">Título aplicado no seletor tipo tag.</h2>
outras páginas da aplicação. </body>
</html> 12
Externo
O formato externo indica que o código CSS é escrito em um arquivo à parte, ou seja, fora do código HTML e
inserido por meio da tag <link>. Sua utilização é a mais recomendada, pois facilita a manutenção do código e a
reutilização em outras páginas.
Para isso, devemos inserir o seguinte código na seção head da página:
<link rel="stylesheet" type="text/css" href="./estilo.css" >

Inline
 A forma
inline de escrever código CSS corresponde à inserção das características desejadas na própria tag
HTML por meio do atributo style. Confira um exemplo:
<h2 style="color: blue; font-size: x-large">Meu título</h2>
 Podemosdefinir uma série de propriedades para o elemento quando utilizamos o atributo style na tag
HTML. Cada propriedade deve ser declarada com o sinal de dois pontos e separada por ponto e vírgula.
 Vale ressaltar que esse formato dificulta a manutenção e a reutilização do código na aplicação web. Além
disso, se for preciso definir muitas propriedades, o código ficará muito extenso e confuso. Um bom
exemplo de utilização desse é a construção de e-mail marketing, que podem ser feitos com código
HTML.

Estilização com CSS
 Estrutura da instrução CSS
seletor { propriedade: valor }
 No qual:
 seletor: corresponde ao identificador do elemento em que o estilo será aplicado. Como mencionamos,
esse valor pode ser o id, a classe, o nome da tag ou a combinações desses seletores e, ainda, as
pseudo-classes. Podemos ter várias propriedades definidas para cada seletor;
 propriedade: corresponde à característica do elemento que será estilizada;
 valor: indica o valor do estilo.

h2{ <!DOCTYPE html>
color: darkgreen; <html lang="en">
<head>
} <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#meuTitulo{ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS com arquivo externo</title>
color: red; <link rel="stylesheet" type="text/css" href="./estilo.css" >
</head>
} <body>
.tituloModificado{ <h2>Título 1 - estilo aplicado com o seletor do tipo tag h2</h2>
<h2 id="meuTitulo">Título 2 - estilo aplicado com o id do elemento h2</h2>
color:blue; <h2>Título 3 - estilo aplicado com o seletor do tipo tag h2</h2>
<h2 class="tituloModificado">Título 4 - estilo aplicado com a classe tituloModificado</h2>
font-size: x-large; <h2 class="tituloModificado">Título 5 - estilo aplicado com a classe tituloModificado</h2>
</body>
font-weight: bold; </html>
}

 Perceba que utilizamos diferentes tipos de seletores no arquivo estilo.css. O seletor do tipo
id só pôde ser aplicado uma vez, pois não podemos ter dois elementos em uma página
HTML com o mesmo identificador. Por isso, só temos um elemento que recebe as
características do estilo #meuTitulo.
 Já as classes podem ser utilizadas várias vezes e têm prioridade sobre os estilos definidos
apenas com a estilização da tag. Perceba que utilizamos o elemento h2 em todos os títulos
e que, ao aplicarmos a classe tituloModificado, o estilo definido para ela foi aplicado ao
elemento em vez do código definido apenas para as tags do tipo h2.
 Percebatambém que adicionamos a tag <link> na seção head da página HTML para que o
navegador carregue o seu conteúdo no momento de renderizar a página.

Propriedades do CSS
 As propriedades CSS são utilizadas para definir as
características que desejamos aplicar aos elementos.

Propriedades do CSS
 CSS background-image
 A propriedade CSS background-image é utilizada para inserir uma ou mais imagens ao
fundo de um elemento. Essa propriedade pode ser aplicada em todos os elementos
HTML. Além de imagens, podemos inserir efeitos de transição de cores com as
funções CSS para a criação de CSS background gradient, que é considerado um tipo
de imagem. Confira no exemplo abaixo:
background-image: url(nome-da-imagem.jpg);
background-image: linear-gradient(cor1, cor2);
Propriedades do CSS
 CSS border
 A propriedade CSS border adiciona uma borda ao redor do elemento e
corresponde ao agrupamento de outras três propriedades relacionadas
 border-width: que corresponde ao tamanho da borda;
 border-style: que define o estilo da borda e é uma informação obrigatória;
 border-color: para definir a cor da borda.
border: 2px solid red;

Propriedades do CSS
 CSS position
 A propriedade CSS position é utilizada para especificar como será o posicionamento de um
elemento na página. Seu valor padrão é static, o que indica a ocupação de acordo com a
ordem natural da escrita do código. Podemos utilizar outros valores, como o fixed, que
posiciona o elemento em uma parte específica da tela.
 A propriedade position trabalha em conjunto com outras propriedades auxiliares para
definirmos com mais exatidão o local em que o elemento deve ficar. São elas: top, bottom,
left e right.
position: static | relative | fixed | absolute | sticky

Propriedades do CSS
 CSS color
 Basicamente, a propriedade CSS color é utilizada para modificar a
cor do texto da página HTML. Entretanto, outras propriedades
também se associam a ela para alterar as cores CSS de seus
elementos, como a background-color, border-color e muitas outras.
A propriedade color aceita diferentes sistemas de cores e funções
CSS para a construção de gradientes.
color: valor;
Propriedades do CSS
 CSS display
 A propriedade CSS display é essencial para a construção de layouts
responsivos. Na prática, ela determina a maneira em que os elementos
serão renderizados na página. Vale ressaltar que os elementos podem
ser do tipo block (em bloco), no qual são dispostos um em cada linha,
ou inline (em linha), em que o elemento ocupa apenas o espaço
equivalente ao seu conteúdo. Por isso, são posicionados lado a lado.
display: valor;
Propriedades do CSS
 Hover CSS
 A pseudo-classe hover CSS é utilizada quando queremos realizar uma
modificação no elemento sempre que a pessoa usuária posicionar o mouse
sobre ele. Trata-se de um recurso muito utilizado para a construção de efeitos
variados, como a mudança de cores para chamar a atenção para um link, para
modificar imagens e textos e muito mais.
a:hover {
color: blue;
}
Propriedades do CSS
 Box shadow CSS
 Com a propriedade box-shadow CSS, podemos criar efeitos de
sombras ao redor ou no interior do elemento. Ela contém uma série
de atributos que ajudam a definir as características da sombra, como
o seu tamanho, a intensidade do efeito blur e a cor. Uma das
aplicações dessa propriedade é para a criação de botões com o
efeito de pressionado ou não.
box-shadow: [inset][h-offset][v-offset][blur][spread][color];
Propriedades do CSS
 Box shadow CSS
 Com a propriedade box-shadow CSS, podemos criar efeitos de
sombras ao redor ou no interior do elemento. Ela contém uma série
de atributos que ajudam a definir as características da sombra, como
o seu tamanho, a intensidade do efeito blur e a cor. Uma das
aplicações dessa propriedade é para a criação de botões com o
efeito de pressionado ou não.
box-shadow: [inset][h-offset][v-offset][blur][spread][color];
Prática
 Testar diferentes estilizações CSS

DSI: CSS
Seletores básicos: tag,

identificador, classe, e
descendente
Tag
 Já vimos como selecionar elementos no CSS usando simplesmente o nome da tag:
p{
color: red;
}
 Apesar
de simples, é uma maneira muito limitada de selecionar. Às vezes não
queremos pegar todos os parágrafos da página, mas apenas algum determinado.
 Existem,
portanto, maneiras mais avançadas de selecionarmos um ou mais
elementos do HTML usando os seletores CSS.
ID
É possível aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id.
 Para isso, o seletor deve iniciar com o caractere “#” seguido do valor correspondente
#cabecalho {
color: white;
text-align: center;
}
O seletor acima fará com que o elemento do nosso HTML que tem o atributo id com valor
“cabecalho” tenha seu texto renderizado na cor branca e centralizado. Note que não há nenhuma
indicação para qual tag a propriedade será aplicada.
 Podeser tanto uma <div> quanto um <p>, até mesmo tags sem conteúdo como uma <img>, desde
que essa tenha o atributo id com o valor “cabecalho”.
Seletor hierárquico
 Como o atributo id deve ter valor único no documento, o seletor deve aplicar suas propriedades
declaradas somente àquele único elemento e, por cascata, a todos os seus elementos filhos.
 Podemosainda utilizar um seletor hierárquico que permite aplicar estilos aos elementos filhos de
um elemento pai:
#rodape img {
margin-right: 35px;
vertical-align: middle;
width: 94px;
}
 No exemplo anterior, o elemento pai rodape é selecionado pelo seu id. O estilo será aplicado apenas
nos elementos img filhos do elemento com id=rodape.

ID
 Já vimos seletor de tag. Por exemplo, como pra estilizar a tag <p>.
 Masimagine que podemos ter muitos NAV na página e queremos ser mais
especícos. O ID é uma solução:
<p id="menu-opcoes">…</p>
 E, no CSS:
#menu-opcoes {
...
}
Classes
E agora no uso de classes.
O código é semelhante mas usa o atributo class no HTML:
<p class="menu-opcoes">…</p>
 E, no CSS:
.menu-opcoes {
...
}
ID x Classes
 Utilize id quando você quiser identificar apenas um elemento
no html e utilize class quando quiser se referir a mais de um
elemento.
 Utilize ID quando deseja que as propriedades do CSS sejam
direcionadas a apenas um elemento.
 Utilize Classes quando você deseja as mesmas propriedades
para uma série de elementos.
Classes
 Um elemento pode ter mais de uma classe ao mesmo tempo, aplicando estilos de
várias regras do CSS ao mesmo tempo:
<p class="menu-opcoes menu-cabecalho">...</p>
 E, no CSS:
.menu-opcoes { // código de um menu de opcoes
// essas regras serão aplicadas ao <p>
}
.menu-cabecalho { // código de um menu no cabeçalho
// essas regras TAMBÉM serão aplicadas ao <p>
}
ID
 No caso do ID, não. Cada elemento só tem um id, único.
 Preferimoso uso de classes pra deixar em aberto
reaproveitar aquele elemento em mais de um ponto depois.
Prática
 Abrir o VSCode
 Novo arquivo, salvar como index.html
 Novo arquivo, salvar como style.css

Prática:

Prática:

Prática:

DSI: CSS Profª. Msc. Sahra Karolina

Dsi Aula03 Css

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Dsi Aula03 Css

Enviado por

Direitos autorais:

Formatos disponíveis

DSI: CSS

Profª. Msc. Sahra Karolina

01/03/20XX EXEM PLO DE T EXTO DE RODAP É 2

01/03/20XX EXEM PLO DE T EXTO DE RODAP É 3

O CSS, por sua vez, permite organizar layouts de modo a adaptar os

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 8

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 9

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 10

<style> /* código CSS */ </style>

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 11

<link rel="stylesheet" type="text/css" href="./estilo.css" >

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 13

<h2 style="color: blue; font-size: x-large">Meu título</h2>

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 14

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 15

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 16

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 17

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 18

border: 2px solid red;

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 20

position: static | relative | fixed | absolute | sticky

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 21

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 27

Seletores básicos: tag,

nos elementos img filhos do elemento com id=rodape.

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 37

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 38

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 39

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 40

01/03/20XX EXEMPLO DE TEXTO DE RODAPÉ 41

Você também pode gostar