Como inserir um arquivo CSS em HTML

Autor: Eric Farmer
Data De Criação: 3 Marchar 2021
Data De Atualização: 1 Julho 2024
Anonim
Como inserir o CSS dentro do HTML !!!! Fácil e Rápido
Vídeo: Como inserir o CSS dentro do HTML !!!! Fácil e Rápido

Contente

A linguagem de marcação de hipertexto (HTML) determina quais elementos estão presentes em uma página da web. A linguagem de programação Cascading Style Sheets (CSS) descreve a aparência desses elementos.O arquivo CSS pode ser adicionado ao HTML como um externo (CSS é adicionado como um arquivo separado) ou folha de estilo interna (CSS está incluído no arquivo HTML). Aprenda a incorporar CSS em um arquivo HTML para redesenhar seu site.

Passos

Método 1 de 2: como configurar uma folha de estilo externa

  1. 1 Crie um arquivo CSS. Prepare e salve um arquivo CSS com uma extensão ".css".
  2. 2 Faça upload do arquivo CSS para o seu site.
  3. 3 Copie o endereço (URL) do arquivo CSS. O endereço do site será parecido com este: www.yoursite.com/stylesheet.css.
    • É uma boa prática remover o nome de domínio principal do URL. Com base nisso, o endereço http: //myisite.com/css/default.css será reduzido para "/css/default.css". Lembre-se de incluir a barra inicial ("/"). É chamado de caminho relativo.
  4. 4 Insira o link no arquivo. Encontre a tag / head> em seu arquivo HTML e crie uma linha vazia logo acima dela. Cole nessa linha LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">, substituindo "www.your ..." por um link no arquivo CSS.
  5. 5 Salve o arquivo HTML e carregue-o no site.
  6. 6 Certifique-se de que tudo no site esteja como deveria. Caso contrário, reabra o arquivo HTML, procure erros e faça alterações.

Método 2 de 2: como inserir uma folha de estilo interna

  1. 1 Crie um estilo de etiqueta>. Abra o arquivo HTML e encontre a tag / head>. Adicione algumas linhas em branco acima e digite o seguinte:

STYLE type = "text / css"> / STYLE>

  1. 1 Cole todo o seu CSS entre esses dois rótulos.
  2. 2 Salve o arquivo HTML (com a extensão .html).
  3. 3 Certifique-se de que tudo no site esteja como deveria. Caso contrário, faça as alterações desejadas.

Pontas

  • Sempre verifique a aparência do site em diferentes navegadores e em diferentes sistemas operacionais. Alguns navegadores se conectam ao CSS de maneiras ligeiramente diferentes. Pode até acontecer no mesmo navegador, mas em versões diferentes do Mac e do Windows. Se o seu site parecer diferente em outro navegador (por exemplo, o espaçamento entre alguns objetos, como listas, é de um tamanho diferente), o problema são as configurações desse navegador. Encontre a folha de estilo mestre e cole-a no topo do arquivo CSS para alterar as configurações padrão do navegador. Isso é feito para que suas configurações não alterem nada no próprio navegador.
  • Insira uma folha de estilo externa, se puder. Isso permitirá que você altere a aparência do site, modificando o código no arquivo de origem. Dessa forma, você não precisa alterar o CSS em todas as páginas do seu site.
  • Se o seu site não estiver respondendo ao CSS da maneira esperada, verifique novamente a codificação inteira para ter certeza de que está digitada corretamente. Em particular, preste atenção especial aos pontos-e-vírgulas (";") e colchetes de fechamento ("}"). É bastante fácil omitir um desses caracteres em um arquivo CSS.
  • Salve o arquivo HTML em seu computador para que você possa abri-lo posteriormente em vários navegadores da web e verifique sua aparência antes de baixá-lo novamente. Mas, para carregá-lo, o arquivo CSS precisa ser inserido no HTML como uma folha de estilo externa.
  • Se a folha de estilo se contradizer - por exemplo, ela diz primeiro que o texto será azul e depois vermelho - a última condição sempre será atendida. Se um comando for uma folha de estilo externa e o outro for uma folha de estilo interna, a folha de estilo interna estará ativa.

Avisos

  • Não use CSS de teste "aberto", ou seja, o CSS que está incluído na tag HTML. (Exemplo: "align = 'center'" é uma configuração CSS aberta). Esta é uma opção obsoleta com sintaxe pobre. Se depois de um tempo você tiver que atualizar o site, essa configuração será difícil de alterar.