Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

ID CSS – Identificação de Elementos CSS

id CSSID CSS  – Identificação de Elementos CSS

ID CSS, é utilizado para identificar os elementos de uma classe em CSS, e além de agrupar os elementos podemos  atribuir uma identificação a um único elemento. Isto é feito usando o atributo id identificação que é id css.

O que há de especial no atributo id css é que não poderá existir dois ou mais elementos com a mesma id, ou seja, em um documento apenas um e somente um elemento poderá ter uma determinada id. Cada id css é única. Para casos em que haja necessidade de mais de um elemento com a mesma identificação usamos o atributo class. A seguir veja um exemplo de uso de id css:

Digite o código abaixo em um editor de código html, pode ser o Notepad+ +, e salve em um arquivo chamado index.html  na pasta indicada pelo seu servidor local.

<html>

<head>

<h1><title>ID CSS Identificação de Elementos CSS</title></h1> /* Título da página*/

<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* Link para chamar o arquivo estilo.css */
<style type=”text/css”>

</head>

<body>

<h1>Capítulo 1</h1>

<h2>Capítulo 1.1</h2>

<h2>Capítulo 1.2</h2>

<h1>Capítulo 2</h1>

<h2>Capítulo 2.1</h2>

<h3>Capítulo 2.1.2</h3>

</body>

</html>

No exemplo acima simula os cabeçalhos de um documento estruturado em capítulos e parágrafos. É comum atribuir uma id para cada capítulo como mostrado a seguir, altere o código conforme descrito em vermelho  abaixo:

<h1 id=”c1″>Capítulo 1</h1>

<h2 id=”c1-1″>Capítulo 1.1</h2>

<h3 id=”c1-2″>Capítulo 1.2</h3>

<h1 id=”c2″>Capítulo 2</h1>

<h2 id=”c2-1″>Capítulo 2.1</h2>

<h3 id=”c2-1-2″>Capítulo 2.1.2</h3>

Vamos supor que o cabeçalho do capítulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme mostrado na folha de estilo a seguir:

copie o código abaixo e salve dentro da pasta indicada pelo ser servidor local como estilo.css.

#c1-2 {
color: red;
}

Como mostrado no exemplo acima, podemos definir propriedades para um elemento específico usando um seletor #id na folha de estilos para o documento. Veja agora como fica o código id css completo para o exemplo acima: 

#c1 {
color: red; /*vermelho*/
}

#c1-1 {
color: black; /*preto*/
}

#c1-2 {
color: blue; /*azul*/
}

#c2 {
color: green; /*verde*/
}

#c2-1 {
color: brown ; /*marron*/
}

#c2-1-2 {
color: red; /* vermelho*/
}

id css

Agora volte para a página inicial de estudos CSS para continuar as aulas.

id css

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • I just want to mention I’m all new to blogging and honestly enjoyed this blog site. Very likely I’m want to bookmark your website . You actually come with incredible writings. Kudos for sharing with us your blog site.

    Tradução:
    Eu só quero falar que eu sou tudo novo para blogs e honestamente gostou deste blog. É muito provável que eu estou deseja marcar seu website. Você realmente vêm com escritos incríveis. Parabéns por compartilhar conosco o seu blog.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.