Como construír unha folla de estilo externa

Usando CSS Site Wide

Os sitios web son unha combinación de estilo e estrutura e na web de hoxe, é unha boa práctica manter estes dous aspectos dun sitio separado un do outro.

HTML sempre foi o que proporciona un sitio coa súa estrutura. Nos primeiros días da web, HTML tamén contiña información de estilo. Elementos como a etiqueta foron cubertos polo código HTML, engadindo información de aparencia e sensación xunto con información estrutural. O movemento de estándares web empuxounos a cambiar esta práctica e, en vez, empurrar toda a información de estilo en CSS ou Cascading Style Sheets. Dándolle un paso máis alá, as recomendacións actuais son que usa o que se coñece como "folla de estilo externa" para as necesidades de estilo do seu sitio web.

Vantaxes e desvantaxes de follas de estilo externas

Unha das mellores cousas sobre Cascading Style Sheets é que pode usalos para manter o seu sitio completo coherente. A forma máis sinxela de facelo é ligar ou importar unha folla de estilo externa . Se usa a mesma folla de estilo externa para cada páxina do seu sitio, pode estar seguro de que todas as páxinas terán o mesmo estilo. Tamén podes facer máis doado facer cambios para o futuro. Xa que todas as páxinas usan a mesma folla de estilo externa, calquera cambio a esa folla afectará a cada páxina do sitio. Isto é moito mellor que ter que cambiar cada páxina individualmente.

Vantaxes de follas de estilo externas

  • Pode controlar o aspecto de varios documentos á vez.
    • Isto é especialmente útil se traballas cun equipo de persoas para crear o teu sitio web. Moitas regras de estilo poden ser difíciles de lembrar e, aínda que poida ter unha guía de estilo impreso, é ineficiente e tedioso que se faga pasar continuamente por ela para determinar se o texto do exemplo se escribiu en 12 fontes Arial ou mensaxes de 14 puntos. Ao ter todo nun só lugar, e dado que ese lugar tamén é onde faria cambios, pode facer o mantemento moito máis sinxelo.
  • Pode crear clases de estilos que se poidan usar en moitos elementos HTML diferentes.
    • Se adoita empregar un estilo de letra determinado para dar máis importancia a varias cousas na súa páxina, pode usar un atributo de clase que configurou na súa folla de estilo para obter este aspecto e non definir un estilo específico para cada instancia da. énfase.
  • Pode agrupar facilmente os seus estilos para ser máis eficiente.
    • Todos os métodos de agrupamento que están dispoñibles para CSS pódense empregar en follas de estilo externas, o que lle proporciona máis control e flexibilidade nas súas páxinas.

Desvantaxes de follas de estilo externas

  • As follas de estilo externas poden aumentar o tempo de descarga, especialmente se son moi grandes. Dado que o ficheiro CSS é un documento separado que debe cargarse, afectará o rendemento para realizar esa descarga.
  • As follas de estilo externas obtéñense moi rapidamente xa que é difícil dicir cando un estilo xa non está en uso porque non se elimina cando se elimina a páxina. A xestión axeitada dos teus ficheiros CSS é importante, especialmente se varias persoas traballan no mesmo ficheiro.
  • Se só ten un sitio web de única páxina, ter un ficheiro externo para CSS pode non ser necesario xa que só ten esa páxina ao estilo. Moitos dos beneficios do CSS externo pérdense cando só ten un sitio de páxina única.

Como crear unha folla de estilo externa

As follas de estilo externas créanse cunha sintaxe similar para documentar as follas de estilo de nivel. Non obstante, todo o que necesitas incluír son o selector ea declaración. Do mesmo xeito que nunha folla de estilo de nivel de documento, a sintaxe dunha regra é:

selector {property: value;}

Garda estas regras nun ficheiro de texto coa extensión .css. Isto non é necesario, pero é un bo hábito de entrar, para que poida recoñecer de inmediato as follas de estilo nunha listaxe de directorios.

Unha vez que teña un documento de folla de estilo, debes ligalo ás túas páxinas web . Isto pódese facer de dous xeitos:

  1. Ligando
    1. Para vincular unha folla de estilo, emprega a etiqueta HTML. Isto ten os atributos rel , type e href . O atributo rel indica que está ligando (neste caso, unha folla de estilo), o tipo define o tipo MIME para o navegador, eo href é a ruta ao ficheiro .css.
  2. Importación
    1. Usaría unha folla de estilo importada dentro dunha folla de estilo de nivel de documento para que poida importar os atributos dunha folla de estilo externa sen perder ningún documento específico. Chama de xeito similar a chamar unha folla de estilo vinculada, só se debe chamar dentro dunha declaración de estilo a nivel de documento. Pode importar tantas follas de estilo externas como necesitas para manter o teu sitio web.

Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 8/8/17