Lista e Propriedades de extensão de Cascading Style Sheets (CSS)
Listas de estilo com folhas de estilo em cascata (CSS) são muito mais robusto do que as listas de estilo com padrão de formatação de lista HTML. Com CSS, você pode facilmente selecionar o tipo de lista para ambas as listas numeradas e com marcadores, defina a posição das balas relativos ao conteúdo dentro da lista, e até mesmo optar por usar seu próprio gráfico para a imagem bala.
list-style-type: Para listas ordenadas, definir o tipo de lista para decimal, lower-roman, upper-roman, inferior-alfa, superior-alfa, ou Nenhum. Ao criar listas não ordenadas, escolha o disco, círculo, ou quadrado Tipo de lista. A ilustração mostra exemplos de cada um desses tipos de lista.
li {list-style-type: Circle-}list-style-image: Para usar sua própria imagem personalizada como uma bala, digite o local eo nome do arquivo da imagem desejada como um atributo para a marca de lista desordenada. Você também pode remover a parte bala da lista de estilo usando o valor da propriedade Nenhum.
ul {list-style-image: url (images / mybullet.gif) -}Para criar uma lista com gráficos diferentes para cada item da lista, criar estilos personalizados para cada item da lista e, em seguida, anexar cada tag com a correspondência classe atributo, conforme ilustrado abaixo e mostrado no seguinte exemplo de código, o que também faz com que cada item na lista de um hiperlink:
.redarrow {list-style-image: url (redarrow.gif) -} bluearrow. {list-style-image: url (bluearrow.gif) -}list-style-position: Com a propriedade de posição, você pode posicionar a bala em relação ao conteúdo dentro de cada item da lista. A posição pode ser localizado dentro ou fora do texto. Tal como ilustrado abaixo, quando ajustado para dentro, o texto é moldado sob a bala ao longo da margem esquerda, e quando ajustado para lado de fora, a bala permanece fora de qualquer texto envolvido, como um recuo deslocado.
li {list-style-position: fora-}Com as propriedades de extensão, você pode mudar a maneira que o cursor é exibido em diferentes circunstâncias, criar quebras de página e adicionar filtros de efeitos especiais a certos elementos na página.
Infelizmente, desde a sua criação, muito poucos deles são suportadas pelos navegadores mais populares. Se você gostaria de usar qualquer um desses atributos, testá-los em tantos navegadores como você pode em plataformas Mac e PC para se certificar de que eles trabalham e / ou não de uma forma aceitável.
-Page-break antes/-depois de: Este atributo força uma quebra de página ao imprimir uma página, antes ou após o objeto de estilo com esse atributo. Escolher esquerda, certo, sempre, ou auto para valores antes e / ou depois de o objecto denominado desejado, como a seguir:
# Sidebar3 {-page-break antes:-sempre-page break-after: left;}cursor: Você pode especificar um cursor diferente para aparecer quando um visitante passa o mouse sobre um objeto que é denominado com este atributo. Escolha a partir de mira, texto, esperar, padrão, Socorro, e-redimensionamento, ne-redimensionamento, n-redimensionamento, nw-redimensionamento, w-redimensionamento, sw-resize, s-redimensionamento, se-redimensionamento, e auto.
Há também 15 novas opções de cursor CSS3, todos os quais trabalham na versão mais recente do Firefox, Chrome, Safari, Opera e IE9 +: Nenhum, menu contextual, célula, -Texto vertical, aliás, cópia, não-gota, não permitido, ew-redimensionamento, ns-de redimensionamento, news-redimensionamento, NWSE-redimensionamento, col-redimensionamento, row-redimensionamento, e tudo-scroll. Para ver exemplos destes cursores em ação, visita Sitepoint.
#helpmenu {cursor: ajuda-}filtro: Você pode escolher entre vários filtros de efeitos especiais, incluindo Alpha, BlendTrans, Blur, Chroma, DropShadow, fliph (flip horizontal), flipv (flip vertical), Glow, cinza, Invert, Luz, Máscara, revealTrans, Sombra, Onda, e Raio X. A maioria dos filtros requerem entrada numérica, tal como a máscara de filtro, o qual deve conter o valor hexadecimal da cor para a máscara, como em Filtro: Mask (Color = # FFCC33) -.
#details {filtro: Invert}Embora seja verdade que estes filtros podem fazer algumas coisas legais e incomuns, por mais tempo que eles não têm trabalhado em quaisquer outras que o IE navegadores. Para ver um exemplo de alguns desses filtros, abra o seguinte link dentro de um navegador IE: Xentrik. Felizmente, muitos destes filtros foram reinventados como novos estilos CSS3 que têm muito melhor suporte ao navegador.