Com inserir un fitxer CSS a HTML

Autora: Eric Farmer
Data De La Creació: 3 Març 2021
Data D’Actualització: 1 Juliol 2024
Anonim
Creación y vinculación hoja de estilos CSS a un documento HTML
Vídeo: Creación y vinculación hoja de estilos CSS a un documento HTML

Content

El llenguatge de marcatge d’hipertext (HTML) determina quins elements estan presents en una pàgina web. El llenguatge de programació Cascading Style Sheets (CSS) descriu com haurien de ser aquests elements.El fitxer CSS es pot afegir a HTML com a extern (CSS s’afegeix com a fitxer independent) o full d’estil intern (CSS s’inclou al fitxer HTML). Obteniu informació sobre com inserir CSS en un fitxer HTML per redissenyar el vostre lloc.

Passos

Mètode 1 de 2: Com configurar un full d'estil extern

  1. 1 Creeu un fitxer CSS. Prepareu i deseu un fitxer CSS amb una extensió ".css".
  2. 2 Pengeu el fitxer CSS al vostre lloc.
  3. 3 Copieu l'adreça (URL) del fitxer CSS. L'adreça del lloc serà així: www.elvostre lloc.com/stylesheet.css.
    • És una bona pràctica eliminar el nom de domini principal de l'URL. Basat en això, l'adreça http: //myisite.com/css/default.css es reduirà a "/css/default.css". Recordeu incloure la barra inclinada ("/"). Es diu camí relatiu.
  4. 4 Inseriu l'enllaç al fitxer. Cerqueu l'etiqueta / head> al fitxer HTML i creeu una línia buida just a sobre. Enganxeu en aquesta línia LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">, substituint "www.your ..." per un enllaç al fitxer CSS.
  5. 5 Deseu el fitxer HTML i pengeu-lo al lloc.
  6. 6 Assegureu-vos que tot el contingut del lloc sigui tal com hauria de ser. En cas contrari, torneu a obrir el fitxer HTML, cerqueu errors i feu canvis.

Mètode 2 de 2: Com inserir un full d'estil intern

  1. 1 Creeu un estil d'etiqueta>. Obriu el fitxer HTML i cerqueu l'etiqueta / head>. Afegiu unes línies en blanc a sobre i introduïu el següent:

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

  1. 1 Enganxeu tots els vostres CSS entre aquestes dues etiquetes.
  2. 2 Deseu el fitxer HTML (amb l'extensió .html).
  3. 3 Assegureu-vos que tot el contingut del lloc sigui tal com hauria de ser. En cas contrari, feu els canvis desitjats.

Consells

  • Comproveu sempre l’aspecte del lloc en diferents navegadors i sistemes operatius diferents. Alguns navegadors es connecten a CSS de maneres lleugerament diferents. Fins i tot pot passar al mateix navegador, però en versions diferents de Mac i Windows. Si el vostre lloc té un aspecte diferent en un altre navegador (per exemple, l’espaiat entre alguns objectes, com ara llistes, té una mida diferent), el problema és la configuració del navegador. Cerqueu el full d'estil mestre i enganxeu-lo a la part superior del fitxer CSS per canviar la configuració predeterminada del navegador. Això es fa perquè la vostra configuració no canviï res al navegador.
  • Inseriu un full d’estil extern si podeu. Això us permetrà canviar l’aspecte del lloc modificant el codi del fitxer font. D'aquesta manera no haureu de canviar el CSS a totes les pàgines del vostre lloc.
  • Si el vostre lloc no respon a CSS de la manera que espereu, reviseu tota la codificació per assegurar-vos que s’escriu correctament. En particular, presteu especial atenció als punts i coma (";") i als claudàtors ("}"). És bastant fàcil ometre un d'aquests caràcters en un fitxer CSS.
  • Deseu el fitxer HTML al vostre ordinador perquè pugueu obrir-lo més tard en diversos navegadors web i comproveu-ne l’aspecte abans de descarregar-lo més. Però per carregar-lo, cal inserir el fitxer CSS a l’HTML com a full d’estil extern.
  • Si el full d’estil es contradiu, per exemple, primer diu que el text serà blau i després que serà vermell, sempre es complirà l’última condició. Si una ordre és un full d’estil extern i l’altra és un full d’estil intern, el full d’estil intern estarà actiu.

Advertiments

  • No utilitzeu CSS de prova "obert", és a dir, el CSS que s'inclou a l'etiqueta HTML. (Exemple: "align = 'center'" és un paràmetre CSS obert). Aquesta és una opció obsoleta amb una sintaxi deficient. Si al cap d’un temps haureu d’actualitzar el lloc, aquest paràmetre serà difícil de canviar.