Abertura do modelo de caixa
Nos familiarizamos com HTML e CSS; Nós sabemos o que eles parecem e como realizar alguns dos conceitos básicos. Agora, vamos aprofundar e ver exatamente como os elementos são exibidos numa página e como eles são dimensionados.
No processo, vamos discutir o que é conhecido como o modelo de caixa e como funciona com HTML e CSS. Também vamos analisar algumas novas propriedades CSS e usar alguns dos valores de comprimento que abordamos na Lição 3. Vamos começar.
Como são apresentados os elementos?
Antes de saltar o modelo da caixa, vamos entender como os elementos são exibidos. Na Lição 2, cobrimos a diferença entre os elementos do nível do bloco e do nível interno. Para recapitular rapidamente, os elementos de nível do bloco ocupam qualquer largura disponível, independentemente do conteúdo, e começam numa nova linha. Os elementos de nível interno ocupam apenas a largura que o seu conteúdo requer e alinham se na mesma linha, um após o outro. Os elementos de nível do bloco geralmente são usados para peças maiores, como títulos e elementos estruturais. Os elementos em nível de linha geralmente são usados para partes menores de conteúdo, como algumas palavras seleccionadas para negrito ou em itálico.
Exibição
Exatamente como os elementos são exibidos - como elementos de nível do bloco, elementos internos ou outra coisa - são determinados pela propriedade de exibição. Cada elemento tem um valor de propriedade de exibição padrão; no entanto, como com todos os outros valores de propriedade, esse valor pode ser substituído. Existem alguns valores para a propriedade de exibição, mas os mais comuns são o bloco, o inline, o inline-block e nenhum.
Podemos alterar o valor da propriedade de exibição de um elemento seleccionando esse elemento dentro do CSS e declarando um novo valor de propriedade de exibição. Um valor de bloco fará desse elemento um elemento de nível de bloco.
p {
display: block;
}
Um valor de inline fará desse elemento um elemento de nível inline.
p {
display: inline;
}
As coisas ficam interessantes com o valor do bloco em linha. O uso deste valor permitirá que um elemento se comporte como um elemento de nível do bloco, aceitando todas as propriedades do modelo de caixa. No entanto, o elemento será exibido em linha com outros elementos, e ele não começará numa nova linha por padrão.
p {
display: inline-block;
}
Exibir demonstração em bloco Demo
O espaço entre elementos de bloco em linha
Uma distinção importante com os elementos do bloco em linha é que eles nem sempre estão exibidos diretamente uns contra os outros. Geralmente, um pequeno espaço existirá entre dois elementos do bloco em linha. Este espaço, embora talvez irritante, seja normal. Vamos discutir por que é que esse espaço existe e como removê-lo na próxima lição.
Por fim, usar um valor de nenhum irá esconder completamente um elemento e renderizar a página como se esse elemento não existisse. Todos os elementos aninhados neste elemento também serão ocultos.
div {
display: none;
}
Saber como os elementos são exibidos e como mudar a sua exibição é bastante importante, pois a exibição de um elemento tem implicações sobre como o modelo de caixa é renderizado. À medida que discutimos o modelo da caixa, teremos que analisar essas diferentes implicações e como elas podem afetar a apresentação de um elemento.
Qual é o modelo de caixa?
De acordo com o conceito de modelo de caixa, cada elemento numa página é uma caixa retangular e pode ter largura, altura, preenchimento, bordas e margens.
Isso vale a pena repetir: cada elemento numa página é uma caixa retangular.
Cada elemento em cada página está em conformidade com o modelo da caixa, por isso é incrivelmente importante. Vamos ver nisso, juntamente com algumas novas propriedades CSS, para entender melhor o que estamos a fazer.
Trabalhar com o modelo de caixa
Cada elemento é uma caixa retangular, e existem várias propriedades que determinam o tamanho dessa caixa. O núcleo da caixa é definido pela largura e altura de um elemento, que pode ser determinado pela propriedade de exibição, pelo conteúdo do elemento, ou por propriedades de largura e altura especificadas. O preenchimento e borda podem expandir as dimensões da caixa para fora da largura e altura do elemento. Por fim, qualquer margem que especificamos seguirá a fronteira.
Cada parte do modelo de caixa corresponde a uma propriedade CSS: largura, altura, preenchimento, borda e margem.
Vamos ver essas propriedades dentro de algum código:
div {
border: 6px solid #949599;
height: 100px;
margin: 20px;
padding: 20px;
width: 400px;
}
De acordo com o modelo de caixa, a largura total de um elemento pode ser calculada usando a seguinte fórmula:
margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
Em comparação, de acordo com o modelo de caixa, a altura total de um elemento pode ser calculada usando a seguinte fórmula:
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
Usando as fórmulas, podemos encontrar a altura total e a largura do nosso código de exemplo.
- Width:
492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px - Height:
192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px
O modelo de caixa é sem dúvida uma das partes mais confusas de HTML e CSS. Define um valor de propriedade de largura de 400 pixels, mas a largura real do nosso elemento é de 492 pixels. Por padrão, o modelo de caixa é aditivo portanto, para determinar o tamanho real de uma caixa, precisamos de ter em consideração preenchimento, bordas e margens para os quatro lados da caixa. A largura não inclui apenas o valor da largura da propriedade, mas também o tamanho do preenchimento esquerdo e direito, as margens esquerda e direita e as margens esquerda e direita.
Até agora, muitas dessas propriedades podem não ter muitos sensos. Para esclarecer as coisas, vejamos todas as propriedades - largura, altura, preenchimento, borda e margem - que vão formar o modelo da caixa.
Largura & altura
Cada elemento tem largura e altura padrão. Essa largura e altura podem ser 0 pixels, mas os browsers, por padrão, renderizarão cada elemento com tamanho. Dependendo de como um elemento é exibido, a largura e a altura padrão podem ser adequadas. Se um elemento for chave para o layout de uma página, pode exigir valores de propriedade de largura e altura especificados. Nesse caso, os valores de propriedade para elementos não-inline podem ser especificados.
Largura
A largura padrão de um elemento depende do seu valor de exibição. Os elementos de nível do bloco têm uma largura padrão de 100%, consumindo todo o espaço horizontal disponível. Os elementos de bloco em linha e em linha expandem-se e contratam-se horizontalmente para acomodar o seu conteúdo. Os elementos de nível interno não podem ter um tamanho fixo, portanto, as propriedades de largura e altura só são relevantes para elementos não integrados. Para definir uma largura específica para um elemento não-inline, use a propriedade width:
div {
width: 400px;
}
Altura
A altura padrão de um elemento é determinada pelo seu conteúdo. Um elemento será expandido e contratado verticalmente, conforme necessário, para acomodar seu conteúdo. Para definir uma altura específica para um elemento não-inline, use a propriedade height:
div {
height: 100px;
}
Dimensionar os elementos a nível interno
Tenha em mente que os elementos no nível de linha não aceitarão as propriedades de largura e altura ou quaisquer valores vinculados a eles. Os elementos do bloco e do bloco em linha, no entanto, aceitarão as propriedades de largura e altura e os seus valores correspondentes.
Margem & preenchimento
Dependendo do elemento, os navegadores podem aplicar margens e preenchimento padrão a um elemento para ajudar com legibilidade e clareza. Geralmente, veremos isso com elementos baseados em texto. As margens e preenchimento padrão para esses elementos podem ser diferentes de browser para browser e elemento para elemento. Na Lição 1, discutimos o uso de uma restituição de CSS para tonificar todos esses valores padrão até zero. Fazer isso permite-nos trabalhar desde o início e especificar os nossos próprios valores.
Margem
A propriedade de margem permite-nos definir a quantidade de espaço que envolve um elemento. As margens para um elemento caem fora de qualquer borda e são de cor completamente transparente. As margens podem ser usadas para ajudar a posicionar elementos num lugar específico numa página ou para fornecer espaço para respirar, mantendo todos os outros elementos a uma distância segura. Aqui está a margem em ação:
div {
margin: 20px;
}
Uma estranheza com a propriedade da margem é que as margens verticais, superior e inferior, não são aceites por elementos de nível interno. Essas margens verticais são, no entanto, aceitas por blocos e elementos de bloqueio em linha.
Preenchimento
A propriedade de preenchimento é muito semelhante à propriedade de margem, no entanto, ele cai dentro da borda de um elemento, se um elemento tiver uma borda. A propriedade de preenchimento é usada para fornecer espaço diretamente dentro de um elemento. Aqui está o código:
div {
padding: 20px;
}
A propriedade de preenchimento, ao contrário da propriedade de margem, funciona verticalmente em elementos de nível interno. Esse preenchimento vertical pode se misturar na linha acima ou abaixo do elemento dado, mas será exibido.
Margem e preenchimento em elementos de nível interno
Os elementos de nível interno são afetados um pouco diferente dos blocos e elementos do bloco em linha quando se trata de margens e preenchimento. As margens apenas funcionam horizontalmente, esquerda e direita, nos elementos de nível interno. O preenchimento funciona em todos os quatro lados dos elementos do nível in-line, no entanto, o preenchimento vertical - a parte superior e inferior - pode sangrar nas linhas acima e abaixo de um elemento.
Margens e trabalho de preenchimento, como o normal para blocos e elementos de bloqueio em linha.
Declarações de Margem e Recheio
No CSS, há mais de uma maneira de declarar valores para certas propriedades. Nós podemos usar longos pontos, listando várias propriedades e valores um após o outro, em que cada valor possui a sua própria propriedade. Ou podemos usar uma abreviatura, listando vários valores com uma propriedade. Nem todas as propriedades têm uma alternativa abreviada, portanto, devemos ter certeza de que estamos a usar a propriedade correta e a estrutura de valor.
As propriedades de margem e preenchimento vêm de forma longa e estenográfica. Ao usar a propriedade de margem abreviada para definir o mesmo valor para os quatro lados de um elemento, especificamos um valor:
div {
margin: 20px;
}
Para definir um valor para a parte superior e inferior e outro valor para os lados esquerdo e direito de um elemento, especifique dois valores: superior e inferior primeiro, depois esquerdo e direito. Aqui colocamos margens de 10 pixels na parte superior e inferior de um
div {
margin: 10px 20px;
}
Para definir valores únicos para os quatro lados de um elemento, especifique esses valores na ordem superior, direita, inferior e esquerda, movendo-se no sentido horário. Aqui colocamos margens de 10 pixels no topo de um
div {
margin: 10px 20px 0 15px;
}
Usar a margem ou a propriedade de preenchimento sozinho, com qualquer número de valores, é considerada taquigrafia. Com o comprimento, podemos definir o valor de um lado de cada vez usando propriedades únicas. Cada nome de propriedade (neste caso, margem ou preenchimento) é seguido por um traço e o lado da caixa ao qual o valor deve ser aplicado: superior, direito, inferior ou esquerdo. Por exemplo, a propriedade padding-left aceita apenas um valor e configurará o preenchimento esquerdo para esse elemento; A propriedade margin-top aceita apenas um valor e irá definir a margem superior para esse elemento.
div {
margin-top: 10px;
padding-left: 6px;
}
Quando desejamos identificar apenas uma margem ou valor de preenchimento, é melhor usar as propriedades longas. Isso mantém o código explícito e ajuda a evitar qualquer confusão na estrada. Por exemplo, nós realmente queremos definir os lados superior, direito e esquerdo do elemento para ter margens de 0 pixels, ou realmente realmente queremos definir a margem inferior para 10 pixels? O uso de propriedades e valores de longo prazo ajuda a tornar nossas intenções claras. Ao lidar com três ou mais valores, a taquigrafia é incrivelmente útil.
Cores de margem e preenchimento
As propriedades de margem e preenchimento são completamente transparentes e não aceitam valores de cor. Sendo transparentes, eles mostram as cores de fundo dos elementos relativos. Para as margens, vemos a cor de fundo do elemento pai e, para preenchimento, vemos a cor de fundo do elemento ao qual o preenchimento é aplicado.
Bordas
As bordas caem entre o preenchimento e a margem, fornecendo um contorno em torno de um elemento. A propriedade das bordas requerem três valores: largura, estilo e cor. Os valores de taquigrafia para a propriedade de margens são indicados na ordem largura, estilo, cor. Por sua vez, esses três valores podem ser divididos nas propriedades de largura, largura e cor de bordas. Essas propriedades longas são úteis para alterar ou substituir um único valor de margem.
A largura e a cor das margens podem ser definidas usando unidades CSS comuns de comprimento e cor, conforme discutido na Lição 3.
As bordas podem ter aparências diferentes. Os valores de estilo mais comuns são sólidos, duplos, tracejados, pontilhados e nenhuns, mas existem vários outros para escolher.
Aqui está o código para um limite de 6 pixels de largura, sólido e cinza, que envolve todos os quatro lados de um
div {
border: 6px solid #949599;
}
Bordas Demo
Lados da margem individual
Tal como acontece com as propriedades de margem e preenchimento, as bordas podem ser colocadas de um lado de um elemento de cada vez, se quisermos. Isso requer novas propriedades: border-top, border-right, border-bottom e border-left. Os valores dessas propriedades são iguais aos da propriedade de fronteira sozinho: largura, estilo e cor. Se quisermos, podemos fazer uma borda aparecer apenas na parte inferior de um elemento:
div {
border-bottom: 6px solid #949599;
}
Além disso, estilos para os lados das bordas individuais podem ser controlados num nível ainda mais fino. Por exemplo, se quisermos alterar apenas a largura da borda inferior, podemos usar o seguinte código:
div {
border-bottom-width: 12px;
}
Essas propriedades de borda larga e altamente específicas incluem uma série de palavras separadas por hífen que começam com a base de borda, seguidas do lado seleccionado, direito, inferior ou esquerdo e, em seguida, largura, estilo ou cor, dependendo da propriedade desejada.
Raio da borda
Enquanto estamos a ver as bordas e as suas diferentes propriedades, precisamos examinar a propriedade do raio da borda, o que nos permite arredondar os cantos de um elemento.
A propriedade do limite de borda aceita unidades de comprimento, incluindo percentagens e pixeis, que identificam o raio pelo qual os cantos de um elemento devem ser arredondados. Um valor único irá arredondar os quatro cantos de um elemento igualmente os dois valores arredondaram os cantos superior-esquerdo, inferior direito e superior-direito / inferior esquerdo nessa ordem, quatro valores iram rodar os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo nessa ordem.
Ao considerar a ordem em que múltiplos valores são aplicados na propriedade do limite da borda (bem como as propriedades de margem e preenchimento), lembre-se de que eles se movem no sentido horário, começando no canto superior esquerdo de um elemento.
div {
border-radius: 5px;
}
Raio da borda Demo
A propriedade do raio da borda também pode ser dividida em propriedades longas que nos permitem alterar os raios dos cantos individuais de um elemento. Essas propriedades longas começam com a borda, continuam com a localização vertical do canto (superior ou inferior) e a localização horizontal do canto (esquerda ou direita) e depois terminam com o raio. Por exemplo, para alterar o raio do canto superior direito de um <div>, a propriedade do limite superior do raio direito pode ser usada.
div {
border-top-right-radius: 5px;
}
Dimensão da caixa
Até agora, o modelo de caixa foi um design aditivo. Se você definir a largura de um elemento para 400 pixels, em seguida, adicionar 20 pixels de preenchimento e uma borda de 10 pixels em cada lado, a largura total real do elemento torna-se 460 pixels. Lembre-se, que precisamos adicionar os valores de largura, preenchimento e propriedades de borda em conjunto para obter a largura real, total de um elemento.
O modelo de caixa pode, no entanto, ser alterado para suportar diferentes cálculos. O CSS3 introduziu a propriedade box-sizing, que nos permite mudar exatamente como o modelo de caixa funciona e como o tamanho de um elemento é calculado. A propriedade aceita três valores principais: caixa de conteúdo, caixa de preenchimento e caixa de borda, cada um dos quais tem um impacto ligeiramente diferente sobre como o tamanho da caixa é calculado.
Conteúdo da caixa
O valor da caixa de conteúdo é o valor padrão, deixando o modelo de caixa como um design aditivo. Se não usarmos a propriedade de dimensão da caixa, esse será o valor padrão para todos os elementos. O tamanho de um elemento começa com as propriedades de largura e altura, em seguida, quaisquer valores de preenchimento, borda ou margem são adicionados a partir daí.
div {
-webkit-box-sizing: content-box;
`-moz-box-sizing: content-box;`
`box-sizing: content-box;`
}
Propriedades e valores específicos do browser
Quais são esses guias e letras na propriedade de tamanho de caixa?
À medida que o CSS3 foi introduzido, os browsers gradualmente começaram a suportar diferentes propriedades e valores, incluindo a propriedade de dimensionamento de caixa, por meio de prefixos de fornecedores. À medida que as partes da especificação CSS3 são finalizadas e novas versões do browser são lançadas, esses prefixos de fornecedores tornam-se cada vez menos relevantes. Com o passar do tempo, é improvável que os prefixos dos fornecedores sejam um problema, no entanto, eles ainda fornecem suporte para alguns dos browsers mais antigo. Podemos executá-los de tempos em tempos, e talvez possamos usá-los se desejarmos oferecer suporte a browsers mais antigos.
Os prefixos do fornecedor podem ser vistos em ambas as propriedades e valores, tudo dependendo da especificação CSS. Aqui, eles são exibidos na propriedade de dimensão da caixa. Os vendedores do browser foram livres para escolher quando usar um prefixo e quando não. Assim, algumas propriedades e valores requerem prefixos de fornecedores para determinados vendedores de browser, mas não para outros.
Avançar, quando uma propriedade ou valor precisa de um prefixo de fornecedor, o prefixo só será usado na introdução dessa propriedade ou valor. Não se esqueça de adicionar os prefixos de fornecedor necessários quando realmente está a escrever o código.
Para referência, os prefixos de fornecedores mais comuns são descritos aqui:
- Mozilla Firefox: -moz-
- Microsoft Internet Explorer: -ms-
- Webkit (Google Chrome and Apple Safari): -webkit-
Caixa de preenchimento
O valor da caixa de preenchimento altera o modelo da caixa, incluindo quaisquer valores de propriedades de preenchimento dentro da largura e altura de um elemento. Ao usar o valor da caixa de preenchimento, se um elemento tiver uma largura de 400 pixels e um preenchimento de 20 pixels ao redor de cada lado, a largura real permanecerá em 400 pixels. À medida que os valores de preenchimento aumentam, o tamanho do conteúdo dentro de um elemento diminui proporcionalmente.
Se adicionarmos uma borda ou margem, esses valores serão adicionados às propriedades de largura ou altura para calcular o tamanho total da caixa. Por exemplo, se adicionarmos uma borda de 10 pixels e um preenchimento de 20 pixels ao redor de cada lado do elemento com uma largura de 400 pixels, a largura total real se tornará 420 pixels.
div {
box-sizing: padding-box;
}
O valor da caixa de preenchimento foi omitido
À medida que a especificação CSS evoluiu, o valor da caixa de preenchimento para a propriedade de dimensionamento de caixa foi obsoleto e não deve ser usado.
Borda da Caixa
Por fim, o valor da borda da caixa altera o modelo da caixa de modo a que quaisquer valores de propriedades da borda ou preenchimento sejam incluídos dentro da largura e altura de um elemento. Ao usar o valor da caixa da borda, se um elemento tiver uma largura de 400 pixels, um preenchimento de 20 pixels ao redor de cada lado e uma borda de 10 pixels ao redor de cada lado, a largura real permanecerá em 400 pixels.
Se adicionarmos uma margem, esses valores precisaram de ser adicionados para calcular o tamanho total da caixa. Não importa qual valor de propriedade de dimensão da caixa seja usado, quaisquer valores de margem precisaram de ser adicionados para calcular o tamanho completo do elemento.
div {
box-sizing: border-box;
}
Escolher o tamanho da caixa
De um modo geral, o melhor valor de tamanho de caixa para usar é border-box. O valor da caixa da borda torna a nossa matemática muito, muito mais fácil. Se quisermos que um elemento tenha 400 pixels de largura é, ele permanecerá com 400 pixels de largura, independentemente do preenchimento ou valores de borda que adicionamos a ele.
Além disso, podemos facilmente misturar valores de comprimento. Digamos que queremos que nossa caixa seja de 40% de largura. Adicionar um preenchimento de 20 pixels e uma borda de 10 pixels ao redor de cada lado de um elemento não é difícil e ainda podemos garantir que a largura real da nossa caixa permanecerá 40% apesar de usar valores de pixel em outros lugares.
A única desvantagem para usar a propriedade box-sizing é que, como parte da especificação CSS3, não é suportada em todos os browsers. Particularmente, não possui suporte em browsers mais antigos. Felizmente, isso tornasse cada vez menos relevante à medida que novos browsers são lançados. É provável que possamos usar a propriedade box-sizing, mas devemos notar quaisquer problemas, vale a pena procurar em que browser esses problemas estão a acontecer.
Ferramentas de desenvolvimento
A maioria dos browsers tem o que são conhecidos como Ferramentas para quem quer desenvovler. Essas ferramentas permitem-nos inspecionar um elemento numa página, ver onde esse elemento vive no documento HTML e ver quais são as propriedades e valores CSS que a ser aplicados a ele. A maioria dessas ferramentas também inclui um diagrama de modelo de caixa para mostrar o tamanho calculado de um elemento.
Para ver as Ferramentas do desenvolvedor no Google Chrome, clique em "Exibir" dentro da barra de menus e navegue até "Desenvolvedor" e depois "Ferramentas do desenvolvedor". Isso carrega uma gaveta na parte inferior da janela do navegador que fornece um punhado de ferramentas para inspecionar nosso código.
Clicando na lupa na parte inferior desta gaveta permite-nos passar o rato sobre e depois clicar em diferentes elementos na página para rever mais informações sobre eles.
Depois de selecionar um elemento, veremos um punhado de guias no lado direito do painel Elementos dentro das nossas Ferramentas do desenvolvedor. Selecionar o separador "Computação" vai nos mostrar uma quebra do modelo de caixa para o nosso elemento selecionado.
Utilize as Ferramentas do desenvolvedor, seja no Google Chrome, Mozilla Firefox, Apple Safari ou outros browsers. Há muito a aprender com o nosso código. Geralmente deixamos as Ferramentas do desenvolvedor abertas o tempo todo ao escrever HTML e CSS. E eu frequentemente inspecionar o código de outros sites para ver como eles são construídos também.
O modelo de caixa é uma das partes mais confusas de aprender a escrever HTML e CSS. É também uma das partes mais poderosas do HTML e do CSS, e uma vez que o dominamos, a maioria dos outros - como o conteúdo de posicionamento - virá com bastante facilidade.
Na prática
Vamos voltar ao nosso site da Conferência Styles para centrá-lo na página e adicionar mais conteúdo.
- Vamos começar por ajustar o tamanho da nossa caixa para usar a versão da caixa de borda do modelo da caixa, o que tornará o tamanho de todos os nossos elementos muito mais fácil. Dentro do nosso arquivo main.css, logo abaixo do nosso reset, vamos adicionar um comentário para identificar o código para o que será a nossa grade e ajudar a determinar o layout do nosso site. Estamos a colocar isso abaixo do nosso reset para que ele caia na posição correta dentro da cascata.
A partir daí, podemos usar o seletor universal, , juntamente com pseudo-elementos universais, : antes e *: depois, para selecionar todos os elementos imagináveis e alterar o tamanho da caixa para a caixa de borda. Lembre-se, vamos querer incluir os prefixos de fornecedor necessários para a propriedade box-sizing, pois é uma propriedade relativamente nova.
/*
========================================
Grid
========================================
*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
`-moz-box-sizing: border-box;`
`box-sizing: border-box;`
}
- Em seguida, queremos criar uma classe que servirá como um recipiente para nossos elementos. Podemos usar essa classe de conteúdo em diferentes elementos para definir uma largura comum, centrar os elementos na página e aplicar algum preenchimento horizontal comum.
Logo abaixo do nosso conjunto de regras de seletor universal, vamos criar um seletor com uma classe de conteúdo. Dentro deste selector vamos definir a nossa largura para 960 pixels, o preenchimento esquerdo e direito para 30 pixels, as margens superior e inferior para 0 e as margens esquerda e direita para auto.
Definir uma largura diz ao browser definitivamente como é amplo qualquer elemento com a classe de recipiente. Usando uma margem de auto esquerda e direita em conjunto com essa largura, o browser descobre automaticamente as margens esquerda e direita iguais para o elemento, centralizando-o na página. Por fim, o preenchimento esquerdo e direito garante que o conteúdo não esteja diretamente na borda do elemento e oferece um pouco de espaço para o conteúdo.
.container {
margin: 0 auto;
padding-left: 30px;
padding-right: 30px;
width: 960px;
}
- Agora que temos uma classe de conteúdo disponível para usar, vamos em frente e apliquemos a classe de conteúdo em todo o HTML para os elementos
<header>e<footer>em cada página, incluindo o index.html, speakers.html, schedule.html , local.html e register.html arquivos.
<header class="container">...</header>
<footer class="container">...</footer>
- Enquanto estivermos nisso, vamos continuar e centrar o resto do conteúdo nas páginas. Na página inicial, no arquivo index.html, vamos adicionar a classe de conteúdo a cada elemento
<section>na página, um para nossa secção de heróis (a secção que apresenta a conferência) e uma para a secção de provocações.
<section class="container">...</section>
Além disso, vamos embrulhar todos os elementos <h1> em cada página com um elemento <section> com a classe de conteúdo.
<section class="container">
<h1>...</h1>
</section>
Vamos voltar e ajustar esses elementos e classes mais tarde, por enquanto, estamos a ir na direção certa.
- Agora que todo o nosso conteúdo está centrado, vamos criar algum espaço vertical entre os elementos. Para começar, coloque uma margem inferior de 22 pixels em alguns dos elementos de título e parágrafo. Vamos colocar e comentar esses estilos de tipografia abaixo dos estilos de grade.
/*
========================================
Typography
========================================
*/
h1, h3, h4, h5, p {
margin-bottom: 22px;
}
Nós ignoramos intencionalmente os elementos <h2> e <h6>, pois o design não exige margens em elementos <h2> e, como não vamos usar os elementos <h6> neste momento.
- Vamos também tentar criar uma borda e alguns cantos arredondados. Começamos por colocar um botão dentro do elemento
<section>superior na página inicial, logo por baixo do cabeçalho.
Anteriormente, adicionamos um elemento <a> neste elemento <section>. Vamos adicionar as classes de btn e btn-alt a esta âncora.
<a class="btn btn-alt">...</a>
Agora vamos criar alguns estilos para essas classes dentro do nosso CSS. Abaixo do conjunto de regras de tipografia, vamos criar uma nova secção do arquivo CSS para botões.
Para começar, vamos adicionar a classe btn e aplicar alguns estilos comuns que podem ser compartilhados em todos os botões. Queremos que todos os botões tenham um raio de limite de 5 pixels. Eles devem ser exibidos como elementos do bloco em linha para que possamos adicionar preenchimento em torno de todos os quatro lados sem problema e remover qualquer margem.
/*
========================================
Buttons
========================================
*/
.btn {
border-radius: 5px;
display: inline-block;
margin: 0;
}
Nós também queremos incluir estilos específicos para este botão, o que faremos usando a classe btn-alt. Aqui vamos adicionar um limite de 1 pixel, sólido e cinza com 10 pixels de preenchimento na parte superior e inferior do botão e 30 pixels de preenchimento à esquerda e à direita do botão.
.btn-alt {
border: 1px solid #dfe2e5;
padding: 10px 30px;
}
O uso de ambas as classes btn e btn-alt no mesmo elemento <a>permite que esses estilos sejam colocados em camadas, renderizando todos os estilos num único elemento.
- Como estamos a trabalhar na página inicial, adicione também um pouco de preenchimento ao elemento
<section>que contém o elemento<a>com as classes de btn e btn-alt. Faremos isso adicionando um valor de atributo de classe de herói ao elemento<section>, ao lado do valor do atributo de classe de conteúdo, pois esta será a secção principal do nosso site.
<section class="hero container">
...
</section>
Em seguida, queremos criar uma nova secção dentro do arquivo CSS para estilos de página inicial, usaremos a classe de herói para aplicar o preenchimento em torno de todos os quatro lados do elemento <section>.
/*
========================================
Home
========================================
*/
.hero {
padding: 22px 80px 66px 80px;
}
O site está a começar a unir-se, especialmente a página inicial.
Demo & Source Code
Abaixo, pode visualizar o site da Conferência Styles no seu estado atual, bem como fazer download do código-fonte do site no seu estado atual.
O Seletor Universal
No primeiro passo deste exercício, fomos apresentados ao seletor universal. Em CSS, o asterisco, *, é o seletor universal, que seleciona cada elemento. Em vez de listar todos os elementos imagináveis, podemos usar o asterisco como um catch-all para selecionar todos os elementos para nós.
O: antes e : depois de pseudo-elementos também mencionados nesta etapa são elementos que podem ser gerados dinamicamente com CSS. Não vamos usar esses elementos dentro do nosso projeto. No entanto, ao usar o seletor universal, é uma boa prática incluir também esses pseudo-elementos caso eles nunca apareçam.
Sumário
Aprender todas as partes diferentes do modelo de caixa não é um feito pequeno. Esses conceitos, embora brevemente apresentados, levam um pouco de tempo para dominar completamente, e estamos no caminho certo para fazê-lo.
Em resumo, nesta lição, falámos sobre o seguinte:
- Como os diferentes elementos são exibidos;
- Qual é o modelo da caixa e porque é importante?;
- Como alterar o tamanho, incluindo a altura e largura, de elementos;
- Como adicionar margem, preenchimento e bordas aos elementos;
- Como alterar a dimensão da caixa dos elementos e os efeitos que isto tem no modelo da caixa.
Agora que temos uma melhor compreensão de como os elementos são exibidos e dimensionados, é hora de se mover para posicionar esses elementos.