Estilos CSS

fev 8

Box Model: Altura e largura

Até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos com que trabalhamos. Nesta lição veremos como é fácil atribuir uma altura e uma largura para um elemento. Read the rest of this entry »

fev 3
  • background-color:
    1. código hexadecimal: #FFFFFF
    2. código rgb: rgb(255,235,0)
    3. nome da cor: red, blue, green…etc
    4. transparente: transparent
  • background-image:
    1. URL: url(caminho/imagem.gif)
  • background-repeat:
    1. não repete: no-repeat
    2. repete vertical e horizontal: repeat
    3. repete vertical: repeat-y
    4. repete horizontal: repeat-x
  • background-attachment:
    1. imagem fixa na tela: fixed
    2. imagem “rola” com a tela: scroll Read the rest of this entry »

fev 1
Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id.

Nesta lição veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importância para as CSS.

  • Agrupando com <span>
  • Agrupando com<div>

Agrupando com <span>

O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.

Um exemplo deste uso é mostrado na citação abaixo de autoria de Benjamin Franklin: Read the rest of this entry »

jan 29

O código da barra de navegação

Crie um arquivo no qual você pretende adicionar a barra de navegação.
Vamos chamá-lo “barNav.html”.

Construiremos uma barra de navegação com três links dispostos em linha, um após o outro.
Óbvio isso né? Afinal trata-se de uma barra de navegaçao!

Mas, é muito frequente, na prática, encontrarmos nossas soluções em coisas
óbvias e aqui é um bom exemplo.

A constatação óbvia acima, nos leva de imediato a concluir um código bem
simples para “enclausurar” e depois estilizar a barra de navegação.

uma linha —-> um parágrafo HTML;

três links  —-> três tags a HTML;

…e, nasce o primeiro embrião da nossa barra de navegação o código HTML:
Read the rest of this entry »

jan 27
Fontes
icon1 felipe | icon2 Elementos do CSS | icon4 01 27th, 2010| icon3No Comments »

Fontes

Nesta lição estudaremos as fontes e como aplicá-las usando CSS. Veremos como criar situações para que determinada fonte seja visualizada pelo usuário mesmo não estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS: Read the rest of this entry »

jan 25
Guia de referência CSS
icon1 felipe | icon2 Guias | icon4 01 25th, 2010| icon3No Comments »

Guia rápido de referência para estilos CSS

(baseado em MSDN e WC3 CSS)

Read the rest of this entry »

jan 22
Esse artigo é uma tradução de alguns trechos que explica o
Nifty Corners criado pelo Alessandro Fulciniti. O Nifty Corners
é uma combinação de CSS e Java script para gerar cantos
arredondados sem a necessidade de imagens. A técnica é
composta de quatro elementos essenciais e que juntos pesam menos de 6kb:

1. Arquivo CSS para screen
2. Arquivo CSS para print
3. Arquivo Java script para gerar o Nifty Corners
4. O código Java script para chamar os elementos

Os três primeiros componentes não necessitam de mudanças, apenas ser incluídos dentro da Tag HEAD : Read the rest of this entry »

jan 20
A propriedade list define as características (valores) das listas HTML.

As propriedades list são as listadas abaixo:

  • list-style-image…………. imagem como marcador da lista;
  • list-style-position……….onde o marcador da lista é posicionado;
  • list-style-type……………tipo do marcador da lista;
  • list-style……………………maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do lista

Read the rest of this entry »

jan 18

Box Model: Bordas

Bordas 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. Read the rest of this entry »

jan 15

Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos (ou às bordas do documento).

Vamos começar com um exemplo mostrando como definir margins para o documento, ou seja, para o elemento <body>. A ilustração a seguir mostra como serão as margens da página. Read the rest of this entry »

« Previous Entries