Tecnologias para Internet - 2014.1 - Aula 4

33 %
67 %
Information about Tecnologias para Internet - 2014.1 - Aula 4
Education

Published on March 12, 2014

Author: ThyagoMaia

Source: slideshare.net

Description

Tecnologias para Internet - 2014.1 - Aula 4

Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2014.1

Objetivos Aula 4: Folhas de Estilo • Introduzir o conceito de folhas de estilo • Apresentar alguns recursos da tecnologia • Definir e apresentar as principais propriedades CSS • Fazer com que o aluno crie seu primeiro projeto Web HTML + CSS 2

Introdução ao CSS

Introdução ao CSS  Folha de Estilo  A partir do HTML 4.0, toda formatação de uma página HTML pode ser definida em uma folha de estilo;  Quando um navegador lê uma folha de estilo, o mesmo formata o documento HTML de acordo com as especificações definidas na folha de estilo; 4

Introdução ao CSS • O que é CSS?  Sigla para Cascading Style Sheets;  Estilos definem como os elementos HTML serão apresentados/formatados;  Estilos foram adicionados no HTML 4.0 para resolver um problema:  Separar o conteúdo da sua formatação!  Folhas de estilo podem ser armazenadas em arquivos .css ao serem definidas em documentos HTML; 5

Arquitetura de Sistemas Web • Qual camada o CSS se enquadra? 6

Arquitetura de Sistemas Web • Qual camada o CSS se enquadra? 7

Introdução ao CSS • Sintaxe CSS  Uma regra CSS possui duas partes: Um seletor e uma ou mais declarações;  O seletor é normalmente um elemento HTML que irá seguir as especificações definidas nas declarações (h1, body, p, a, etc.); 8 h1 { Color: blue; Font-size: 12px; } Seletor Declaração Propriedade Valor

Introdução ao CSS • Tag usada em um documento HTML para referenciar um arquivo CSS: <link rel=“stylesheet” type=“text/css” href=“exemplo.css”> • Tal tag deverá ser declarada entre as tags <head> e </head> (cabeçalho de uma página HTML;

Algumas propriedades CSS

Algumas propriedades CSS  A propriedade Background  Utilizada para definir efeitos de fundo em um elemento CSS;  Alguns possíveis efeitos: background-color (cor de fundo), background-image (imagem de fundo), background-repeat (repetição da imagem de fundo); 11 body { background-color: #b0c4de; background-image:url('paper.gif'); }

Algumas propriedades CSS  Formatação de texto com CSS  Utilizamos a propriedade color para setar uma cor no texto de um determinado elemento;  Com CSS, uma cor pode ser especificada com:  Um valor hexadecimal (Ex.: #FF0000)  Um valor RGB (Ex.: rgb(255,0,0))  O nome da cor em inglês (Ex.: red) 12 body { color: blue; }

Algumas propriedades CSS  Alinhamento de texto com CSS  Utilizamos a propriedade text-align para definir o alinhamento horizontal em textos;  O texto pode ser centralizado (center), alinhado a esquerda ou direita (left ou right) ou justificado (justify); 13 h1 { text-align: right; } P { text-align: center; }

Algumas propriedades CSS  Decoração de textos com CSS  A propriedade text-decoration é usada para setar ou remover decorações em textos; 14 a { text-decoration: none; } h1 { text-decoration: line-through; } h2 { text-decoration: underline; } h3 { text-decoration: overline; }

Algumas propriedades CSS  Transformações de textos  A propriedade text-transform é usada para manter textos em caixa alta ou caixa baixa; 15 p { text-transform: uppercase; } #area { text-transform: lowercase; } #area2 { text-transform: capitalize; }

Algumas propriedades CSS  Indentação  A propriedade text-indent é usada para especificar a indentação da primeira linha de um texto; 16 p { text-indent: 50px; }

Algumas propriedades CSS  Tipos de Fonte  A propriedade font-family é usada para setar o tipo de fonte a ser utilizado em um texto;  Podemos definir vários tipos de fonte para a mesma propriedade.  Caso um ou mais navegadores não suporte um dos tipos listados; 17 p { font-family: “Times new Roman”, Times, Serif; }

Algumas propriedades CSS  Estilos de Fonte  A propriedade font-style é usada para definir o estilo de fonte a ser utilizado em um texto; 18 p { font-style: italic; } #exemplo { font-style: oblique; }

Algumas propriedades CSS  Tamanho de Fonte  A propriedade font-size seta o tamanho do texto; 19 p { font-size: 40px; } #exemplo { font-size: 14px; }

Algumas propriedades CSS  Largura e altura de um elemento  As propriedades width e height (largura e altura) setam, respectivamente, a largura e altura de um determinado elemento; 20 p { width: 240px; height: 100px; }

Algumas propriedades CSS  Bordas  Através da propriedade border (borda) podemos inserir bordas em elementos CSS; 21 p { border: 5px solid red; } #exemplo { border: 1px dotted blue; }

Algumas propriedades CSS  Margens  Através da propriedade margin podemos inserir margens em elementos CSS; 22 #exemplo { margin-top: 100px; margin-bottom: 100px; margin-left: 100px; margin-right: 100px; }

Algumas propriedades CSS  Padding  A propriedade padding define o espaço entre a borda de um elemento e seu conteúdo; 23 #exemplo { padding-top: 100px; padding-bottom: 100px; padding-left: 100px; padding-right: 100px; }

Introdução ao CSS  Os seletores id e class  Além dos seletores de elementos HTML, CSS também permite que nós criemos nossos próprios seletores, chamados id e class; 24

Introdução ao CSS  Os seletores id  Seletores id são usados para especificar um estilo para um elemento único;  Seletores id formatam elementos HTML que os invocam a partir do atributo id; 25 /* no css */ #paragrafos { color: red; } <!-- no html --> <p id=“paragrafos” />

Introdução ao CSS  Os seletores class  Seletores class são usados para especificar um estilo para um grupo de elementos;  Seletores class formatam elementos HTML que os invocam a partir do atributo class; 26 /* no css */ .centro { text-align: center; } <!-- no html --> <p class=“centro” />

Introdução ao CSS  Os seletores class  Também podemos especificar que apenas alguns tipos de elementos HTML deverão ser afetados pela classe; 27 /* no css */ p.centro { text-align: center; } <!-- no html --> <p class=“centro” />

Prática em Laboratório OBS.: Todas as atividades deverão ser enviadas para o e-mail provas@thyagomaia.net

Prática em Laboratório • Faça uma folha de estilo que padronize a formatação do documento HTML criado na atividade prática 01. (0,0 a 2,0 pontos) – Data de entrega: Até 18/03/2014; – Critérios de avaliação: • Substituição das tags HTML de formatação por seletores CSS. Tal substituição será classificada como: – Total: Toda a formatação foi definida no arquivo CSS criado (2,0 pontos); – Parcial: O CSS define parte da formatação do documento HTML. Algumas tags HTML ainda formatam parte do conteúdo (0,0 a 1,5 pontos); 29

Prática em Laboratório • Faça uma folha de estilo que padronize a formatação do documento HTML criado na atividade prática 01. (0,0 a 2,0 pontos) – O(s) arquivo(s) CSS deverão ser editados APENAS através dos softwares Notepad++, Notepad ou GEdit; – A atividade em questão é individual; 30

#area presentations

Add a comment

Related presentations

Related pages

Tecnologias para Internet - 2014.1 - Aula 4 - Education

1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2014.1 . 2. Objetivos Aula 4: Folhas de Estilo • Introduzir o ...
Read more

Tecnologias para Internet - 2014.1 - Aula 1 - Education

1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2014.1. 2. Aula 1: Introdução Objetivos • Apresentar a disciplina • Apresentar o ...
Read more

Tecnologias para Internet - 2014.1 - Aula 6 - Education

1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2014.1 . 2. Objetivos Aula 6: PHP • Apresentar a linguagem PHP 2 . 3. Camada Lógica
Read more

Tecnologias para Internet - 2014.1 - Aula 2 - Education

Algoritmos Tecnologias para Internet Prof.º Thyago Maia Gestão da TI â 2014.1 Aula 2: Introdução ao HTML Introduzir a linguagem HTML ...
Read more

Internet & Web 2014.1 - Prof. Leandro Melo de Sales

Internet & Web 2014.1. Plano de Aula: Conteúdo da Aula: Apresentação da disciplina; Vídeos sobre a Internet: What most schools don't teach; A história ...
Read more

Wikipédia:Wikipédia na Universidade/Cursos/Introdução às ...

Não haverá aula. Recesso de Carnaval. aula 4 | ... e Metáforas para uma teoria da ... A internet e as novas tecnologias da informação e da ...
Read more

AULA DE TECNOLOGÍAS: TECNOLOGÍAS

Rampa para canicas; TANGRAM ... (4) Dibujo Técnico ... Blog Aula de Tecnologías by Amelia Tierno is licensed under a Creative Commons Reconocimiento ...
Read more