Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
CSS INTERNO;EXTERNO;INLINE
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
CSS INTERNO; EXTERNO; INLINE DESAFIO! Como fazer uma página que utilize CSS externo e inline? Vamos considerar, atítulo de exemplo, que o código CSS externo estabelece que o seletor <h1> terá fonte Verdana e cor azul. E que o seletor de parágrafo tenha fonte Arial e cor azul. Entretanto, na mesma página, teremos outro seletor <h1> que tenha a cor verde e um parágrafo com a cor marrom. Não há conflito de informações? Podemos ter o mesmo seletor com dois tipos de estilo diferentes? Observe a figura, mostrada a seguir. Depois, faça uma página semelhante. 1) CSS interno Com o CSS interno, os códigos CSS ficam dentro da própria página HTML e devemser definidos por meio da tag <style>, que fica dentro da tag <head>, conforme está ilustrado no exemplo abaixo. 2) CSS externo Observem que, com o CSS interno, o código HTML fica na mesma página em que se encontra o código CSS. O exemplo mostrado anteriormente tem poucas linhas de código. Entretanto, frequentemente, encontramos páginas web com muitas linhas de código HTML e, neste contexto, podem também ter muitas linhas de código CSS. Se o código CSS ficar na mesma página em que está o código HTML, pode dificultar a organização e eventuais alterações que possam se fazer necessárias ao longo do tempo. Como alternativa mais eficiente, podemos utilizar o CSS externo, em que o código CSS fica em um arquivo separado dos códigos HTML e, dessa forma, os projetos ficam mais organizados. Considerando ainda o mesmo exemplo de um portal com cinquenta páginas web, bastaria referenciar o arquivo CSS externo em cada uma delas. E se houver necessidade de se alterar o código CSS, bastaria fazer as adequações uma única vez no arquivo externo, tendo em vista que todas as páginas continuariam referenciadas ao arquivo. Portanto, com o CSS em um arquivo (CSS externo) podemos alterar o visual de várias páginas web com apenas um arquivo. Para que isso aconteça, precisamos referenciar cada uma das páginas web ao arquivo CSS e isso é feito por meio da tag <link>, que fica dentro da tag <head>, conforme está ilustrado no código HTML mostrado a seguir. 3) CSS inline Com o CSS inline, podemos alterar o estilo dos elementos HTML individualmente, conforme ilustrado no exemplo de código mostrado a seguir. O elemento <h1> tem cor azul e alinhamento centralizado, enquanto o parágrafo tem cor vermelha. Vamos mostrar um exemplo que tenha CSS interno e, também, CSS inline. Observem o que acontece com o estilo dos elementos HTML. Saiba mais: Será que podemos ter vários arquivos com código CSS nos nossos projetos? Sim, podemos ter mais de um arquivo CSS. Basta que as páginas HTML façam a referência adequadamente, conforme foi mostrado no nosso estudo. E qual estilo será definido se houver mais um estilo especificado para um determinado elemento HTML? Neste caso, o estilo fica em "cascata", de acordo com ordem de prioridade mostrada a seguir: 1) Estilo inline; 2) Externo e interno; 3) Padrão do navegador. Portanto, o estilo inline é o que possui maior prioridade, ou seja, se sobrepuja aos estilos externo e interno, além do padrão do navegador.
Continue navegando
Compartilhar