Propriedades do bloco de folhas de estilo em cascata (css)

propriedades do bloco controlar o alinhamento e espaçamento de objetos em uma página por meio de suas marcas e atributos. Blocos incluir texto, conteúdo marcas dentro (com e sem posições especificadas), tags usando o display: block

estilo, e imagens ou parágrafos definido com posições absolutas ou relativas.

word-spacing: Para ajustar o espaçamento entre as palavras individuais, usar qualquer número positivo ou negativo em px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros), cm (centímetros), em (EMS), ex (Exs), ou % (Percentagem), tal como word-spacing: 2px;.

p {word-spacing: 2px; }

letter-spacing: Com este atributo, é possível uniformemente aumentar ou diminuir o espaço entre os caracteres, especificando um valor positivo ou negativo em px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros), cm (centímetros), em (EMS), ex (Exs), ou % (Percentagem), tal como letter-spacing: 1em-. Observe que alterar o letter-spacing atributo substitui qualquer justificação do texto preexistente.

Video: 05 - Introdução a Folhas de Estilos em Cascata CSS

p {letter-spacing: 1.5em-}

vertical-align: Você pode alinhar verticalmente texto ao longo da linha de base de texto, sub (subscrito), super (sobrescrito), topo, text-top, meio, inferior, e text-bottom, ou por qualquer valor, positivo ou negativo, em px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros), cm (centímetros), em (EMS), ex (Exs), ou % (Percentagem), tal como vertical-align: topo-.

p {vertical-align: topo-}

alinhamento de texto: Esta opção só pode ser aplicado ao texto. opções de alinhamento incluem esquerda, certo, centro, ou justificar.

p {text-align: center,}

text-indent: Também para ser usado apenas com texto, esta regra de estilo cria um recuo de primeira linha, que pode ser configurado para qualquer valor positivo ou negativo em px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros), cm (centímetros), em (EMS), ex (Exs), ou % (Percentagem), tal como text-indent: 12px;.

Para recuar objetos não-texto em uma página, não é recomendável que você usar o

tag, porque essa tag ficou obsoleta. Em vez disso, adicione um recuo usando margem e / ou estilo de preenchimento atributos.

p {text-indent: 10px; }

white-space: O espaço em branco dentro ou ao redor do texto em qualquer elemento nível de bloco pode ser exibida em três maneiras diferentes: normal, pré, e nowrap. Escolher normal ignorar qualquer espaço em branco, pré para deixar o espaço em branco com o texto como ele foi codificado, ou nowrap para forçar qualquer texto para embrulhar apenas se o código tem quebra de linha () tags.

p {white-space: pre-}

exibição: Este atributo controla como o objeto exibe estilo no navegador. opções de valor são quadra, compactar, na linha, list-item, marcador, Nenhum, correr em, e mesa.

Video: Curso Grátis de CSS - Aula 04 - Integrando uma folha de estilo CSS em documento HTML

p {display: nenhuma; }

Escolha a partir de qualquer uma das seguintes configurações:

Video: Curso Prático Web Design - Módulo 1 - Aula 4: Folhas de Estilo em Cascata (CSS)

• Nenhum: Use esta opção para ocultar um elemento de estilo de exibir no navegador. Esta opção é extremamente útil na criação de várias folhas de estilo de modo que alguns elementos podem ser escondido da vista em um dispositivo, mas não outra, como acontece com a CSS secundário para o tipo de mídia de impressão.

• na linha: Use esta opção para exibir o objeto de estilo em linha com outros elementos, muitas vezes no mesmo bloco, como em fazer itens da lista de exibição em uma única linha.

  Video: CURSO CSS - AULA 01 ( Estilo Interno e Externo - Estrutura)

• quadra: Esta transforma qualquer elemento denominado num bloco, após o que podem ser aplicados outros atributos bloco-styling. elementos nível de bloco ocupam toda a largura do espaço disponível, incluindo espaço de linha acima e abaixo do elemento, semelhante à maneira como parágrafos tem espaço acima e abaixo deles.

• list-item: Esta opção converte texto com estilo em uma lista unbulleted, semelhante ao

e tags.

• correr em: Este recurso é ou não suportado, suporte incompleto, ou totalmente suportado, dependendo do browser. Atualmente, os navegadores que oferecem suporte completo incluem Safari, Chrome, IE 8 +, e Opera 5+. Adicione o correr em atributo para forçar uma caixa de bloco a seguir uma caixa de run-in para tornar-se uma caixa em linha da caixa de bloco.

  Um uso interessante é fazer linha de base de um cabeçalho compartilhar a mesma linha de base como a primeira linha de um seguinte bloco de texto do parágrafo.

• inline-bloco: Use esta opção para fazer uma comportam bloco como um bloco em linha com uma largura especificada.

• compactar: Esta opção é um ainda bastante buggy e é atualmente apenas a esmo suportados. Na verdade, ele já pode ser obsoleto, mas isso não pode ser confirmado neste momento. Quando especificado, este atributo obriga outros blocos no código depois de exibir ao longo de seu lado.

• marcador: Este converte conteúdo em um bloco de visualização para uma caixa de marcador, usando o :antes ou :depois de pseudo-elemento, dentro do qual você pode estilizar ainda mais o conteúdo.

• mesa: Use este atributo para exibir elementos dentro de uma tabela sem ter que usar tabelas HTML. Em teoria, quaisquer elementos aninhados iria mostrar como se fossem linha da tabela e tabela de células elementos. Os valores adicionais da tabela de exibição para esta propriedade são inline-mesa, tabela-linha-grupo, tabela-cabeçalho-grupo, table-footer-group, linha da tabela, tabela de coluna-grupo, tabela de coluna, tabela de células, e tabela-subtítulo.

  Esta propriedade é agora suportado em todos os principais navegadores, incluindo o IE 9 + e IE 8, mas apenas no IE 8, quando não está presente.

• herdar: Quando você especificar esta opção, o objeto denominado herda o valor de exibição de seu elemento pai.

Os blocos são uma das categorias de propriedade que tem um monte de capacidades para além das básicas descritas aqui. Nem todas as propriedades são consistentemente apoiado por todos os navegadores, mas, dependendo do público-alvo, alguns deles podem ser perfeitamente adequado para um projeto web particular. Para saber mais sobre as propriedades de exibição, reveja as páginas de informação bloco no site do W3C.