A cascata de folhas de estilo em cascata fim

Você deve estar se perguntando: “Por que arquivos de folha de estilo em cascata apelidado

folhas de estilo (assim o “C” em CSS)?” Cascading refere-se a como os estilos são aplicados e em que ordem - isto é, que estilos têm precedência sobre os outros. CSS pode ser implementado em três maneiras - sozinho ou em combinação uns com os outros - em suas páginas:

  • Na linha: CSS inline refere-se a estilos que são diretamente no conteúdo. Este método é o menos desejável porque afeta apenas o conteúdo que os estilos estão diretamente associados.

    Video: DIY: CASCATA DE FOLHAS DE PAPEL - DECORAÇÃO DE FESTA FLAMINGO

  • Embutido no cabeçalho do documento HTML: Como estilos inline, estilos incorporados são definidos direito em uma página HTML, e não através de uma folha de estilo externa. No entanto, esses estilos oferecem mais flexibilidade, porque eles podem ser aplicadas a muitos elementos dentro dessa única página, como todos os parágrafos no documento.

    Estes estilos não, no entanto, afetar partes de outras páginas HTML em seu site-se aplicam somente ao documento em que está incorporado.

  • Externo: CSS externa afeta todas as páginas de um site. Você precisa criar um arquivo CSS externo e, em seguida, conectar-se a esse arquivo na seção head de seus documentos HTML. Desta forma, permite-lhe tirar partido de controle de layout de site inteiro rápido.

    Video: Saiba como fazer um lindo arranjo com flores e frutas!

estilos inline

estilos inline são codificadas diretamente no corpo do documento. Por exemplo, olhe para o seguinte HTML para um parágrafo:

Isso seria texto preto

Video: CSS3: Muito além das folhas de estilo em cascata - Parte 2

Apesar de estilos inline são rápidos para adicionar na mosca, não recomendamos essa técnica. Em essência, você está trocando um estilo antigo de codificação que criou difíceis de manter sites para um novo sabor da mesma coisa.

Por exemplo, no código a seguir, você pode ver que esse estilo é aplicado diretamente no

marcar e afetará apenas esta instância de um parágrafo. Há outros parágrafos vai assumir os atributos, a menos que você aplicar os mesmos atributos de estilo para eles.

Isso seria texto preto



O problema com a codificação desta maneira é que se você decidir que quer mudar a cor do texto em seu site - ou qualquer outra coisa codificado com estilos inline - você tem que encontrar todos os lugares que você usou estas técnicas de styling em linha e alterá-los. estilos inline também fazer um monte de lixo que não é necessário.

Estilos embutidos no cabeçalho do documento

Quando você estilos incorporar, você cria seus estilos CSS na parte de cabeçalho do seu documento HTML e consulte-as no HTML, como este:

Bem-vindo ao nosso site!

Este texto seria roxo

A vantagem de usar esta técnica é que você pode ter alguns estilos especializados embutidos em apenas um documento HTML. Isso pode ser útil se você quiser uma página especial para um evento. As outras páginas do seu site não são afetados por estilos que são incorporados desta forma ou criados em linha.

Se você estiver criando estilos que você pretende usar no seu site (que é o caso mais frequente), não use esta técnica. Você vai acabar com um site que é uma dor no pescoço para atualizar porque você vai ter que abrir cada documento e editar cada estilo incorporado individualmente.

folhas de estilo externas

Usando uma folha de estilo externa é geralmente o método preferido, especialmente se você deseja implementar seus estilos em todo o site. Todas as informações de estilo CSS é criado em um arquivo externo (s). O arquivo é vinculado ao documento HTML na parte da cabeça do HTML, como este:

Esse código vincula o arquivo CSS no documento HTML. O arquivo CSS é style1.css e está na mesma pasta que a página HTML referindo.

Nota: extensão de arquivo da folha de estilo externa é .css. Quando um visitante vai para o seu site, o CSS é carregado junto com o HTML, ea página parece ótimo. A principal vantagem desta técnica é que, se você quer mudar alguma coisa sobre seu projeto ou layout, você pode fazer uma mudança no site inteiro, alterando os estilos no arquivo CSS. Você não precisa abrir os arquivos HTML para editá-los. Claro, você precisa visualizar suas páginas antes de publicá-los, mas essa é a regra para todas as páginas da web.

Você também pode criar várias folhas de estilo e ligá-los com o mesmo documento HTML, como este:

Com esta técnica, o site pode ter uma aparência unificada e sentir, e ainda tem a liberdade de ter folhas especializados de estilo para seções específicas de um grande website. Para tomar o exemplo anterior, style1.css pode definir página de fundo, fontes e cores e ser aplicado a todas as páginas em seu site, enquanto style2.css pode ter alguns estilos particulares usados ​​apenas em páginas que apresentam vídeos.

Neste caso, style1.css seria aplicado a cada página em seu site, mas style2.css seria aplicado apenas para páginas com vídeo.


Publicações relacionadas