Clique aqui para retornar à coluna do tutorial Wulin.com HTML.
Acima: Linguagem de marcação - Fale sobre a lista novamente
Fonte original Capítulo 9 Tags Lite
Anteriormente, continuamos mencionando que o conteúdo estruturado pode classificar detalhes de estrutura e design e otimizar tags. O que devemos fazer? Podemos usar XHTML e CSS que atendem aos padrões em vez de mesas e imagens para criar o layout de que precisamos.
Ao usar a tecnologia padrão para criar sites (especialmente sites que dependem muito do CSS), geralmente desenvolvemos um mau hábito, que é adicionar tags extras e atributos de classe, e a tecnologia não precisa deles.
Usando seletores de descendente no CSS, podemos eliminar as propriedades desnecessárias <div>, <pan> e a classificação. Tags simplificadas significam que as páginas serão lidas mais rápidas e fáceis de manter. Neste capítulo, discutiremos várias maneiras simples de realizar essa tarefa. Como otimizar as tags ao criar um site com tecnologia padrão?
Tags simplificadas são um tópico importante que vale a pena discutir. Ao criar um site, um dos enormes benefícios que podem ser obtidos escrevendo em XHTML legítimo e a definição de efeitos de exibição com CSS são as tags simplificadas. O código curto representa uma velocidade de download mais rápida, que é definitivamente a chave para os usuários que usam 56k dial-up para acessar a Internet. O código curto também representa os requisitos do espaço do servidor e reduz o consumo de largura de banda, o que pode deixar o chefe e o gerente do sistema feliz.
O problema é que simplesmente confirmando que a página está em conformidade com a especificação padrão W3C não significa que o código usado no conteúdo será reduzido. Obviamente, você pode adicionar várias tags indesejadas ao conteúdo de tag que atenda aos padrões. Sim, ele atende aos padrões, mas pode ter adicionado muito código desnecessário para facilitar o design do CSS.
Não tenha medo! Existem algumas dicas aqui que permitem projetar conciso e ter conteúdo de marcação padrão, mas também mantém recursos suficientes de controle de estilo CSS. Então vamos aprender algumas dicas simples para otimizar as tags. Seletor de herança
Aqui, examinaremos duas maneiras de marcar a barra lateral (incluindo informações, links e outras coisas) em um site pessoal. Coisa todas as coisas boas em um <div> com um ID é uma barra lateral para que possa ser colocada em uma janela do navegador mais tarde (a segunda parte discutirá a funcionalidade do layout/tipo CSS). Método A: Classificação feliz
<div id = barra lateral>
<H3 Class = Sideheading> Sobre este site </h3>
<p> Este é o meu site. </p>
<h3 class = lateheading> meus links </h3>
<UL Class = SideLinks>
<li class = link> <a href = arquivos.html> arquivos </a> </li>
<li class = link> <a href = about.html> sobre mim </a> </li>
</ul>
</div>
Vi conteúdo marcado semelhante ao método A em muitos sites. Quando o designer descobriu o poder do CSS, é fácil ficar sobrecarregado e especificar uma classe para cada tag que deseja criar um estilo especial.
No exemplo anterior, talvez pensemos que <H3> especifica o Class = Sideheading para ajudá -los a especificar estilos diferentes de outros títulos dentro da página; Especificar a classe para <ul> e <li> também é pelo mesmo motivo. CLASSIFICAÇÃO CSS
Ao especificar o estilo, suponha que queremos que o título gire o Orange, use a fonte serif, com uma borda cinza clara na parte inferior, e a lista não ordenada Sidelinks precisa remover o símbolo de pequenos pontos e alterar o item da lista para negrito.
O conteúdo CSS exigido pelo método A ficará assim:
.SideHeading {
Font-Family: Georgia, Serif;
Cor: #C63;
fundo de borda: 1px sólido #ccc;
}
.sidelinks {
Tipo no estilo de lista: nenhum;
}
.link {
Peso da fonte: negrito;
}
Podemos nos referir aos nomes de classe (classes) estabelecidos nas tags para especificar estilos especiais para essas tags, e você pode imaginar que outras partes da página estão organizadas dessa maneira: barras de navegação, final da página e área de conteúdo, cada tag está desordenada para ter controle total sobre eles.
Sim, funciona, mas há uma maneira simples de salvar esses atributos de classe, enquanto facilita a leitura do seu CSS e mais organizada. Em seguida, observe o método B. Método B: Escolha natural
<div id = barra lateral>
<H3> Sobre este site </h3>
<p> Este é o meu site. </p>
<H3> Meus links </h3>
<ul>
<li> <a href = arquivos.html> arquivos </a> </li>
<li> <a href = about.html> sobre mim </a> </li>
</ul>
</div>
O método B é curto e conciso! Mas espere, para onde estão as categorias? Bem ... em breve você descobrirá que realmente não precisamos deles, principalmente porque enchemos essas tags em um relacionamento <div> com um nome único (neste caso, barra lateral).
É aqui que o seletor de herança é usado. Só precisamos especificar diretamente as tags localizadas na barra lateral com o nome da etiqueta para remover essas propriedades de classificação desnecessárias. Especifique CSS com o conteúdo antes e depois do relacionamento.
Vejamos o mesmo estilo que o método A, mas desta vez usamos o seletor de herança para especificar a tag localizada na barra lateral.
#sidebar H3 {Font-Family: Georgia, Serif;
Cor: #C63;
fundo de borda: 1px sólido #ccc;
}
#sidebar ul {Tipo no estilo de lista: nenhum;
}
#sidebar li {Peso da fonte: negrito;
}
Ao se referir ao #sideBar ID, você pode especificar um estilo especial para as tags contidas nele. Por exemplo, apenas as tags <H3> localizadas dentro de <div id = barra lateral> definirão as regras CSS acima.
Esse método de especificar estilos com base na relação entre o conteúdo antes e depois é a chave para reduzir o conteúdo. Geralmente, depois de projetar a estrutura semântica para o conteúdo, não há necessidade de adicionar atributos de classificação ao rótulo. Não é usado apenas na barra lateral
Exibimos apenas um parágrafo da página (ou seja, a barra lateral), mas essa abordagem pode ser aplicada a toda a estrutura da página. Basta dividir o conteúdo da tag em vários parágrafos de acordo com a lógica (talvez #nav, #content, #sidebar, #footer) e depois usar o seletor de herança para criar estilos especiais para as tags neste parágrafo.
Por exemplo, suponha que os parágrafos #Content e #sideBar na página usem a tag <H3> e você queira que eles usem a fonte serif, no entanto, você deseja que o <H3> de um parágrafo seja exibido em roxo e outro para ser laranja.
Isso não requer nenhuma modificação de tags, além de propriedades de classificação. Podemos especificar regras para que todas as tags <H3> sejam compartilhadas por um estilo global e, em seguida, use o seletor de herança para definir a cor de acordo com a posição da tag.
H3 {
Font-Family: Georgia, Serif; / * Todos os H3s a serem serif */
}
#Content H3 {
Cor: roxo;
}
#sidebar H3 {
Cor: laranja;
}
Especifique que todas as tags <H3> usam fontes senif e as cores devem ser selecionadas para usar roxo ou laranja de acordo com o contexto de conteúdo. No momento, não precisamos repetir as regras de compartilhamento (neste exemplo, a família de fontes), para que o conteúdo do CSS possa ser reduzido e as regras duplicadas possam ser impedidas de ocorrer em várias declarações.
Não apenas podemos reduzir o espaço de marcação extra exigido pelo atributo de classe, mas a estrutura CSS também se torna mais significativa, facilitando a leitura de seu conteúdo e organizamos -o de acordo com os segmentos da página. Também se torna muito simples de modificar regras específicas, o que é particularmente óbvio para as digitações grandes e complexas, porque neste momento você pode ter centenas de regras CSS ao mesmo tempo.
Por exemplo, neste exemplo, se você adicionar as regras de compartilhamento a cada declaração e desejar substituir todos os <H3> por fontes sem serifa depois, você deve modificar três lugares e não há como fazê -lo de uma só vez. Quanto menos classificações, melhor manutenção
Além de reduzir o espaço do código -fonte que precisa ser usado, a substituição de categorias redundantes por seletores de herança também representa a futura facilidade de marcar conteúdo a ser expandida.
Por exemplo, vamos supor que você deseja que os links dentro da barra lateral fiquem vermelhos em vez de usar azul como o restante da página, para criar uma classe vermelha que aumente a tag âncora como esta:
<div id = barra lateral>
<H3> Sobre este site </h3>
<p> Este é o meu site. </p>
<H3> Meus links </h3>
<ul>
<li> <a href = archives.html class = Red> Arquivos </a> </li>
<li> <a href = about.html class = vermelho> sobre mim </a> </li>
</ul>
</div>
Para transformar esses links em vermelho (assumindo que a cor do link predefinido não seja vermelha) requer um CSS como este:
A: link.red {
Cor: vermelho;
}
Essas ações são boas e podem funcionar normalmente. Mas e se você mudar de idéia no futuro e quiser alterar esses links para o Green? Ou mais prático, seu chefe ocasionalmente diz que o vermelho este ano está desatualizado; portanto, mude esses links da barra lateral para verde! Não tem problema, você só precisa modificar a classe vermelha no CSS e fazê -lo, mas o atributo de classe no conteúdo de marcação ainda está vermelho. Obviamente, isso não está completamente alinhado com a semântica, assim como usar outras cores como o nome da classificação.
Este não é um bom lugar para usar os efeitos de exibição como nome de classificação, mas se não especificarmos uma classificação, podemos economizar muito esforço (e código) na classificação e tornar a semântica do conteúdo mais razoável. Podemos também selecionar links para essas barras laterais com seletores de herança e especificar estilos conforme necessário.
O conteúdo da tag é exatamente o mesmo que o método B, e o CSS necessário para definir o link na barra lateral será assim:
#sidebar Li A: link {Cor: vermelho;
}
Basicamente, isso significa que apenas as tags de ancoragem usando o atributo href na tag <li> dentro de <div id = barra lateral> também devem ser exibidas em vermelho.
Agora, mantemos conteúdo de marcação curto e flexível, e atualizações futuras exigem apenas CSS, não importa se querer que o link fique vermelho, verde, ousado ou em itálico.
Em seguida, vamos dar uma olhada em outra maneira de otimizar as tags: elimine tags desnecessárias <div> e use diretamente as tags de nível de bloco existentes.
Página anterior 1 2 3 Próxima página Leia o texto completo