O estilo visual e o deseño dun sitio web están dictados por CSS ou Cascading Style Sheets. Estes son documentos que configuran o marcado HTML dunha páxina web, proporcionando aos navegadores web instrucións sobre como amosar as páxinas que resultan da marca. CSS manexa o deseño dunha páxina, así como a cor, as imaxes de fondo, a tipografía e moito máis.
Se mire un ficheiro CSS, verá que, como calquera linguaxe de marcado ou codificación, estes ficheiros teñen unha sintaxe específica para eles. Cada folla de estilo componse dunha serie de regras CSS. Estas regras, cando se toman na súa totalidade, son os estilos do sitio.
As partes dunha regra CSS
A regra CSS está composta por dúas partes distintas: o selector ea declaración. O selector determina o que está sendo estilizado nunha páxina e a declaración é como debe ser estilizada. Por exemplo:
p {
cor: # 000;
}
Esta é unha regra CSS. A parte selector é a "p", que é un selector de elemento para "parágrafos". Sería, polo tanto, seleccionar TODOS os parágrafos nun sitio e proporcionarlles este estilo (a non ser que haxa parágrafos que estean dirixidos por estilos máis específicos noutros lugares do documento CSS).
A parte da regra que di "cor: # 000"; é o que se coñece como a declaración. Esa declaración está formada por dúas pezas: a propiedade eo valor.
A propiedade é a peza "cor" desta declaración. Dita que aspecto do selector cambiarase visualmente.
O valor é o que cambiará a propiedade CSS elixida. No noso exemplo, estamos a usar o valor hexadecimal de # 000, que é abreviatura CSS para "negro".
Polo tanto, usando esta regra CSS, a nosa páxina tería os parágrafos amosados nunha cor de letra de negro.
Aspectos básicos da propiedade CSS
Cando escribe propiedades CSS, non pode simplemente facelas conforme o considere oportuno. Para instancias, a "cor" é unha propiedade CSS real, para que poida usalo. Esta propiedade é o que determina a cor do texto dun elemento. Se tentaches usar "color de texto" ou "fonte-cor" como propiedades CSS, fallarían porque non son partes reais do idioma CSS.
Outro exemplo é a propiedade "imaxe de fondo". Esta propiedade configura unha imaxe que se pode usar para un fondo, como este:
.logo {
background-image: url (/images/company-logo.png);
}
Se intentou usar "fondo-imaxe" ou "fondo-gráfico" como propiedade, fallarían porque, unha vez máis, estas non son propiedades CSS reais.
Algunhas propiedades CSS
Hai unha serie de propiedades CSS que pode usar para crear un sitio. Algúns exemplos son:
- Bordo (incluíndo o estilo de borde, a cor de borde eo ancho do borde)
- Recheo (incluíndo recheo, recheo-dereita, recheo e recheo-esquerda)
- Marxes (incluíndo marxe superior, marxe dereita, marxe inferior e marxe esquerda)
- Font-family
- Tamaño de letra
- Cor de fondo
- Ancho
- Altura
Estas propiedades CSS son excelentes para usar como exemplos, porque son moi sinxelas e, aínda que non coñezas CSS, probablemente podes adiviñar o que fan con base nos seus nomes.
Hai outras propiedades CSS que atopará tamén, que poden non ser tan evidentes como funcionan en función dos seus nomes:
- Flotador
- Claro
- Desbordamento
- Transformación de texto
- Índice Z
A medida que se profundiza no deseño web, atoparás (e usarás) todas estas propiedades e moito máis.
As propiedades precisan de valores
Cada vez que usa unha propiedade, ten que darlle un valor e certas propiedades só poden aceptar certos valores.
No noso primeiro exemplo da propiedade "cor" necesitamos usar un valor de cor. Isto podería ser un valor hexadecimal , un valor RGBA ou mesmo palabras clave de cor . Calquera destes valores funcionaría, no entanto, se usou a palabra "sombrío" con esta propiedade, non faría nada porque, como descritivo tal palabra pode ser, non é un valor recoñecido en CSS.
O noso segundo exemplo de "imaxe de fondo" require que se use unha ruta de imaxe para obter unha imaxe real dos ficheiros do seu sitio. Este é o valor / sintaxe que se require.
Todas as propiedades de CSS teñen valores que esperan. Por exemplo:
- A cor de fronteira espera un valor de cor
- O tamaño do bordo espera un valor de tamaño, como píxeles ou porcentaxes
- Os estilos de bordo esperan un dos estilos reservados empregados para esta propiedade, como "sólido"
Se pasa a lista de propiedades de CSS, descubrirá que cada un deles ten valores específicos que usarán para crear os estilos aos que están destinados.
Editado por Jeremy Girard