HTML e CSS: Fundamentos Essenciais
Traduzido por
ScribdTranslationsHTML e CSS: Fundamentos Essenciais
Traduzido por
ScribdTranslationsHTML e CSS Básicos - Primeiro Resumo
Aprendemos muito sobre HTML e CSS - duas das linguagens mais importantes que você
preciso saber como desenvolvedor web.
Aqui está um resumo conciso de todos os recursos principais que aprendemos até agora.
Recursos que você precisa saber porque você os usará o tempo todo!
Resumo HTML
O que e Por quê?
HTML (Linguagem de Marcação de Hipertexto) é o coração de cada página da web. Ele define o
estrutura da página da web e anota o conteúdo para dizer ao navegador o que fazer
exibir e fornecer significado extra. Sem HTML, o texto sempre seria 'apenas texto'
- não haveria diferença semântica entre títulos, texto normal, subtítulos etc.
Você também não poderia adicionar imagens ou links.
Embora os navegadores por padrão adicionem estilos para certos elementos HTML (por exemplo,<h1>
elementos são negrito e maiores por padrão), você não usa HTML para estilização
propósitos!
Em vez disso, o HTML adiciona significado semântico ao seu conteúdo - ele fornece anotações
que descrevem seu conteúdo. E no caso de certos elementos (por exemplo,<img>, <a>) ele
também diz ao navegador o que exibir (por exemplo, mostrar uma imagem) e o que fazer (por exemplo,
navegar para outra página).
Seu site não é apenas visualizado por você, mas também é analisado por crawlers de mecanismos de busca.
ou apresentado por tecnologias assistivas como leitores de tela. É por isso que descrever
seu conteúdo corretamente importa muito!
Anatomia do Elemento HTML
Os elementos HTML são tipicamente compostos por uma tag de abertura (por exemplo.<h1>), algumconteúdo
(ex.:Olá!) e uma tag de fechamento (por exemplo,</h1>).
Elementos HTML também podem receber atributos que permitem adicionar comportamento extra ou
configuração do elemento (depende do atributo).
Por exemplo, um link (<a>) requer umhrefatributo para dizer ao navegador onde está
deveria levar a:
<p>Isso leva<a href="[Link] Google</a>.</p>
Há também alguns elementos void - por exemplo.<img>Esses elementos não precisam
uma tag de fechamento, já que não contêm nenhum conteúdo.
<imgsrc="[Link]"alt="A beautiful image of something">
ou
<img src="[Link]" alt="Uma bela imagem de algo"/>
Aninhando Elementos HTML
Uma característica chave do HTML é que você pode aninhar elementos uns dentro dos outros - apenas
como você pode ver neste exemplo:
<ul>
<li>Isso leva a<a href="[Link]
<li>Outro item</li>
</ul>
Aqui, o<li>elemento é um chamado elemento filho de<ul>(o que é o pai).
E tem até um elemento filho: O link (<a>) elemento (que é um
descendente do<ul>elemento portanto - por outro lado,<ul>é um ancestral
de<a>).
O segundo<li>("Outro item") seria um irmão do primeiro<li>juntos,
eles formam osfilhos de<ul>.
Ao escrever código HTML, você geralmente constrói estruturas profundamente aninhadas porque
a maior parte do conteúdo só pode ser descrita com precisão se você combinar elementos HTML
assim. Como mais você construiria uma lista de links semanticamente correta?
Estrutura e Esqueleto HTML
Existem dois grandes grupos de elementos HTML:
1. Elementos para apresentar e descrever o conteúdo da sua página (por exemplo.h1, p, ul, a,
imgetc.)
Elementos para descrever sua página geral e para vincular a outros requisitos
recursos (por exemplotitle, meta, link, estilo)
É por isso que um documento HTML devidamente formatado deve ter um "esqueleto" que
define duas áreas principais:
1.<corpo>for page content
2.<cabeça>para metadados
Portanto, um esqueleto de documento HTML correto (que você deve usar em cada
.htmlo arquivo que você criar) deve se parecer com isto:
<!DOCTYPE html>
<html>
<cabeça>
<title>My Page Title</title>
<!-- Other metadata -->
</cabeça>
<body>
<h1>Olá!</h1>
<!-- Outro conteúdo da página -->
</body>
</html>
<!-- .... -->marca um comentário, a propósito - este comentário não aparecerá em
a página quando renderizada pelo navegador.
Elementos Inline vs Elementos de Bloco
Você também aprendeu que existem dois tipos principais de conteúdo.<corpo>) elementos em HTML:
1. Elementos de bloco (por exemplo.h1,
p, ul, ...)
2. Elementos em linha (ex.:a, span, imagem)
Os elementos de bloco sempre reservam toda a largura da tela para si mesmos.
(embora isso possa ser mudado por CSS).
Os elementos em linha, por outro lado, estão - como o nome sugere - lá para caber "dentro de um
linha com outros elementos". Seria, por exemplo, estranho se um link (<a>) gostaria
forçar uma quebra de linha porque reserva toda a largura da tela para si.
Por outro lado, um novo parágrafo (<p>) ou título (<h1>, <h2>etc.) provavelmente deve
não ser espremido na mesma linha que algum outro texto.
Você pode mudar esse comportamento via CSS, caso precise.
Elementos HTML que Conhecemos Até Agora
Até este ponto, já aprendemos sobre muitos elementos importantes - aqui está um
summary list:
<cabeça>Elementos
<meta>Pode ser usado para adicionar metadados extras à sua página - por exemplo, um
descrição que pode ser capturada por rastreadores de mecanismos de busca
<title>Permite que você defina um título de página (será usado pelos motores de busca
mas também aparece nas abas do navegador)
<style>Pode ser usado para definir estilos CSS globais para a página
<link>Permite que você vincule ("conecte") seu arquivo HTML a algum outro
recurso - tipicamente para [Link] cujos estilos serão então aplicados como
estilos globais para esse documento HTML
<body>Elements:
<h1>, <h2>, <h3>etc: Títulos (cabeçalhos) que você pode adicionar à sua página.
Deve ser usado em ordem e apenas um<h1>o elemento deve ser usado por
documento HTML. A<h2>o elemento atua como uma legenda, um<h3>elemento é
então outro subtítulo em um nível ainda mais baixo.
<p>Pode ser usado para definir um parágrafo regular de conteúdo em linha (tipicamente
texto)
<em>Pode ser usado para adicionar ênfase a uma palavra ou frase
<strong>Pode ser usado para dar ênfase forte a uma palavra ou frase (como se
você estaria dizendo isso em voz alta, enfatizando-o fortemente verbalmente)
<img>Pode ser usado para exibir uma imagem. Você precisa definir a fonte da imagem
caminho através dofonteatributo. E você deve definir algum texto alternativo via
oalternativaatributo - este texto é exibido se a imagem não puder ser carregada ou se
a user who uses an assistive technology visits your page
<ul>/<ol>Pode ser usado para renderizar listas de dados ordenadas ou não ordenadas. Use
este elemento se você tiver dados de lista.
<li>Usado dentro de<ul>ou<ol>definir os itens de lista individuais de
essa lista.
<cabeçalho>: A block element that defines a header - for the entire page or a
subseção da página (mais sobre isso mais tarde)
<rodapé>Um elemento de bloco que define um rodapé - para toda a página ou um
subseção da página (mais sobre isso mais tarde)
<principal>Define o conteúdo principal de uma página - você não deve ter mais
do que um<principal>elemento por documento HTML.
<seção>Define uma nova seção em seu documento - normalmente contém
um título (por exemplo<h2>), embora não seja um "item essencial"
<span>Um elemento inline sem significado que pode ser usado para envolver conteúdo
que deve ser direcionado com estilização CSS (por exemplo, com a ajuda de uma classe CSS ou
um id)
<div>Um elemento de bloco sem significado que pode ser usado para envolver conteúdo
que deve ser direcionado com estilização CSS (por exemplo, com a ajuda de uma classe CSS ou
um id)
Claro que veremos muitos mais elementos ao longo deste curso - você também pode
explore todos os elementos disponíveis noReferência de Elementos HTML do MDN.
Resumo de CSS
O que e por quê?
CSS (Folhas de Estilo em Cascata) é uma linguagem que permite definir definições de estilo
for your HTML document. These definitions will be picked up by the browser and
controle como o conteúdo será exibido (por exemplo, que algum texto é vermelho, qual tamanho de fonte
it should have etc.).
Where HTML defines the structure and meaning of your content (and of course also
ajuda a exibir o conteúdo em primeiro lugar - por exemplo, com o<img>elemento),
CSS é usado para apresentar o conteúdo exatamente da forma que você deseja. Ele adiciona
sem significado ou anotação - é realmente apenas sobre como as coisas parecem.
Se você quiser mudar as cores do texto, cores de fundo, tamanhos, espaçamentos, distâncias,
bordas, sombras, posições e todas essas coisas, você precisa de CSS.
Sintaxe CSS
Há uma ampla variedade de propriedades CSS disponíveis que você pode definir. Todas essas
as propriedades então assumem valores diferentes - os valores concretos que você pode atribuir dependem
na propriedade para a qual você está atribuindo isso.
cor:#ccc;/* representação hexadecimal da cor rgb */
cor:rgb(204,204,204);/* mesmas cores que acima */
tamanho da fonte:18px;/* configurando um tamanho em pixels independentes do dispositivo */
Os estilos CSS podem ser definidos de diferentes maneiras, por exemplo, "inline" via oestilo
attribute:
<h1 style="font-size: 20px">Olá!</h1>
Mas usar tais "estilos inline" geralmente não é recomendado, pois vem com
várias desvantagens. O mais importante é que ele entulha seu código HTML (difícil de
manter!), requer muita duplicação e copiar e colar e também é difícil para
Você frequentemente precisa visitar e ajustar múltiplos elementos se quiser ajustar
um único estilo.
É por isso que você normalmente define estilos CSS globais através do<estilo>elemento ou em um
[Link] que é então importado via um<link>elemento.
Ao usar estilos globais, a sintaxe CSS permanece a mesma, mas você agrupa seu
atribuições de propriedade-valor em uma chamada regra CSS que também é um seletor CSS que
define para quais elementos HTML seus estilos devem ser aplicados:
h1{/* é aplicado a TODOS os elementos <h1> */
font-size:20px;
}
#some-id{/* is applied to a single HTML element with id="some-id" */
color:#ccc;
}
.my-link{/* is applied to ALL HTML elments with class="my-link" */
decoração de texto:none;
}
Você também pode combinar seletores CSS:
h1,p{/* applies the rule to all <h1> and <p> elements */
color:rgb(204,204,204);
}
p a { /* visa todos os elementos <a> que são descendentes de um <p> */ }
cor:vermelho;
}
Você também pode fornecer estilos específicos para estados específicos de elementos HTML - com
pseudo-seletores:
a:hover{/* mira <a> onde o mouse do usuário está pairando sobre */
font-weight:bold;
}
O que você pode estilizar?
Você pode realmente estilizar (quase) tudo com CSS. É por isso que você deve usar CSS para
estilização e não usar certos elementos HTML porque você quer uma certa aparência.
HTML serve para definir o conteúdo, fornecer a estrutura e o significado, o CSS é então
lá para apresentar seu conteúdo da maneira que você quiser apresentá-lo.
Valores e Unidades CSS
Como há dezenas de propriedades CSS que você pode direcionar (nós vimos apenas um pequeno subconjunto
até agora), há também centenas de valores possíveis que você pode atribuir.
Os valores concretos que você pode atribuir sempre dependem da propriedade que você está atualmente.
definindo: Propriedades da cor (por exemplo, cor, cor de fundo) quero valores de cor (por exemplo
#fa923f, #ccc, rgb(204, 204, 204), hsl(180, 20, 75), vermelho). Dimensão
propriedades (por exemplotamanho da fonte, margem) quero valores de dimensão (por exemplo 18px). O font-
famíliaa propriedade deseja uma lista de famílias de fontes que deve usar (por [Link]-family:
Oswald, sans-serif).
Embora o número de propriedades, valores e unidades disponíveis possa ser
intimidante agora, você desenvolverá uma boa sensação para as diferentes propriedades
e valores ao longo do tempo. No final, você sempre terá algumas propriedades e
valores que você usa com extrema frequência (e, portanto, conhece de cor).
Claro que você também pode sempre usar o suporte de auto-completar do IDE e recursos.
como oLista de Propriedades CSS do MDNaprender sobre todas as propriedades e valores possíveis.
The Box Model
Ao trabalhar com CSS, é importante entender que os elementos HTML têm um
modelo de caixa
Isso significa que todos os elementos HTML possuem várias "camadas" que podem ser estilizadas:
O conteúdo
Aacolchoamentoao redor do conteúdo (mas dentro da borda)
Afronteira
Amargemem torno de todo o elemento
Você não precisa definir nenhumpadding, fronteiraoumargemvocê só pode definir o que você
precisar. Mas com essas diferentes "camadas", você pode adicionar espaçamento entre um visível
borda e o conteúdo e / ou em torno de um elemento.
It is worth noting that block and inline elements behave differently though:
Elementos de bloco: Comporta-se como descrito acima.
Elementos em linha: Verticalmargemé ignorado, verticalmargem internaé adicionado mas
não empurra outros elementos ou conteúdos para longe
Você também pode mudar se um elemento se comporta como um elemento de bloco ou um elemento inline através do
exibirpropriedade (por exemploexibir: blocodefine o comportamento como 'elemento de bloqueio' mesmo
se normalmente é um elemento em linha). Há tambéminline-blockcomo um possívelexibir
valor que basicamente irá mesclar os dois comportamentos e "desbloquear" o comportamento de bloco completo
mantendo o conteúdo alinhado com outros conteúdos.
Por que é chamado de 'Cascading'?
Por que se chama "Folhas de Estilo em Camadas"?
Porque uma cascata de definições de estilo pode afetar um mesmo elemento - ou seja,
multiple CSS rules can affect the same element.
Aqui está um exemplo:
<style>
a{
decoração-de-texto:none;
}
.default-link{
color:red;
}
</style>
<aclass="default-link"href="...">Algum link</a>
Neste exemplo, as duas regras CSS estão afetando o<a>elemento.
Por que você teria duas em vez de apenas uma regra? Porque você pode ter diferentes
links na sua página - alguns com umlink-padrãoclasse, alguns sem isso.
Porque várias regras CSS podem afetar o mesmo elemento HTML, você pode dividir seu
Definições de CSS em várias regras. Isso evita cópias e colagens desnecessárias e
duplicação de código!
Especificidade
But what happens if different CSS rules target the same CSS property?
Considere este exemplo:
<estilo>
a{
cor:azul;
}
.default-link{
cor:vermelho;
}
</estilo>
<aclass="default-link"href="...">Algum link</a>
Neste caso, o link seriavermelhoporque a ordem das regras CSS importa - o mais tarde
regra (neste [Link]-linkvitórias).
Mas, na verdade, é um pouco mais complexo do que isso. Não se trata apenas da ordem.
Em vez disso, existe um conceito chamado especificidade (sim, é uma palavra horrível!) envolvido.
Quanto maior a especificidade de uma regra, mais importante ela é. E maior especificidade
bates de menor especificidade.
A ordem do seu código influencia a especificidade, mas não é o único fator.
O tipo de seletor que você está usando também desempenha um papel importante - por exemplo, um id
seletor (como#some-id) supera um seletor de tipo de tag regular (comoh1).
E isso meio que faz sentido: Afinal, se você mira em um id específico, você tem uma forma
critérios de seleção mais específicos do que se você apenas segmentar o tipo de tag.
E embora eu pudesse agora escrever uma longa lista de fatores de especificidade e qual regra vence
sobre qual outra regra, a coisa reconfortante é que você basicamente pode confiar em si mesmo
senso comum.
Assim como faz sentido que um id seja mais específico do que "apenas a tag", uma combinação
seletor (por exemplop a { ... }) would win over a "standalone" selector (e.g. a { ...
}).
Então quanto mais específicos forem seus seletores CSS, maior será a especificidade. E maior
especificidade supera menor especificidade.
Herança
Conectado aos conceitos de "Cascata" e "Especificidade" está o conceito de
Herança
Os elementos HTML não são apenas afetados por estilos que são definidos em regras diretamente
destacando esses elementos, mas em vez disso, eles também podem ser estilizados por regras que visam
elementos pai ou ancestrais.
Aqui está um exemplo:
<style>
corpo{
familia de fontes:'Open Sans',sans-serif;
texto-align:center;
}
p{
margem:20px;
}
</estilo>
<body>
<h1>Eu uso 'Open Sans' como uma família de fontes!</h1>
<p>Eu também! E estamos ambos alinhados ao centro.</p>
</body>
Neste exemplo, ambos<h1e<p>seria afetado pelofont-familye
alinhamento de textoDefinições de CSS nocorporegra.
Por quê?
Por causa da "Herança".
Eles herdam os estilos definidos no elemento pai.
Nem todas as propriedades CSS são herdáveis, no entanto - mas, novamente, você pode confiar em seu
senso comum.
Text color, most font styles etc. are inherited.
Margens, preenchimentos, bordas etc. não são.
Configurações Padrão do Navegador
Os navegadores também definem alguns estilos padrão para certos elementos - por exemplo, eles
costuma fazer o<h1>elemento maior e dê-lhe umnegrito.
No entanto, isso tem uma especificidade muito baixa e, portanto, você pode facilmente sobrescrever isso.
estilos padrão com qualquer seletor CSS.
Propriedades CSS que conhecemos até agora
Relacionados a fonte:
font-family:Defina a família de fontes que deseja usar - pode ser uma única fonte
ou (tipicamente) uma lista de fontes, onde a primeira fonte é utilizada e a outra
as fontes atuam como fontes de reserva se a primeira fonte não puder ser carregada
tamanho da fonteDefine o tamanho do texto - pode ser definido em pixels 'independentes de dispositivo'
(por exemplo.18px) ou outros valores que descobriremos mais tarde
peso-da-fontePermite que você defina o peso de um texto (o padrão é
normal, você pode escolher um peso numérico como 700ou uma alternativa como
negritoem vez disso). Importante: A fonte carregada precisa suportar esse peso!
Text:
alinhamento de textoControla o alinhamento do texto (por [Link], esquerda,
certo)
decoração de textoPode ser usado para adicionar decoração extra (ou removê-la) como
sublinhando (por exemplodecoração: sublinhado)
Colors:
corDefine a cor do texto
cor-de-fundoDefine a cor de fundo de um elemento
As cores podem ser definidas com diferentes tipos de unidades:
Identificadores de números hexadecimais (por exemplo.#fa923f, #ccc) onde você conseguiu
três pares de dois dígitos que definem a cor r/g/b (vermelho, verde, azul)
partes
Orgb()função que permite que você defina uma cor r/g/b com
números decimais
Ohsl()função que pode ser usada para definir uma cor como um
combinação de matiz/saturação/clareza
Você pode usar qualquer uma dessas unidades de cor - depende da sua
preferência pessoal; cada cor pode ser expressa com cada um deles
três métodos
Também hárgba()ehsla()caso você também queira adicionar um
"canal alfa" (transparência - valor entre 0 e 1) para o seu
cor
Modelo de Caixa:
margemDefine espaçamento extra ao redor de um elemento - pode ser definido em pixels
(por exemplo18px)
margemé a notação abreviada que define o espaçamento em todas as direções,
a forma longa seriamargin: <top> <right> <bottom>
<esquerda>(por exemplo)margem: 10px 5px 8px 3px)
Você também temmargem-esquerda, margin-right, margem-topoe
margem-inferiordirigir-se a direções específicas
almofadamentoAdiciona espaçamento extra dentro de um elemento - pode ser configurado com
pixels (por exemplo18px)
Assim comomargem, você pode usar a notação abreviadapreenchimento:
<top> <right> <bottom> <left>ou direcionar direções específicas como
preenchimento-inferior
bordaPode ser usado para definir uma borda visível ao redor do elemento
conteúdo + preenchimento (por exemplo, borda: 1px sólida preta)
border-radiusPode ser usado para dar a uma caixa cantos arredondados (mesmo que não
borda é definida)
Sizes:
larguraUsado para definir uma largura fixa para um elemento - em vez de usar o
largura de tela cheia para elementos de bloco ou a largura do conteúdo para inline
elements (could be set in pixels like 18px)
alturaUsado para definir uma altura fixa para um elemento - em vez de inferir
ele é ajustado automaticamente com base na altura do conteúdo no elemento
Other:
sombra da caixaPode ser usado para definir uma sombra para um elemento - é definido por
definindo um deslocamento em x, deslocamento em y, um raio de desfoque opcional, uma propagação opcional