Ir para conteúdo / Skip to content

Posts da categoria: ‘ CSS ’

APRENDA COM YA

Postado em: 25 de outubro de 2006 por Pedro Rogério

São 4 cursos, PHP YA, JavaScript YA, CSS YA e MySQL YA. São cursos completos, com problemas e resultados, todos prontos para você resolver.

TUTOCLE - TUTORIAIS PARA DESENVOLVEDORES WEB

Postado em: 23 de outubro de 2006 por Pedro Rogério

TutoCle

TutoCle é um buscador focado em encontrar material relacionado ao desenvolvimento web. Se você usa Firefox, pode incluir em seu browser um plug-in para fazer as buscas diretamente dentro do Firefox, você pode também efetuar buscas através da nuvem de tags que encontra no site, ou mediante palavras chave.

CRASH IE COM CSS

Postado em: 19 de outubro de 2006 por Pedro Rogério

Para você ter sérios problemas com o IE não precisa de JavaScript, ou qualquer outra coisa, basta somente 23 linhas de puro XHTML e CSS que você verá que o IE é verdadeiramente um browser ultrapassado:


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html>
  <head>
   <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″/>
   <title>index</title>
   <style type=“text/css”>
     body { width:755px; }
			ul#nav { position:absolute; }
			ul#nav li { display:inline; }
			ul#nav li a { float:left;display:block;margin:0 1px 0 0;width:150px; }
			ul#nav li a:hover { background:#ddd; }
   </style>
  </head>
 <body>
  <ul id=“nav”>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
  </ul>
 </body>
</html>

Veja um exemplo em funcionamento nessa página. Ou você também pode ver esse vídeo.

TRUQUE CSS DESCONHECIDO #2

Postado em: 18 de outubro de 2006 por Pedro Rogério

Não sei se muita gente sabe disso, mas as cores das bordas em css podem ser declaradas da seguinte forma:


border-color: #003366 #3399ff #000099 #3355ff;

Aliás, nem eu sabia, graças ao Daniel Guimarães acabei descobrindo isso. Vivendo e aprendendo.

GUIA CSS - 11ª PARTE: LINKS E PSEUDO CLASSES

Postado em: 17 de outubro de 2006 por Pedro Rogério

Abaixo você pode ver as várias maneiras de se usar CSS para estilizar os links da sua página:

  • a:link {color: #009900;}
  • a:visited {color: #999999;}
  • a:hover {color: #333333;}
  • a:focus {color: #333333;}
  • a:active {color: #009900;}

Agora vamos ver o que cada uma delas significa:

a:link {color: #009900;}

Usado para estilizar os links da página quando não está ocorrendo nenhum evento.

a:visited {color: #999999;}

Usado para estilizar os links da página quando o mesmo já foi visitado.

a:hover {color: #333333;}

Usado para estilizar os links da página quando o usuário coloca o mouse sobre o link.

a:focus {color: #333333;}

Praticamente a mesma função que a:active, mas com uma diferença, está é para usuários que não estão usando o mouse e estão navegando através do teclado, ele tem a função de alterar a cor do link quando o usuário está “tabulando”(usando a tecla tab), para alternar entre os links da página.

a:active {color: #009900;}

Usado para estilizar os links da página enquanto o mesmo é pressionado.

Pseudo classes

Você pode estilizar os links em diferentes partes da sua página utilizando as pseudo classes, por exemplo, você pode ter diferentes cores para um menu e outras cores para os links do conteúdo do seu site:

  • #content a:link {color: #009900;}
  • #content a:visited {color: #999999;}
  • #content a:hover {color: #333333;}
  • #content a:focus {color: #333333;}
  • #content a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID content terão as condições citadas acima, mas vamos dizer que você tem um menu que quer deixar com as cores dos links diferentes do conteúdo:

  • #menu a:link {color: #009900;}
  • #menu a:visited {color: #999999;}
  • #menu a:hover {color: #333333;}
  • #menu a:focus {color: #333333;}
  • #menu a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID menu terão as condições citadas acima. Você também poderia utilizar classes ao invés de ID’s.

  • a.menu:link {color: #009900;}
  • a.menu:visited {color: #999999;}
  • a.menu:hover {color: #333333;}
  • a.menu:focus {color: #333333;}
  • a.menu:active {color: #009900;}

Neste caso, nosso HTML ficaria da seguinte forma:


<a class="menu" href="" title="" rel="">Link aqui</a>

Também pode ser declarado dessa forma:

  • .menu a:link {color: #009900;}
  • .menu a:visited {color: #999999;}
  • .menu a:hover {color: #333333;}
  • .menu a:focus {color: #333333;}
  • .menu a:active {color: #009900;}

Nosso HTML ficaria assim:


<div class="menu">
<a href="" title="" rel="">Link aqui</a>
</div>

Tradução do artigo original de: CSS Basics.

!IMPORTANT

Postado em: 27 de setembro de 2006 por Pedro Rogério

!important tem como finalidade sobrepor declarações em CSS herdadas, ou declarações anteriores, ou seja, ele faz com que uma declaração perca a herança sobre outra declaração. Não fui bem claro? Por exemplo, se você declara em seu body que todos os parágrafos de sua página terão a cor preta, e depois declara uma cor, por exemplo, verde para os parágrafos e coloca !important, ele irá sobrescrever a regra do body e irá mostrar todos os parágrafos em verde. Para se declarar !important é muito simples, basta você colocá-lo logo após sua regra CSS:


p { color:#006633 !important;}

Quais as suas vantagens?

Dentre as inúmeras vantagens, uma delas seria de que quando você faz o uso de folhas de estilo alternativas, você pode usar !important para sobrepor declarações da folha de estilos principal. Para uma melhor compreensão, no Opera, existem várias folhas de estilo pré-definidas que você pode utilizar nas páginas que quiser, para usá-las é só ir até o menu exibir>estilo e escolher as folhas de estilo disponíveis, eu peguei uma para que você possa estar vendo o uso de !important em todas as declarações. É a folha de estilos voltada a Acessibilidade.

QUOTES EM CSS

Postado em: 25 de setembro de 2006 por Pedro Rogério

Quotes ou citações, são aquelas aspas que colocamos em nosso texto. Com CSS, você pode fazer isso de uma forma muito simples, peguemos o seguinte código CSS:

Quotes em CSS

E o nosso código HTML ficaria da seguinte forma:


<q>Esta é uma citação <q>encaixada</q> dentro de outra citação</q>

Que seria mostrado da seguinte forma: “Esta é uma citação ‘encaixada’ dentro de outra citação”. Reparem que tudo que está dentro das aspas(que eu destaquei em vermelho), é o que será mostrado no navegador. Você também pode usar < , >, *, ? e outros caracteres.

TRUQUE CSS DESCONHECIDO

Postado em: 18 de setembro de 2006 por Pedro Rogério

A um mesmo elemento podemos designar distintas classes da seguinte maneira:


<div class="primeira segunda terceira">…</div>

As classes devem ser declaradas dessa forma, separadando com espaço os nomes dos seletores podemos aplicar quantas classes quisermos ao mesmo elemento. Você conhecia esse truque? Conte-me aqui a sua experiência!

13 ELEMENTOS QUE DEVERIAM CONTER EM SUA PÁGINA

Postado em: 15 de setembro de 2006 por Pedro Rogério
  • 1- Buscador interno amigável e eficaz.
  • 2- Mapa do site.
  • 3- Links internos com URI absoluta.
  • 4- Conteúdo significativo no início da página.
  • 5- Desenvolver com as últimas tecnologias.
  • 6- Validar o HTML, XHTML e o CSS.
  • 7- Comprovar que não existem links quebrados.
  • 8- Uso limitado de tabelas.
  • 9- Uso limitado de Flash.
  • 10- Arquivos externos para folhas de estilo e javascript.
  • 11- Incorporar sempre atributos de identificação (alt, title).
  • 12- Incluir informação de contato.
  • 13- Uso moderado de imagens. Sempre justificadas e com valor não superior a 12KB

OS PSEUDO-ELEMENTOS :AFTER E :BEFORE

Postado em: 13 de setembro de 2006 por Pedro Rogério

Os pseudo elementos :after e :before servem para inserir conteúdo gerado depois ou antes de cada elemento. Um exemplo de uso seria se quisessemos inserir conteúdo depois e antes dos links. Veja o código:


<div id="link1">
   <a href="#">Contato</a>
</div>
<div id="link2">
    <a href="#">Sobre</a>
</div>

E o nosso CSS fica da seguinte forma:


#link1:after { content: "Exemplo de After"; }
#link2:before { content: "Exemplo de Before"; }

Veja um exemplo em funcionamento, mas se você usa o IE como browser, não vai conseguir ver essa propriedade em funcionamento, eu aconselho você então a usar um outro browser como o Opera, ou o Firefox.

Página 10 de 15« Primeira Página...«78910111213»...Última Página »