Seleccionar página

Bueno esta entrada particularmente va a ser extensa, porque CSS es extenso como cualquier lenguaje complejo, al igual que las entregas, estas van a ser varias!…
Sin embargo voy a tratar de explicarlo lo mas simple y acotado que pueda.

Empecemos… PUSH START

Medidas en CSS

Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).
CSS divide todas las unidades de medida en dos grupos: absolutas y relativas. Las medidas
relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente, lo que suele ser una fuente habitual de errores para los diseñadores que empiezan con CSS. Algunas propiedades permiten indicar medidas negativas, aunque habitualmente sus valores son positivos.

Relativas:

  • em
  • ex
  • px
  • porcentaje

Absolutas:

  • in (inches (pulgadas))
  • CM (centimetros)
  • mm
  • pt (puntos)
  • pc (picas)

El tipo de formato de medida usada dependera de tu comodidad o gusto o requerimientos del cliente, no voy a profundizar mucho en este tema, solo voy a decir que lo que se recomienda es usar medidas relativas y nosotros usaremos porcentajes y pixeles (px) para nuestros trabajos.

Colores en CSS

Los colores en CSS se dividen en 5 formas distintas:

  • Palabras Clave
  • Colores del Sistema
  • RGB hexadecimal
  • RGB Númerico
  • RGB porcentual

Palabras Clave: No son mas que las palabras para llamar a un color especifico, estas son 17:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.
paleta colores- palabras claves

No voy a profundizar mas que esto en este tema ya que con los actuales editores (ej. Dreamweaver) se nos hace mucho mas facil y no es necesario escribir los colores en hexadecimal, ya que nos trae una paleta de colores de donde elegir y por el cual nos escribe en  el codigo, el color que elijamos.

BOX MODEL

El box model o modelo de cajas , ¿que es?
es el comportamiento de CSS que provoca que todos los elementos incluidos en un HTML se representen mediante cajas rectangulares.
CSS permite controlar la forma en que se visualizan las cajas, se pueden ocultar, desplazar, fijarlas en un espacio en concreto, etc…
Estas cajas se crean automaticamente cada vez que se inserta una etiqueta o elemento en la pagina, esta encierra todo lo que hay dentro de los elementos.
Las partes de cada caja son:

  • Contenido: que es el contenido del HTML
  • Padding o relleno: es el espacio libre entre el contenido y el borde
  • Borde: linea que encierra el contenido y relleno
  • Background image
  • Background color
  • Margen o Margin: espacio libre entre las cajas y las cajas adyacentes a esta

box model

Ancho

Width

La propiedad que controla el ancho es width
esta propiedad no admite valores negativos

#cabecera { width: 20px; }

<div id="cabecera">
................................
</div>

Altura
height
exactamente igual que width, cambia la palabra clave que es height.

Margen y Relleno

MarginCSS define 4 propiedades para controlar los margenes de los elementos.
La propiedad margen si admite valores negativos… aunque no se usan.

Ejemplo:

<title> ejemplo de margen izquierdo </title>
<style type = "text/css" >
.destacado {
margin-left: 10 px; }
</style>
<p class = "destacado">
...............................................
</p>

Relleno o Padding

CSS tiene 4 propiedades para definir el relleno de los elementos
padding-top
padding-right
padding-left
padding-bottom

La siguiente imagen muestra la diferencia entre el margen y el relleno de los elementos:
dif Padding y Margin

El código HTML y CSS del ejemplo se muestra a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo diferencia entre margin y padding</title>
<style type="text/css">
.margen {
margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em;
}
.relleno {
padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em;
Tutorial CSS - Parte 4
50
frikitechblog.wordpress.com
}
</style>
</head>
<body>
<p class="margen">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="relleno">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>

Bordes

CSS permite definir los aspectos de los bordes de los elementos.

Anchura
se controla con las cuatro propiedades antes vistas y se le agrega el width adelante

border-top-width

y asi con bottom, left y right.

Pasa exactamente lo mismo si queremos aplicar color a nuestros bordes:

border-top-color

y asi con bottom, left y right.

Estilo de bordes

Por ultimo, CSS permite darle estilos distintos a los bordes de nuestros elementos
de nuevo usamos:

border-top-style

y asi con bottom, right y left
border-style
Fondos

El último elemento que forma el box model es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes.
Para establecer un color o imagen de fondo en la página entera, se debe establecer un fondo al elemento <body>. Si se establece un fondo a la página, como el valor inicial del fondo de los elementos es transparente, todos los elementos de la página se visualizan con el mismo fondo a menos que algún elemento especifique su propio fondo.
CSS define cinco propiedades para establecer el fondo de cada elemento (background-color,
background-image, background-repeat, background-attachment, background-position) y otra propiedad de tipo «shorthand» (background).

el siguiente ejemplo muestra una pagina web con fondo gris:

body {
background-color: gray;
}

CSS tambien permite poner una imagen de fondo, como asi tambien una imagen y un color simultaneamente de fondo, es decir, en los «huecos» de la imagen se vera el color de fondo:

body {
background-image: url(«/images/fondo.jpeg»)
}

Posición de la imagen de fondo

Además de seleccionar el tipo de repetición de las imágenes de fondo, CSS permite controlar la
posición de la imagen dentro del fondo del elemento mediante la propiedad
background-position.

La propiedad background-position permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda.
Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical respecto del origen (situado en la esquina superior
izquierda). Si solamente se indica un porcentaje o una medida, se considera que es el
desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el valor de 50%.
Cuando se utilizan porcentajes, su interpretación no es intuitiva. Si el valor de la propiedad
background-position se indica mediante dos porcentajes x% y%, el navegador coloca el punto (x%, y%) de la imagen de fondo en el punto (x%, y%) del elemento.
Las palabras clave permitidas son equivalentes a algunos porcentajes significativos:
top = 0%, left = 0%, center = 50%, bottom = 100%, right = 100%.
CSS permite mezclar porcentajes y palabras clave, como por ejemplo 50% 2cm, center 2cm, center 10%.
Si se utilizan solamente palabras clave, el orden es indiferente y por tanto, es equivalente indicar top left y left top.

 

A %d blogueros les gusta esto: