Class, Style e Id

Entenda o uso das propriedades Class, Style e Id em HyperCode

Entenda o que é, como usar e como tirar proveito das propriedades Class, Style e Id em HyperCode.

A maior parte das Tags HyperCode possuem como propriedades opcionais os atributos class, style e id.

Esses atributos são diretamente equivalentes aos com mesmo nome em HTML. Na verdade, o HyperFluxCMS compila esses atributos exatamente como seus equivalentes.

Existem diversos excelentes sites e cursos online que explicam detalhadamente o uso desses atributos. O objetivo desta página é unicamente oferecer uma introdução a esses atributos para que se possa entender e fazer um paralelo com eles em HTML/CSS, e presume que o leitor já tenha algum conhecimento prévio sobre eles.

Class

Assim como em HTML, o atributo class permite que você force determinado elemento a participar de uma determinada classe.

Você pode, por exemplo, criar em uma folha de estilos CSS a classe "caixa-de-texto-arredondada-com-sombra" e utilizá-la para destacar certos blocos da sua postagem.

por exemplo, no código abaixo, um bloco é marcado para participar da classe caixa-de-texto-arredondada-com-sombra

É possível que um elemento participe de mais de uma classe, separando os nomes delas por espaço. Por exemplo, no código abaixo, um bloco é marcado para participar de 3 classes: caixa, destaque e piscando.

A Classe também pode ser usada por scripts para listar os elementos da página que pertencem a determinada classe para utilizá-los em algum tipo de processamento.

Style

Assim como em HTML, o atributo style permite que você personalize algumas propriedades do aspecto de um elemento individualmente, usando a sintaxe CSS.

Você pode, por exemplo, querer que uma imagem específica da sua página tenha sombra e cantos arredondados.

Id

Assim como em HTML, o atributo id permite que você identifique algum elemento da página com um ID único.

Você pode, por exemplo, querer que uma determinada imagem da sua página possa ser acessado pelo Id "profile-picture".

O ID de um elemento é útil principalmente em dois casos:

• Em folhas de estilo CSS é possível criar um estilo de propriedades que se aplicam unicamente ao único elemento com determinado ID. Por exemplo, somente a imagem com id "profile-picture" será exibida com sombra e cantos arredondados.
• Em Javascript é possível obter um elemento pelo seu ID (usando document.getElementById("profile-picture") para depois manipulá-lo.