{"id":416,"date":"2020-07-01T11:55:50","date_gmt":"2020-07-01T14:55:50","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=416"},"modified":"2020-07-01T21:31:31","modified_gmt":"2020-07-02T00:31:31","slug":"html-o-atributo-da-classe","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/html-o-atributo-da-classe\/","title":{"rendered":"HTML O atributo da classe"},"content":{"rendered":"

O class atributo HTML \u00e9 usado para especificar uma classe para um elemento HTML.<\/p>\n

V\u00e1rios elementos HTML podem compartilhar a mesma classe.<\/p>\n

Usando o atributo da classe
\nO class atributo \u00e9 frequentemente usado para apontar para um nome de classe em uma folha de estilos. Tamb\u00e9m pode ser usado por um JavaScript para acessar e manipular elementos com o nome de classe espec\u00edfico.<\/p>\n

No exemplo a seguir, temos tr\u00eas <div><\/code>elementos com um class atributo com o valor de “cidade”. Todos os tr\u00eas <div><\/code> elementos ser\u00e3o estilizados igualmente, de acordo com a .city defini\u00e7\u00e3o de estilo na se\u00e7\u00e3o principal:<\/p>\n

Exemplo<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.city {\r\n  background-color: tomato;\r\n  color: white;\r\n  border: 2px solid black;\r\n  margin: 20px;\r\n  padding: 20px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"city\">\r\n  <h2>London<\/h2>\r\n  <p>London is the capital of England.<\/p>\r\n<\/div>\r\n\r\n<div class=\"city\">\r\n  <h2>Paris<\/h2>\r\n  <p>Paris is the capital of France.<\/p>\r\n<\/div>\r\n\r\n<div class=\"city\">\r\n  <h2>Tokyo<\/h2>\r\n  <p>Tokyo is the capital of Japan.<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
A sintaxe da classe
\nPara criar uma classe; escreva um caractere de ponto (.) seguido de um nome de classe. Em seguida, defina as propriedades CSS entre chaves {}:<\/p>\n
Exemplo
\nCrie uma classe chamada “cidade”:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.city {\r\n  background-color: tomato;\r\n  color: white;\r\n  padding: 10px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2 class=\"city\">London<\/h2>\r\n<p>London is the capital of England.<\/p>\r\n\r\n<h2 class=\"city\">Paris<\/h2>\r\n<p>Paris is the capital of France.<\/p>\r\n\r\n<h2 class=\"city\">Tokyo<\/h2>\r\n<p>Tokyo is the capital of Japan.<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
 <\/p>\n
M\u00faltiplas Classes<\/strong><\/p>\n
Os elementos HTML podem pertencer a mais de uma classe.<\/p>\n
Para definir v\u00e1rias classes, separe os nomes das classes com um espa\u00e7o, por exemplo, <div class = \"city main\"><\/code>. O elemento ser\u00e1 estilizado de acordo com todas as classes especificadas.<\/p>\n
No exemplo a seguir, o primeiro <h2><\/code>elemento pertence \u00e0 city classe e tamb\u00e9m \u00e0 main classe e obter\u00e1 os estilos CSS de ambas as classes:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.city {\r\n  background-color: tomato;\r\n  color: white;\r\n  padding: 10px;\r\n} \r\n\r\n.main {\r\n  text-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Multiplas Classes<\/h2>\r\n<p>aqui uma<\/p>\r\n\r\n<h2 class=\"city main\">aqui 2<\/h2>\r\n<h2 class=\"city\">aqui 3<\/h2>\r\n<h2 class=\"city\">aqui 4<\/h2>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
Uso do Atributo da classe em JavaScript<\/strong><\/p>\n
O nome da classe tamb\u00e9m pode ser usado pelo JavaScript para executar determinadas tarefas para elementos espec\u00edficos.<\/p>\n
JavaScript pode acessar elementos com um nome de classe espec\u00edfico com o getElementsByClassName()m\u00e9todo:<\/p>\n
Exemplo<\/strong>
\nClique em um bot\u00e3o para ocultar todos os elementos com o nome da classe “cidade”:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<h2>Use of The class Attribute in JavaScript<\/h2>\r\n<p>Click the button to hide all elements with class name \"city\":<\/p>\r\n\r\n<button onclick=\"myFunction()\">Hide elements<\/button>\r\n\r\n<h2 class=\"city\">London<\/h2>\r\n<p>London is the capital of England.<\/p>\r\n\r\n<h2 class=\"city\">Paris<\/h2>\r\n<p>Paris is the capital of France.<\/p>\r\n\r\n<h2 class=\"city\">Tokyo<\/h2>\r\n<p>Tokyo is the capital of Japan.<\/p>\r\n\r\n<script>\r\nfunction myFunction() {\r\n  var x = document.getElementsByClassName(\"city\");\r\n  for (var i = 0; i < x.length; i++) {\r\n    x[i].style.display = \"none\";\r\n  }\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Resumo do cap\u00edtulo<\/strong>
\nO class atributo HTML especifica um ou mais nomes de classe para um elemento
\nAs classes s\u00e3o usadas por CSS e JavaScript para selecionar e acessar elementos espec\u00edficos
\nO class atributo pode ser usado em qualquer elemento HTML
\nO nome da classe faz distin\u00e7\u00e3o entre mai\u00fasculas e min\u00fasculas
\nElementos HTML diferentes podem apontar para o mesmo nome de classe
\nJavaScript pode acessar elementos com um nome de classe espec\u00edfico com o getElementsByClassName() m\u00e9todo.<\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n