Na actualidade, a quantidade de páginas web que utilizam CSS é massiva, sendo que atualmente milhares e milhares de pessoas utilizam o CSS para estilizar suas páginas e blogs. Desde desenvolvedores a blogueiros, passando por meros curiosos, o CSS é hoje uma linguagem de programação amplamente conhecida e utilizada na internet. Nos dias de hoje já não há desculpa para não utilizar CSS nas suas produções básicas! Neste artigo vamos abordar 3 tipos de selectores em CSS – Os Type Selectors, Class Selectors e ID Selectors – e você vai ficar a saber direitinho como os usar e como tirar o maior proveito da utilização dos mesmos em O que são selectores CSS? Parte I

Esta é a primeira parte de uma série de artigos, pelo que se tiver ideias ou sugestões, participe e deixe o seu comentário! Se desejar, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

Endereço de Email: 

 

Como vimos no artigo Começando com CSS – Dê os primeiros passos em segurança, os selectores no exemplo acima são h1 e h2. Vamos agora explicar quais os selectores mais utilizados em CSS.

1. TYPE SELECTORS

Os Type Selectors são a forma mais simples de um selector, que é aquele que apresentámos anteriormente. Você ao dar um nome a um elemento HTML, pode-lhe aplicar um estilo ao longo de todo o documento, cada vez que esse elemento aparecer. Então, os Type Selectores são frequentemente utilizados para estilizar os elementos básicos que irão aparecer frequentemente no website, como os parágrafos. No exemplo a seguir, vamos estar a aplicar uma determinada estilização aos parágrafos:

p {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 1em;
    color: #000000;
}

Neste exemplo determinámos qual será o tipo de letra, o tamanho e a cor dos parágrafos

2. CLASS SELECTORS

O processo de determinar quais os estilos a aplicar nos elementos é bastante simples, mas e se você necessitar de aplicar uma estilização diferente a um elemento que já tem uma estilização definida? Utilizando as classes! Uma classe é como se fossem criados sub-elementos dentro dos elementos. Isto é especialmente útil em variadíssimos casos, mas vamos focar a nossa atenção entre a área de conteúdos e a barra lateral do seu blog. Enquanto que você pretende ter os parágrafos com a cor preta na área de conteúdos, poderá pretender ter a cor branca na barra lateral. Então, para definir essa classe utilizamos a seguinte sintaxe:

p {
    color: #000000;
}
.barralateral {
    color: #FFFFFF;
}

Para diferenciar os elementos das classes, utiliza-se o ponto (.) –  assim será interpretado como um classe e não como um elemento. Então desta forma você poderá aplicar a estilização destinada aos parágrafos da barra lateral. Para o fazer siga o exemplo abaixo:

<p class="barralateral">Este texto será formatado de acordo com a classe "barralateral".</p>

Apesar de estarmos a utilizar a classe para os parágrafos, ela pode ser aplicada em outros elementos, como links. Se você introduzir um link na barra lateral, ele ia ser processado como seria em qualquer parte do seu website. Então, se não quer ter uma diferenciação de cores, aplique a classe ao elemento:

<p class="sidebar"> Este texto será formatado de acordo com a classe "barralateral", enquanto que o <a href="www.escolacriatividade.com">link1</a> não será, e o <a class="barralateral" href="www.escolacriatividade.com">link2</a> será.</p>

Se quiser ir mais longe e pretender diferenciar os links, aplicando por exemplo negrito, terá de definir alguma estilização primeiro:

p {
    color: #000000;
}

.barralateral {
    color: #FFFFFF;
}

a.sidebar:link, a.sidebar:visited {
    font-weight: bold;
}

Aqui fizémos uma combinação entre um Type Selector e um Class Selector, utilizando 2 pseudo-classes (que iremos explicar mais à frente) link e visited. Assim, você iria ter o texto a branco, e os links a branco e negrito. De notar que se você introduzir cor onde definimos o negritos para os links, o texto irá assumir essa cor, pois CSS dá mais importância quanto mais específica for a estilização – neste caso estamos a ser bastante específicos ao querer que os links fiquem a negrito, mesmo depois de clicados.

3. ID SELECTORS

Os ID Selectors são usados para seleccionar um elemento em particular. Quer isto dizer que você poderá utilizar os ID Selectors para estilizar o mesmo elemento de formas diferentes:

<p id="para2"> Este parágrafo irá ser estilizado de acordo com o ID Selector "para2"</p>

Para definir a estilização do ID “para2″ fazemos o seguinte:

#para2 {
    color: #FF0066
}

Os ID Selectores podem também ser utilizados em combinação com outros tipos de selectores:

#para2 .adicional {
    font-weight: bold;
    color: #FF0066
}

Aqui fizemos uma combinação entre um ID Selector e um Class Selector, e desta forma sempre que aparecer um elemento com a classe “adicional” nos parágrafos com a ID “para2″ irão ser estilizados de acordo com o especificado.

Não perca a continuação deste artigo, e subscreva a nossa newsletter gratuita e receba os próximos conteúdos diretamente na sua caixa de email:

Endereço de Email: 

Abraços e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Acácio Veit Schneider
    18 de junho de 2011

    Variáveis em CSS seria um ótimo assunto ein?!

    Bom artigo para os iniciantes.

    Valeu.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz