CSS3.md

---

---

Quede en vertical algin por paja
Tambien me qude en counters

CSS 2.1

Ideologia

CSS es un lenguaje de estilos pero tambien intenta mantener ciertos ideales, estos son:

• GENERALIDAD: CSS es un lenguaje ideado para presentar y describir contenido en cualquier formato (voz, texto escrito, impreso, audio, imagenes, braille, etc) aunque sus aplicaciones mas conocidas son la renderizacion visual de paginas web.
• BACKWARDS COMPATIBLE: CSS debe ser compatible con todas sus versiones anteriores
• FORWARD COMPATIBLE: SI una regla css no se conoce se ignora, siempre se preserva el contenido
• COMPLEMENTARIO: Debe ser posible cambiar los estilos con minimos cambios en el contenido/markup
• DEVICE/VENDOR INDEPENDENT: Deben funcionar en todo dispositivo y para toda marca
• ACCESIBILIDAD: CSS proovera de herramientas para que el contenido sea accesbile a personas con inhabilidades

Terminos

CSS utiliza ciertos terminos propios:

• Canvas - No confundir con el HTML5 canvas, es el area donde css va a renderizar. es infinita en todas las dimensiones y se elige una subarea dependiendo del media type, generalmente es elegido por el user-agent. se define como El area donde la FORMMATTING STRUCTURE se renderiza
• Source document - El documento al cual se le aplicaran las stylesheets (ej HTML)
• Document tree - Un arbol de nodos que contiene los elementos del source document antes de ser aplicadas las reglas de los stylesheets. (generalmente un arbol de elementos html)
• Formatting structure - Una descripcion programatica (generalmente arbol de nodos) de lo que se va a mostrar, se computa a partir de un Document tree y las style sheets
• Canvas - No confundir con el HTML5 canvas, es el area donde css va a renderizar. es infinita en todas las dimensiones y se elige una subarea dependiendo del media type, generalmente es elegido por el user-agent. se define como El area donde la FORMMATTING STRUCTURE se renderizara.
• Selector - Algo que te permite indicar un elemento o elementos del document tree y/o
  • relaciones entre ellos
  • sus atributos
  • Su estado (:hover)
  • Partes de su contenido (:first-line)

procesamiento y formatting structure

Unidades de medida

ATENCION: Esta parte fue reemplazada por CSS 3!!!

ABOLUTAS:

• in: inches — 1in is equal to 2.54cm.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS are equal to 1/72nd of 1in.
• pc: picas — 1pc is equal to 12pt.
• px: pixel units — 1px is equal to 0.75pt.

Las medidas se aproximan dependiendo del css media type basado en una medida de referencia (EJ:px para pantalla, mm para impresion)

• Px Se mide como el pixel de referancia en dispositivos, que puede no ser un pixel fisico. se usa tambien el pixel de referencia para deducir el tamaño al pasar a mm para imprimir medidan en px
  mm Se mide en mm reales para impresion y se aproxima en px fisicos para renderizar en pantallas
  PIXEL DE REFERECIA: Es el tamaño de un pixel caluclado como 1/96 inch a una distancia de un brazo y con un angulo de vision,

RELATIVAS:

• em The ‘em’ unit is equal to the computed value of the ‘font-size’ property of the element on which it is used. The exception is when ‘em’ occurs in the value of the ‘font-size’ property itself, in which case it refers to the font size of the parent element.

• % es un procentaje, su valor computado depende de cada propiedad y no hay regla general.

Colores

Los colores se implementan siempre en RGB, hay dos maneras de escribirlos pero siempre simbolizan RGB

• rgb(255,255,255) - Byte en rojo, verde y azul en numeros 0-255
• #rrggbb - Byytes en hexadecimal con dos caracteres para cada color de RGB ej ff=255
• #rgb bytes en exadecimal acortado, un caracter para cada color de RGB ej f=ff=255

A su vez hay colores mapeados en keywords, ej red, green, blue

Document tree y formatting structure

La especificacion propone un modelo de procesamiento que funciona de la siguiente manera

• Se lee el documento html/xml y se genera un arbol de nodos llamado Document tree con un nodo por cada elemento
• Se identifica el media type
• Se juntan todas las stylesheets y se extrae el valor computado final de cada propiedad para cada elemento
• Se añade al document tree las propiedades y valores css
• Se genera un nuevo arbol de nodos llamado Formatting structure/tree que indica los elementos que se mostraran. este se puede parecer mucho al Document tree pero puede haber elementos de mas (:after, :before, los bullets de un elemento <li>) o de menos (display:none)
• Se Muestra el resultado en el medio elegido (pantalla, papel, etc)

Computo de valores

Valores que se calculan

Para cada propiedad se debe calcular una serie de valores:

• Valor especificado: El valor de la propiedad que se obtiene despues de las herencias, cascada, etc.
  • Valor computado / a heredar: El valor que se heredara a los elementos hijos, llamado computed value
    • Valor usado/absoluto: El valor que se calcula en terminos absolutos a partir del valor a heredar. ej: de % a pixeles para mostrar en pantalla.

Valores especificados

Se calculan de la siguiente manera

1. Si la cascade resuelve un valor, se usa ese.
2. Si hay una propiedad inherited se usa el computed value del elemento padre.
3. Se usa la propiedad default o initial

Valores a heredar / computados

• Las URIs se hacen absolutas
• Se pasan todas las medidas posibles a Px (em, %, etc) (salvo las heredadas)
• Las propiedades se computan de acuerdo a cada una de sus funciones de computo especificas.

Valores absoluto

Muchos valores no pueden ser computados por que dependen de que los elementos del padre sean pasados a valor abosluto para calcular sus valores y asi calcular los valores absolutos. En esta insatancia se hace eso.

Herencia

Para muchas propiedades se hereda su valor de A a B siempre que la propiedad del B no tenga un valor explicito declarado.
Si la propiedad no hereda el valor de forma default se lo puede forzar usando el valor 'inherit'

Es importante aclarar que el valor heredado es siempre el Valor a heredar / computado y no el valor especificado ni absoluto

Este valor se transforma en el nuevo valor especificado Y valor computado del elemento B.

EJ:

body { font-size: 10pt }
h1 { font-size: 130% }
<BODY>
  <H1>A <EM>large</EM> heading</H1>
</BODY>

El valor computado y entonces heredado en el h1 es 13pt, entonces el EM hereda el valor 13p y NO 130%

The cascade

El user agent colocara un peo a cada regla declarada y luego seleccionara la regla con mayor peso. Se calculan con la siguiente prioridad.

Calculo de cascada

• Busqueda: Buscar todas las reglas que apliquen a un elemento.
• Origen: Ordenar en orden de prioridad por
  1. user-agent declarations
  2. user normal declarations
  3. author normal declarations
  4. author important declarations
  5. user important declarations (para accesibilidad)
• Especificidad: Tomar las de mayor prioridad y ordenarlas por especificidad tomando la mas especifica.
• Orden: Si aun quedan valores de igual prioridad, tomar el ultimo declarado.

Calculo de especificidad

La especificidad que se usa en el calculo de cascada se computa con las siguientes prioridades.

1. Styles= Estilos indicados en atributo styles
2. #Id Estilos indicados mediante referencia al Id
3. Cantidad de selectores usados Mayor cantidad de selectores, atributos y pseudo-clases se considera como mas especifico ej .Conteneodor .parrafo .enfasis{}
4. Cantidad de nombres de elementos usados Cuantos mas nombres de elementos usados mas especificidad ej div h1{}

Selectores

CSS 2.1 provee la siguiente lista de selectores para ubicar uno o varios elementos dentro del Document tree

Por orden de los elementosPOR ORDEN DE LOS ELEMENTOS

• * - Cualquier elemento, cuando no se especifica un elemento en un selector se presume que se utiliza este
• E - Donde E es un tipo de elemento ej “div”, selecciona los elementos de ese tipo
• E F elementos de tipo F que sean descendientes de un elemento tipo E
• E > F elemento tipo F que sea hijo directo de F
• E + F elemento de tipo F cuyo hermano inmediato precedente sea E (semanticamente tiene sentido entonces E + F)
• E:first-child Elemento E que ademas sea el primer hijo de su elemento padre

Por atributo de los elementosPOR ATRIBUTO DE LOS ELEMENTOS:

ATENCION:

• las clases de CSS son atributos y se povee el shorthand .foo para referirse a clases, pero la forma original seria *[class~=“foo”]
• Cuando no se provee elemento E se presume *

• E[foo] Elemento E con un atributo foo (sin importar el valor)
• E[foo=“warning”] Elemento E con atributo foo valor ‘warning’
• E[foo~=“warning”] elemento E con atributo foo que tiene una lista de valores separado por espacios entre los cuales esta ‘warning’
• E[foo|=“warning”] elemento E con atributo foo que tiene una lista de valores separado por guiones entre los cuales esta ‘warning’
• E#myid Elemmento E con id #myid

Pseudo-clasesPSEUDO-CLASES

Son la forma que tiene CSS de acceder a informacion que no esta explicitamente provista en el lenguaje de markup o el arbol de nodos Document tree, por ejemplo el primer renglon de un parrafo

• E:link si E es un achor NO visitado
• E:visited si E es un achor SI visitado
• E:active, E:hover, E:focus Si el elemento es sujeto a una accion del usuario

Podes combinar selectores uno despues del otro para indicar mas especificamente que deseas seleccionar.

Pseudo-elementos

• E:first-line La primera linea de texto del contenido del elemento E se enmarca en un pseudo elemento al que le podes poner estilos
• E:first-letter La primera letra del elemento E se enmarca en un pseudo elemento al que le podes poner estilos
• E:after Inserta un pseudo elemento despues del elemento E el cual debe tener contenido usando content:"" y se le pueden agregar estilos
• E:before Inserta un pseudo elemento antes del elemento E el cual debe tener contenido usando content:"" y se le pueden agregar estilos

Media types

Una de las propiedades de CSS es que describe la presentacion del contenido en cualquier formato (audio, braile, texto, impreso, digital).

Algunas propiedades de CSS aplican a uno o varios media types, otros pueden aplicar a todos.

Las propiedades no declaradas para un media type especifico aplican a todos los media types.

Se declara asi:

@media print, scree, otros {
  /* style sheet for print goes here */
}

Los media types validos son:

• all Suitable for all devices.
• braille Intended for braille tactile feedback devices.
• embossed Intended for paged braille printers.
• handheld Intended for handheld devices (typically small screen, limited bandwidth).
• print Intended for paged material and for documents viewed on screen in print preview mode.
• projection Intended for projected presentations, for example projectors.
• screen Intended primarily for color computer screens.
• speech Intended for speech synthesizers.
• tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
• tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Box model

TODOS los elementos en CSS se representan como CAJAS. El modelo de cajas se basa en que un elemento consiste en varias cajas una dentro de la otra, esas cajas son:

• El tamaño del contenido
• El padding
• El border
• El Margen

• El tamaño del contenido
• El padding
• El border
• El Margen

Margen

• Siempre es transparente
• Su % se calcula en base al ancho del contianing block.
• Para elementos inline-block se ignoran los margenes Top y Bottom

Tiene las siguientes caracteristicas

• Value: length | percentage |auto | inherit
• Initial: 0
• Applies to: all elements except elements with table display types other than table-caption, table and inline-table
• Inherited: no
• Percentages: refer to width of containing block
• Media: visual
• Computed value: the percentage as specified or the absolute length

Valor auto - WIP

AUTO tiene diferentes comportamientos dependiendo del tipo de elemento
PARA MARGIN-LEFT:AUTO Y/O MARGIN-RIGHT:AUTO

• inline/replaced inline/inline-block: Auto es el valor 0
• block/replaced block si estas en normal flow y
  • los margenes + padding + borders+ content es mayor que el containing block entonces los margenes auto valen 0
  • Si los valores computados de width, padding y un margen estan calculados y el margen restante es auto, se añade el ancho faltante para completar el containing box
  • Si ambos son auto se centra horizontalmente el elemento
  • si el elemento es float los margenes auto son 0
• Absolutely positioned
  • Si left, right y width tienen valores: Margenes auto centran el elemento
    *Caso contrario: Margenes auto son cero

PARA MARGIN-TOP:AUTO Y/O MARGIN-BOTTOM:AUTO

Resuelve siempre en 0

Collapsing margins

VER VIDEO PARA ENTENDER BIEN

Los margenes verticales colapsan en uno solo siempre que se tocan y son block o inline block elements Y participan del mismo BFC. para evitar que se toquen hay que colocar algo en el medio (ej border)
hay varias posibles condiciones para que los margenes colapsen

Este mecanismo pemite que los textos esten separados por margenes siempre de por lo menos un cierto tamaño (ej que no se sumen)

Eso puede ocurrir con:

• Siblings si se toca el margin-bottom de uno con el margin-top de otro
• parent-child/grandchild SUPER ANTI-INTUITIVO si los dos margenes top se tocan y estan en el mismo BFC (no hay padding o border)
  • En este caso si el margen colapsado es el del child se genera un margen adentro del elemento hijo que empuja al parent y todos los children hacia abajo

Padding

• Es del color del background
• Su % se calcula en base al ancho del contianing block.
• A diferencia del margen, no puede ser negativo

Tiene las siguientes caracteristicas:

Value: length | percentage |auto | inherit| inherit
Initial: 0
Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited: no
Percentages: refer to width of containing block
Media: visual
Computed value: the percentage as specified or the absolute length

Border

Los bordes son lineas de un color unico que van entre el margen y el padding.

Border-Width

especifica el ancho del border y tiene las siguientes caracteristicas

• Value: Thin | Medium | Thick | <Length> | inherit
• Initial: medium
• Applies to: all elements
• Inherited: no
• Percentages: N/A
• Media: visual
• Computed value: absolute length; ‘0’ if the border style is ‘none’ or ‘hidden’

Border-Color

especifica el color del border y tiene las siguientes caracteristicas

• Value: <color> | transparent | inherit
• Initial: see individual properties
  Applies to:all elements
• Inherited: no
• Percentages: N/A
• Media: visual
• Computed value: see individual properties

Border-style

Especifica el tipo de linea del border

none: No border; the computed border width is zero.
hidden: Same as ‘none’, except in terms of border conflict resolution for table elements.
dotted: The border is a series of dots.
dashed: The border is a series of short line segments.
solid: The border is a single line segment.
double: The border is two solid lines. The sum of the two lines and the space between them equals the value of ‘border-width’.
groove: The border looks as though it were carved into the canvas.
ridge: The opposite of ‘groove’: the border looks as though it were coming out of the canvas.
inset: The border makes the box look as though it were embedded in the canvas.
outset: The opposite of ‘inset’: the border makes the box look as though it were coming out of the canvas.

Visual formatting model

Es el algoritmo por el cual CSS determina donde colocar los elementos del markup.

Terminos

• containing box: La caja dentro de la cual vive un elemento, generalmente definida por la caja del elemento padre.

• Block-level boxes son boxes que participan del block formatting context

• Block container box osea que solo puede contener una de estas dos opciones de contenido.

  • Solamente block-level boxes
  • Solo inline-level boxes
    Es decir que si tenes un elemento con blocks y inline elements los inline elements se transforman en block denominado BLOCK ANONIMO

• Line box La caja que representa un renglon con uno o mas inline elements en su interior

• positioned box Una caja con un valor de position diferente de static

Posicionamiento

Hay 3 formas de posicionamiento

• Normal flow:
  • En Block formatting contexts (BFC)
  • En inline formatting contexts (IFC)
  • En relative positioning contexts (RPC)
• Floats: Se arma la caja como si estuviera en flow, luego se remueve de flow y se coloca a la izquierda/derecha del parent o float mas proximo
• Absolute positioning: Se remueve la caja del flow y se coloca en una posicion con respecto al Containing box.
  • Fixed: es un tipo de Absolute positioning pero siempre con respecto al viewport

Containing box

El containing box es el lugar donde vive un elemento y apartir del cual se calculan los valores de

• Height y width al usar %
• margin al usar %
• top, bottom, left, right al usar %

El containing box de un elemento depende del valor de posicion de ese objeto:

• position: static | relative el contennt box del elemento padre
• position: absolute el padding box del ancestro mas proximo con
  • position: absolute|relative| fixed | sticky
  • transform , perspective o filter con valor diferente de none
  • contain con valor igual a paint
  • Si ninguno de estos existe entonces es el ancestro mas proximo
• Position:fixed el viewport para screen o la hoja de papel para print

Normal Flow

En el normal flow cada elemento siempre pertenece a un y solo un formatting context que dictara cual es la posicion de ese elemento.

Un elemento crea un Inline formatting context IFC si contiene solamente elementos inline, de lo contrario forma un Block formatting context BFC.

si hay inline elements y block elements mezclados en el mismo formatting context entonces se usa el motor CSS coloca los inline elements en bloques para que participen del block formatting context. Esos blocks se denominan anonymous blocks y en su interior puede existir un IFC

Block Elements

Los block elements son elementos que:

• se comportan como bloques (son siempre cuadrados)
• Generalmente colocan su contenido dentro de un Block-level box, es decir que participan del BFC
• Generalmente se comporta como un Block container box, osea que su contenido sea solamente block-level boxes o inline-level boxes

Block Formatting Context (BFC)

Ver mas

El BFC es el area donde varios block elements (parent,siblings, children, etc) estan contenidos e interactuan entre si.

En un BFC:

• LAYOUT:
  • los elementos van uno encima del otro. y ocupan todo el ancho
  • Los elementos tocan el borde izquierdo del contenedor, aun si hay floats
  • Los elementos inline SE TRANFORMAN EN BLOCKS mediante anonymous box generation
• COLLAPSING MARGINS: Solo los margenes de los elementos dentro del mismo BFC pueden colapsar entre si

Algunas propiedades de CSS hacen que un elemento pueda crear su propio BFC.

• overflow: auto
• display: flow-root - ver support

Anonymous box generation

Un BFC organiza todos los elementos en su interior como Blocks, sin embargo es obvio que podes tener un elemento con childs que sean inline y blocks mezclados.

Cuando pasa esto el BFC genera cajas alrededor de los inline elements para poder tratarlos como blocks. estas cajas no pueden ser seleccionadas con selectores, por eso se las llama anonymous boxes

Inline elements

Son aquellos elementos que

• Se distribuyen Horizontalmente uno al lado del otro
• Participan del inline formatting context
• Su alto y ancho estan totalmente definidos por el contenido y NO PUEDEN MODIFICARSE
• Se distribuyen en renglones llamados line box que contienen uno o mas inline elements (ej texto y alguna palabra con negritas son line elements separados pero estan en el mismo renglon)

Generalmente el texto y los links son inline elements
Inline-Block es un block colocado como si fuera un inline element.

Inline Formatting Context (IFC)

El IFCes el area donde varios inline elements estan contenidos e interactuan entre si se distribuyen de izquierda a derecha hasta llegar al final del contenedor (o del contenido) y se lo coloca en un line box, luego se continua con ese proceso en un line box inmediatamente por debajo del al anterior .

Entonces un parrafo es una pila de line boxes.

En un IFC:

• Los elementos van uno a la derecha del otro en normal flow, comenzando desde el lado superior izquierdo del containing box.
• Se agrupan en un LINE BOX por cada renglon. un Line box puede tener uno o mas inline elements (ej texto y negrita)
  • Los elementos en un LINE BOX pueden ser alineados verticalmente de formas diferentes (ej: textos de diferentes tamaños alineados centrado quedan mal, los alineas en baseline para que queden en el mismo renglon)

Cada renglon es un line box:

Cada line box tiene uno o varios inline elements

Relative positioning

El Relative positioning es una forma de posicionamiento que coloca los objetos de manera relativa al lugar donde irian en su posicion en normal flow conservando ademas el lugar originalmente reservado para ellos

• Mueve el elemento con respecto a su posicion en normal flow
• Preserva el lugar que ocuparia en el normal flow

El tamaño del elemento no puede cambiar como resultado del posicionamiento relativo!

Posicionamiento:

• Left y Right: Son para posicionar el elemento. Solo podes usar una de las dos propiedades a la vez ya que el tamaño del elemento no puede cambiarse
• Top y bottom tambien son para posicionar el lemento y solo puede usarse una de las dos ya que el tamaño del elemento no puede cambiarse
• Usar auto como valor equivale a usar 0.

Float

El proposito de un float es que el contenido (block sibling inmediato o inlines) pueda fluir a a lo largo de su altura.

Funcionamiento

Un float opera e interactua con otros elementos solo si estan en el mismo BFC

Un float:

• Se corre a a la derecha o izquierda hasta
  • tocar el borde de su contenedor
  • Tocar el borde de otro float
  • Si no entra a la derecha o izquierda del float mas proximo, se coloca debajo de este y tocando el borde del contenedor
• No forma parte del Normal flow entonces
  • El parent no puede determinar su altura solo usando los floats
  • Otros block elements se pueden posicionan debajo del float como si el float no existiera
• Aquellos blocks que queden detras del float ( parents, grandparents etc en el mismo BFC) acortan sus line boxes para que queden entre el ultimo float y el borde del contenedor generando inline elements a su alededor, aunque esten en otro bloque
• Los sibling inline elements acortan sus line boxes para fluir al costado del float

• El contenido circundante:
  • Su box siempre pasa por atras del float para estar tocando el left side del contenedor siempre que el ancho maximo del elemento lo permita (sino pasa a la siguiente linea).
  • Los inline elements se colocan al costado del float siempre que formen parte del mismo BFC (no necesitan ser siblings grandparents, etc, se puede dar con cualquier jerarquia)

Clearing

La propiedad Clear permite que un bloque que normalmente quedaria encimado por el float quede debajo del float.

Lo hace mediante un margen invisible extendido (ver imagen de arriba) que se genera despues del margen normal del elemento y se lo llama CLEARANCE

• Cuaquiera de los dos
  • Si tiene clear left o right El elemento no puede estar a continuacion de un float (dentro del mismo BFC)

Absolute positioning

En el modelo de absolute positioning:

• Se posiciona la caja con respecto a su containing block
  • El padding box del ancestro con position no static mas proximo
• Se lo remueve del normal flow
• Establece un nuevo BFC en su interior
• Ignora page-breaks en printed media e imprime como si fuera un documento continuo
• Se posicionan los lados de la margin box del elemento de acuerdo al padding box del elemento padre usando top, bottom, left, right, pudiendo usar las 4 a la vez

IMORTANTE: Para absolute positioning el containing block sigue varias relas, ver la seccion containing block para mas detalles

Fixed positioning

Fixed positioning:

• Es una subcategoria de absolute positioning
• Su containing block es
  • el viewport en screen
  • cada pagina en print
• En screen media: No se mueven cuando se scrollea el viewport
• en print media: el elemento se repite para cada pagina.

Stacking context y layering

Todas las cajas en CSS tienen una posicion Z que determina cual se pinta sobre cual. Para las positioned boxes es posible determinar la posicion z manualmente con la propiedad Z-index mientras que para las demas se coloca un valor Z defaut de 0

Los Z-index son valores en el eje z, pero se usan dentro de un stacking context, es decir que no son valores absolutos

un elemento con z-index 99 puede estar abajo de un elemento con z-index 1 si no comparten el mismo stacking context

Terminos

El Stacking context y los Stack levels determinan como se apilan aquellas cajas que se superponen gracias a que son positioned boxes (absolute, fixed o relative)

• Stacking context: Es el lugar donde interactuan y se ordenan los elementos que poseen un Stack level.
  • Son atomicos
    • los elementos de un stacking context estan siempre atras o adelante de todos los elementos en otro static context
    • Cada caja solo puede estar en un stacking context
  • Se crean nuevos Stacking contexts con
    • caja con z-index, sus childs estan en otro stacking context
    • Positioned box: sus childs tienen su propio stacking context
• Stack level: Es el orden en el cual se muestran los elementos que comparten un stack context
  • Mayor stacking level es mas cerca del usuario
  • Stacking levels iguales implica que se usa el orden del documento HTML

Propiedad z-index

Para controlar estos parametros se usa la propiedad z-index

• Value: int | auto | inherit
• Initial: auto
• Applies to: SOLO POSITIONED ELEMENTS
• Inherited: no
• Percentages: N/A
• Media: visual
• Computed value: as specified

• Intiger:
  • Es el stack level del elemento
  • Especifica que dentro del elemento se generara un nuevo stacking context
• auto:
  • El stack level es zero
  • No se crea un nuevo stacking context

Orden de apilado

El orden final de los elementos en el eje Z DENTRO DE un stacking context es el siguiente

1. el background y borders del elemento que genera el stacking context
2. Elementos de z-index <0
3. elementos no-inline con position: static
4. Floats en position static.
5. elementos inline con position: static
6. elementos con z-index=0 o posicion NO static
7. Elementos con z-index >0

A su vez los stacking contexts anidados no pueden cambiar su posicion con respecto a los stacking contexts por encima de ellos.

Osea que los hijos de dos stacking contexts diferentes no cambiaran de posicion entre si aunque tengan z-index 0 y z-index 9999

Width y height

Width

Determina el ancho del content box de un elemento, no tiene efectos en inline elements

• Value: length | v% | auto | inherit
• Initial: auto
• Applies to: elementos no-inline, table rows y row groups
• Inherited: no
• Percentages: el ancho del containing block
• Media: visual
• Computed value: as specified

• Length: ancho en unidades de medida
• % porcetaje del ancho del *containing block
• auto depende del valor de otras propiedades
  • inline No aplica, se usa el valor del contenido
  • inline replaced y block replaced elements
    • width y height son auto: el ancho intrinseco del elemento (ej una imagen)
    • width auto y el elemento tiene ancho intrinseco ancho intrinseco del elemento
    • height tiene valor especificado o intrinseco, width auto y el elemento tiene un aspect ratio establecido: height * aspect ratio (ej una imagen consera su aspect ratio)
  • block
    • Los valores auto para margins, paddings y borders pasan a 0 y se calcula el ancho con la equacion margins+widths+borders+paddings = containter box
  • inline block: shrink to fitt
  • Position absolute
    • Dada la siguiente equacion : 'left'+ 'right' + 'margins' + 'borders' + 'paddings' + 'width' = width of containing block
    • Si width es auto y no hay left Y right definidos: width es shrink-to-fit
    • Caso contrario: se usa la equacion para definir el width

Height

Permite especificar el alto de un elemento, no sirve para los inline elements

Value: | auto | inherit
Initial: auto
Applies to: Todo salvo non-replaced inline elements, table columns, and column groups
Inherited: no
Percentages: Ver detalles
Media: visual
Computed value: the percentage or ‘auto’ (see prose under ) or the absolute length

Valores:

• Length: una cantidad en px, em, etc que determina el alto
• %:
  • Containing block tiene height explicito: Procentaje del containing block height
  • Containing block sin height: resuelve a auto
• auto:
  • inline no aplica, el alto es siempre el del contenido
  • replaced elements (Inline , block, inline-block, float):
    • con intrinsic value y width auto se usa intrinsic value
    • con instrinsic ratio y width definido se usa width x ratio \text{width } x \text{ ratio }width x ratio 
  • Blocks en normal flow con ‘overflow:visible’ tamaño en base al contenido
    • Ultimo line box (en IFC)
    • Ultimo block element en flow (en BFC)
    • zero para los otros casos
  • Absolutely positioned, non-replaced
    • Top o bottom establecidos: se calcula height igual que en blocks en normal flow
    • Top y bottom establecidos El alto usado es el que falte para llenar el containing block
    • Top auto: se usa el top que se usaria en normal flow
    • Otros auto: se resuelve llevando el elemento al tamaño del container block usando la equacion containerHeight=margins+paddings+top+bottom+heightcontainerHeight=margins+paddings+top+bottom+heightcontainerHeight=margins+paddings+top+bottom+height

Propiedades de inline elements

Line-height

Line Height es el alto calculado de cada line box en un IFC.
La propiedad line-height indica el alto minimo del line box

El line height se basa en uno de los siguientes segun corresponda

• inline Contenido / La fuente / tamaño intrinseco
• inline-block Height property

Value: | auto | inherit
Initial: normal
Applies to: Todo salvo non-replaced inline elements, table columns, and column groups
Inherited: no
Percentages: porcentaje del font size
Media: visual
Computed value: absolute length o normal

Vertical-align - WIP

Visual efects

Overflowing

Overflowing: es cuando el contenido queda fuera su container box

Value: visible | hidden | scroll | auto | inherit
Initial: Visible
Applies to: block containers
Inherited: no
Percentages: N/A
Media: visual
Computed value: Lo indicado en value

• visible: EL contenido overflowea
  hidden: No se overflowea
  scroll: Muestra un scrollbar, no se overfowea
  auto: depende del user agent, debe mostrar un scroll mechanism si hay overflow.

El tamaño del scrollbar se usa de el width/height del elemento y el scrollbar se coloca entre el border y el padding.

The behavior of the ‘auto’ value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

Visibility

Te permite ocultar un elemento, pero mantiene el espacio reservado para el

Generated content

El Generated content es el contenido que es generado por CSS y no viene del source document. por ejemplo los bullets de una lista

Content y :before - :After

Podes incertar contenido arbitrario a un elemento usando la propiedad content en conjunto con los pseudoelementos :before y :after que crean un elemento justo antes o despues del contenido del elemento en cuestion

• :Before y :After son pseudoelementos incertados antes o despues del contenido de un elemento y tendran el contenido que fue colocado en content
• Content: Un contenido arbitrario colocado en el pseudoelemento :Before o :After

El contenido dinamico se inserta DENTRO del elemento en cuestion pero ANTES O DESPUES de su contenido

p.note:before { content: "Nota: " }

Counters - WIP

Rules

@ Rules