!IMPORTANT

Postado por: Pedro Rogério em
  • 27 set
  • 1

!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.

  • Categorias: CSS
  • Tags:

Quotes em CSS

Postado por: Pedro Rogério em
  • 25 set
  • 5

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 por: Pedro Rogério em
  • 18 set
  • 17

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 por: Pedro Rogério em
  • 15 set
  • 9
  • 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 por: Pedro Rogério em
  • 13 set
  • 10

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.

  • Categorias: CSS
  • Tags:

Guia CSS – 10ª parte: Propriedade font em CSS

Postado por: Pedro Rogério em
  • 12 set
  • 2

Font

Com a propriedade font podemos alterar o estilo(style), o peso(weight), o variant(mostrar o texto em maiúsculas), o tamanho(size), o line-height(altura da linha), e a própria propriedade font.


font: italic bold normal small/1.4em Verdana, sans-serif;

o código acima pode ser lido da seguinte maneira: Da esquerda pra direita, o primeiro item deixaria nosso texto em itálico, com um peso bold, o variant normal, um tamanho relativo, depois a altura da linha setada em 1.4em e a font definida como Verdana, ou se não for encontrada no sistema, sans-serif.

Font-family

Aqui é onde definimos uma “família de fontes”. A 2 possíveis valores:

  • Nome da Família
  • Família Genérica

Se você adicionar um nome da família, é aconselhável também adicionar a família genéria em sua extremidade. Por que isso é priorizado na lista. Assim, se o usuário não tiver o nome o nome da font especificado em font-family, ele usará a mesma família genérica.


font-family: Verdana, sans-serif;

Continuar lendo »

Seletores de contexto em CSS

Postado por: Pedro Rogério em
  • 5 set
  • 0

Muitas pessoas já trabalham dessa forma, mas muitas ainda não tem o costume de trabalhar assim, mas como funcionam os seletores de contexto em CSS? Basicamente funciona da seguinte forma: Você pode definir seletores que só serão aplicados se estiverem no contexto de um outro seletor, não fui bem claro? Peguemos um exemplo:


p.verde em { color: #000040; }

O que aconteceria na regra acima é que todo em, filhos de p com a classe verde terão as sua cores alteradas. A declaração também pode ser mais longa. Vejam outro exemplo:


.chefe p ul ul li a.classex:visited { font-style: italic; }

Acima podemos ver que apenas os links visitados da “classex”, que estejam dentro de listas de segundo nível, situados dentro de um parágrafo, e dentro de um bloco qualquer da classe “chefe”, serão mostrados em itálico.

Seletores de contexto seriam basicamente isso. Aproveite também e pesquise, pratique, pois só a prática leva a perfeição.

Páginas:«1...1718192021222324252627»