Como Desenvolver

Como usar CSS em páginas da WEB e montar layouts?

—

No capítulo anterior, aprendemos como criar documentos HTML usando elementos e atributos HTML. Podemos até incluir imagens e links para outros documentos e imagens. Mas quando você olha o resultado em uma tela, provavelmente está decepcionado. Espero que sim, porque isso foi feito de propósito (opa, eu quase disse por design, mas a parte do design é o que este capítulo trata). Quando escrevi minhas primeiras páginas da Web, fiquei decepcionado também, em particular ao descobrir o quão difícil era fazer algo que deveria ser simples: colocar uma fotografia em uma página e algum texto ao lado. Bem, agora é hora de transformar decepção em emoção!

Neste capítulo, aprenderemos como adicionar a parte da apresentação – em outras palavras, o layout – às nossas páginas da web, usando CSS ( Cascading Style Sheets ). As folhas de estilo são um recurso comum no software Desktop Publishing. Eles permitem que você especifique (ou modifique) o estilo de uma seção de um determinado tipo no seu documento: por exemplo, cada parágrafo do texto.

Hoje, eu amo folhas de estilos e não apenas recomendo usá-las, mas também deixá-las ser a primeira coisa que você cria quando você inicia um novo projeto. Uma folha de estilos é como um plano, onde você pode preencher os detalhes posteriormente.

Usando folhas de estilo, você pode separar a parte do design da parte do conteúdo. Você pode fazer isso em horários separados ou por pessoas separadas, e isso dará a todas as suas páginas uma aparência consistente. Simplesmente troque duas folhas de estilo e todo o site terá uma aparência completamente diferente. Estamos empolgados agora?

Vamos começar com um exemplo de código CSS:

/* seletor - a propósito, é assim que se faz comentários em CSS */
p.vermelho
/* propriedades */
{
color:red;
font-family:baskerville, cambria,  serif;
font-size:12px;       
font-style:italic;
}

Comentários em CSS podem ser encontrados entre as strings /* e */ similares aos usados ​​na linguagem de programação C. Portanto, para incentivar o bom comportamento, incluímos alguns comentários em nosso primeiro exemplo. Vamos analisar o restante desse código.

A parte depois do primeiro comentário é chamado de seletor. Representa um ou vários elementos em nossa página. No nosso exemplo, isso incluiria todos os <p> elementos com a classe “vermelho”.

Entre as chaves, encontramos as regras CSS que queremos. Neste exemplo, queremos que todo o texto dentro dos parágrafos seja vermelho, tamanho 12 pixels, em itálico e no Tipo de letra Baskerville. Em sistemas onde essa fonte não está disponível, queremos que a Cambria seja usado em seu lugar.

Observe que toda regra termina com ponto e vírgula e consiste em duas partes separadas por dois pontos: uma propriedade e um valor . A cor é uma propriedade eno nosso exemplo, o valor escolhido é red.

Nas versões antigas do HTML, o mesmo poderia ter sido alcançado colocando <font> elementos dentro de suas <p> tags. Imagine ter 40 seções <p> em seu documento e alguém quer mudar o red em maroon! Você precisaria alterar seu arquivo HTML em 40 lugares diferentes, e nenhuma busca e substituição global nem ajudaria, pois pode haver outras “coisas” vermelhas. Ao usar CSS, você só precisa alterar uma linha.

É mais comum encontrar código CSS semelhante a este:

p {
font-size:12px;
font-family:Baskerville,cambria, serif;
}
p.red {
font-style:italic;
color:red;
}

Isso não só terá o mesmo efeito para <p> vermelho, mas também colocará todos os outros parágrafos no mesmo tipo e tamanho. Este é o C no CSS: as propriedades do <p> fluxo geral no subconjunto dos vermelhos, como em uma cascata real.

Adicionando estilos aos nossos documentos

Então, como as Regras CSS se tornam parte do nosso documento? tem três caminhos:

  • Folhas de estilo externas
  • CSS Interno
  • Estilos embutidos

Folhas de estilo externas

Essa é a maneira recomendada de adicionar CSS ao seu site. Deve ser seu objetivo para todas as folhas de estilo da versão de produção do seu site para ser externa. Basta adicionar na seção <head> do seu site, que deve se parecer com o seguinte:

<link rel="stylesheet" type="text/css" href="css/style.css">

<link> é um elemento HTML que ainda não apresentamos. Seus atributos estão listados abaixo:

  • rel, para indicar o relacionamento entre o documento HTML e o arquivo vinculado.
  • type especifica o tipo MIME do documento para que o navegador saiba como carregá-lo.
  • href é usado para especificar o local do arquivo. Você pode esperar um src atributo aqui, como é usado para <img> tags, mas o atributo para especificar o nome do arquivo em um <link> elemento é href. Para o nome do arquivo, recomendamos que você sempre use nomes de caminho relativos. Sugerimos que você colete todas as suas folhas de estilo em uma pasta com um nome significativo, como css ou styles. Obviamente, o próprio arquivo também deve ter um nome significativo.

Quando o arquivo realmente existir, ele será carregado. É por isso que é importante que seu <link> elemento resida na <head> seção do documento para que todas as regras de CSS sejam lidas antes do corpo do seu documento.

CSS interno

Para pequenos projetos, ou projetos que você gostaria de limitar a um único arquivo HTML, para facilitar o envio por e-mail a alguém, você pode usar CSS interno. Todas as regras CSS podem ser colocadas dentro da <head> seção do seu documento, dentro de uma <style> tag. Essa tag precisa, no mínimo, incluir um type atributo, como no exemplo a seguir:

<style type="text/css">
p.red {
color:red;
}
</style>

Estilos embutidos

Os estilos podem ser dados a um elemento HTML individual usando o style atributo dentro do próprio elemento HTML, como no exemplo a seguir:

<h3 style="color:green;">Congratulations</h3>

Não recomendamos o uso no produto final, mas é extremamente útil ver instantaneamente o efeito de uma alteração durante o desenvolvimento. Se, por algum motivo, você deixar um dos estilos embutidos atributos dentro de uma página, pode levar uma eternidade para descobrir por que sua folha de estilo legal não está fazendo o que deveria estar fazendo, nesta linha desta página.

Por outro lado, uso-o todos os dias, à medida que apresento e testo novos elementos em uma página, sem perturbar mais nada no site, como modificaria o arquivo externo .css.

O DOM (Document Object Model)

Como aprendemos no capítulo anterior, um documento HTML consiste em uma estrutura em árvore de tags aninhadas, com HTML como a raiz. Na programação, o conteúdo dessa árvore pode ser armazenado em um objeto grande e as subárvores podem ser acessadas, modificadas ou adicionadas usando objetos menores.

O lote inteiro é referido como DOM ( Document Object Model ). Nos capítulos seguintes, aprenderemos uma linguagem de programação (JavaScript) para fazer exatamente isso e uma biblioteca JavaScript (jQuery) para facilitar. Neste capítulo, não aprenderemos como alterar nosso conteúdo, mas aprenderemos como alterar o estilo de nosso conteúdo. Em todos os casos, precisamos de uma maneira de acessar nosso documento. É aqui que os seletores se encaixam.

Seletores

A primeira parte de uma regra CSS, a parte antes da chave de abertura, é o seletor ou vários seletores separados por vírgulas. Um seletor representa uma coleção de elementos na página à qual as regras subsequentes se aplicam. O seletor mais simples é um nome de tag único, como o que já usamos em um exemplo anterior. A seguir, um trecho de código como outro exemplo:

p {
color:blue;
}

O seletor p significa todos os elementos de parágrafo em toda a página. A aplicação desta regra resultará em todos os parágrafos da página inteira sendo renderizados em azul. Da mesma forma, poderíamos usar um nome de classe. Consulte o seguinte exemplo: 

.blue {
color:blue;
}

O seletor .blue representa todos os elementos na página que possuem a classe blue, sejam parágrafos, títulos ou assim por diante. Agora podemos combinar os dois, como mostrado aqui: 

p.blue {
color:blue;
}

Este seletor representa a coleção de todos os elementos de parágrafo na página com a classe definida como azul. Para aqueles que gostam de teoria dos conjuntos, essa é a interseção da p coleção e da .blue coleção.

Vamos dar um pouco mais de teoria dos conjuntos no próximo exemplo simples:

#errorbox {
color:red;
}

O conjunto de elementos que corresponde a esse seletor é, na melhor das hipóteses, um singleton, pois corresponde ao elemento com seu ID definido como errorbox, se presente. Não posso lembrá-lo com frequência suficiente de que dois elementos não podem compartilhar o mesmo ID. Igualmente válida, mas um pouco mais restritiva, é a seguinte regra: 

div#errorbox {
color:red;
}

A regra anterior era sobre qualquer elemento com um ID errorbox: o último se aplica apenas a um divelemento com um ID errorbox.

Várias classes

Aprendemos que vários classes diferentes podem ser atribuídas a um elemento atribuindo uma sequência separada por espaço ao seu class atributo, por exemplo:

class="green cool awesome"

Se você deseja criar uma regra CSS para um elemento como este, o seletor pode ter a seguinte aparência:

h2.green.cool.awesome

Quando usada como seletor em uma regra CSS, a regra se aplica a todos os h2 elementos da classe green, bem como cool e awesome. Portanto, o estilo seria alterado para o seguinte:

<h2 class="green cool awesome">O Hulk</h2>

Isso é completamente diferente de uma regra com o seguinte seletor:

h2  .green .cool .awesome

Este seriaparte de uma regra que se aplica a elementos que têm a classe awesome, são descendentes de elementos da classe cool, que por sua vez são descendentes de tags com a classe definida como green, embora sejam descendentes de um h2 elemento.

Esta é uma distinção muito importante, por isso é muito importante lembrar: se você me permite parafrasear uma música famosa: que diferença faz um espaço!

Descendentes

Os seletores de amostra que usamos até agora são todos os seletores de nível superior: um elemento, uma classe ou um identificador. Agora vamos adicionar mais detalhes e mais complexidade. Veja o seguinte exemplo:

#container h2 {
color:grey;
}

Esta regra se aplica apenas aos h2 elementos que estão dentro de um elemento com o id="container", não importa quantos níveis de profundidade eles estejam. Portanto, se esse foi um pedaço do seu arquivo HTML, a regra se aplicaria ao h2 elemento que o contém:

<div id="container">
<div id="header"></div>
<div id="main">
<h2>Título deste documento</h2>
</div>
</div>

A regra CSS a seguir também fará o cabeçalho grey, mas se por acaso houver outros h2 elementos dentro da #header div, eles não serão afetados por esta regra:

#container #main h2 {
color:grey;
}

Selecionando filhos ou irmãos

Em alguns casos, você deseja ser mais específico em sua seleção e ter uma regra para elementos que são os filhos de outros elementos, não descendentes de números arbitrários de níveis diferentes na árvore de documentos. Para esse fim, você pode usar o seletor filho, como no exemplo a seguir:

#main >  h2 {
color:grey;
}

h2 é filho do div com o id main, portanto, com essa regra também, o cabeçalho em nosso pequeno pedaço de código será exibido em grey. Agora considere o seguinte exemplo: Por outro lado:

#container > h2 {
color:grey;
}

Nesse caso, não haverá efeito, pois h2 não é filho de div#container.

Existe uma sintaxe semelhante para especificar um elemento adjacente a outro, ou um irmão como isso seria chamado em uma árvore genealógica. Consulte o próximo exemplo:

h2 + p  {
margin-top:0px;
}

Isso não daria uma margem superior a um p elemento que segue imediatamente a h2, mas não aplicaria essa regra às p tags subsequentes. Observe o seguinte pequeno pedaço de HTML:

<h2>História</h2>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>

O primeiro parágrafo não teria uma margem superior; todos os outros teriam margens com base em como o navegador renderiza os parágrafos por padrão. Obviamente, isso é verdade se essa regra de CSS for a única e não for anulada por outras pessoas, e isso nos levará ao próximo tópico: especificidade.

Especificidade

De tempos em tempos, como iniciante em CSS ou desenvolvedor web experiente, você ficará frustrado se apenas adicionou uma nova regra CSS à sua folha de estilos e descobriu que ela não tem efeito. Na maioria das vezes, isso acontece porque existe outra regra com uma especificidade mais alta que tem prioridade.

Já mencionamos que os estilos embutidos têm precedência sobre as folhas de estilos externas. Portanto, parece mais do que lógico que a ordem do CSS interno e os links para as folhas de estilo externas influenciarão a aparência da página. Agora considere a seguinte regra:

p.warning {
color:red;
}

Suponha que a regra anterior seja seguida pela seguinte regra:

p.warning {
color:orange;
}

Nesse cenário, todos elementos de parágrafo com a classe warning aparecerão orange, não red, porque a regra laranja apareceu mais tarde.

Mas essas duas regras compartilham um seletor comum: é um p com a classe warning.

As coisas seriam diferentes se você tivesse regras com seletores como o seguinte:

p#error  {
color:red;
}

E junto com isso, se você também tivesse a próxima regra:

body div.container div.main p.error {
color: orange;
}

Vamos agora considerar o seguinte:

<div class="container">
<div class="main">
<p id="error" class="error">
O que você digitou está incorreto
</p>
</div></div>

Lógica ou intuição, mas não a ordem no CSS, nos faz pensar que o texto O que você digitou está incorreto seria exibido em vermelho e não em laranja. Isso é, de fato, correto, mas não queremos confiar na intuição, não é? Felizmente, existem fórmulas para determinar qual regra CSS vence, se houver várias que possam influenciar o layout de um elemento específico. É um pouco matemático e referido como especificidade .

A especificidade de uma regra CSS é uma sequência de quatro números calculados da seguinte maneira:

  • Se a regra for um estilo embutido, o primeiro número será 1, caso contrário, será 0
  • Adicione 1 ao segundo número para cada ocorrência de um identificador
  • Adicione 1 ao terceiro número para cada classe especificada
  • Aumente o quarto número em um para cada elemento presente

Quando duas regras são comparadas, o primeiro número é analisado primeiro. Se um deles for mais alto, essa regra terá mais peso. Em seguida, o segundo número é analisado e, se necessário, o terceiro e, finalmente,o último. A especificidade de nossas duas regras de amostra é: 0,1,0,1 e 0,0,3,4.

Portanto, nossa intuição é agora confirmada por mera aritmética.

Elementos de bloco e elementos embutidos

Antes de finalmente entrarmos na descrição das propriedades CSS mais importantes por categoria, precisamos dizer em poucas palavras tem duas categorias de elementos: elementos de bloco e elementos embutidos .

Pense nos elementos do bloco como áreas retangulares da sua tela ou página. Eles podem conter texto, dados e outros elementos de bloco, além de elementos embutidos. Os elementos de bloco típicos são as tags <div> e <p>. Antes e depois de cada elemento do bloco, uma nova linha de texto é criada.

Os elementos embutidos podem conter apenas elementos embutidos e não elementos de bloco. Além disso, eles não podem ter uma largura. Eles herdam a largura do contêiner em que estão. O elemento embutido mais popular é o elemento <span>, normalmente usado para alterar a aparência de um pedaço de texto em mais texto.

Para iniciantes, isso pode ser confuso, porque elementos de bloco como <div> podem ser elementos de bloco, mas quando eles não têm conteúdo dentro deles, eles parecem não ter largura ou altura. Além disso, você pode alterar a maneira como esses elementos são exibidos com a display propriedade CSS. Considere as seguintes linhas de código e faça com que um navegador a processe:

<p>paragraph1</p>
<p>paragraph2</p>
<p>paragraph3</p>
<p>paragraph4</p>

<p style="display:inline;">paragraph1</p>
<p style="display:inline;">paragraph2</p>
<p style="display:inline;">paragraph3</p>
<p style="display:inline;">paragraph4</p>

As quatro primeiras linhas são exibidas como elementos de bloco e são parágrafos verdadeiros: haverá uma nova linha entre eles e a distância entre esses parágrafos será determinada pelo padrão font e pelos margin valores escolhidos pelo navegador. Fonte e margem pertencem às famílias de propriedades CSS mais importantes. Vamos aprender sobre eles quando discutirmos as propriedades da fonte e o chamado box modelo para margin, border,e padding.

O segundo conjunto de parágrafos todos aparecerão em uma linha, se permitido por sala na janela de exibição, porque declaramos explicitamente que são elementos embutidos.

Antes de discutirmos o modelo de caixa, vejamos mais um exemplo. Experimente o conjunto de divs da primeira metade, pois ele não exibirá nada. Depois de inserir o texto entre as <div> tags, esse texto aparecerá junto com as cores do plano de fundo. Os <div> elementos do segundo conjunto têm largura e altura, então você verá quatro quadrados coloridos perfeitos, mas talvez não da maneira que você esperava. Nós os agrupamos dois a dois, mas todos parecem empilhados um sobre o outro. Bem-vindo ao mundo da indiferença do navegador!

<style type="text/css">
.redbg {
background-color: red;
}
.greenbg {
background-color: green;
}
.yellowbg {
background-color: yellow;
}
.bluebg {
background-color: blue;
}
.sq200 {
width: 200px;
height: 200px;
}
</style>

<div>
<div class="redbg"></div><div class="yellowbg"></div>
</div>
<div>
<div class="greenbg"></div><div class="bluebg"></div>
</div>

<div>
<div class="sq200 redbg"></div><div class="sq200 yellowbg"></div>
</div>
<div>
<div class="sq200 greenbg"></div><div class="sq200 bluebg"></div>
</div>

Cores

O que pode fazer um site parecer instantaneamente mais agradável é o uso adequado de cores. É também uma ferramenta útil para fazer alguma depuração. Ao adicionar cores de plano de fundo diferentes a alguns elementos do bloco, você aumenta suas chances de encontrar o local daquele que falta, fechando a etiqueta que bagunça tudo.

No mundo da impressão, você tem total controle sobre as cores que usa e, também extremamente crítico, sobre as fontes ou tipos de letra. Você deve ser muito exigente e esperar que o produto resultante corresponda exatamente na cor e no tipo de letra ao especificado por você. As informações de cores são trocadas em RGB( vermelho-verde-azul ) ou CMYK ( ciano-magenta-amarelo-preto ). Em CSS também, você pode especificar a cor desejada através de seus valores RGB. Mas é aqui que a comparação começa e termina.

Por esse motivo, sabemos que as cores de um item impresso de qualidade devem ter exatamente a aparência esperada. No entanto, quando preparamos o conteúdo da Web, não podemos dizer como as cores em nosso site ficarão com os visitantes. Depende de muitas coisas. Por exemplo, que dispositivo eles usam: um computador, um tablet ou um telefone celular? A tela que eles olham pode ser grande ou pequena, de alta ou baixa resolução e suporta milhões de cores ou apenas um pequeno número. Quando percebemos isso, estamos bem. Portanto, recomendo o uso de cores suficientemente distintas e não se incomode com combinações RGB extravagantes.

As cores podem ser especificadas de várias maneiras. Os dois mais comuns são pelo nome e pelo valor RGB . Os nomes são mais fáceis, mas podem estar mais sujeitos à interpretação do navegador. Então, eu os uso apenas para coisas rápidas e temporárias, ou quando são pretas ou brancas . Em todos os outros casos, prefiro usar os valores RGB, que são escritos com o sinal # seguido por três números hexadecimais de dois dígitos, por exemplo #FFDEAD, uma das minhas cores favoritas. Isto é chamado navajo.

Você pode usar cores para o primeiro plano e o plano de fundo, com as propriedades de cor e cor de plano de fundo . Cor indica a cor que será usada para exibir o texto dentro de um elemento ou os descendentes de um elemento; background-color, como o nome da propriedade sugere, definirá a cor de fundo de um elemento do bloco.

Fontes

Sou um entusiasta da tipografia. Até gastei dinheiro comprando fontes, apenas para uso pessoal. Gostaria de salientar que, ainda mais do que com cores, há uma enorme diferença entre usar tipografia para publicação impressa e publicação na web.

Na publicação impressa, você está no controle total fonts ou typefaces (este não é um artigo de tipografia, permita-me usar esses termos de forma intercambiável) que você usa em seu trabalho. Você só precisa garantir que todas as fontes que planeja usar estejam instaladas no sistema que contém seu programa Desktop Publishing, para que você possa usá-las em seu desenvolvimento. Em seguida, verifique se eles estão incorporados no documento final enviado para a impressora e se você e sua empresa de impressão têm uma licença legítima para todas as fontes usadas. Então, todas as pessoas que lerem a cópia impressa ou até mesmo uma versão em PDF online verão a mesma da maneira que você a projetou.

Ao publicar na Web, o texto que o visitante verá na sua página só pode ser exibido em uma fonte que está realmente instalada no dispositivo que ele está usando. O pior cenário, mas o mais bonito, é aquele em que você usa uma fonte muito boa e cara, instalada no sistema usado para projetar e testar seu site. É possível que esteja instalado em nenhum outro computador do planeta.

Esse site ficará absolutamente fabuloso no seu próprio computador, mas potencialmente horrível onde é mais importante. É por isso que em CSS trabalhamoscom famílias de fontes e não fontes únicas.

Antes de entrar em mais detalhes, uma coisa a ser observada sobre a idade média da web , é que costumava haver uma tag – <font> basta pensar – ah! idade média e não a use. É um daqueles elementos de apresentação em HTML de que falamos.

Então, o que são fontes?

Em termos simples, as fontes são uma série de imagens ou glifos , determinando como letras, números e outros caracteres devem ser exibidos. Nos primeiros dias de impressão, há cerca de 500 anos, Gutenberg, Plantijn ou Moretus criaram moldes de metal, uma letra de cada vez. Essas letras de metal seriam colocadas em caixas de madeira, as maiores na parte superior e as menores na minúscula. Foi assim que os termos maiúsculas e minúsculas nasceram.

Para compor uma única página de texto, as letras de metal tinham que ser colocadas em uma moldura para mantê-las juntas e depois inseridas na primeira impressora do mundo. Adicione um pouco de tinta e papel e pronto: você tinha uma página de uma cópia de um livro. Obviamente, para cada tamanho, espessura e estilo diferentes (por exemplo, itálico versus normal ), havia um caso separado com letras.

As pessoas que criaram essas letras de metal foram chamadas de perfuradoras e as fontes receberam o nome delas. Um famoso foi Claude Garamond. Você pode identificar as fontes originais de metal Garamond, embrulhadas em papel para proteger a posteridade, no Museu Plantijn-Moretus, em Antuérpia. Você descobrirá que o equivalente do século 16 a um arquiteto, retratista e “web designer” combinado era Peter Paul Rubens, conhecido pela maioria das outras pessoas apenas como pintor.

Hoje, as fontes de que falamos não são mais pequenos blocos de metal, mas arquivos de computador com informações sobre o layout da fonte. Quanto mais coleções de glifos uma fonte contém (mais tamanhos, estilos ou peso ou espessura), mais precisamente uma letra será reproduzida.

Famílias de fontes

As fontes podem ser divididas em diferentes categorias ou famílias. Os três mais importantes são chamados de fontes serif , sans-serif e monospace .

Fontes serif

As fontes com serifa são tipos de letra que possuem glifos com pequenas decorações ou serifas em algumas bordas da carta. Por exemplo, linhas curtas na parte inferior de cada perna na letra m .

A fonte projetada por Garamond, mencionada na seção anterior, é um exemplo de fonte com serifa. As fontes com serifa são populares porque tornam a leitura do texto agradável. Os editores usam fontes serif bem elaboradas, combinadas com papel de impressão de alta qualidade, nas versões de capa dura de seus livros. Times New Roman , projetado para um jornal britânico The Times, é uma fonte serif muito usada. Os criadores usaram uma fonte chamada Plantin como modelo, que por sua vez foi nomeado após Plantijn, a pessoa de impressão que mencionei anteriormente.

Baskerville é outro exemplo de uma fonte serif e é muito usada para eBooks.

Usando fontes serif para a parte do texto de um site está sujeita a discussão. Como os glifos precisam ser exibidos usando pixels em uma tela, as decorações que causam uma leitura agradável na impressão podem resultar no oposto da tela. Isso ocorre porque em telas de baixa resolução, essas mesmas decorações podem parecer muito pixeladas. Pessoalmente, recomendo pelo menos experimentar algumas fontes com serifa para a parte principal do texto do seu site antes de fazer essa ligação.

Fontes sem serifa

As fontes sem serifa são a contrapartida das fontes com serifa. Eles não contêm as pequenas decorações ou serifas no final do curso, daí o nome sans (francês para sem) serifa. Na impressão, as fontes sem serifa são usadas para títulos, títulos etc. Isso contrasta com as fontes serif usadaspara o corpo do texto. Fontes sem serifa, para o razão mencionada anteriormente, são agora mais comum para o texto que precisa ser exibido nas telas do computador. Sans Serif comum os tipos de letra são: Arial , Open Sans e Helvetica.

Fontes monoespaçadas

Nos tipos de letra que discutimos até agora, nem todos os caracteres têm a mesma largura: a letra m é claramente mais larga que a letra i. Uma fonte monoespaçada, também chamada de largura fixa, é uma fonte em que letras e caracteres de fato, tem a mesma largura. Os primeiros tipos de letra monoespaçados foram para máquinas de escrever, pois o carro sempre move a mesma distância para a frente com cada letra digitada. Eles também foram usados ​​nos primeiros computadores e terminais de computadores. Os editores de texto de software ainda os usam hoje em dia, pois facilita o alinhamento código-fonte quando cada caractere tiver a mesma largura.

O código-fonte exibido nos sites geralmente é exibido em uma fonte monoespaçada, assim como os exemplos de código deste artigo. A fonte monoespaçada mais comum é provavelmente Courier. Outro exemplo é o Lucida Console.

Voltemos agora de nossa viagem à ciência e à história da tipografia, à nossa história de CSS.

A propriedade da família de fontes

Para especificar como o texto de um elemento precisa ser exibido, usamos o propriedade da família de fontes na folha de estilos CSS. Por exemplo, considere o seguinte:

p {
font-family: "Open Sans", "Helvetica Neue", Verdana, Helvetica, sans-serif;
}

Então, por que há mais de uma fonte especificada: uma letra pode estar apenas em uma fonte, não pode?

É assim que funciona. Quando alguém visita seu site, com esta frase em sua folha de estilos, um parágrafo de texto será exibido no Open Sans tipo de letra, se estiver instalado no computador. Se não for encontrado, Helvetica Neue será procurado; se esse não estiver lá, Verdana é tentada e assim por diante. Se tudo falhar, algum tipo de letra sans-serif padrão será usado. Neste exemplo, o último cenário é muito improvável, pois não consigo imaginar um sistema que não tivesse Verdana ou Helvetica instalado. No entanto, é Recomenda-se sempre concluir a lista com sans-serif, serif ou monospace. Observe o uso de aspas (por exemplo, para ‘Helevtica Neue’) quando os nomes de fontes consistirem em mais de uma palavra.

Peso e estilo da fonte

Quando você seleciona uma fonte usando um dos aplicativos da área de trabalho que você usa, também pode selecionar o estilo picklist. Um típico picklist pode incluir: normal, itálico, semi-negrito, semi-negrito, itálico e negrito e itálico. O número de itens nessa lista normalmente corresponde ao número de coleções de glifos que acompanham a fonte. Você pode visitar o site de uma empresa que vende fontes, para sentir melhor quantas variações podem existir no tema de uma única fonte.

Em CSS, o equivalente a isso é fornecida por duas propriedades diferentes: peso da fonte e estilo de fonte .

Os dois mais comuns são os valores para o estilo da fonte  normais e itálico. Aqueles para font-weight são normais e negrito , e os números 100, 200 e assim por diante, através de 900 é o mesmo que o normal 400 e o mesmo em negrito 700. Todos os outros podem ter resultados imprevisíveis, dependendo da presença de, digamos, uma versão semi-negrito da sua fonte e do navegador usado. Portanto, até chegarmos à segunda parte do artigo, a mensagem deve ser alta e clara – use apenas o básico normal ou itálico e o normal ou em negrito.

Tamanho da fonte

Finalmente, como em nossos aplicativos de desktop, podemos especificar agora em qual fonte nosso texto deve ser exibido e qual o tamanho de todas essas letras.

O tamanho pode ser especificado em pixels, percentages, ou ems. Outro que existe é chamado rem.

Quando nenhum tamanho de fonte é especificado em nenhum lugar, um navegador típico define esse tamanho para 16px. A em unidade, um termo que vem da tipografia para se referir ao tamanho da letra m em uma fonte, é o CSS, nada além do tamanho calculado da fonte para o elemento atual. Seu uso é altamente recomendado em tamanhos de pixels fixos. Vamos ilustrar isso com um exemplo. Veja o seguinte código CSS:

h1 {
font-family: "open Sans", Arial, sans-serif;
font-size:2em;
font-weight:bold;
}
h2 {
font-family:Arial, sans-serif;
color:#999999;
font-size:1.5em;
font-weight:600;
}

Se nenhum tamanho de fonte foi especificado para o elemento body, sabemos que seria 16px, com todos os descendentes herdando. Isso significa que nossa h1 posição se tornaria 32px e o h2 seria 24px. Simplesmente alterar o tamanho da fonte do elemento body para, digamos, 20px alteraria proporcionalmente os tamanhos de nossos títulos h2 e h1 para 30px e 40px respectivamente. Se tivéssemos dado a eles um tamanho, por exemplo, 20px e 24px teríamos terminado com títulos do mesmo tamanho da fonte usada para o texto normal.

O mesmo acontece quando o usuário usa o navegador para aumentar ou diminuir o zoom. Nós mantemos as proporções. No interesse de criar designs responsivos, usar tamanhos proporcionais em vez de fixos é o caminho a percorrer. É claro que você deve ter cuidado e perceber que quando você altera o tamanho da fonte de um elemento, todos os filhos o herdarão e, quando você altera isso, por engano ou não, de um elemento filho, o tamanho de em não será mais o que foi há um minuto atrás.

Considere o seguinte código:

<div class="insert">
<p> Um parágrafo de texto que representa o que poderia ser uma inserção em um artigo</p>
</div>

A seguir, são apresentadas as regras CSS:

div.insert {
font-family:Baskerville, "Times News Roman", serif;
font-size:0.8em;
color:brown;
}
.insert p {
font-size:0.8em;
}

Você acabou de criar o tamanho da fonte duas vezes menor, para que as letras neste parágrafo do texto sejam 0.64.

Em geral, eu gosto de usar porcentagens, como mostrado a seguir:

.insert p {
font-size:80%;
}

Altura da linha

Há mais uma propriedade importante para lidar com o texto: a altura da linha . Na prática, isso determina como o espaço vertical haverá entre duas linhas de texto. A altura da linha pode ser especificada como um número, multiplicado pelo tamanho da fonte, um pixel valor, uma percentage, ou a palavra normal. Normal é normalmente determinado pelo navegador e geralmente está em algum lugar entre 1.2 e 1.4. Portanto, a altura de cada linha é 1.2 ou 1.4 multiplicada pelo tamanho da fonte. Dessa forma, há espaço para espaços em branco acima e abaixo das letras.

Para uma fonte com tamanho 16px, as três seguintes linhas de CSS teriam o mesmo efeito:

p {
line-height: 24px;
}
p {
line-height: 1.5;
}

p{
line-height: 150%;
}

Observe que isso especifica o espaço entre as linhas de um parágrafo, não o espaço entre os parágrafos. Aquele seria determinado pela margem, e a margem é um aspecto do conceito mais importante de CSS: o modelo de caixa.

O modelo da caixa

Todos os elementos HTML pode ser tratado como caixas. Em CSS, o termo modelo de caixa é usado ao falar sobre design e layout. É essencialmente uma caixa que envolve elementos HTML e que pode consistir, de fora para dentro: margens, bordas, preenchimento e o conteúdo real.

Até agora neste artigo, demos apenas exemplos curtos para que você possa estudar longe de um computador, e trataremos isso como um artigo didático pelo maior tempo possível. No entanto, para ilustrar o modelo da caixa e para você entendê-lo, é essencial pegar nossos exemplos e verificá-los em um navegador. Considere o seguinte código:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Rodrigo Grosara - Desenvolvedor Web</title>
<link rel="stylesheet" href="styles/packtpubch3_1.css"
type="text/css" />
</head>
<body>
<div id="box">
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.
</div>
<div id="box2">
O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro.
</div>
</div>
</body>
</html>

E a seguir, o conteúdo do arquivo da folha de estilos, onde usamos parte do que acabamos de aprender, combinado com a introdução de todas as propriedades do modelo de caixa:

body {
font-size:12px;
background-color: #ffdead;
font-family:Arial, Verdana, Helvetica, sans-serif;
color:#999;
line-height:1.3;
margin:0;
}

#box {
  width:150px;
  height:150px;
  background-color:teal;
  color:white;
  border: 5px solid orange;
  margin:40px;
  padding:20px;
}
#box2 {
  width:150px;
  height:150px;
  background-color:blue;
  color:white;
  border: 5px solid yellow;
  margin:40px;
  padding:20px;
  }

Quando exibimos isso em um navegador, vemos duas caixas quadradas bem empilhadas umas sobre as outras. Ambas as caixas têm texto; um é verde com uma borda laranja, o outro azul e amarelo. Há uma distância igual entre a esquerda da janela de visualização e as caixas, a parte superior da janela e a caixa superior e entre as caixas. Sinta-se à vontade para alterar os valores no CSS e no HTML da caixa #box e ver o que acontece.

Temos o nosso conteúdo para onde vai o nosso texto, que especificamos como 150 por 150 pixels. Se não tivéssemos especificado largura e altura, teríamos terminado com uma área retangular verde e grossa com texto e borda em nossa janela de visualização. Se removermos apenas bordas e preenchimentos, apenas veremos o texto com a cor de fundo; se removermos apenas o texto, veremos um retângulo colorido com bordas; e se removermos os dois, acabamos vendo nada. Por fim, se você colocar apenas a largura e a altura de volta, teremos um quadrado verde de exatamente 150×150 pixels.

Portanto, a partir do lado interno, temos nosso conteúdo com um tamanho especificado ou calculado. Esse é o tamanho do nosso elemento: 150 por 150 pixels em nosso exemplo.

Em seguida podemos ter preenchimento. Isso leva a mesma cor de fundo do elemento e aumenta a parte interna da nossa caixa. No nosso exemplo, 20px são adicionados nos quatro lados do elemento.

Então podemos ter uma fronteira. Isso coloca uma borda ao redor do nosso elemento com a espessura, cor e forma que especificamos. Usamos uma borda sólida em torno de 5px todos os lados e, portanto, até agora nossa caixa já é (5 + 25 + 150 + 25 + 5 = 210) x 210 pixels.

Finalmente, háa margem. A margem, se quisermos uma, é a área no lado externo da nossa caixa de elementos. É transparente, portanto, tem a cor de fundo do elemento pai. Apenas cria uma distância entre a caixa e as caixas adjacentes. Neste exemplo, usamos uma margem de 40px. Isso torna o tamanho total da nossa caixa (40 + 210 + 40 = 290) x 290 pixels.

Se você tentar fazer isso e for um tipo atento de pessoa, poderá perceber algo que não é computado. Boa pegada! Vamos explicar isso daqui a pouco. Agora, examinaremos todas as propriedades do modelo de caixa que você pode usar.

Preenchimento (Padding)

Você pode especificar, ou não, preenchimento nos quatro lados do seu elemento. Para esse fim, existem são quatro propriedades que você pode usar:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Aqui está um exemplo:

.menulabel
{
padding-left: 8px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 5px;
}

Você notou que eu mudei o pedido? Eu fiz isso de propósito. A primeira ordem que usei é a suportada pela versão abreviada da padding propriedade. O segundo é a ordem em que penso quando faço o meu design: o que é horizontalmente, depois verticalmente. Portanto, as mesmas quatro linhas de CSS podem ser substituídas pela seguinte:

.menulabel {
padding: 4px 7px 5px 8px;
}

No primeiro exemplo, usamos um único valor, que significa quatro vezes o mesmo. Também existem duas e três variantes de valor da versão abreviada. Por exemplo, o seguinte será defina superior e inferior para 10px, e esquerda e direita para 15px:

.menulabel {
padding: 10px 15px;
}

Bordas

Para a propriedade de bordas também, você tem a opção de especificar valores diferentes para superior, direita, inferior e esquerda, mas há mais do que apenas a largura. Você também pode especificar a forma, o estilo e a cor. A seguir estão as propriedades para todos os três:

  • border-width
  • border-style
  • border-color

Existe até uma propriedade que você pode usar para qualquer um desses três em qualquer direção, como no estilo de border-top-style, para que haja muitas propriedades para escolher – não que ter tantas seria prático. Não acredito que uma borda com uma forma, cor e tamanho diferentes em cada lado seja um bom design!

A maioria das formas ou estilos comuns para escolher são:

  • none
  • solid
  • double

Há, é claro, mais. Double oferece uma borda dupla e pode ser bastante decorativo às vezes. Sólido é o que eu recomendo que você use na maioria das vezes.

myimg {
5px solid white;
}

Então, por que você não precisaria de nenhum? Se eu não quero uma borda, simplesmente não especifico uma, certo? Errado! Alguns navegadores, como o Internet Explorer, colocam automaticamente uma borda branca de 1px em torno de qualquer img elemento. Então, fique feliz por ter a opção de lidar com isso:

img {
border:none;
}

Já usamos a notação abreviada em nossos exemplos; portanto, só tenho que lembrá-lo da ordem das coisas a serem incluídas; Eu constantemente esqueço-as: cor do estilo da largura.

Ter a capacidade de colocar bordas em volta das coisas é um recurso muito interessante, principalmente para fotografias. O equivalente da parte “fosca” de uma fotografia emaranhada pode simplesmente ser uma borda bem trabalhada para o elemento img.

Margem

Finalmente, existe a propriedade margin, que limpa um elemento em torno de suas bordas. Não tem cor de fundo porque é transparente. As cinco propriedades são:

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Você pode especificar tamanhos de margem em pixels, em porcentagens e assim por diante, assim como você pode com o preenchimento. No entanto, há um valor extra extremamente útil que você pode definir a margempara: automático. Altere a configuração da margem em nosso exemplo para:

margin: 40px auto;

Como mágica, suas duas caixas quadradas serão centralizadas horizontalmente. Se você aumentar ou diminuir a janela do navegador, elas ainda estarão centralizadas. Com a margem definida como automática, o navegador calculará as margens esquerda e direita para você, em relação ao elemento pai. Muitos sites têm um elemento principal div, filho do corpo, com estilo semelhante ao seguinte:

#container {
margin: 0px auto;
border:none;
max-width:980px;
}

O desenvolvimento clássico da web usa uma tela com largura fixa e, frequentemente, altura fixa, para colocar tudo dentro. Este exemplo usa 980px. Graças à auto margem, haverá uma margem automática à esquerda e à direita, calculada como metade do espaço horizontal restante. O max-width é novo e difere de width. A largura sempre fornecerá 980px, largura máxima somente quando 980 pixels horizontais estão disponíveis. Se não for esse o caso, em smartphones, por exemplo, a (menor) largura total da janela de visualização se tornará a largura. Este é um pequeno passo para um design responsivo.

Margens em colapso

Você aprendeu sobre o modelo de caixa, usou nosso exemplo, e pode estar se perguntando por que duas caixas quadradas com margens superior e inferior de 40px estão apenas 40, e não com 80 pixels de distância.

Bem, isso não é um bug, mas um recurso. A especificação do W3C estipula que, quando as margens verticais de dois elementos estiverem tocando, o maior dos dois entrará em vigor e o outro será reduzido a 0. Algumas outras configurações de CSS podem mudar isso, mas esse é o padrão. Depois de ter feito muito desenvolvimento na Web e se acostumado, você pode decidir que realmente faz muito sentido. Concluiremos esta seção adicionando mais duas caixas, com imagens dentro delas, ao HTML e CSS, criando basicamente as duas primeiras entradas de uma galeria de fotos. Incorporaremos o que aprendemos e descobriremos o que ainda está faltando.

Aqui está o HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>Rodrigo Grosara - Desenvolvedor Web</title>
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<body>
<div class="entry">
<div class="picturebox">
<img  class="picture" src="https://comodesenvolver.com.br/wp-content/uploads/2019/09/como-iniciar-um-negocio.jpg" alt="junelake" />
</div>
<div class="textbox">
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.
</div>
</div>

<div class="entry" >
<div class="picturebox">
<img class="picture" src="https://comodesenvolver.com.br/wp-content/uploads/2019/10/trafego-para-seu-site.png" alt="monolake" />
</div>
<div class="textbox">
O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro.
</div>
</div>
</body>
</html>

Coloque o seguinte stylesheet no seu arquivo style.css:

.picture {
  width:200px;
  height:130px;
  border:5px solid white;
  margin-left:25px;
  margin-top:40px;
}
.entry {
  width:600px;
  margin:0 auto;
}
.picturebox {
  background-color:teal;
  color:white;  
  width:270px;
  height:220px;
  text-align:center;
  vertical-align:middle;
  /* float:left;  */
  border-bottom:1px solid #FFDEAD;
  
}
.textbox {
  
  background-color:teal;
  color:white;  
  width:250px;
  height:180px;
  padding:40px 10px 0px 10px;
  /* float:left; */
  border-bottom:1px solid #FFDEAD;
  text-align:left;
}

Se você executar este exemplo em um navegador, perceberá que, apesar de envolvê-los com outra div tag, as imagens e o texto que a acompanha ainda não estão lado a lado, mas estão empilhados um em cima do outro. A solução já está lá, mas colocada dentro da cadeia /* e */como um comentário. Remova o comentário dessas linhas e, como mágica, tudo ficará da maneira que você deseja.

Posicionamento

Tem várias propriedades CSS que você pode usar para alterar a posição de um elemento na página. Aquele com claramente o maior impacto é chamado float (Flutuador)

Float

Interpreto a propriedade float CSS como a maneira CSS de empilhar elementos horizontalmente. Se você der a todos eles:

float:left;

Você os empilha da esquerda para a direita. Com um:

float:right;

Você os empilha da direita para a esquerda. Isso pode se tornar muito útil quando você deseja colocar a primeira parte da sua página, uma introdução, por exemplo, à direita, se houver espaço disponível, e na parte superior, se não houver. No nosso exemplo, mudar para a esquerda para a direita colocará as imagens à direita.

position:relative

A propriedade CSS position pode ser usado para posicionar os elementos em um ponto da página diferente de onde eles normalmente iriam. “Normalmente” é o mesmo que position:static. Veja o seguinte código:

#redsquare
{
width:100px;
height:100px;
background-color:red;
}

Isso produz um quadrado vermelho no canto superior esquerdo do seu elemento pai. Agora, tente o seguinte:

#redsquare
{
position:relative;
width:100px;
height:100px;
background-color:red;
left:10px;
top:100px;
}

O quadrado vermelhose move para 100px baixo e 10px para a direita.

position:absolute

Vamos adicionar:

#container
{
  width:700px;
  margin:50px;
  background-color:teal;
  height:500px;
}

e

<body>
<div id="container">
<div id="redsquare">

</div>
</div>
</body>

A caixa quadrada vermelha está agora dentro da caixa verde-azulada, 100px para baixo e 10px para a direita. Quando você substitui relativo por absoluto, o vermelho, A caixa ficará 100px em baixo e 10px à direita, em relação ao elemento ancestral. Normalmente, é a própria janela do navegador.

Listas de estilo

Um elemento que você acabará usando muito é a tag: <ul> a lista não ordenada. Por padrão, todos os itens em uma lista será mostrada com um marcador redondo na frente do texto. Com CSS, você pode alterar o estilo da sua lista.

list-style-type

Usando esta propriedade você pode mudar a forma do marcador. Alguns dos valores que você pode usar são: none (nenhum marcador), square (um quadrado), circle (um pequeno círculo) ou disc (o padrão).

list-style-image

Você pode fornecer o seu próprio imagem para o marcador usando o propriedade list-style-image. O valor padrão é none, o que significa que a imagem do marcador é determinada pelo valor do list-style-type. No entanto, se você especificar url, seguido por um caminho para uma imagem, essa imagem será usada, por exemplo:

url('smiley.gif')

list-style-position

Por padrão, os marcadores aparecem fora do fluxo de conteúdo. Se você especificar o valor da list-style-position, os marcadores serão movidos para o interior e o texto mais para a direita.

Âncoras de estilo – pseudo-classes

Concluímos nossa seleção de propriedades CSS com a introdução de algumas pseudo-classes, normalmente mas não exclusivamente usadas com <a> a tag anchor. A tag anchor é usada principalmente para links. Para tornar visível que eles são na verdade, links, o estilo padrão de <a> passa a ser uma cor azul e o texto é sublinhado, o que não é muito atraente.

Usando pseudo-classes, você pode dar a uma tag de âncora, em teoria qualquer tag, uma aparência diferente, dependendo da localização do cursor, em relação ao link e se o link já foi visitado ou não. Aqui está um exemplo:

a:link {
text-decoration:none;  /* desliga o sublinhado */
}
a:hover {
color:white;   /* muda de cor para branco quando o cursor fica sobre ele (passe o mouse)  */
}
a:visited {
color:yellow;   /* muda a cor para indicar que você já visitou esse link */
}

Firebug

Não importa o quão bem você estuda este capítulo e várias referências on-line sobre CSS, de tempos em tempos, as coisas não parecerão o esperado. É aqui que uma ferramenta de depuração como o Firebug é útil. Firebug é uma extensão para o navegador Firefox. Permite clicar em partes da sua página e, em seguida, o programa mostra o HTML e o CSS envolvidos e até uma imagem do modelo da caixa mostrando o preenchimento, a borda e a margem. A maioria dos outros navegadores, em particular o Safari e o Chrome, tem contrapartes comparáveis.

Conclusão

Neste capítulo, fornecemos uma visão geral do CSS. Esta não é uma referência completa, mas incluímos as propriedades CSS mais usadas e úteis que devem ser suportadas por todos os navegadores. Não incluímos (de propósito) alguns dos mais novos que foram introduzidos no CSS3. Um novo recurso importante de CSS que será introduzido na segunda parte deste artigo serão as consultas de mídia. Isso é essencial para a criação de projetos responsivos, mas esse tópico ganha pelo menos um capítulo próprio.

Até agora, aprendemos duas linguagens que precisamos para criar sites: HTML e CSS. Sem mais delongas, na próxima saga iremos ver, uma verdadeira linguagem de programação: JavaScript.