CSS - Seletores

Twitter

BlogBlogs

Digg

Delicious

Rec6

Você lembra da estrutura fundamental do CSS?

seletor { propriedade: valor }

É bem simples não?

Hoje vamos aprender os traquejos que envolvem os seletores.

Os seletores são o elemento HTML, classe ou ID ao qual se pretende atribuir uma propriedade.

Tendo isso em mente, vamos analisar esses três tipos de seletores e suas combinações. Compreendendo bem essa parte do CSS, você poderá reduzir muito seus códigos no Blogger. Pois cada elemento widget possui um ID diferente, e entendendo como utilizar essas ferramentas, será simples atribuir características a vários widgets.

Elemento HTML

---

Elemento HTML ou TAG é todo elemento utilizado para construir páginas com a linguagem HTML.

Veja todos os elementos (TAGs) existentes que podem ser utilizados hoje em dia.

<'!-->
<'!DOCTYPE>
<'a>
<'abbr>
<'acronym>
<'address>
<'applet>
<'area>
<'b>
<'base>
<'basefont>
<'bdo>
<'big>
<'blockquote>
<'body>
<'br>
<'button>
<'caption>
<'center>
<'cite>
<'code>
<'col>
<'colgroup>
<'dd>
<'del>
<'dfn>
<'dir>
<'div>
<'dl>
<'dt>
<'em>
<'fieldset>
<'font>
<'form>
<'frame>
<'frameset>
<'head>
<'h1> - <'h6>
<'hr>
<'html>
<'i>
<'iframe>
<'img>
<'input>
<'ins>
<'kbd>
<'label>
<'legend>
<'li>
<'link>
<'map>
<'menu>
<'meta>
<'noframes>
<'noscript>
<'object>
<'ol>
<'optgroup>
<'option>
<'p>
<'param>
<'pre>
<'q>
<'s>
<'samp>
<'script>
<'select>
<'small>
<'span>
<'strike>
<'strong>
<'style>
<'sub>
<'sup>
<'table>
<'tbody>
<'td>
<'textarea>
<'tfoot>
<'th>
<'thead>
<'title>
<'tr>
<'tt>
<'u>
<'ul>
<'var>

Bunito, né? Puuuxaaaa.. então todos esses elementos podem receber estilos por meio do CSS?

Não. Nem todos podem receber estilos por CSS e nem por qualquer outra forma.

Porém, os principais (que são os que você irá utilizar) podem receber os estilos, ou seja, são seletores.

Por exemplo:

body { ... }
ul {...}
li {...}
div {...}
form {...}
h1 {...}

E assim, você vai atribuindo estilos para cada uma dessas TAGs HTML. Elas deixarão de ter as características padrão para obedecer ao que você determinou em sua folha de estilos, que é o arquivo CSS que contém as informações de estilo ou o trecho de código do seu HTML que possui essas informações.

Classe

---

Lembra da 7-B (Sétima B)? Sua sala do ginasial? Bom.. as classes em CSS são praticamente a mesma coisa. Como assim??

Imagine se todas as pentelhas das crianças do ginásio assistissem aula juntas! Nunca que uma criança da primeira entenderia a lição de uma criança da oitava. Por isso elas são separadas, para que possam cada coisa ficar no seu lugar.

Colocar o amendoim no lugar do amendoim é tarefa para as classes.

Quando você cria uma classe, você precisa saber para que você precisa dela. Então, por exemplo, eu quero criar subtítulos para minhas postagens. Então eu preciso que os subtítulos possuam um design diferente do resto do texto. É nisso que trabalharemos.

Depois, você dá o nome achar melhor. Por exemplo: .subtitulo.

Em seguida, você atribui a essa classe, os atributos que você quer:

.subtitulo {
font-size: 13px;
font-weight: bold;
color: rgb(152, 133, 14);
...
}

Continuo depois..