Revisando os conteúdos. Introdução ao CSS

Tamanho: px

Começar a partir da página:

Download "Revisando os conteúdos. Introdução ao CSS"

João Henrique Guterres
6 Há anos
Visualizações:

1 Aula 04 Revisando os conteúdos Tag <meta>: fornece informações sobre o documento, palavras-chaves, autor da página, última atualização, etc. Essas informações não são mostradas na página, apenas processadas pela máquina. Lembrando que as tags <meta> sempre devem ser colocadas na seção <head>. <meta charset="utf-8"> caracteres e acentos. <meta name="description" content="qi"> descrição da página. <meta name="keywords" content="html,css,qi"> motores de busca, informações encontradas em seu título e body. <meta name="author" content="rita Gaieski"> nome do autor da página. Introdução ao CSS CSS é a abreviatura de Cascading Style Sheets, que significa folha de estilos em Cascata. O CSS é uma linguagem que nos auxiliará a realizar a formatação dos estilos, layouts das nossas páginas WEB. Mas o que isso quer dizer? Isso quer dizer que poderemos alterar: tamanho e tipo de fontes, margens, espaçamentos, cores, imagens, entre outras coisas. A linguagem CSS funciona através de regras com o principal objetivo de estilizar visualmente o conteúdo HTML da página. Com as regras, podemos selecionar um ou mais elementos em uma página e aplicar estilos de acordo. Uma regra é formada de: Um ou mais seletores; Chaves: { e } ; Declarações: propriedade e valor (terminando a linha com ";").

2 Sintaxe CSS O seletor é normalmente o elemento HTML que se quer estilizar. No exemplo da imagem acima, o elemento que receberá o estilo será o <h1>. Já as declarações, que ficam dentro de chaves { }, consistem de uma propriedade e um valor. A propriedade é o atributo de estilo que será alterado: color e font-size, no exemplo acima. O valor da propriedade é o que vai alterar, de fato, o elemento: blue e 12px. Toda declaração deve ser encerrada com ponto-e-vírgula. No exemplo de código abaixo, por exemplo, o elemento está sendo estilizado: o atributo color (cor do texto) recebeu o valor red (vermelho), e o atributo text-align (alinhamento do texto) recebeu o valor center (centralizado). Assim como no HTML, os comentários no CSS são usados para explicar o código, e podem ser úteis ao editar os estilos posteriormente. Os comentários são ignorados pelos navegadores e, no CSS, eles iniciam com /* e encerram com */.

SELETOR: é o alvo da regra, é o que define com precisão onde a regra será aplicada, a qual tag; DECLARAÇÃO: a declaração compreende a propriedade e o valor; PROPRIEDADE: defina a característica do

3 SELETOR: é o alvo da regra, é o que define com precisão onde a regra será aplicada, a qual tag; DECLARAÇÃO: a declaração compreende a propriedade e o valor; PROPRIEDADE: defina a característica do elemento, o que será alterado; VALOR: é a qualificação da propriedade, qual cor, número... Exemplo: Importância do CSS Os estilos CSS resolveram um grande problema do desenvolvimento Web. Depois de a tag<font> ter sido incluída no HTML, os desenvolvedores passaram a aplicar cores, tamanhos e diversos outros estilos aos textos das páginas. No entanto, como um site pode conter muitas páginas, a alteração de cor de um texto que precisasse ser feita em todo o site necessitava de manutenção em todas as páginas, gastando muito tempo. (W3Schools, 2014). Para resolver esse e outros problemas, o W3C desenvolveu a linguagem CSS, que pode conter todas as formatações do site em um único arquivo de estilos, facilitando o desenvolvimento e a manutenção de páginas Web. Tipos de CSS: Importadas/linkadas, incorporadas e inline Inline: é o mais simples, aplica-se os elementos diretamente nas marcações da linguagem. Porém não nos traz vantagens em relação à manutenções.

4 Exemplo: Incorporados: Ficam juntamente com o HTML, porém no início do código. Exemplo:

5 LINK ou EXTERNO: é a mais usada atualmente. Uma folha de estilos externa é um simples arquivo de texto com a extensão.css na qual é linkada ao arquivo. Na página HTML dentro do < head> colocamos o link abaixo como exemplo: Criando um exemplo de cada um, utilizando os códigos acima estudados:

Documentos relacionados

CSS CASCADING STYLE SHEET

CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS