Css Básico
Primer post de Css, realmente Css no es difícil. Veremos la estructura básica de las reglas en Css, como utilizarlo en tus documentos HTML, y algunas propiedades y selectores.
Css
Anteriormente les había comentado de atributos en HTML que se encontraban desaconsejados o en desuso, esto es por que en Css podemos realizar esas funciones logrando separar de mejor forma el contenido de el estilo, que es lo aconsejado. Para trabajar en css solo necesitas un editor web, si estás buscando uno puedes ver la publicación: Descarga tu editor de páginas Web!. Las hojas de estilo en cascada o Css es lenguaje utilizado para definir la presentación de las paginas HTML. Css funciona a base de "reglas":
Los selectores identifican el elemento en tu documento HTML al que se le aplicaran las propiedades, puedes tener varios selectores, el selector puede ser un elemento en específico o todos los elementos pertenecientes a un mismo tipo. La declaración se componen de una o varias propiedades, las cuales definen los estilos a aplicar. Cada propiedad debe tener un valor, para usar varias propiedades en una misma declaración estas deben ir separadas por ";". Esa es la sintaxis básica de una regla de estilo pero ¿cómo lo uso en HTML?
Usando Css
Existen 3 formas de usar reglas Css en HTML, por atributo, por <style> y por <link>.
- Por atributo:
No es la mejor opción, de hecho creo que es una mala idea usarlo, ¿por qué? por que utilizarlo implica la menor separación entre contenido-estilo que podrías alcanzar con Css. A demás es engorroso, acabarías copiando demasiado código. El atributo style puede aplicarse a casi cualquier elemento HTML. Ejemplo:
<body style="color:#004080;">
<p style="font-family:arial;">
Imagina que quieres aplicar un estilo de fuente arial a todos los párrafos, y que en cada una de las etiquetas <p> debas copiar este atributo, ese es el inconveniente de utilizar el atributo style.
- Etiqueta <style>:
No es tan engorroso como utilizar el atributo style, pero aún esta no es tampoco la mejor opción; no es la mejor opción por que sigue habiendo mucho acoplamiento entre el HTML y el Css, y la meta es lograr la mayor separación contenido-estilo. El elemento <style> debes escribirlo dentro del <head>. Ejemplo:
<head>
<title>Mi página</title>
<style>
body {
color:#004080;
font-family:arial;}
p {background-color:#CCC}
</style>
</head>
- Etiqueta <link>:
La mejor opción, aumenta al máximo la separación contenido-estilo, ya que de esta forma tendremos un fichero HTML y un fichero Css, por separado; así puedes utilizar el mismo fichero Css para varios documentos HTML. <link> también se escribe en el head de tu documento HTML, y debe llevar dos atributos obligatorios: href="" para señalar la ubicación del fichero que contiene la hoja de estilo, y rel="stylesheets" para indicar que se trata de una hoja de estilos. Ejemplo:
Fichero HTML | Fichero Css
|
<head> | body {
<link href="archivo.css" rel="stylesheets"> | color:#004080;
<title>titulo</title> | font-family:arial;}
</head> |
Selectores
Existen varios tipos de selectores, unos simples y otro algo más avanzados, pero en general se dividen en 3 tipos básicos: De clase, de identificador y de tipo.
- Selector de tipo:
Son los selectores que he usado hasta ahora en los ejemplos, al utilizarlo se verán afectados por las propiedades de estilo todos los elementos del mismo tipo indicado en el selector, por lo que si usamos "p" afectaría a todos los parrafos del documento HTML, o si usaramos "h1" a todos los encabezados.
- Selector de clase:
Al utilizar un selector de tipo clase se veran afectados todos los elementos pertenecientes a la clase indicada. Para colocar elementos dentro de una clase en tu documento HTML debes colocar como atributo class="nombre-de-clase", varios elementos pueden pertenecer a la misma clase. En tu fichero Css el selector debe tener la sintaxis: ".nombre-de-clase", es importante no olvidar el punto antes del nombre de la clase, ejemplo:
HTML
<h1 class="arial"> encabezado </h1>
<p class="arial"> parrafo1 </p>
<p> parrafo2 </p>
Css
.arial {font-family:arial;}
Como pueden observar en el ejemplo, solo el encabezado y el primer párrafo tendrán letra tipo arial por que solo ambos pertenecen a la misma clase.
- Selector de identificador:
Al utilizar un selector de tipo identificador se vera afectado el elemento con el id indicado. Para colocar un id a un elemento en tu documento HTML debes colocar como atributo id="nombre-de-id", el id debe ser único para un documento HTML. En tu fichero Css el selector debe tener la sintaxis: "#nombre-de-id", ejemplo:
HTML
<h1> encabezado </h1>
<p id="p1"> parrafo1 </p>
<p> parrafo2 </p>
Css
#p1 {color:#B00;}
Como pueden ver, en este ejemplo el primer párrafo será de color rojo por que tiene el mismo id que se utiliza como selector en el fichero Css.
Pueden seleccionar varios indicadores para que cumplan las mismas propiedades de una declaración si los separan por ",". Bien eso ha sido todo por este post, sencillo ¿no? nos vemos en el siguiente :)
Comentarios
Publicar un comentario