O que são folhas de estilo HTML?
Folha de estilos em cascata HTML é uma folha com um conjunto de regras e propriedades que informa ao navegador como renderizar HTML usando todos os estilos especificados.
CSS é a maneira pela qual estilizamos qualquer página da web. O CSS possui todas as propriedades, como plano de fundo, cores, fontes, espaçamento, bordas, etc., que podemos definir para cada elemento nas páginas.
As folhas de estilo HTML também são usadas para definir o layout da página, como onde o cabeçalho, rodapés ou outros elementos devem ser colocados na página. O CSS sempre é discutido junto com o HTML, pois as páginas sem nenhum estilo são muito claras, sem destaque de títulos, etc. e o mesmo tamanho de fonte em toda a página, o que não dá uma boa aparência aos usuários.
Como usar folhas de estilo HTML?
No passado, estilos, scripts, HTML, tudo estava escrito na mesma página. Isso tornou as páginas extremamente longas e extremamente difíceis de ler e editar. Então surgiu o caminho para separar HTML, estilos e Javascript.
Maneiras de incluir folhas de estilo HTML em uma página da Web:
Existem três maneiras pelas quais podemos incluir os estilos:
-
Estilo em linha
Essa é uma maneira de escrever estilos para cada elemento dentro do próprio HTML dentro de um atributo chamado style.
Essa maneira de estilizar não é recomendada, pois o HTML parece confuso e não podemos seguir a abordagem "Escrever uma vez, usar em muitos lugares"
Eg: Hello World!
-
Estilo interno
Isso inclui estilos incluídos em uma tag de estilo e a coloca em uma página da Web sobre HTML. Essa maneira de estilizar ainda é melhor que a estilizada em linha, pois podemos criar estilos comuns combinados, caso seja necessário usá-lo para vários elementos ao mesmo tempo.
No estágio de desenvolvimento, é mais fácil editar o arquivo HTML e não precisamos sempre abrir o arquivo CSS correspondente e editar todas as vezes.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Estilo externo
Essa é a maneira mais comum e a melhor de ter estilos para uma página da web. Isso é semelhante ao estilo interno, mas a diferença é que os estilos são gravados em um arquivo separado com a extensão .css e a referência a ele é colocada na etiqueta da página da web.
A sintaxe para vincular o arquivo CSS na página da web é:
Os estilos devem ser incluídos na tag head, que está acima da tag body (ou seja, conteúdo real) do HTML
Qual é a prioridade entre o estilo interno, interno e externo?
Os estilos embutidos têm mais prioridade do que interno e a última prioridade vem para o estilo externo.
Inline> Interno> Externo
Práticas recomendadas ao usar CSS:
- O CSS pode ser separado em vários arquivos, em vez de apenas um.
- Arquivos CSS separados podem ser incluídos um a um em uma tag head usando tags de link.
- Ou um arquivo CSS pode ter várias instruções de importação para importar o restante dos arquivos CSS. Isso separará logicamente o CSS, mas, em última análise, obtém todos os estilos renderizados no mesmo arquivo.
Uso: @import './process.css';
- Os estilos podem ser definidos para qualquer elemento da página da web com seletores como a própria tag HTML, nomes de classes, IDs, quaisquer nomes de atributos.
- Existem alguns pseudo-seletores disponíveis como:
- antes
- depois de
- enésimo filho
- primeiro filho
- último filho
- flutuar
- visitado
Estes são basicamente estados dos elementos selecionados e não realmente os elementos exatos.
- Quando arquivos CSS multiplicados são incluídos na página, o último assume a prioridade mais alta e substitui os estilos existentes dos arquivos anteriores com o mesmo seletor.
- As folhas de estilo devem ser usadas antes do próprio HTML, para que os estilos sejam aplicados enquanto a página está sendo carregada. Se incluído no final, o HTML será carregado primeiro e, em seguida, os estilos serão aplicados lentamente, o que proporciona uma experiência muito ruim ao usuário.
Vários recursos das folhas de estilo em cascata HTML:
- CSS fornece animações : Anteriormente, o javascript era usado apenas para animações. Mas o CSS mais recente, ou seja, o CSS3 fornece animações usando as próprias propriedades.
- Prefixos do fornecedor: antes de os navegadores lançarem o nome da versão / propriedade padrão para novos recursos, os navegadores nos fornecem alguns prefixos de fornecedor por algum tempo, durante um período de tempo, como um experimento. Os desenvolvedores precisam esperar até o navegador lançar suas versões padrão e, enquanto isso, os recursos experimentais podem ser usados com prefixos de fornecedores.
- Transformações CSS: Transição é usada para ir progressivamente para um valor de outro de uma propriedade dentro de uma determinada duração.
Eg: -webkit-transition: width 2s, height 4s;
- Transformações CSS: as transformações em CSS permitem traduzir, girar, dimensionar e inclinar elementos.
Consultas de mídia:
Dispositivos móveis, computadores de mesa e iPads se comportam de maneira diferente; no entanto, não podemos estilizar as páginas da mesma maneira. Os padrões da web anteriores foram projetados de tal maneira que tínhamos CSS diferente para cada tipo de dispositivo.
Com o progresso dos padrões da Web e a forma como a Web é criada, os navegadores são desenvolvidos para ter um único CSS que pode ser usado para qualquer tipo de dispositivo. Para alterar os estilos de dispositivos com base em largura e altura, são usadas consultas de mídia com as quais, podemos especificar a largura mínima ou máxima do dispositivo e escrever estilos nele.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Os estilos são definitivamente um benefício para a web. E como o desenvolvimento da web aumentou exponencialmente nos últimos tempos, o CSS3 definitivamente ganhou muita demanda para tornar as páginas extremamente interativas e intuitivas.
Artigos recomendados
Este foi um guia para folhas de estilo HTML. Aqui discutimos como usar folhas de estilo HTML, vários recursos e as maneiras de incluir CSS em uma página da Web. Você também pode consultar os seguintes artigos para saber mais -
- Introdução ao CSS
- Vantagens do CSS em Web Design
- O que é CSS? | Como usar?
- CSS diferencia maiúsculas de minúsculas?
- Vários estilos de lista HTML