¿Que es CSS3 y para qué sirve CSS3?:
Css3 (Cascading Style Sheets) es un lenguaje para definir la representación de un documento estructurado o escrito en html o xml, Css3 es la última evolución del lenguaje de Css.
Css3 Nos sirve para darle estilo a nuestro documento de Html o bien la página que vamos a realizar. Dentro de nuestro Html pondremos la estructura de toda nuestra página, los elementos que tendremos dentro del mismo, etc, podemos hacer nuestro Css dentro del mismo documento de Html, pero se recomienda hacerlo por un documento aparte.
Formas de aplicar CSS:
En linea(o embebido): En linea es cuando aplicamos directamente el estilo css dentro de la etiqueta/objeto que vamos a ingresar, por ejemplo: <p font-size:15px>Hola banda</p>
Interno: De la misma manera podemos utilizar el css dentro de nuestro documento escrito en Html pero no directamente en las etiquetas. Las diferentes propiedades y valores se pueden poner en una misma línea o en distintas líneas según se prefiera (Siempre separados mediante punto y coma).
Dentro de las etiquetas <head></head> incluiremos una etiqueta de apertura de declaración de estilos.
Ejemplo:
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Hola banda</p>
Dándonos como resultado el texto "Hola banda" en color rojo y centrado en nuestra página.
Externo: Si tuvieramos pocos archivos o elementos dentro de nuestra página no habría problema con declarar los estilos internamente, pero en casos en los que tendremos miles de archivos no es lo más ideal, es por ello que podemos declarar los estilos dentro de un archivo independiente, dentro del cual utilizaremos la misma sintaxis, encerrando las propiedades por medio de llaves.
Pero necesitamos algo fundamental para que nuestro archivo css pueda ser aplicado sobre los elementos de nuestro Html y es crear un vínculo dentro del mismo, para ello utilizamos la etiqueta
<link rel="stylesheet" type="text/css" href="estilos.css"> con el cual estableceremos un vínculo entre nuestro documento html y nuestro documento css.
Ejemplo:
<!DOCTYPE html>
<!-- Código ejemplo para el curso CSS -->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<!-- Aquí el resto del código del ejemplo -->
</html>
Comentarios en Css, que son y como utlizarlos: Los comentarios dentro de css (y dentro de cualquier lenguaje de programación) son aquellas lineas que solo nos serviran como referencia o como guía para entender el funcionamiento de algo, todas estas lineas llevan una estructura especifica y no afectan el funcionamiento de nuestro programa.
En Css un comentario se realiza de la siguiente manera, lo abrimos con /* y lo cerramos con */
Ejemplo
/*Esto es un comentario*/
¿Qué es un modelo de cajas en Css?:
Cada elemento que encontramos dentro de un documento HTML se encuentra contenido en una caja rectangular, la cual cuenta con una serie de propiedades que afectaran el cómo se muestran los elementos.
Al trabajar con un modelo de caja, debemos tener en cuenta que existen dos propiedades principales para definirla, height y width, que definirán el ancho y alto de nuestra caja.
Adicionalmente a estas, tenemos el Margin, Padding y Border que nos brindaran mayor control al momento de organizar los elementos.
Si comparamos ambas imágenes, podremos observar que existe una pequeña variación de tamaño entre una y otra, esto es debido a que el padding y el border están agregando 10 píxeles respectivamente a cada lado de nuestra caja, haciendo que el tamaño de esta se incremente en 40 del tamaño original, siendo ahora de 240px width y 140 px en height. https://devcode.la/tutoriales/modelo-caja-css/
Elementos de linea y elementos de bloque:
Elementos de Línea:
Un elemento en linea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea.
Elementos de bloque:
Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un bloque. Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento.
Propiedades abreviadas en CSS3
Propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. 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 brackground de CSS es una propiedad abreviada que puede definir el valor de background-color , background-image , background-repeat y background-position. Así mismo las propiedades más comúnes 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
https://developer.mozilla.org/es/docs/Web/CSS/Shorthand_properties
Herencia, cascada y especificidad en CSS:
Cascada:
En Css es posible crear múltiples reglas CSS para definir un mismo concepto. En este caso, la que prevalece ante todas las demás depende de ciertos factores, como es la altura a la que está colocada la regla, a esto se refiere el concepto de cascada.
En Css es posible crear múltiples reglas CSS para definir un mismo concepto. En este caso, la que prevalece ante todas las demás depende de ciertos factores, como es la altura a la que está colocada la regla, a esto se refiere el concepto de cascada.
- El CSS embebido en un elemento HTML es el que tiene mayor precedencia, por lo que siempre será el que tenga prioridad sobre otras reglas CSS.
- En segundo lugar, el CSS interno definido a través de bloques style en el propio documento HTML será el siguiente a tener en cuenta en orden de prioridad.
- Por último, los documentos CSS externos son la tercera opción de prioridad a la hora de tomar en cuenta las reglas CSS.
Herencia:
La idea de la Herencia en CSS es que unos elementos pueden heredar ciertas propiedades de sus elementos Padres, siendo estos mismo elementos Hijos.
Por ejemplo, tiene sentido que font-family y color sean 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.
Por ejemplo, tiene sentido que font-family y color sean 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.
CSS dispone de tres valores especiales para manejar las herencias:
- inherit : Este valor establece el valor de la propiedad de un elemento seleccionado en el mismo que su elemento padre.
- initial : Este valor establece el valor de la propiedad de un elemento seleccionado en el valor por defecto que establece la hoja de estilos del navegador, si este no existe, la propiedad se hereda naturalmente, adoptando el valor de inherit.
- unset : Este valor reestablece la propiedad a su valor natural, esto es: si la propiedad se hereda de forma natural entonces actuará como inherit, sino, actuará como initial.
El valor inherit es el más interesante — nos permite, de forma explícita, hacer que un elemento herede de su padre el valor de una propiedad.
Imágenes:
En Html:
En CSS:
https://developer.mozilla.org/es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia
Especifidad:
Especifidad es la manera mediante la cual los navegadores deciden que valores de una propiedad CSS son mas relevantes para un elemento, y por lo tanto, serán aplicados. La especifidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.
La especifidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada. Cuando varias declaraciones tienen igual especifidad se aplicará al elemento la última declaración encontrada en el CSS.
Especifidad:
Especifidad es la manera mediante la cual los navegadores deciden que valores de una propiedad CSS son mas relevantes para un elemento, y por lo tanto, serán aplicados. La especifidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.
La especifidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada. Cuando varias declaraciones tienen igual especifidad se aplicará al elemento la última declaración encontrada en el CSS.
Minificar recursos:
En archivos CSS muy grandes suele influir de forma considerable el funcionamiento o rendimiento de nuestra página por lo que es ideal utilizar los llamados minify para reducir el tamaño del archivo CSS condensando toda la información, eliminando espacios, retornos de carro, etc...
Esto es un paso opcional, que se realiza solo para reducir el tamaño de los archivos CSS.
Que es Flex Box en CSS3:
Flexible Box define un nuevo tipo de modelo de caja en el que varios elementos seguidos pueden colocarse unos tras otros en dirección horizontal o vertical y unificar su tamaño. La dirección en la que se van ordenando los elementos se llama dirección principal. Una vez agotado el espeaciom los elementos se pueden ir ordenando en la dirección perpendicular a la dirección principalm que se llama dirección secundaria.
El orden y dirección de los elementos flexibles son los mismos que las direcciones de escritura.
La etiqueta que agrupa los elementos flexibles se llama contenedor flexible.
No hay comentarios.:
Publicar un comentario