Aula 46
Presentation
•
Mathematics
•
9th - 12th Grade
•
Practice Problem
•
Hard
Leandro Oliveira
Used 1+ times
FREE Resource
15 Slides • 0 Questions
1
Página web: desenvolvendo uma
ferramenta interativa de estudo
Criando o rodapé da página
Unidade
Aula 2
2
2
Criar um arquivo de estilos para
modificar a aparência da página.
Conectar os arquivos de extensão
HTML e CSS utilizando a tag link.
Modificar a aparência da página
utilizando diferentes propriedades
do CSS.
O que vamos aprender?
CLIQUE E ACOMPANHE A AULA NA ALURA
3
3
Customizando os elementos com CSS
Na aula anterior, começamos nosso projeto criando o arquivo index.
html e adicionando o conteúdo de dois cartões. Agora, começaremos a
estilizar esse conteúdo, deixando-o cada vez mais próximo do protótipo.
Para isso, trabalharemos com a linguagem CSS.
4
4
Uma parte muito importante no desenvolvimento do projeto é a
organização. Por isso, criaremos uma pasta que conterá todos os
arquivos relacionados à aparência da nossa página. São eles: o arquivo
style.css e as imagens. Para isso, clique na opção Nova pasta, conforme a
imagem abaixo, e dê a ela o nome de assets. Observe:
Com essa pasta selecionada, criaremos o arquivo CSS. Clique na opção
Novo arquivo e dê a ele o nome de style.css. Essa é a nomenclatura
padrão para os arquivos de estilo.
5
5
Um passo importante para a estilização da nossa página é conectar
os arquivos HTML e CSS. Eles já existem, porém, precisamos informar
ao HTML que existe um arquivo CSS responsável por estilizar o código.
Faremos isso no arquivo index.html, dentro da tag <head>.
Na terceira linha dessa tag, digite o texto link:css e pressione a tecla
Enter. O resultado deverá estar conforme o código abaixo:
<head>
<metacharset=”UTF-8”>
<metaname=”viewport”content=”width=device-width, initial-
scale=1.0”>
<linkrel=”stylesheet”href=”style.css”>
<title>Flashcards</title>
</head>
Esse código importa um arquivo de extensão CSS. Perceba que, por
padrão, ele já pressupõe que o nome do arquivo é style.css, exatamente o
que escolhemos.
6
6
Agora, precisamos fazer uma correção nesse código. O arquivo style.css
está inserido na pasta de assets, e isso precisa estar descrito no código.
Observe como a linha de código deve ficar:
<head>
<metacharset=”UTF-8”>
<metaname=”viewport”content=”width=device-width, initial-
scale=1.0”>
<linkrel=”stylesheet”href=”assets/style.css”>
<title>Flashcards</title>
</head>
Tenha muito cuidado ao realizar essa importação. Caso ela não seja feita
corretamente, as alterações que fizermos no CSS não serão aplicadas e a
nossa página ficará sem estilização.
7
7
Para testar se essa conexão foi feita corretamente, alteraremos o plano
de fundo da nossa página. Para isso, utilizaremos a tag <body>. No seu
arquivo CSS, digite o seguinte código:
body {
background-color: bisque;
}
No exemplo acima, é utilizada a cor bisque, mas você pode utilizar a cor
que desejar. Salve o arquivo e acesse sua página utilizando o Live Server.
O plano de fundo deverá estar da cor que você selecionou.
Tendo verificado que o link entre os arquivos HTML e CSS foi realizado
com sucesso, começaremos a edição de estilo da nossa página pelo
rodapé, que foi criado utilizando a tag <footer>. A primeira alteração
que faremos é mudar o plano de fundo do rodapé para a cor preta e o
texto para a cor branca. O código ficará da seguinte forma:
footer {
background-color: black
color: white;
}
8
8
Após as alterações, salve o projeto e atualize a página. O resultado deverá
estar parecido com a imagem abaixo:
Agora, posicionaremos o rodapé no final da página. Para isso, utilizaremos
a propriedade bottom da seguinte forma:
footer {
background-color: black;
color: white;
bottom: 0;
}
Atualize a página e veja o que acontece. O rodapé foi para o final da
página?
9
9
Observe que o nosso rodapé não saiu do lugar. Para que isso aconteça,
adicionaremos mais uma linha de código, contendo a propriedade
position. O código ficará assim:
footer {
background-color: black;
color: white;
position: fixed;
bottom: 0;
}
Quando fazemos isso, dizemos que a posição do rodapé não depende do
conteúdo da nossa página. Assim, independentemente da quantidade
de cartões, ele sempre ficará no final da página. Salve seu projeto e veja
o resultado. Seu rodapé deverá estar parecido com o da imagem abaixo:
10
10
Perceba que, agora, ele não ocupa mais toda a largura da página, e
precisamos que ele faça isso. Para resolver esse problema, utilizaremos
a propriedade width, que, em português, significa largura, dizendo que
o nosso rodapé ocupará sempre 100% da largura da página. O código
ficará assim:
footer {
background-color: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
Nossa próxima alteração será no texto do rodapé, pois precisamos que
ele seja centralizado e com uma fonte um pouco menor.
11
11
Para isso, modificaremos a tag <p> que foi inserida no rodapé. Para
acessar essa tag no arquivo CSS, inseriremos footerp. O código ficará
assim:
footerp {
}
Nesse novo espaço de código, faremos as alterações necessárias. Para
alterar o alinhamento do texto, deixando-o centralizado, utilizaremos
a propriedade text-align. O tamanho da fonte será modificado
utilizando a propriedade font-size. Teste o seu código com os valores
sugeridos abaixo:
footerp {
text-align: center;
font-size: 0.6rem;
}
Você pode testar diferentes valores e escolher os que se adequam
melhor ao seu projeto.
12
12
Agora, aumentaremos a altura do nosso rodapé para que o texto não
fique tão próximo da sua borda. Para isso, utilizaremos a propriedade
height, que, em português, significa altura, e faremos a modificação
utilizando a propriedade footer. O código ficará assim:
footer {
background-color: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
height: 2rem;
}
Salve o projeto e verifique as alterações.
13
13
Perceba que, apesar de a altura do rodapé ter aumentado, o texto ainda
fica bem próximo de sua margem. Queremos que haja um espaçamento
entre a margem superior e inferior do rodapé e o seu conteúdo. Para
resolver esse problema, adicionaremos uma margem superior em nosso
parágrafo. Observe:
footerp {
text-align:center;
font-size: 0.6rem;
margin-top: 0.5rem;
}
Salve o projeto e atualize a página. O resultado deverá ser semelhante ao
da imagem abaixo:
14
14
Nossa última alteração será modificar a fonte do projeto para que ela
combine mais com a temática de estudos. Essa modificação será feita
em body, na propriedade font-family. Aqui, utilizaremos a fonte Bai
Jamjuree. Seu código ficará da seguinte forma:
body {
background-color: bisque;
font-family: Bai Jamjuree;
}
Salve as alterações e teste o projeto. O resultado deve estar parecido com
o da imagem abaixo:
15
Desafio
15
Nesta aula, iniciamos a estilização da nossa página por meio
da criação de um arquivo CSS. Seu desafio agora é fazer novas
alterações, modificando a aparência dos nossos cards. Procure
alterar a cor e o tamanho da fonte da categoria dos cards. Em
seguida, tente modificar o tamanho da fonte das perguntas e
das respostas. Lembre-se de que é sempre possível desfazer as
alterações caso elas não funcionem corretamente.
CLIQUE AQUI PARA AVALIAR ESTE MATERIAL
Página web: desenvolvendo uma
ferramenta interativa de estudo
Criando o rodapé da página
Unidade
Aula 2
Show answer
Auto Play
Slide 1 / 15
SLIDE
Similar Resources on Wayground
10 questions
Evaluación MANIFESTACIONES ARTISTÍSTICAS
Presentation
•
KG - University
10 questions
Aftermath of WWII Post 1945
Presentation
•
9th - 12th Grade
10 questions
Fracciones
Presentation
•
9th - 12th Grade
9 questions
Operação com Conjuntos
Presentation
•
12th Grade
11 questions
P-T Diagram Group Practice
Presentation
•
9th - 12th Grade
10 questions
České státní symboly
Presentation
•
9th - 12th Grade
14 questions
O investimento certo para cada necessidade
Presentation
•
9th - 12th Grade
14 questions
Compositions
Presentation
•
9th - 11th Grade
Popular Resources on Wayground
10 questions
HCS SCI 03 Summer School Review 4
Quiz
•
3rd Grade
11 questions
HSMS - Standard Response Protocol
Quiz
•
6th - 8th Grade
16 questions
1.1-1.2 Quiz Review
Quiz
•
9th - 12th Grade
12 questions
Exponent Expressions
Quiz
•
6th Grade
20 questions
Adding and Subtracting Integers
Quiz
•
6th - 7th Grade
11 questions
Northeast States
Quiz
•
3rd - 4th Grade
10 questions
Characterization
Quiz
•
3rd - 7th Grade
10 questions
Common Denominators
Quiz
•
5th Grade