Clique aqui para retornar à coluna do tutorial Wulin.com HTML. Se você deseja navegar no tutorial do CSS, clique aqui.
Acima: Linguagem de marcação - tags Lite . Capítulo 10 Aplique CSS
Na primeira parte, o foco principal está no exemplo da sintaxe de tags e também exploramos como aplicar CSS na tag para design e especificar detalhes do estilo. No segundo capítulo, discutiremos várias maneiras de aplicar o CSS a um documento, site ou até uma única tag. Além disso, também discutiremos como ocultar o conteúdo do CSS de versões anteriores dos navegadores, para que possamos usar técnicas avançadas sem afetar a estrutura de tags que podem ser lidas por todos os navegadores e dispositivos.
Na última unidade de extensão da ponta do capítulo, apresentaremos a prática de trocar fontes, cores e fazer vários temas sem ter que escrever scripts - substituindo as folhas de estilo. Como aplicar CSS aos arquivos?
Agora discutiremos quatro maneiras diferentes de aplicar CSS aos documentos. Cada método tem suas próprias vantagens e desvantagens. Dependendo da situação, todos os quatro métodos podem ser a melhor escolha. Cada método demonstrado aqui usa a estrutura de sintaxe de transição XHTML 1.0 legal, a tag <html> e <head> Configuração.
Vamos começar com o método A. Método A: <Style> Tag
<!
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </ititure>
<tipo de estilo = texto/css> <! [CDATA [... A declaração CSS é colocada aqui ...
]]> </style></head>
Essa abordagem também se torna uma folha de estilo incorporada, permitindo que você escreva todas as declarações do CSS diretamente no arquivo html (x), e a tag <style> está localizada na página <head> e pode ser colocada em qualquer estilo necessário.
O texto/CSS especificado para o atributo de tipo garante que o navegador entenda a linguagem de estilo que usamos e não possa ser omitida. Também usamos a sintaxe da anotação do CDATA recomendada pelo W3C para ocultar esses conteúdos de navegadores que não podem lidar com regras de estilo (http://www.w3.org/tr/xhtml1/#h-4.8).
Uma das principais desvantagens do uso do método A é que alguns navegadores antigos (especialmente o Internet Explorer 4.x e Netscape 4.x) farão o possível para exibir o efeito CSS especificado na tag <style>. Se você usar qualquer layout e posicionamento CSS avançados que suportem apenas o navegador mais recente, isso poderá causar problemas. Se você colocar regras CSS complexas na tag <yoy>, ela poderá causar resultados confusos e difíceis de ler para usuários de navegadores antigos. Não pode ser armazenado em cache.
Outra desvantagem das folhas de estilo incorporadas é: se colocado na página, você deve baixá -la toda vez que ler a página. Por outro lado, outros métodos fornecidos posteriormente podem permitir que a folha de estilo seja baixada apenas uma vez e, em seguida, use diretamente o cache do navegador. Modifique -o várias vezes.
Como a folha de estilo incorporada é armazenada nas páginas XHTML, se o mesmo estilo for usado em muitas páginas do site, isso significa que esses estilos terão muitas cópias idênticas. Se você precisar alterar esses estilos, deve modificar todas as páginas que usam o mesmo estilo. Lembrar! Modificar muitos documentos ao mesmo tempo será uma tarefa árdua. É conveniente desenvolver
Falando nos benefícios, descobri que, quando comecei a escrever e testar CSS, era muito conveniente escrever todas as regras na página que usei para testes usando o método A. Isso me permitiu colocar as marcas e estilos no mesmo documento, que era conveniente para modificação frequente. Após a conclusão do teste, aplicarei o CSS à versão pública de maneiras diferentes. Vamos dar uma olhada em vários métodos. Método B: Folha de estilo externo
<!
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </ititure>
<link rel = Stylesheet Type = text /css href = styles.css _fcksavedurl = styles.css /></head>
O método B demonstra a prática de conectar folhas de estilo externo: coloque todo o conteúdo da declaração CSS em um documento separado e, em seguida, faça referência ao seu conteúdo usando a tag <ink> na (x) html <head>.
Usamos o atributo href para especificar o local do documento. Esse atributo pode ser um caminho relativo (como o exemplo acima) ou um caminho absoluto (preenchido na posição completa http: // da folha de estilo). Ao mesmo tempo, observe que <link> é uma única tag ou uma tag vazia e deve ser fechada no / no final. Separando o documento = conveniente para manutenção
Há uma clara vantagem de colocar todas as regras do CSS em documentos diferentes do conteúdo marcado: ou seja, qualquer alteração de estilo feita em todo o site pode ser modificada para concluir o arquivo sem precisar modificar repetidamente a instrução CSS para cada página da Web, como usar o método A.
Obviamente, isso é muito crítico para sites em larga escala. Centenas ou até milhares de páginas podem compartilhar o mesmo estilo em um único documento. Baixar uma vez
Uma das vantagens adicionais de vincular folhas de estilo externo é que este documento geralmente é baixado apenas uma vez, e o navegador usará o cache, que pode economizar o tempo de download necessário ao navegar repetidamente na mesma página ou em outras páginas que referenciam a mesma folha de estilo. Ainda não pode ser completamente oculto.
Como o método A, o método B ainda pode ser antigo e só suporta algumas funções CSS para interpretar os navegadores. Qualquer estilo projetado para os navegadores mais recentes pode causar grande confusão em navegadores não suportados.
Bem ... esta é a segunda vez que mencionei esse problema, o próximo método deve resolvê -lo, certo? Método C: @import
<!
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </ititure>
<tipo de estilo = texto/css> <! [CDATA [ @import styles.css; ]]> </style></head>
Semelhante ao método B, o uso do @Import pode importar definições CSS de arquivos externos com caminhos relativos (como o exemplo acima) ou caminhos absolutos.
O método C tem as mesmas vantagens que o uso da tag <ink>. Como a folha de estilo é colocada em um documento externo, modificar e atualizar um único documento pode alterar o site inteiro e pode ser concluído de maneira fácil e rápida. A folha de estilo externo será armazenada em cache pelo navegador, economizando tempo de download para importar todas as páginas da mesma folha de estilo.
O principal benefício do uso do método C é que as seguintes versões do Netscape 4.x não suportam a sintaxe @Import, para ocultar o conteúdo CSS referenciado. Este é definitivamente um truque útil, porque podemos escrever uma sintaxe CSS avançada para lidar com detalhes de design, como layouts, para que os navegadores mais recentes que possam lidar com eles exibem e também fazem com que os navegadores antigos ignorem essas sintaxes.
O problema com o Netscape 4.x é que ele acha que seus recursos de suporte ao CSS são tão bons quanto os que são realmente suportados. Portanto, exceto o Netscape 4.x, podemos deixar o navegador decidir se deve exibir o efeito correto por si só.
Este é o ponto principal ao projetar sites com base no design padrão. Tente separar o código de tag estruturado do modo de exibição e forneça detalhes do layout e outros estilos para navegadores suportados. Os navegadores antigos usam conteúdo estruturado que podem ler e exibir facilmente, mas não lidarão com as regras CSS avançadas escondidas para eles. Estilos abertos e estilos próximos.
Veja as Figuras 10-1 e 10-2 e compare-o. Este é o meu site pessoal usando o CSS completo e, em seguida, desligue o efeito de exibição do CSS (deve estar muito próximo do efeito de exibição dos navegadores antigos). A estrutura quando não está usando CSS ainda é muito óbvia e ainda é fácil para todos ler e usar. Se não ocultarmos o CSS necessário para o layout de exibição, os usuários de navegadores antigos podem obter um monte de conteúdo difícil de ler.
Figura 10-1 meu site pessoal, usando CSS
Figura 10-2: Remova CSS na mesma página e o navegador antigo pode exibi-lo como uma combinação do método B e Método C para aplicar uma folha de estilo múltiplo.
Às vezes, pode ser útil introduzir muitas folhas de estilo em um documento, por exemplo, você pode colocar todas as regras de layout em um documento e nas configurações de fontes em outro documento, o que pode facilitar a manutenção de um grande número de regras para projetos grandes e complexos. Efeitos de camaleões
Quando eu estava criando um site para a Fast Company Magazine, queria alterar o esquema de cores do site todos os meses para que ele pudesse corresponder à imagem da capa da revista atual. Para simplificar o trabalho regular de modificação, coloquei todas as regras CSS relacionadas a cores em um documento e coloquei outras regras que não seriam modificadas todos os meses em outro documento.
Pode ser mais fácil e rápido cobrir todas as cores todos os meses, sem precisar encontrar lentamente o conteúdo que precisa ser alterado nas centenas de outras regras que compõem o design. Enquanto este documento for modificado, a cor de todo o site será alterada imediatamente. Como fazer isso
Para introduzir várias folhas de estilo em combinação com o método B e o método C, o método é usar a tag <ink> na página para fazer referência ao documento principal do CSS, o mesmo que a demonstração do método B e o link para Styles.css.
O conteúdo do Styles.css contém apenas algumas regras @Import e apresenta os outros arquivos CSS necessários.
Por exemplo, se você deseja introduzir três folhas de estilo, uma para processar o layout, uma para definir fontes e outra para definir cores, o conteúdo de Styles.css pode ser assim:
/*Navegadores antigos não interpretarão essas regras de importação*/
@import url (layout.css);
@import url (fonts.css);
@import url (colors.css);
Dessa forma, a mesma tag <ink> pode ser usada em todo o site e apenas o arquivo Styles.css é referenciado. Este documento pode continuar a importar outras folhas de estilo com a regra @import. Enquanto a nova folha de estilo for adicionada a este documento, ela poderá desempenhar um papel em todo o site.
Isso facilita a atualização e a substituição do CSS. Por exemplo, se você de repente deseja cortar o CSS em 4 arquivos na estrada, você só precisa alterar as regras @Import deste documento sem modificar todos os estilos XHTML de tag-tag.lo-fi e hi-fi
Há outro truque para ocultar CSS de navegadores antigos usando a regra do método @Import C. Ou seja, use o efeito em cascata do CSS e use o método A ou o método B para fornecer os navegadores antigos e mais recentes para suportar efeitos de lo-fi e, em seguida, usar o @Import para fornecer efeitos avançados para outros navegadores suportados.
Os navegadores mais antigos só terão conteúdo que podem suportar, enquanto os navegadores mais novos receberão todos os estilos que desejam usar.
Vamos ver como é o código desta técnica:
<!
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </ititure>
<link rel = Stylesheet Type = text /css href = lofi.css _fcksavedurl = lofi.css /> <tipo de estilo = texto/css> @import hifi.css; </style></head>
Aqui, o lofi.css deve conter regras básicas do CSS, como cor de link e tamanho da fonte; Enquanto o HIFI.CSS contém regras avançadas, como layout, posicionamento, imagens de fundo, etc.
Podemos transmitir estilos de versão lo-fi e hi-fi sem precisar escrever scripts ou identificar versões do navegador de qualquer forma no lado do servidor. A ordem é importante
É importante especificar a ordem das tags <ink> e <yoy> no código -fonte da tag. A cascata de CSS refere -se à prioridade das regras, que é determinada com base na ordem de ocorrência.
Por exemplo, como a maioria dos navegadores mais recentes suporta os dois métodos, todas as folhas de estilo serão baixadas e todos os estilos serão aplicados. Neste momento, as regras de estilo no HIFI.CSS substituirão os estilos especificados pelo lofi.css para a mesma tag. Qual é o motivo? Porque no código -fonte da tag, o hifi.css aparece após o lofi.css.
Os navegadores mais antigos ignoram o HIFI.CSS porque a regra @Import não é suportada; portanto, eles usam apenas o estilo definido pelo Lofi.css. Abrace o recurso em cascata
Os benefícios do CSS em cascata são provocados de várias maneiras. Por exemplo, suponha que todo o seu site compartilhe um CSS externo para layout, posicionamento, definição de fontes, cores, etc., você deve usar a folha de estilo @import em cada página para ocultar essas regras para navegadores antigos.
Se houver uma página no site que deseje compartilhar configurações de layout e posicionamento, mas precisará ajustar a fonte ou a cor. Nesta página (diferente de outras páginas do site), o documento principal do CSS ainda pode ser introduzido. Depois de concluir a referência, nos referiremos ao segundo documento CSS que define um estilo especial para esta página. Quaisquer regras no segundo arquivo CSS serão preferidas, substituindo as regras de estilo especificadas pelo primeiro arquivo CSS para o mesmo rótulo.
Vejamos o exemplo. Master.css contém toda a estrutura do site, fontes e outras regras CSS, enquanto no Custom.css, é referenciado apenas em uma página específica, cobrindo as configurações de estilo de várias tags especiais.
<!
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> Aplicando CSS </ititure>
<tipo de estilo = texto/css> @import mestre.css; @import custom.css; </style></head>
Como o Custom.CSS é o segundo no código -fonte da tag, o estilo que ela especifica para a mesma tag substituirá o que é formulado no Master.css.
Por exemplo, suponha que, no main.css, exigimos que a tag <h1> use a fonte serif vermelha e <h2> para usar a fonte Blue Serif.
H1 {
Font-Family: Georgia, Serif;
Cor: vermelho;
}
H2 {
Font-Family: Georgia, Serif;
Cor: azul;
}
Em uma página específica, queremos alterar apenas as configurações de estilo da tag <h1> e seguir o estilo de <H2>. Em seguida, no Custom.css, precisamos apenas declarar o novo estilo para <H1>.
H1 {
Fonte-família: Verdana, sem serrif;
Cor: laranja;
}
Esta declaração substituirá a declaração no Master.CSS (porque o Custom.CSS será introduzido posteriormente). Se a página introduzir primeiro Master.css e, em seguida, custom.css, a tag <h1> usará a fonte Orange Verdana, enquanto <H2> ainda for uma fonte de serif azul. Porque a declaração subsequente no Master.css não é substituída pelo custom.css.
A função em cascata do CSS é uma ótima ferramenta para compartilhar estilos comuns, permitindo que você cubra apenas regras que precisam ser modificadas.
<h1 style = font-family: Georgia, serif; Cor: laranja;> Este é um título </h1>
Este é o quarto método de aplicativo CSS com o qual entramos em contato - estilos embutidos. Quase qualquer tag pode ser adicionada com atributos de estilo, permitindo que você aplique diretamente regras de estilo CSS às tags, assim como o exemplo acima.
Como os estilos embutidos são a camada mais baixa de empilhamento, eles substituem todas as declarações e regras de estilo externo declaradas na tag <yoy> de <head>.
Essa é uma maneira simples de adicionar estilos ao longo da página, mas deve ser pago para usá -lo. O estilo está ligado ao rótulo
Se você confiar muito no método d ao fazer estilos para a página, não separará o conteúdo e os métodos de exibição. Ao voltar e modificar, você deve marcar o código -fonte em profundidade e colocar CSS no arquivo separado, o que será muito mais fácil de manter.
O método de abuso D não é diferente do uso de etiquetas de efeito de exibição, como <font> para contaminar o código -fonte. Esses detalhes do design devem sempre ser colocados em outro lugar. Tenha cuidado para usar
Na realidade, é claro, às vezes a oportunidade de usar estilos embutidos é salvar sua vida quando você precisar adicionar estilos à página, mas não pode acessar arquivos externos ou não pode modificar <head>, ou pode usar o estilo temporariamente e também o usará quando não pretende compartilhá -lo com outras tags.
Por exemplo, se houver uma página no site que visualize uma venda de caridade que será removida mais tarde e você deseja projetar um estilo único para esta página, talvez incorpore essas regras de estilo à tag sem adicioná -las à folha de estilo permanente.
Vamos fazer isso agora, mas esteja ciente de que esses estilos não podem ser alterados facilmente ou são usados em toda a página para todo o site.
Página anterior 1 2 3 Próxima página Leia o texto completo