Os estilos CSS podem ser introduzidos em documentos HTML como arquivos separados (arquivos do tipo .css ) ou escritos diretamente em documentos HTML. Eles podem ser divididos nos quatro métodos a seguir:
O primeiro e o segundo métodos gravam estilos CSS no documento HTML atual. O terceiro e o quarto métodos colocam os estilos CSS em arquivos externos e depois os importam para o documento HTML atual.
Estilo inline é colocar o estilo CSS diretamente na tag dentro da linha de código, geralmente no atributo style da tag. Como o estilo inline é inserido diretamente na tag, é a forma mais direta e também a. mais inconveniente para modificar o estilo.
[Exemplo 1] Aplique estilos CSS inline a parágrafos, tags <h2>, tags <em>, tags <strong> e tags <div> respectivamente.
<!doctypehtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Estilos embutidos</title>
</head>
<corpo>
<p style="background-color: #999900">Elemento embutido, parágrafo de controle-1</p>
<h2 style="background-color: #FF6633">Elemento embutido, elemento de título h2</h2>
<p style="background-color: #999900">Elementos embutidos, parágrafo de controle 2</p>
<strong style="font-size:30px;">Elementos embutidos, fortes são mais eficazes que em</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Elementos embutidos, elementos div em nível de bloco</div>
<em style="font-size:2em;">Elementos embutidos, com ênfase</em>
</body>
</html>O efeito de demonstração da página é mostrado abaixo:
No exemplo acima, o estilo inline é incorporado pelo atributo style do elemento HTML, ou seja, o código CSS pode ser colocado entre aspas style="" e vários valores de atributos CSS são separados por ponto e vírgula ; Por exemplo, a tag <div> no exemplo:
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Elementos embutidos, elementos div em nível de bloco</div>
A tag de parágrafo <p> define a cor de fundo como marrom (cor de fundo: #999900) e a tag de título <h2> define a cor de fundo como vermelho (cor de fundo: #FF6633).
A tag <strong> define a fonte para 30 pixels (font-size:30px;), a tag <div> define a altura e a altura da linha para 30 pixels e define a cor e a cor do plano de fundo (background-color: #66CC99; color : #993300 ; height:30px; line-height:30px;), a tag <em> define o tamanho da fonte em unidades relativas (tamanho da fonte: 2em;).
Embora o conteúdo das duas tags de parágrafo <p> seja diferente, elas usam a mesma configuração de cor de fundo, mas adicionam o atributo CSS inline duas vezes para definir a cor de fundo background-color: #999900.
Embora os elementos inline sejam simples de escrever, os seguintes defeitos podem ser encontrados por meio de exemplos:
Cada tag precisa ser estilizada adicionando o atributo style. Diferente do passado, quando os produtores de páginas da web misturavam tags e estilos HTML, agora os estilos embutidos são escritos por meio de CSS e, no passado, os atributos das tags HTML eram usados para obter efeitos de estilo. Embora os métodos sejam diferentes, as consequências são as mesmas: altos custos de manutenção no futuro, ou seja, ao modificar a página, você precisa abrir cada página do site uma por uma e modificá-la uma por uma, e você não consegue ver o papel do CSS. Adicionar tantos estilos embutidos tornará a página grande. Se o portal for escrito dessa forma, desperdiçará largura de banda e tráfego do servidor.Algumas páginas da web na Internet podem ver essa forma de escrita olhando os arquivos de origem. Embora apenas parte de uma página da web seja feita dessa forma, ela precisa ser diferenciada de acordo com a situação:
Se um criador de página web escreve tal estilo inline, o estilo atual pode ser alterado rapidamente sem ter que considerar o conflito de estilos escritos anteriormente. Se esta situação existir na página web, é porque o estilo é gerado pelo editor em segundo plano. edição, ou o fundo não está totalmente desenvolvido, é necessário desenvolver opções para que os editores selecionem estilos em vez de alterar diretamente a cor, espessura, cor de fundo, inclinação e outros efeitos através do editor.Os estilos inline escrevem CSS no cabeçalho do arquivo fonte da página web, ou seja, entre <head> e <head>, e o circundam usando a tag <style> na tag HTML. Sua característica é que o estilo só pode ser. usado aqui. Use page para resolver a desvantagem de escrever estilos embutidos várias vezes.
[Exemplo 2] Defina um método de escrita de estilo embutido para parágrafos para reduzir a quantidade de código.
<!doctypehtml>
<html>
<cabeça>
<meta charset="utf-8">
<title>Incorporado</title>
<style type="texto/css">
p{
alinhamento de texto: esquerda; /*texto alinhado à esquerda*/
tamanho da fonte: 18px; /*Tamanho da fonte 18 pixels*/
altura da linha: 25px; /*Altura da linha 25 pixels*/
text-indent: 2em; /*Recua a primeira linha em 2 espaços de tamanho de texto*/
largura: 500px; /*Largura do parágrafo 500 pixels*/
margin: 0 auto; /*Centrado no navegador*/
margin-bottom: 20px; /*margem inferior do parágrafo 20 pixels*/
}
</estilo>
</head>
<corpo>
<p>O nome da empresa "Baidu" vem do poema da Dinastia Song "Procurando por ele em milhares de Baidu". (A sala de conferências da Baidu Company chama-se Qingyu Case, que é a palavra cartão deste poema). A ideia do ícone "pata de urso" veio do estímulo de "caçadores patrulhando patas de urso", que é muito semelhante à "tecnologia de pesquisa analítica" do Dr. Li, formando assim o conceito de pesquisa do Baidu e eventualmente se tornando a imagem do ícone do Baidu. Depois disso, como a maioria dos motores de busca eram representados por imagens de animais, como a raposa do SOHU, como o cachorro do GOOGLE, o Baidu naturalmente o chamou de urso. O Baidu Bear se tornou a imagem da Baidu Company. </p>
<p>No plano do Baidu de mudar seu LOGO, os três novos designs de LOGO propostos pelo Baidu foram todos rejeitados pelos votos dos internautas. Mais internautas votaram no logotipo original da pata de urso. </p>
<p>Um total de três rodadas de votação foram realizadas para alterar o LOGO. Até o final da segunda rodada de votação, o novo LOGO com rosto sorridente tinha uma vantagem absoluta. Mas na rodada final de votação, o logotipo original da pata de urso ganhou dramaticamente o maior número de votos dos internautas, rejeitando completamente os três novos planos do LOGO. </p>
</body>
</html>O efeito de demonstração da página é mostrado abaixo:
No exemplo acima, os parágrafos são definidos da seguinte forma: o texto está alinhado à esquerda, a fonte tem tamanho 14, a altura da linha é 25 pixels, a largura é 500 pixels, a margem inferior é 20 pixels, o navegador está centralizado sob o navegador, e a primeira linha é recuada por dois espaços de tamanho de texto. O recuo da primeira linha usa unidades relativas. O objetivo desta configuração é que quando o tamanho da fonte muda (como font-size: 18px; ), ela ainda pode ser recuada por dois espaços de tamanho de texto.
Os estilos embutidos trazem inconvenientes na modificação do estilo. Por exemplo, no exemplo anterior, ambos os parágrafos usam o mesmo estilo, mas precisam ser escritos duas vezes.
O estilo pode definir não apenas estilos CSS, mas também scripts JavaScript, portanto, você precisa prestar atenção ao usar o estilo. Quando o valor do tipo de estilo é text/css , o estilo CSS é escrito internamente; se o valor do tipo de estilo é text/javascript , o script JavaScript é escrito internamente;
O atributo title da tag de estilo
Há um atributo especial de título no estilo. Você pode usar o título para definir um título para estilos diferentes. O visualizador pode escolher estilos diferentes de acordo com o título para obter o efeito de alternância no navegador. e o navegador Firefox suporta este efeito.
[Exemplo 3] Defina dois estilos de tamanho de fonte para o navegador Firefox, respectivamente, e modifique-os através do menu "Exibir" do Firefox.
<!doctypehtml>
<html>
<cabeça>
<meta charset="utf-8">
<style type="text/css" title="Tamanho da fonte 14">
p{
alinhamento de texto: esquerda; /*texto alinhado à esquerda*/
tamanho da fonte: 14px; /*Tamanho da fonte 14 pixels*/
altura da linha: 25px; /*Altura da linha 25 pixels*/
text-indent: 2em; /*Recua a primeira linha com dois espaços de tamanho de texto*/
largura: 500px; /*Largura do parágrafo 500 pixels*/
margin: 0 auto; /*Centrado no navegador*/
}
</estilo>
<style type="text/css" title="Tamanho da fonte 18">
p{
alinhamento de texto: esquerda; /*texto alinhado à esquerda*/
tamanho da fonte: 18px; /*Tamanho da fonte 18 pixels*/
altura da linha: 25px; /*Altura da linha 25 pixels*/
text-indent: 2em; /*Recua a primeira linha com dois espaços de tamanho de texto*/
largura: 500px; /*Largura do parágrafo 500 pixels*/
margin: 0 auto; /*Centrado no navegador*/
color: #6699FF; /*Alterar cor da fonte*/
}
</estilo>
</head>
<corpo>
<p>O nome da empresa "Baidu" vem do poema da Dinastia Song "Procurando por ele em milhares de Baidu". (A sala de conferências da Baidu Company chama-se Qingyu Case, que é a palavra cartão deste poema). A ideia do ícone "pata de urso" veio do estímulo de "caçadores patrulhando patas de urso", que é muito semelhante à "tecnologia de pesquisa analítica" do Dr. Li, formando assim o conceito de pesquisa do Baidu e eventualmente se tornando a imagem do ícone do Baidu. </p>
</body>
</html>O efeito de demonstração da página é mostrado na figura abaixo.
No exemplo acima, dois tamanhos de fonte são definidos através de <style type="text/css" title="名称"> , e há duas opções no submenu "Estilo de página" no menu "Exibir" no Firefox: Fonte. tamanho 14, tamanho da fonte 18. Por padrão, o primeiro <style type="text/css" title="名称"> escrito é exibido. O estilo da página pode ser alterado através do menu.
O método link vincula arquivos de folhas de estilo externas a documentos HTML por meio da tag <link> do HTML. Este é o método mais comumente usado em sites da Internet e também o método mais prático. Este método separa completamente documentos HTML e arquivos CSS, consegue a separação completa da camada de estrutura e da camada de apresentação e melhora a escalabilidade da estrutura da página da web e a capacidade de manutenção dos estilos CSS.
[Exemplo 4] Use estilo de link para aplicar estilos ao código HTML, que é fácil de escrever e alterar.
<!doctypehtml>
<html>
<cabeça>
<meta charset="utf-8">
<título></título>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<corpo>
<p>Sou controlado pelo arquivo lianjie-2.css E você lá embaixo? ? </p>
<h3>No andar de cima, o arquivo <span>lianjie.css</span> me deu um vestido colorido. </h3>
</body>
</html>O efeito de demonstração da página é mostrado abaixo:
No exemplo acima, dois arquivos CSS são vinculados por link e ambos são válidos. É por isso que o criador do site coloca a parte comum em um arquivo CSS e escreve um novo arquivo de estilo para o estilo da página atual.
Código do arquivo lianjie.css:
h3{
font-weight: normal; /*Cancelar o efeito de negrito padrão do título*/
cor de fundo: #66CC99; /* Definir cor de fundo*/
altura: 50px /*Define a altura do rótulo*/
line-height:50px /* Define a altura da linha do rótulo*/
}
intervalo{
cor: #FFOOO; /* cor da fonte*/
peso da fonte:bold; /* fonte em negrito*/
}Código do arquivo lianjie-2.css:
p{
color: #FF3333; /*Configuração da cor da fonte*/
peso da fonte: negrito; /* fonte em negrito*/
border-bottom: 3px tracejado #009933; /* Define a linha da borda inferior*/
altura da linha: 30px; /* Definir altura da linha*/
}Os estilos vinculados separam completamente o código CSS e o código HTML, conseguindo a separação entre estrutura e estilo, permitindo que o código HTML construa especificamente a estrutura da página, enquanto o trabalho de embelezamento é concluído por CSS.
Os benefícios de vincular estilos CSS importados:
Os arquivos CSS podem ser colocados em diferentes arquivos HTML para unificar os estilos de todas as páginas do site, além disso, colocar o código CSS em um arquivo CSS facilita o gerenciamento e reduz o código e o tempo de manutenção quando o arquivo CSS é modificado, todas as páginas que se aplicam; este arquivo CSS será atualizado. Todos os arquivos HTML serão atualizados sem a necessidade de recuperar todas as páginas do servidor e carregá-las após a modificação.Importando estilos Use o comando @import para importar folhas de estilo externas. Existem 6 métodos de escrita para estilos importados:
@importar daoru.css;
@importar 'daomxss';
@import "daoru.css";
@importar url(daoru.css);
@importar url('daoru.css');
@importar url("daoru.css");[Exemplo 5] Importe as folhas de estilo lianjie.css e daoru.css e escreva a cor de fundo da tag <body>. Observe que os estilos importados da folha de estilo e da tag <body> não podem ser revertidos.
<html>
<cabeça>
<meta charset="utf-8">
<título></título>
<style type="texto/css">
@importar url(lianjie.css);
@importar url(daoru.css);
corpo {cor de fundo: #e4e929;
</estilo>
</head>
<corpo>
<div>
<p>Sou controlado pelo arquivo lianjie-2.css E você lá embaixo? ? </p>
<h3>Na jaqueta, o arquivo <span>lianjie.css</span> me deu um vestido floral. </h3>
</div>
</body>
</html>O efeito de demonstração da página é mostrado na figura abaixo.
No exemplo acima, deve ser @import url("lianjie-2.css"); p{text-indent: 3em;} , mas não p{text-indent:3em;} @import url("lianjie-2.css"); caso contrário, o efeito de importação será inválido. No arquivo CSS, @import também precisa ser colocado na frente e o estilo CSS é adicionado no final, caso contrário será inválido.
Código do arquivo lianjie.css, igual ao exemplo anterior, ou seja, tipo de link.
Código do arquivo daoru.css:
@importar url("lianjie-2.css");
p {recuo do texto: 3em};Isso conclui este artigo sobre os quatro métodos de implementação de estilos CSS incorporados em HTML. Para obter mais estilos CSS incorporados em HTML, pesquise os artigos anteriores de downcodes.com ou continue navegando nos seguintes artigos relacionados. . Suporte downcodes.com!