Propriedades do Bloco de Cascading Style Sheets (CSS)

propriedades do bloco controlar o alinhamento e espaçamento dos objetos em uma página por meio de suas marcas e atributos. Blocos incluir texto, conteúdo tags de 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, use qualquer número positivo ou negativo na 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 aumentar ou diminuir uniformemente o espaço entre os caracteres pela especificação de 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-. Note-se que alterando a letter-spacing atributo substitui qualquer justificação do texto preexistente.

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: top.

p {vertical-align: top}

text-align: 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 na 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 textuais em uma página, não é recomendável que você usar a tag, porque esta tag foi preterido. 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 tal como foi codificado, ou nowrap para forçar qualquer texto para embrulhar apenas se o código tem quebra de linha (
) Tag.

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.

p {display: none; }

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

  • 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 outros, assim como com uma CSS secundário para o tipo de mídia de impressão.

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

  • quadraEste transforma qualquer elemento denominado em um bloco, após o qual pode ser aplicado mais atributos de bloco de estilo. elementos de bloco ocupam a largura total do espaço disponível, incluindo o espaço em linha acima e abaixo do elemento, semelhante à maneira como parágrafos têm espaço acima e abaixo delas.

  • 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 se tornar um 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-block: 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 suportado. Na verdade, ele já pode ser preterido, mas isso não pode ser confirmado neste momento. Quando especificado, este atributo obriga outros blocos no código depois que ele para exibir ao longo do seu lado.

  • marcador: Isso converte o conteúdo em um bloco de exibição em 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 mesa sem ter que usar tabelas HTML. Em teoria, quaisquer elementos aninhados iria mostrar como se fossem table-row e tabela de células elementos. valores adicionais da tabela de exibição para esta propriedade são inline-table, table-row-group, table-header-group, table-footer-grupo, table-row, table-column-grupo, tabela de coluna, tabela de células, e table-caption.

    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 essa opção, o objeto denominado herda o valor de exibição de seu elemento pai.

Os blocos são uma das categorias de propriedades que têm 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 visualização, analise as páginas de informação bloco no site do W3C.

Semelhante

menu