Seguidores

MIS WEBS



CSS

Estilos CSS

CSS 3

¿Que es CSS?

Las siglas CSS provienene del ingles Cascading Style Sheet y la traducción al castellanao seria hoja de estilos en cascada.
Es un lenguaje descriptivo, de código libre e interpretado por nuestro navegador que utilizaremos para dar formato o estilo a nuestras páginas creada con html y Xml.

¿Que es un lenguaje descriptivo?

Es un lenguaje en el que selecionaremos una propiedad determinada de un objeto y le datemos un valor. En el siguiente ejemplo seleconaremos la propiedad tamaño fuente y le datemos el valor de 15 pixeles.
ejm. font-sice: 15px; .
Los lenguajes descriptivos no son programable. En ellos no pueden aparecer variables, bucles...

¿Cómo generar una declaración CSS?

Una declaracion en CSS se compone de 3 partes:

  • Selector: Es el nombre de la etiqueta o conjuntos de etiquetas que elegimos seleccionar.
  • Bloque de declaraciones: Un selector de etiquetas html puede ser utilizado para modificar una o varias propiedades.
  • Propiedad: Es la propiedad del objeto que deseamos modificar (color letra, fondo pagina, margen, borde...)
  • Valor: Seria el valor que le damos a la propiedad (rojo, 15 pixeles, centro...)
Pulsa para ver los diferentes compornentes de un documento css

Ejemplo de declaración CSS

Seleccionaremos todas las etiquetas h3 de nuestro ducmento Html (selector), modificaremos las propiedades fondo página y color letra (bloque declaraciones compuesta por dos declaraciones), a la propiedad background (fondo) le daremos el valor verde y a la propiedad color (color letra) le datemos color negro.

h3{
	background: green;
	color: black;
}
			

Variables CSS

Que es una variable

Es un espacio reservado en la memoria del ordenador al que le daremos un valor determinado. Dicho valor podra ser modificado en el trascurso del código del programa.

Cómo crear una variable en CSS y reutilizarla luego en una declaración.

En primer lugar utilizaremos el selector dos puntos root

:root {
	--nombreVariable : Valor;
}

Cuando deseemos utilizar el valor en una declaración cuando demos un valor haremos lo siguiente var(--nombreVariable)
Ejemplo:

:root{
	--rojo:red;
}
h2{
	background: var(--rojo);
}
			

Pseudo clases en CSS

Son palabras claves que utilizaremos para acceder a un elemento cuanto este se encuentre en un estado determinado (cuando se pase el ratón, cuando este activo, si es visible...). Unas de las pseudo clases más utilizadas es :hover.

Utilizando pseudo clases podemos realizar con CSS muchas tareas q hasta ahora se estaban realizando con javaScript.

Existe un pseudo elemento muy útil :nth-chikld() que podemos utilizar para seleccionar uno o vario elemento de una lista.

  • :nth-child(odd) seleciona todos los elemento inpares de la lista
  • :nth-child(even) seleciona todos los elemento pares de la lista
  • :nth-child(5) selecionará el 5º elemento de la lista
  • :nth-child(6n) selecionara un elemento cada seis posiciones.
  • :nth-lastchid() hace lo mismo q :nth-chid() pero de abajo hacia arriba.

LISTA PSEUDO CLASES

Normalizar estilos libreria

Los navegadores suelen tener estilos por defecto para sus etiquetas. Esto puede generar conflicto con nuestros estilos. Para evitar todo esto anteriormente se utilizaba un archivo que se llamava reset CSS, en la actualidad esta practica está en desuso.
Existe una libreria conocida como Normalize.css que te puedes descargar y utilizar para proyectos. Pudes descargarla y lincarla a tus proyectos o abrir y lincar por la URL.

Selectores CSS

Es un objeto que utulizaremos para seleccionar una serie de etiquetas a los que modificaremos sus atributos.

Selector Sintaxis En que caso usarlos
Clase .nombreClase Es recomendable utilizar siempre que sea poble las clases. Una Etiqueta Html puede tener varias clases por lo que podriamos generar clases con varios formatos de parrafos y utilizarlas segun nos combenga.
Id #nombreId Seleccionara aquel elemento cuyo Id sea igual al que le indicamos con un hash. Es el menos recomendable de los selectores CSS ya que un id solo vale para un elemento.
Conjunto de elementos h1 , h2 , h3 Utilizaremos una coma entra cada elemento para seleccionar varios elementos o etiquetas html
Selectores descendientes article p Evitarlo para no recaer en especifidad, será nuestro ultimo recurso. Dejaremos un espacio en blanco entre selectores para que selecione todos los lementos hijos del primero que coincidan con el que estmos dandole. En el ejemplo dado decimos que seclecione todos los p hijos de articulo
Selectores de hijos directos li > ul > li Seleciona los hijos directos del elemento seleccionado. En el siguiente ejemplo seleccionara los li que esten dentro de un ul que a su vez esten dentro de un li.
Selctor hermano h2 + p.explicacion Existen etiquetas en html que estan al mismo nivel ese tipo de etiquetas son hermanas. En el ejemplo le indicamos que seleccione la primera p con clase explicacion que este junto con un h2.
h2 ~ p.explicacion Selecciona cualquier hermano .
Selector atributos input[type = "text" ]
[ require ]
Introduciremos entre corchetes el atributo y el valor seleccionado.
[ class ^ = "Item"] Selecciona aquellos valores de atributo que empiezan por.
[ href $ = ".xml"] Selecciona aquellos valores de atributo href que finalizan en xml .
[class *= "sub" Seleciona aquellos atributos con valores que contienen.

Especifidad, herencia y cascada de CSS

La arquitectura en CSS es la forma que tenemos de organizar nuestros archivos. Existen en la actualidad varios modelos de arquitectura CSS algunos de los más utilizados son:

  • SMACSS
  • OOCSS
  • ITCSS

Cuando importamos librerias como boostrap puedem generar conflicto con nuestro CSS. Para evitar estos errores es importante dominar la especifidad, herencia y cascada.

Especifidad

Es facil que dentro de nuestro código o al incluir librerias, un mismo elemento tenga la misma propiedad modifica en varias ocasiones. Puede ser que los h2 esten seleccionados en varias partes de mi código y en una le demos fondo rojo y en otra amarillo, luego desccarguemos Bootstrap y este le de un fondo naranja. ¿con cual se quedaría? Por esa razón se genera la especifidad. La especifidad crea un cadena de preferencia para dar un valor a una propiedad contra más especifico o definido sea nuestro selector CSS mayor relevancia tendrá nuestro estilo frente a otro.

Reglas genericas especifidad

  1. Selector de etiquetas 1 punto.
  2. Selector de clases 10 puntos.
  3. Selector de Id 1000 puntos.
  4. Atributo !important preferencia máxima No recomendado es una mala praxis al romper todas las reglas CSS para dar nuestro valor al atributo. Solo para salvavidas.

Iremos sumando puntos contra más especifíficos seamos con nuestro selector. Puedes usar un calculador online para ver la preferencia que tendrá un selector css frente a otro.

Para evitar problemas de especifidad recomendamos utilizar clases para dar estilos. Si te fijas en boostrap tu introduces las clases dentro de tu html para dar el formato.

Cascada de selectores CSS

La cascada en CSS nos indica que cuando dos Selectores son identicos el que prevalecerá será el último escrito. Si en la línea 100 hemos puesto un selector p { color : pink} y en la línea 5800 tenemos otro selector igual p{color:red;} nuestros parrafos serán rojos. El navegador lee nuestro programa de arriba hacia debajo.
Si tubieramos varias hojas de estilo las interpreta según la hemos linkeado. Por lo que si en la primera linkeada usamos un selector igual que en la ultima linkeada se quedará con el de la última. Por esa razon hemos de tener en cuenta a la hora de linkear las hojas de estilo los posible conflictos que generen en el resto.

Herencia de objetos CSS

En html existen elementos padre e hijos. El body tine una serie de etiquetas dentro, esas etiquetas son sus hijos.
Ejemplo: document -> body -> article -> h1 -> span
Cualquier propiedad que tengan sus antecesores es heredada por él. En este caso span herada de todos sus antecesores. La forma de modificar una propiedad heredada que no deseamos tener, es modificarla nosotros.

Initial e Inherit

Initial
Reinicia un elemento selecionado a su valor por defecto o inicial.
Inherit
Reinia un elemento al valor que tiene su padre.

Ejemplo

See the Pen initial e inherit como usarlos by CVDGP (@cvdgp) on CodePen.

diplay

La propiedad display de CSS representa cuadro o caja en el que se encuentra nuestro elemento ocupando la línea completa de la pantalla.

Html pose etiquetas de bloque y otras etiquetas que son en línea. Podemos tener una etiqueta p con etiquetas hijas strong, span, dfn, mark ... que no romperan el bloque.

diplay inline

Le daremos el valor iniline al atributo display de de nuestro elemento selecionado, cuando este sea un elemento de bloque o independiente y desemos que se visualice como un lemento de inline. Un elmento en línea no tine alto y ancho por si mismo hereda siempre el alto y ancho del elemento padre.
display: inline;

display block

Le daremos el valor block al atributo display cuando nuestro elemento por defecto sea en línea y deseemos que lo muestre en un único bloque (acto seguido al anterior). Un lemento en bloque tiene alto y ancho por si mismo.
display:block;

display inline-block

Le daremos el valor inline-block al atributo display cuando nuestro elemento por defecto sea de bloque, desemos visualizarlo como elemento en línea. inline-block tiene podemos darle alto y ancho diferente al de su padre.

Propiedades abreviadas (shorthand) de padding, margin

Tanto para pading como para margin podemos palicar lo siguiente:

  1. top : superior
  2. right : derecho
  3. botton: inferior
  4. left: izquierdo

Disponemos de cuatro abrebiaturas o shothand:

un solo valor ==> margin: top / right / botton / left
tres valores ==> margin: top right / left botton
dos valores ==>margin: top/botton right / left
cuatro valores ==> margin: top right botton left

Eje para posicionar objetos css

Cuando posicionamos un objeto en css utilizaremos el eje de arcisas y cordenadas. El punto en el converge una x con una y sera el sitio donde se posicione nuestro objeto. X marcará el punto izquierda a derecha mientras que Y marcará el punto de arriba abajo.

X Y 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150 160 170 180 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150 160 170 180 x = 173 y = 40

Crear un contenedor donde introduzcamos texto con una barra desplazamiento horizontal (overflow-x: auto;) y otra bertical(overflow-y: auto;).

Cuando el texto sea mas grande que nuestro contenedor este creará una barras de scroll evitando que desborde su contenido. Es como un textarea pero hecho a tu forma, por lo que puedes meter imagenes de fondo o lo que se te ocurra.

En primer lugar crearemos unas etiquetas div con la clase comboScroll en mi case será código por lo que luego cargaré unas etiquetas code y por utltimo una pre para que no se deforme el texto.

ESte tipo de cuadro lo puedes utilizar para introducir una tabla grande, textos, código como es mi caso...

Quitar estilos de listas

list-style: none;

Borde de una contenedor

border: 3px solid grey;

    Los diferentes estilos de borde para un contenedos son los siguientes.

  • solid
  • dotted
  • double
  • dashed
  • groove
  • ridge
  • inset
  • outset

Generador de bordes de contendor:

Aquí podras ver diferentes ejemplos de bordes de un contenedor. Elíge en el desplegable el estio del borde que quieras:

border: 3px
solid
grey;

Fuentes

Fuente negrita:

font-weight: normal;
font-weight: bold;

/* Relativo al padre */
font-weight: lighter;
font-weight: bolder;

font: bold 2em  sans-serif;
			

Sombreado texto

text-shadow: 1px 2px;

Sombreado contenedor

box-shadow: 10em 0em grey inset;

Hacer invisible un objeto

visibility: hidden;

Ocultar objeto

display:none;

Opacidad de un objeto

Definiria lo opaco o traslucido que es un objeto determinado. Siendo el 1 la maxima opacidad y 0 trasparente.
opacity:0.5;

Bordes de un texto

Utilizaremos dos instrucciones fon fill color para el color del fondo y text-stroke para el tamaño del borde y su color.

#sombras-para-titulos > h2{ 
	font-size: 2.5em; 
	-webkit-text-fill-color: white;
	-webkit-text-stroke: 1.2px cyan;
}

Dejar un contenedor suspendido

Dejará nuestro contenedor supendido en una posición determinada. position
position:static;
Rompera el flujo de otros elementos que puedan invadir la posición natural del nuestro.
position:relative;
Invade toda la pagina rompiendo el flujo de cualquier elemento.
position:fixed;
Situara nuestro contenedor en un punto determinado que le marquemos.
position:absolute;
Rompe el flujo del anterior elemento invadiendolo si es necesario.
position:sticky;
Conocida como posición adesiba inicia en una posición pero cuando movemos la pantalla no se desplazará.

Unidades de medida css

UNIDAD USO
vh heigth viewpor, porcentaje del total del alto visible de pantalla. Si le dices 100vh seria el 100% del alto de la pantallla visible.
px pixeles, es una unidad de medida estandar para pantallas.
vw width viewport o ancho de la pantalla..
rem Unidad responsiva su valor variará dependiendo de la pantalla es parecido al uso de porcentajes.

Quitar una propiedad heredada en nuestra clase

En ocasiones deseamos modificar una propiedad de nuestra clase pero esta está siendo bloqueda por una propiedad del objeto padre. Para evitar este bloqueo pondremos la propiedad y!important

background: green !important;

Menu con css

En el siguiente menú cuando pases el raton por el botón u por el articulo se modificará el color de arriba hacia debajo.

Código Css para hacer una menú

CREAR UNA LISTA EN DOS FILAS

Crearemos un contenedor (.listaDosFilas) y luego dividiremos la lista en las filas que deseemos.

  • .html()
  • .tex()
  • .after()
  • .append()
  • .prepend()
  • .before()

Este es el código:

Crear una flecha de subir al início

Supongo que en muchas paginas habreis visto una flechita en la parte inferior derecha que cuando la presionais regresa al principio de la pagina.

En la parte superior de nuestra pagina elegiremos una etiqueta y le daremos el id indice

Lo primero de todo crearemos un contenedor con la imagen de la flecha.

Insertar un contenedor dentro de otro

En el siguiente ejemplo crearemos un contenedor principal, dentro de él generaremos dos contenedores y los moveremos en el espcio. Al rededor del contenedor principal generaremos un efecto sombra Box-shadow. Utilizaremos un float:left en los contenedores de dentro y jugaremos con la altura en el espcio con margin y padding.

Conenedor primero
Contenedor segundo

Este es el código de nuestra muñeca Matrioshka de CSS

FLEXBOX

Es un modelo css para generar contenedores que contengan objetos en su interior distribuidos de una forma dinámica.. Mucha gente utiliza las tablas html para repartir los objetos en el espacio, pero es una practica muy desaconsejada. Has hace bien poco hemos utilizado el float:left o right, luego utilizamos un overflow: hidden en el contenedor principal. Pero no es la función para la que se diseñó. El float esta pensado para flotar una imagen y que el texto o contenido quede a un lado de él.

Es un modelo css para generar contenedores que contengan objetos en su interior distribuidos de una forma dinámica.. Mucha gente utiliza las tablas html para repartir los objetos en el espacio, pero es una practica muy desaconsejada. Has hace bien poco hemos utilizado el float:left o right, luego utilizamos un overflow: hidden en el contenedor principal. Pero no es la función para la que se diseñó. El float esta pensado para flotar una imagen y que el texto o contenido quede a un lado de él.

  1. En primer lugar tendremos que crear un contenedor y dentro del contenedor objetos.
  2. Luego indicarle que nuestra diseño de caja es flex le tenemos que indicar dentro del contenedor principal display: flex;.
uno
dos
tres
cuatro

Dirección del flex (flex-direction:)

Podemos eligir la dirección de nuestros contenedores, distrullendolos de arriba a bajo o de derecha a izquierda:

  • row
  • column
  • row-reverser
  • column-reverser

flex-warp

Dimensiona los contenedores internos al externo

  • warp
  • no-warp
  • warp-reverse

flex-flow

Con flex-flow podremos poner los valores de flex-direction y flex-warp a la vez.Hasta ahora hemos puesto una instrucción para cargar flex-direction y otra para flex-wrap, pero podemos utilizar este atajo.

flex-flow: column no-wrap;

justify-content:

Distribuirá el espacio libre entre los contenedores a lo ancho.

  • flex-start: valor por defecto.
  • flex-end:alinea el contenido a la derecha.
  • center
  • space-around:genera un espaciado identico entre objetos
  • space-betweengenera un espaciado entre contenedores pero al inicio y al final no genera espciado.

align-items

Distribuirá nuestros elementos a lo alto.

  • flex-start: Valor por defecto
  • flex-end:Posifciona en la parte inferior de nuestro contenedor.
  • center:Centro del heigth
  • stretch: Se utiliza con un ancho automático para que abarquen el 100% del obejeto padre.
  • baseline:

aline-content

Tine el mismo usu que align-items pero lo utilizaremos cuando nuestro contenido tenga mas de dos filas.

Generador de displey flex

Seleciona las posibilidades y copia este código, luego pegalo en tu css dentro del contenedor padre.Así de facil.

uno
dos
tres
cuatro

Diseño con box grid

Se conoce como el diseño de regilla o tabla, con el crearemos un layout como una tabla. Este diseño esta implementandose en la actualidad pero es muy recomendado porque es muy responsivo.

En primer lugar tenemos que crear una regilla en el contenedor principal
display:grid;

Luego le indicamos el número de colúmnas de nuestro grid, para ello tenemos varias formas:

  • Crear las columnas del grid:
    grid-template-columns:20% 1fr 50px 1fr 10% 5%;
    grid-template-columns:20% 1fr 1fr 1fr 1fr 1fr;
    Si tenemos arias filas y todas ellas podemos indicarselo así:
    grid-template-columns: repeat(5, auto);
  • Crear las columnas del grid:
    grid-template-rows: 10px 10px 25px;
  • Damos la separación entre columnas y entre filas si queremos:
    grid-gap: 5px;

clip-path para hacer formas con imagenes

Junto con las etiquetas svg están llamados a ser el futuro de las imagenes web.

No hay comentarios:

Publicar un comentario

Buscar este blog

Sandisk y Western Digital