Aula 02 – CSS
Aula prática de CSS
Para aplicarmos o CSS utilizamos a tag <style></style>. Os estilos devem ser aplicados dentro da tag. Observe o exemplo:
ANOTE EM SEU CADERNO:
Para alterar a cor do texto utilizamos o código color, e a cor pode ser escrita em inglês ou através de seu código hexadecimal. Podemos utilizar vários códigos de estilo para textos, citarei alguns:
- font-family: Define a família de fontes a ser usada para o texto. Exemplo:
font-family: Arial, sans-serif;
- font-size: Define o tamanho da fonte. Exemplo:
font-size: 16px;
- font-weight: Define a espessura da fonte (normal, bold, etc.). Exemplo:
font-weight: bold;
- font-style: Define o estilo da fonte (normal, italic, oblique). Exemplo:
font-style: italic;
- text-align: Define o alinhamento do texto (left, right, center, justify). Exemplo:
text-align: center;
- text-decoration: Define a decoração do texto (underline, overline, line-through, none). Exemplo:
text-decoration: underline;
- text-transform: Define a transformação do texto (uppercase, lowercase, capitalize). Exemplo:
text-transform: uppercase;
- line-height: Define a altura da linha do texto. Exemplo:
line-height: 1.5;
- letter-spacing: Define o espaçamento entre as letras. Exemplo:
letter-spacing: 1px;
- word-spacing: Define o espaçamento entre as palavras. Exemplo:
word-spacing: 2px;
- color: Define a cor do texto. Exemplo:
color: #333;
- text-shadow: Adiciona uma sombra ao texto. Exemplo:
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
ATIVIDADE NO NOTEPAD++ OU VISUAL STUDIO
- Abra um editor de códigos e digite o código abaixo. Salve em sua pasta como estilo1.html
2) Abra um editor de códigos e siga o modelo. Salve em sua pasta como estilo2.html
ATIVIDADE CÓPIA NO CADERNO
3) Escreva no seu caderno:
O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a apresentação de um documento HTML. Ele desempenha um papel crucial no desenvolvimento web, oferecendo uma série de benefícios e funcionalidades importantes:
- Separação de conteúdo e apresentação: O CSS permite separar o conteúdo do documento HTML da sua apresentação visual. Isso significa que você pode alterar o design de um site sem precisar alterar o conteúdo HTML, facilitando a manutenção e a atualização do site.
- Consistência visual: Com o CSS, você pode definir estilos que se aplicam a vários elementos em um site, garantindo uma aparência consistente em todas as páginas. Isso é fundamental para criar uma experiência de usuário coesa e profissional.
- Facilidade de atualização: Como os estilos são definidos em um arquivo separado, é fácil fazer alterações globais em um site. Basta modificar o arquivo CSS e todas as páginas que utilizam esse arquivo serão atualizadas automaticamente.
- Eficiência: O CSS permite que você defina estilos uma vez e os aplique a múltiplos elementos, economizando tempo e reduzindo a quantidade de código necessária.
- Responsividade: Com o CSS, você pode criar layouts responsivos que se adaptam a diferentes tamanhos de tela e dispositivos, proporcionando uma experiência de usuário otimizada em smartphones, tablets e desktops.
- Acessibilidade: O CSS oferece recursos para melhorar a acessibilidade de um site, como a capacidade de controlar o contraste de cores e a legibilidade do texto, tornando o site mais fácil de usar para pessoas com deficiências visuais ou motoras.