logo

Tipos de CSS

CSS (folha de estilos em cascata) descreve os elementos HTML que são exibidos em tela, papel , ou em outras mídias . Isto economiza muito tempo. Ele controla o layout de várias páginas da web ao mesmo tempo. Ele define o tamanho da fonte, família da fonte, cor, cor de fundo na página.

Isso nos permite adicionar efeitos ou animações para o site. Nós usamos CSS mostrar animações como botões, efeitos, carregadores ou fiandeiros , e também fundos animados .

Sem utilizar CSS , o site não parecerá atraente. Há 3 tipos de CSS que estão abaixo:

  • CSS embutido
  • CSS interno/embutido
  • CSS externo
Tipos de CSS

1. CSS interno

O CSS interno tem etiqueta no seção do HTML documento. Este estilo CSS é uma forma eficaz de estilizar páginas únicas. Usar o estilo CSS para múltiplas páginas da web é demorado porque é necessário colocar o estilo em cada página da web.

Podemos usar o CSS interno seguindo as seguintes etapas:

1. Primeiramente, abra o HTML página e localize o

2. Coloque o seguinte código após o

 

3. Adicione o regras de CSS na nova linha.

Exemplo:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Feche a tag de estilo.

 

Depois de adicionar o CSS interno, o arquivo HTML completo terá a seguinte aparência:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Também podemos usar os seletores (classe e ID) na folha de estilo.

Exemplo:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Prós do CSS interno

    CSS internonão podemos fazer upload de vários arquivos quando adicionamos o código à página HTML.

Contras do CSS interno:

  • Adicionando código no HTML documento reduzirá o tamanho da página e tempo de carregamento da página da web.

2. CSS externo

No CSS externo, vinculamos as páginas da web ao externo .css arquivo. É criado por editor de texto . O CSS é o método mais eficiente para estilizar um site. Ao editar o .css arquivo, podemos alterar todo o site de uma só vez.

Para usar o CSS externo, siga as etapas abaixo:

1. Crie um novo .css arquivo com editor de texto , e adicione Planilha em estilo cascata regras também.

Por exemplo:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Adicione uma referência ao externo .css arquivo logo após etiqueta no Seção de Folha HTML :

 

Prós do CSS externo:

  • Nossos arquivos possuem uma estrutura mais limpa e menores em tamanho.
  • Usamos o mesmo .css arquivo para várias páginas da web em CSS externo.

Contras do CSS externo:

  • As páginas não podem ser entregues corretamente antes do CSS externo ser carregado.
  • Em CSS externo, o upload de muitos arquivos CSS pode aumentar o tempo de download de um site.

3. CSS embutido

CSS inline é usado para estilizar um específico HTML elemento. Adicione um estilo atributo para cada tag HTML sem usar os seletores. Gerenciar um site pode ser difícil se usarmos apenas CSS embutido . No entanto, em linha CSS em HTML é útil em algumas situações. Não tivemos acesso ao Arquivos CSS ou para aplicar estilos ao elemento.

No exemplo a seguir, usamos o CSS inline em

c# contém string
e

Será útil aqui.

Prós do CSS embutido:

  • Podemos criar regras CSS na página HTML.
  • Não podemos criar e fazer upload de um documento separado em CSS embutido.

Contras do CSS embutido:

  • CSS embutido, adicionando CSS regras para elementos HTML é demorado e bagunça configurar a estrutura HTML.
  • Ele estiliza vários elementos ao mesmo tempo, o que pode afetar o tamanho da página e o tempo de download da página.