Estilos HTML - CSS, Slides de Programação Javascript

Baixe Estilos HTML - CSS e outras Slides em PDF para Programação Javascript, somente na Docsity!

Programação WEB Responsiva

Prof. Me. Fernando Stela [email protected]

HTML Styles - CSS

Cascading Style Sheets (CSS) é usado para formatar o layout de uma página da web. O CSS, controla a cor, a fonte, o tamanho do texto, o espaçamento entre os elementos, como os elementos são posicionados e dispostos, quais imagens ou cores de fundo devem ser usadas, diferentes exibições para diferentes dispositivos e tamanhos de tela, e muito mais! Dica: A palavra cascata significa que um estilo aplicado a um elemento pai também será aplicado a todos os elementos filhos do pai. Portanto, se você definir a cor do corpo do texto como “azul”, todos os títulos, parágrafos e outros elementos de texto dentro do corpo também terão a mesma cor (a menos que você especifique outra coisa)!

CSS embutido

Um CSS embutido é usado para aplicar um estilo

único a um único elemento HTML e usa o atributo

style de um elemento HTML.

Um título azul

Um parágrafo vermelho.

CSS interno

Um CSS interno é usado para definir um estilo para uma

única página HTML e é definido na um seção de

uma página HTML, dentro de um um

CSS externo

Uma folha de estilo externa é usada para definir o estilo de muitas páginas HTML e para usá-la adicione um link para ela na seção de cada página HTML. A folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhum código HTML e deve ser salvo com extensão .css. cssExterno.html

Esse é um título

Isso é um parágrafo.

Estilo.css body { background-color: powderblue; } h1 { color: blue; } p { color: red; }

CSS interno

Esse é um título

Esse é um parágrafo.

Esse é outro parágrafo.

Borda CSS

A propriedade CSS border define uma borda ao

redor de um elemento HTML.

Dica: você pode definir uma borda para quase todos

os elementos HTML.

p {

border: 2px solid powderblue;

Preenchimento CSS

Margem CSS

A propriedade CSS margin define uma margem

(espaço) fora da borda.

Uso de propriedades de borda e margem CSS:

p {

border: 2px solid powderblue;

margin: 50px;

Atributo de classe HTML

O atributo class é frequentemente usado para

apontar para um nome de classe em uma folha de

estilo.

Dica: O atributo class pode ser usado em

qualquer elemento HTML.

O nome da classe diferencia maiúsculas de

minúsculas!

No exemplo a seguir temos três elementos

com um atributo class com o valor “cidade”.

Todos os três elementos serão estilizados

igualmente de acordo com a definição de estilo .city

na seção principal:

Londes

Londres é a capital da Inglaterra.

Paris

Paris é a capital da França.

Tóquio

Tóquio é a capital do Japão.

Atributo de identificação HTML O atributo id especifica um identificador (nome) exclusivo para um elemento HTML e deve ser exclusivo (único) no documento HTML. O atributo id é usado para apontar para uma declaração de estilo específica em uma folha de estilos. A sintaxe para id é: escreva um caractere hash (#), seguido por um nome de id. Em seguida, defina as propriedades CSS entre chaves {}. No exemplo a seguir temos um elemento que aponta para o nome do id “myHeader”. Este elemento será estilizado de acordo com a #myHeader definição de estilo na seção :

Atributo de identificação HTML

Meu Título