I) BORDAS
As propriedades para as bordas definem as características (os valores na regra CSS) das quatro bordas. Elas permitem o controle do estilo, da cor e da espessura das bordas de um elemento HTML. Também podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na página.
DEFINIÇÕES
01) border: Atalho para largura, estilo e cor das quatro bordas.
a) border-top: Maneira abreviada para todas as propriedades da borda superior.
b) border-right: Maneira abreviada para todas as propriedades da borda direita.
c) border-bottom: Maneira abreviada para todas as propriedades da borda inferior.
d) border-left: Maneira abreviada para todas as propriedades da borda esquerda.
02) border-color: Definição de uma só vez das cores de bordas para todos os lados.
Os valores são expressos em código ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow" .
a) border-top-color: Cor da borda superior.
b) border-right-color: Cor da borda direita.
c) border-bottom-color: Cor da borda inferior.
d) border-left-color: Cor da borda esquerda.
03) border-width: Definição de uma só vez larguras ou espessuras de bordas para todos os lados. Ela assume os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas espessuras de bordas:
a) border-top-width: Largura da borda superior.
b) border-right-width: Largura da borda direita.
c) border-bottom-widht: Largura da borda inferior.
d) border-left-widht: Largura da borda esquerda.
04) border-style: Atalho para definir de uma só vez estilos de bordas para todos os
lados.
a) border-top-style: Estilo da borda superior.
b) border-right-style: Estilo da borda direita.
c) border-bottom-style: Estilo da borda inferior.
d) border-left-style: Estilo da borda esquerda.
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
Veja como ficou o exemplo no link a seguir:
Obs: Representação do código somente até a quarta borda.
http://pt-br.html.net/tutorials/css/lesson11_ex1.php
É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Veja como ficou a representação do código acima:
Assim como para muitas outras propriedades, você pode usar uma declaração abreviada para bordas. Vamos a um exemplo:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
Pode ser abreviada assim:
p {
border: 1px solid blue;
}
II) MARGENS
A propriedade para margens, define um valor para espessura das margens dos elementos HTML. Vamos começar com um exemplo mostrando como definir margins para o documento. A ilustração a seguir mostra como serão as margens da página.
As CSS são mostradas abaixo:
margin: 100px 40px 10px 70px;
body {
margin: 100px 40px 10px 70px;
}
}
02) margin-top: Define a margem superior.
03) margin-right: Define a margem direita
04) margin-bottom: Define a margem inferior
05) margin-left: Define a margem esquerda.
06) padding: Pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento.
Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida:
h1 {
background: yellow;
}
h2 {
background: orange;
}
Representação: http://pt-br.html.net/tutorials/css/lesson10_ex3.php
Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Representação: http://pt-br.html.net/tutorials/css/lesson10_ex4.php
07) padding-top: Define o espaçamento superior.
08) padding-right: Define o espaçamento à direita.
09) padding-bottom: Define o espaçamento inferior.
10) padding-left: Define o espaçamento à esquerda.
III) CORES E FUNDO
01) color: Define a cor do primeiro plano de um elemento.
02) background: A propriedade background define as características do fundo dos elementos HTML. Com ela você declara várias propriedades de modo abreviado, economizando digitação e alguns bites, além de tornar a folha de estilo mais fácil de se ler e entender.
Ex:
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
bottom;
A declaração abreviada deve seguir a seguinte ordem:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Se uma das propriedades não for declarada ela assume automaticamente o seu valor default. Por exemplo, a propriedade background-attachment e background-position não foram declaradas no código mostrado a seguir:
background: #FFCC66 url("butterfly.gif") no-repeat;
DEFINIÇÕES
01) border: Atalho para largura, estilo e cor das quatro bordas.
a) border-top: Maneira abreviada para todas as propriedades da borda superior.
b) border-right: Maneira abreviada para todas as propriedades da borda direita.
c) border-bottom: Maneira abreviada para todas as propriedades da borda inferior.
d) border-left: Maneira abreviada para todas as propriedades da borda esquerda.
02) border-color: Definição de uma só vez das cores de bordas para todos os lados.
Os valores são expressos em código ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow" .
a) border-top-color: Cor da borda superior.
b) border-right-color: Cor da borda direita.
c) border-bottom-color: Cor da borda inferior.
d) border-left-color: Cor da borda esquerda.
03) border-width: Definição de uma só vez larguras ou espessuras de bordas para todos os lados. Ela assume os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas espessuras de bordas:
a) border-top-width: Largura da borda superior.
b) border-right-width: Largura da borda direita.
c) border-bottom-widht: Largura da borda inferior.
d) border-left-widht: Largura da borda esquerda.
04) border-style: Atalho para definir de uma só vez estilos de bordas para todos os
lados.
Existem vários tipos de bordas disponíveis para escolha. A seguir, eis aqui 8 tipos diferentes de bordas. Todos os exemplos são mostrados na cor "gold" e com espessura "thick", mas você pode usar qualquer cor e espessura ao seu gosto.
Os valores none ou hidden podem ser usados
quando não se deseja a existência de bordas.
a) border-top-style: Estilo da borda superior.
b) border-right-style: Estilo da borda direita.
c) border-bottom-style: Estilo da borda inferior.
d) border-left-style: Estilo da borda esquerda.
EXEMPLOS DE DEFINIÇÃO DE BORDAS
As três propriedades explicadas acima podem ser definidas juntas para cada elemento e resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>, <ul> e <p>. O resultado pode não ser uma obra prima, mas, ilustra bem algumas das inúmeras possibilidades de estilização de bordas:h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
Obs: Representação do código somente até a quarta borda.
http://pt-br.html.net/tutorials/css/lesson11_ex1.php
É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Veja como ficou a representação do código acima:
Diferentes cores de bordas
Assim como para muitas outras propriedades, você pode usar uma declaração abreviada para bordas. Vamos a um exemplo:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
Pode ser abreviada assim:
p {
border: 1px solid blue;
}
II) MARGENS
A propriedade para margens, define um valor para espessura das margens dos elementos HTML. Vamos começar com um exemplo mostrando como definir margins para o documento. A ilustração a seguir mostra como serão as margens da página.
As CSS são mostradas abaixo:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Sintaxe resumida:
body {margin: 100px 40px 10px 70px;
}
Representação: http://pt-br.html.net/tutorials/css/lesson10_ex1.php
As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos então, por exemplo, definir margens para todos os parágrafos <p>:
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;}
Representação: http://pt-br.html.net/tutorials/css/lesson10_ex2.php
DEFINIÇÕES
01) margin: Define de uma só vez o tamanho da margem para todos os lados.02) margin-top: Define a margem superior.
03) margin-right: Define a margem direita
04) margin-bottom: Define a margem inferior
05) margin-left: Define a margem esquerda.
06) padding: Pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento.
Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida:
h1 {
background: yellow;
}
h2 {
background: orange;
}
Representação: http://pt-br.html.net/tutorials/css/lesson10_ex3.php
Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Representação: http://pt-br.html.net/tutorials/css/lesson10_ex4.php
07) padding-top: Define o espaçamento superior.
08) padding-right: Define o espaçamento à direita.
09) padding-bottom: Define o espaçamento inferior.
10) padding-left: Define o espaçamento à esquerda.
III) CORES E FUNDO
01) color: Define a cor do primeiro plano de um elemento.
02) background: A propriedade background define as características do fundo dos elementos HTML. Com ela você declara várias propriedades de modo abreviado, economizando digitação e alguns bites, além de tornar a folha de estilo mais fácil de se ler e entender.
Ex:
background-color: #FFCC66;
background-image: url("butterfly.gif");background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Usando background você consegue o mesmo resultado, abreviando como mostrado abaixo:
background: #FFCC66 url("butterfly.gif") no-repeat fixed rightbottom;
A declaração abreviada deve seguir a seguinte ordem:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Se uma das propriedades não for declarada ela assume automaticamente o seu valor default. Por exemplo, a propriedade background-attachment e background-position não foram declaradas no código mostrado a seguir:
background: #FFCC66 url("butterfly.gif") no-repeat;
As duas propriedades não declaradas assumirão o valor default que como você já sabe são: a imagem rola na tela e será posicionada no canto superior esquerdo (que são os valores default para as propriedades não declaradas).
03) background-color: Define a cor do fundo de um elemento. Você pode aplicar cores de fundo para outros elementos, inclusive para cabeçalhos e textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos <body> e <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex2.php
Notar que foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vírgula.
04) background-image: Define a imagem de fundo.
Eis aqui uma imagem de uma borboleta para exemplificar a aplicação de imagens de fundo. Você pode fazer o download da imagem mostrada abaixo e usá-la nos seus experimentos (clique com o botão direito do mouse sobre a imagem e escolha "salvar imagem como") ou você poderá usar uma outra imagem qualquer ao seu gosto.
Para inserir uma imagem de fundo na página basta aplicar a propriedade background-image ao elemento <body> e especificar o caminho para onde está gravada a imagem.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex3.php
05) background-repeat: Define se e como a imagem de fundo utilizada se repetirá.
No exemplo anterior você observou que a imagem da borboleta repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetição da imagem de fundo.
Agora vejamos os quatro diferentes valores para background-repeat.
01) background-repeat: repeat-x (A imagem se repete na horizontal).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex4.php
02) background-repeat: repeat-y (A imagem se repete na vertical).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex5.php
03) background-repeat: repeat (A imagem se repete em ambas posições).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex6.php
04) background-repeat: no-repeat (A imagem não se repete).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex7.php
Por exemplo, o código mostrado a seguir é para que a imagem não se repita na tela:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex7.php
06) background-attachment: Define se a imagem de fundo utilizada será fixa ou com rolagem. Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao contrário da imagem que não é fixa e rola acompanhando o conteúdo da tela.
A tabela a seguir mostra os quatro diferentes valores para background-attachment. Veja os exemplos para constatar a diferença entre imagem fixa e imegem que rola.
01) background-attachment: scroll (A imagem rola com a página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex8.php
02) background-attachment: fixed (A imagem é fixa).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex9.php
Por exemplo, o código abaixo fixa a imagem na tela.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex9.php
07) background-position: Define a posição do fundo.
Existem várias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador.
As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:
Alguns exemplos:
01) background-position: 2cm 2cm
(A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex10.php
02) background-position: 50% 25%
(A imagem é centrada na horizontal e a um quarto (25%) para baixo na página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex11.php
03) background-position: top right
(A imagem é posicionada no canto superior direito da página)
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex12.php
No exemplo de código a seguir a imagem é posicionada no canto inferior direito da página:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex13.php
IV) FONTES TIPOGRÁFICAS
As propriedades para as fontes, definem as características das letras que constituem os textos dentro dos elementos HTML.
01) font: Atalho para definir de uma só vez todas as propriedades de fonte.
02) font-family: Define a(s) família(s) da fonte.
Existem dois tipos de nomes para definir fontes: nomes para famílias de fontes e nomes para famílias genéricas. Os dois são explicados a seguir:
NOME PARA FAMÍLIAS DE FONTES:
NOME PARA FAMÍLIAS GENÉRICAS:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Cabeçalhos <h1> serão renderizados com fonte "Arial". Se o usuário não tiver a font Arial instalada, será usada a fonte "Verdana". Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família sans-serif.
Obs: Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.
03) font-style: Define o estilo utilizado da fonte. O estilo pode ser normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex2.php
04) font-variant: Exibe o texto em pequena caixa-alta (versalete) ou fonte normal. É usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos.
Exemplos:
Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex3.php
05) font-weight: Define o peso da fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.
Ex:
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex4.php
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex2.php
Notar que foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vírgula.
04) background-image: Define a imagem de fundo.
Eis aqui uma imagem de uma borboleta para exemplificar a aplicação de imagens de fundo. Você pode fazer o download da imagem mostrada abaixo e usá-la nos seus experimentos (clique com o botão direito do mouse sobre a imagem e escolha "salvar imagem como") ou você poderá usar uma outra imagem qualquer ao seu gosto.
Para inserir uma imagem de fundo na página basta aplicar a propriedade background-image ao elemento <body> e especificar o caminho para onde está gravada a imagem.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex3.php
05) background-repeat: Define se e como a imagem de fundo utilizada se repetirá.
No exemplo anterior você observou que a imagem da borboleta repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetição da imagem de fundo.
Agora vejamos os quatro diferentes valores para background-repeat.
01) background-repeat: repeat-x (A imagem se repete na horizontal).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex4.php
02) background-repeat: repeat-y (A imagem se repete na vertical).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex5.php
03) background-repeat: repeat (A imagem se repete em ambas posições).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex6.php
04) background-repeat: no-repeat (A imagem não se repete).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex7.php
Por exemplo, o código mostrado a seguir é para que a imagem não se repita na tela:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex7.php
06) background-attachment: Define se a imagem de fundo utilizada será fixa ou com rolagem. Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao contrário da imagem que não é fixa e rola acompanhando o conteúdo da tela.
A tabela a seguir mostra os quatro diferentes valores para background-attachment. Veja os exemplos para constatar a diferença entre imagem fixa e imegem que rola.
01) background-attachment: scroll (A imagem rola com a página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex8.php
02) background-attachment: fixed (A imagem é fixa).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex9.php
Por exemplo, o código abaixo fixa a imagem na tela.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex9.php
07) background-position: Define a posição do fundo.
Existem várias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador.
As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:
Alguns exemplos:
01) background-position: 2cm 2cm
(A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex10.php
02) background-position: 50% 25%
(A imagem é centrada na horizontal e a um quarto (25%) para baixo na página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex11.php
03) background-position: top right
(A imagem é posicionada no canto superior direito da página)
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex12.php
No exemplo de código a seguir a imagem é posicionada no canto inferior direito da página:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex13.php
IV) FONTES TIPOGRÁFICAS
As propriedades para as fontes, definem as características das letras que constituem os textos dentro dos elementos HTML.
01) font: Atalho para definir de uma só vez todas as propriedades de fonte.
02) font-family: Define a(s) família(s) da fonte.
Existem dois tipos de nomes para definir fontes: nomes para famílias de fontes e nomes para famílias genéricas. Os dois são explicados a seguir:
NOME PARA FAMÍLIAS DE FONTES:
Exemplos para este tipo (normalmente conhecidas como "font") são "Arial", "Times New Roman" ou "Tahoma".
NOME PARA FAMÍLIAS GENÉRICAS:
Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um exemplo são as fontes sans-serif que
englobam
a coleção de fontes que "não têm pé".
A diferença está mostrada na figura a seguir:
Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas alternativas para ela. É recomendável encerrar a listagem das fontes com uma fonte genérica. Assim fazendo, em último caso a página será renderizada com fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis na máquina do usuário.
A seguir, um exemplo de listagem de fontes:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Obs: Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex2.php
04) font-variant: Exibe o texto em pequena caixa-alta (versalete) ou fonte normal. É usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos.
Exemplos:
Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex3.php
05) font-weight: Define o peso da fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.
Ex:
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex4.php
06) font-size: Tamanho da fonte.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
V) TEXTO
As propriedades para textos, definem as características dos textos inseridos dentro dos elementos HTML.
As propriedades para textos, definem as características dos textos inseridos dentro dos elementos HTML.
01) text-indent: Permite a aplicação de um recuo à primeira linha de um parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os textos marcados com <p>:
p {
text-indent: 30px;
}
02) text-align:
A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centred). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.
No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. E, os textos normais em parágrafos são justificados:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
03) text-decoration: A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Você pode por rexemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
04) letter-spacing: O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo <p> e de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser usado.
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
05) word-spacing: Como o nome sugere, essa propriedade define o espaçamento entre as palavras de um texto.
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Propriedade word-spacing em CSS</title>
</head>
<body>
<h3>Exemplos da propriedade word-spacing.</h3>
<p>
Nesta página vemos a propriedade
<strong>word-spacing</strong>,
que manipula o espaçamento entre as palavras.
</p>
<p style="word-spacing: 7px;">
Este parágrafo está definido com a propriedade
<strong>word-spacing: 7px</strong>;
</p>
<p style="word-spacing: 10px;">
Este outro parágrafo foi definido
<strong>word-spacing: 10px</strong>;
</p>
</body>
</html>
Resultado:
06) text-transform:
A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no código HTML.
Como exemplo tomamos a palavra "cabeçalho" que pode ser apresentada ao usuário como "CABEÇALHO" ou "Cabeçalho". São quatro os valores possíveis para text-transform:
capitalize: Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe".
uppercase:
Converte todas as letras para maiúscula. Por exemplo: "john doe" transforma-se para"JOHN DOE".
lowercase :
Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se para"john doe".
none:
Sem trasformações - o texto é apresentado como foi escrito no código HTML.
Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras maiúsculas.
Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os textos no código foram escritos com todas as letras em minúsculas
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
VI) MODELO DE FORMATAÇÃO VISUAL
01) float: Posicionamento adjacente à esquerda ou à direita do elemento.
left: o elemento será posicionado flutuando à esquerda. O fluxo do conteúdo não integrante do elemento será posicionado à direita a partir do 'top' do elemento que recebe a propriedade 'float'
right: similar à 'left', mas com o elemento flutuando à direita
none: o elemento não flutua
Exemplo:
e {float: right;}
02) clear:
Exemplo: e { clear: both;}
Controle para os posicionamentos float.
none: nenhum controle de limpeza de flutuação será executado
left: limpeza de flutuação à esquerda: o elemento será posicionado abaixo da borda inferior do elemento flutuante à esquerda
right: limpeza de flutuação à direita: o elemento será posicionado abaixo da borda inferior do elemento flutuante à direita
both: o elemento será posicionado abaixo da borda inferior de qualquer elemento flutuante, seja à direita ou à esquerda
03) widht:
Largura.
Exemplo:
e {width: 25%;}
04) height:
Altura.
Exemplo:
e {height: 250px;}
05) line-height:
Distância entre as linhas de um texto.
Exemplo:
e {line-height: 1.2em;}
06) vertical-align:
Alinhamento vertical do texto.
baseline - A linha de base do elemento e do elemento superior (elemento-pai) serão consideradas para alinhamento. Se não houver linha de base no elemento, será considerado sua margem inferior.
sub - A linha de base do elemento será alinhada com a linha de base de conteúdo subscrito do elemento superior.
super - A linha de base do elemento será alinhada com a linha de base de conteúdo superescrito do elemento superior.
top - Alinha o topo do elemento com a linha de topo do elemento superior
text-top - A base superior do elemento será alinhada com a linha superior do conteúdo de textos do elemento-pai.
middle - A linha central do elemento e de seu elemento superior serão consideradas para alinhamento. (linha central do elemento superior = ponto central da altura da letra 'x')
bottom - Alinha o rodapé do elemento com o rodapé do elemento superior
text-bottom - A base inferior do elemento será alinhada com a linha inferior do conteúdo de textos do elemento-pai.
Exemplo:
e {vertical-align: sub;}
VII) LISTAS
A propriedade list define as características das listas HTML. Aceita de 1 a 3 valores.
Valores: list-style-type | list-style-position | list-style-image.
01) list-style: Maneira abreviada para todas as propriedades.
02) list-style-type: Define o tipo de marcador de item da lista.
Ex: Definir os marcadores de listas não ordenadas
<html>
<head>
<style type="text/css">
ul.none {
list-style-type: none;
}
ul.disc {
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
</style>
</head>
<body>
<ul class="none">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="disc">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="circle">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="square">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>
Resultado:
Este exemplo demonstra como definir os marcadores de listas ordenadas.
<html>
<head>
<style type="text/css">
ol.decimal {
list-style-type: decimal;
}
ol.lroman {
list-style-type: lower-roman;
}
ol.uroman {
list-style-type: upper-roman;
}
ol.lalpha {
list-style-type: lower-alpha;
}
ol.ualpha {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<ol class="decimal">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="lroman">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="uroman">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="lalpha">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="ualpha">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
</body>
</html>
Resultado:
03) list-style-image: Define a imagem a ser utilizada como marcador de item da lista.
Ex:
<html>
<head>
<style type="text/css">
ul {
list-style-image: url("seta.gif");
}
</style>
</head>
<body>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>
Resultado:
04) list-style-position: Define a posição do marcador de item da lista.
<head>
<style type="text/css">
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
</style>
</head>
<body>
<ul class="inside">
<li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para fixar o valor:"inside" dosmarcadores de listas.</li>
</ul>
<ul class="outside">
<li>Este texto destina-se a demonstrar o valor: "outside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.</li>
</ul>
</body>
</html>
Resultado:
A propriedade list define as características das listas HTML. Aceita de 1 a 3 valores.
Valores: list-style-type | list-style-position | list-style-image.
01) list-style: Maneira abreviada para todas as propriedades.
02) list-style-type: Define o tipo de marcador de item da lista.
Ex: Definir os marcadores de listas não ordenadas
<html>
<head>
<style type="text/css">
ul.none {
list-style-type: none;
}
ul.disc {
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
</style>
</head>
<body>
<ul class="none">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="disc">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="circle">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="square">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>
Resultado:
- Item um
- Item dois
- Item tres
- Item um
- Item dois
- Item tres
- Item um
- Item dois
- Item tres
- Item um
- Item dois
- Item tres
Este exemplo demonstra como definir os marcadores de listas ordenadas.
<html>
<head>
<style type="text/css">
ol.decimal {
list-style-type: decimal;
}
ol.lroman {
list-style-type: lower-roman;
}
ol.uroman {
list-style-type: upper-roman;
}
ol.lalpha {
list-style-type: lower-alpha;
}
ol.ualpha {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<ol class="decimal">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="lroman">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="uroman">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="lalpha">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="ualpha">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
</body>
</html>
Resultado:
- Item um
- Item dois
- Item tres
- Item um
- Item dois
- Item tres
- Item um
- Item dois
- Item tres
- Item um
- Item dois
- Item tres
- Item um
- Item dois
- Item tres
03) list-style-image: Define a imagem a ser utilizada como marcador de item da lista.
Ex:
<html>
<head>
<style type="text/css">
ul {
list-style-image: url("seta.gif");
}
</style>
</head>
<body>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>
Resultado:
- Item um
- Item dois
- Item tres
04) list-style-position: Define a posição do marcador de item da lista.
Ex:
<html><head>
<style type="text/css">
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
</style>
</head>
<body>
<ul class="inside">
<li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para fixar o valor:"inside" dosmarcadores de listas.</li>
</ul>
<ul class="outside">
<li>Este texto destina-se a demonstrar o valor: "outside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.</li>
</ul>
</body>
</html>
Resultado:
- Este texto destina-se a demonstrar o valor: "inside" dos marcadores
- E aqui continuamos com mais texto para fixar o valor:"inside" dos marcadores de listas.
- Este texto destina-se a demonstrar o valor: "outside" dos marcadores
- E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.
Nenhum comentário:
Postar um comentário