CSS
¿Que es CSS3 y para que sirve CSS3?
Es un lenguaje para definir el estilo o la apariencia de las paginas web, escritas con HTML o de los documentos XML CSS se creo para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mas preciso sobre la apariencia de las paginas.
CSS sirve para definir la estetica de un sitio web en un documento externo y eso mismo permite que modificando ese documento (La hoja CSS) podamos cambiar la estética entera de un sitio web.
Formas de aplicar CSS
En linea
Una de las formas mas simples e intuitivas de dotar de estilos al código HTML es usando el atributo style que admiten la mayoría de las etiquetas HTML.
<ul style = "color: green;">
<li><a href="#" >Inicio</a></li> <li> <a href="libros.html">Libros de programación</a> </li> <li> <a href="cursos.html">Cursos de programación</a> </li> <li> <a href="humor.html">Humor informático</a> </li> </ul> |
Interna
Otra de las formas que existen para incluir estilos en un documento HTML es la de añadirlos directamente en la cabecera HTML del documento:
Este sistema puede servir en algunos casos, pero hay que tener en cuenta que utilizándolo, arruinamos la ventaja de tener los estilos en un documento independiente, por lo que siempre es preferible guardarlo en un archivo externo CSS.
Externa
En la cabecera del HTML, el bloque <head></head>, incluimos una relación al archivo CSS en cuestión:
¿Que es un comentario y como se escribe en CSS?
Un comentario es una cadena de código o texto en HTML, XML, CSS, JS y otros lenguajes de programación que no es visible en su navegador web. El comentario es utilizado para ofrecer alguna información sobre el código, desactivarlo temporalmente o para presentar otros comentarios de los desarrolladores de código.
Ejemplo:
1
2
3
4
5
6
7
8
9
10
11
| /* Global Structure---------------------------------------- */ .main {margin:0 auto;width:940px;position:relative;/* h2 font-size:26px;line-height:28px;}*/ |
¿Que es el modelo de cajas en CSS?
El modelo de cajas o "box model " es seguramente la característica mas importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las paginas web. El modelo de caja es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automaticamente. Cada vez que se inserte una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento
Elementos de línea y elementos de bloque
Los elementos en HTML usualmente son elementos "en bloque" o elementos "en linea". Un elemento en bloque ocupa todo el espacio de su elemento padre(Contenedor), creando asi un "bloque".
HTML
<p>Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.</p>CSS
p { background-color: #8ABB55; }
Un elemento en linea ocupa solo el espacio delimitado por las etiquetas que definen el elemento en linea.
HTML
<p>Este <span>span</span> es un elemento en línea; este fondo se ha coloreado para mostrar el principio y fin de la influencia del elemento en línea</p>CSS
span { background-color: #8ABB55; }Propiedades abreviadas en CSS3
Son propiedades CSS que permiten asignar valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada(shorthand). Se pueden escribir hojas de estilo mas concisas (y a menudo mas legibles), ahorrando tiempo y energía.
La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad background de CSS es una propiedad abreviada que puede definir el valor de background-color, background-image, background-repeat y background-position. Similarmente, las propiedades mas comunes relacionadas con las fuentes se pueden definir usando la abreviación font y los diferentes margenes alrededor de una caja pueden ser definidos usando la abreviación margin.
Herencia, cascada y especificidad en CSS
Herencia
La herencia en CSS es la ultima pieza que necesitamos conocer para tener la información completa y comprender que estilo se aplicara a un elemento. La idea es que unos elementos se heredaran por los elementos hijos y otros no.
- Por ejemplo, tiene sentido que
font-familyycolorsean heredadas, pues nos facilita establecer un ancho de fuente básico aplicando una familia de fuentes al elemento<html>; después podemos reemplazar las fuentes de elementos individuales si es necesario. Sería realmente molesto tener que establecer la fuente base para cada elemento por separado. - Otro ejemplo: tiene sentido que
margin,padding,border, ybackground-imageNO se hereden. Imaginemos el lio de formato/estilo que ocurriría si aplicamos estas propiedades en un elemento y fuera heredado por todos y cada uno de sus hijos, y después tener que "desaplicarlas" a todos los elementos también.
Cascada
CSS(Cascading Style Sheets) ya nos indica que cascada es un concepto importante. A su nivel mas básico indica que el orden de las reglas CSS importa, pero es algo mas que eso. Que prevalezcan unos selectores sobre otros en la cascada depende de tres factores(en orden de importancia-los primeros prevalecen sobre los ultimos):
- Importancia
- Especificidad
- Orden del código
Especificidad
La Especificidad es en si una medida de como de especifico es un selector-cuantos elementos pude seleccionar. Los selectores de elementos son poco específicos. Los selectores de clase son mas específicos por lo que prevalecen sobre los selectores de elementos. Los selectores ID son todavía mas específicos por lo tanto ganan frente a los de clase. La única forma de vencer a los selectores ID es usando la declaración !important
¿Que es minificar recursos?
Se entiende por minificacion el proceso mediante el cual se eliminan datos innecesarios o redundantes de un recurso sin que se vea afectada la forma en que los navegadores lo procesan. Por ejemplo eliminar comentarios y formato innecesario, retirar código que no se usa, emplear variables y nombres de funciones mas cortos, etc.
Que es el flex box en CSS3
Flexbox viene de "Flexible Box Layout" que se puede traducir como "Diseño de caja flexible"
y nos aporta una magnifica solucion para todos nuestros desarrollos "responsive". Lo que nos permite es crear un conjunto de elementos flexibles que se adaptan automaticamente a su contenedor y con el que podemos controlar parametros tales como la alineación, direccion(horizontal/vertical), ajuste de la fila segun tamaños y multitud de posibilidades que vamos a presentar.
En cuanto compatibilidad flexbox es actualmente compatible con los navegadores web mas importantes y diferentes versiones de los mismos si bien algunos debemos utilizar preficjos CSS para su buen funcionamiento. Si teneis problemas con algunas versiones antiguas puedes probar utilizar "Autoprefixer".
La ultima definicion conocida sobre Flexbox del W3C es el 26 de mayo de 2016 en el momento de escribir este articulo. Como se indica en la introduccion hasta ahora conociamos cuatro modos de disponer los elementos tres de presentacion y otro de posicion
Flexbox es una mezcla de todos ellos en cuanto a como afecta a la disposicion de una estructura de elementos contenidos en una capa padre o contendedor, y se define como "flex" en la propiedad "display"(display:flex). Podemos crear una estructura de elementos en linea similar a una tabla o hacer que funcionen como un bloque y en orden inverso en la siguiente resolucion, todo ello a la vez se adapta automaticamente al tamaño que necesitamos tanto en anchura como en altura.
El W3C define a esta estructura como el "flujo flexible" de elementos en direccion (arriba/abajo/izquierda/derecha) y tamaño (anchura/altura) segun los ejes principal (horizontal) y transversal(vertical).
Comentarios
Publicar un comentario