CSS – Fundamentos Básicos

CSS - Fundamentos Básicos
- Lecture 1
  CSS – Tutorial
- Lecture 2
  CSS – Introdução
- Lecture 3
  CSS – Sintaxe
- Lecture 4
  CSS – Unidades de medida
- Lecture 5
  CSS – Cores
- Lecture 6
  CSS – Backgrounds
- Lecture 7
  CSS – Fonts
  30 min
- Lecture 8
  CSS – Text
- Lecture 9
  CSS – Usando imagens
  30 min
- Lecture 10
  CSS – Links
- Lecture 11
  CSS – Tabelas
  30 min
- Lecture 12
  CSS – Bordas
- Lecture 13
  CSS – Listas
  30 min
- Lecture 14
  CSS – Margins
- Lecture 15
  CSS – Paddings
  30 min
- Lecture 16
  CSS – Cursores
  30 min
- Lecture 17
  CSS – barras de rolagem
- Lecture 18
  CSS – Dimensão
  30 min
- Lecture 19
  CSS – Outlines
  30 min

CSS – Fundamentos Básicos

CSS – Listas

As listas são muito úteis para transmitir um conjunto de pontos numerados ou marcadores. Este capítulo ensina como controlar o tipo, a posição, o estilo da lista, etc., usando CSS.

Temos as seguintes cinco propriedades CSS, que podem ser usadas para controlar listas:

O tipo de estilo de lista permite controlar a forma ou aparência do marcador.
A posição do estilo de lista especifica se um ponto longo que passa para uma segunda linha deve se alinhar com a primeira linha ou começar abaixo do início do marcador.
O list-style-image especifica uma imagem para o marcador em vez de um marcador ou número.
O estilo de lista atua como um atalho para as propriedades anteriores.
O deslocamento do marcador especifica a distância entre um marcador e o texto na lista.

Agora, veremos como usar essas propriedades com exemplos.

A propriedade list-style-type

A propriedade list-style-type permite controlar a forma ou o estilo do marcador (também conhecido como marcador) no caso de listas não ordenadas e o estilo dos caracteres de numeração em listas ordenadas.

Aqui estão os valores que podem ser usados para uma lista não ordenada:

Sr.No.	Value & Description
1	none NA
2	disc (default) A filled-in circle
3	circle An empty circle
4	square A filled-in square

Aqui estão os valores, que podem ser usados para uma lista ordenada:

Value	Description	Example
decimal	Número	1,2,3,4,5
decimal-leading-zero	0 antes do número	01, 02, 03, 04, 05
lower-alpha	Caracteres alfanuméricos minúsculos	a, b, c, d, e
upper-alpha	Caracteres alfanuméricos maiúsculos	A, B, C, D, E
lower-roman	Números romanos minúsculos	i, ii, iii, iv, v
upper-roman	Algarismos romanos maiúsculos	I, II, III, IV, V
lower-greek	O marcador é grego inferior	alpha, beta, gamma
lower-latin	O marcador é latim inferior	a, b, c, d, e
upper-latin	O marcador é latim maiúsculo	A, B, C, D, E
hebrew	O marcador é uma numeração hebraica tradicional
armenian	O marcador é a numeração armênia tradicional
georgian	O marcador é a numeração tradicional da Geórgia
cjk-ideographic	O marcador são números ideográficos simples
hiragana	O marcador é hiragana	a, i, u, e, o, ka, ki
katakana	O marcador é katakana	A, I, U, E, O, KA, KI
hiragana-iroha	O marcador é hiragana-iroha	i, ro, ha, ni, ho, he, to
katakana-iroha	O marcador é katakana-iroha	I, RO, HA, NI, HO, HE, TO

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

A propriedade list-style-position

A propriedade list-style-position indica se o marcador deve aparecer dentro ou fora da caixa que contém os marcadores. Pode ter um dos dois valores:

Sr.No.

Value & Description

none

inside

Se o texto for para uma segunda linha, o texto será quebrado abaixo do marcador. Ele também aparecerá recuado onde o texto teria começado se a lista tivesse um valor de fora.

outside

Se o texto for para uma segunda linha, o texto será alinhado com o início da primeira linha (à direita do marcador).

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

A propriedade list-style-image

O list-style-image permite que você especifique uma imagem para que possa usar seu próprio estilo de marcador. A sintaxe é semelhante à propriedade background-image com as letras url iniciando com o valor da propriedade seguido pelo URL entre colchetes. Se não encontrar a imagem fornecida, serão usados marcadores padrão.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

A propriedade em estilo de lista

O estilo de lista permite que você especifique todas as propriedades da lista em uma única expressão. Essas propriedades podem aparecer em qualquer ordem.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

A propriedade do marcador-offset

A propriedade marker-offset permite que você especifique a distância entre o marcador e o texto relacionado a esse marcador. Seu valor deve ser um comprimento, conforme mostrado no exemplo a seguir –

Infelizmente, essa propriedade não é compatível com IE 6 ou Netscape 7.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Anterior CSS – Bordas

Próximo CSS – Margins

CSS - Fundamentos Básicos