CSS – Cascading Style Sheets, Notas de estudo de Engenharia Naval

Baixe CSS – Cascading Style Sheets e outras Notas de estudo em PDF para Engenharia Naval, somente na Docsity!

Ivanethe Carvalho Rocha

 HTML e CSS são

linguagens que utilizamos

para criar páginas Web.

 Os servidores Web

armazenam e servem

páginas, que são criadas

com HTML e CSS.

 HTML é a abreviação para

HyperText Markup

Language (Linguagem

Marcação de Texto) e é

usada para estruturar a

página Web.

3. Bar Use a Cabeça
7. Bem-vindo ao Novo e Melhorado Bar Use a Cabeça
10. Junte-se a nós em qualquer noite dessas para beber
11. elixires refrescantes,
12. ter um bom papo e talvez algumas partidas de
13. Dance Dance

Revolution.

1. O acesso wireless está sempre disponível;
2. TSPSW (Traga Seu Próprio Servidor Web).
4. Como chegar
6. Você nos encontrará bem no centro
7. da cidade de Weblândia. Se precisar de ajuda para nos localizar,
8. verifique nossas
9. instruç ões detalhadas.
10. Junte-se a nós!

 Analisando o arquivo exemplo

 1- Na linha 4 temos adição de

uma nova tag: a abertura do

elemento _  Exemplos de tags, que

posso ter no meu documento

HTML?

 Com adiciono propriedades

de estilo a estas tags que

compõe meu documento

HTML?

tag {

Propriedades

}

 Suponhamos que

desejamos aplicar um

determinada estilo a um

parágrafo. Qual seria a

declaração dentro meu

style?

 E que dentro deste estilo

para este parágrafo deseja-

se aplicar uma determinada

cor ao texto?

 Agrupando estilos

Como os títulos tem estilos

exatamente iguais podemos

organizá-los da seguinte

forma:

H1,H2{

font-family: sans-serif

color: gray

}

 Agrupando estilos

 Suponhamos a seguinte

situação: para o titulo H1,

desejamos adicionar uma

nova propriedade presente

somente no titulo H1?

H1{

 Border-bottom: 1px solid black

}

1.h1, h2 {

1. color: red;
2. }
3. h2 {
4. font-family: times-new-

roman;

1. }
2. h1 {
3. border-bottom: 1px solid

red;

1. }
2. p {
3. color: blue;
4. }

O arquivo “CSS”

 Alterando o arquivo HTML

 Inicialmente adicionamos

uma nova tag:

link que terá a seguinte

estrutura:

 As tags para o elemento

“style” não serão mais

necessárias no arquivo

HTML.

 Herança em CSS

 Inicialmente analisemos a

estrutura do nosso arquivo

HTML.

HTML

HEAD

TITLE

BODY

H1 P P

img (^) a em a

H2 P

 Herança em CSS

 Analisando a figura quem

será modificado?

HTML

HEAD

TITLE

BODY

H1 P P

img a em a

H2 P

 Herança em CSS

 O que aconteceria se

aplicássemos a regra para

a propriedade de font-family

no elemento body?

 Como ficaria o novo arquivo

css?

1.body {

1. font-family: times-new-

roman;

3.}

4.h1, h2 {

1. color: red;
2. }
3. h1 {
4. border-bottom: 1px solid

red;

1. }
2. p {
3. color: blue;
4. }