Resumen CSS
TIPS
* Manuales Recomendados: [Link] , [Link]
*
DEFINICIONES
Css : Cascade Style Sheet. Hola de estilos en cascada.
conceptos básicos de CSS (Cascade Style Sheet) es decir Hojas de Estilo.
[Link]
podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a
la marca, en el head de la página o agrupar las reglas de estilo en un archivo
independiente con extensión *.css
La tercera forma es la más adecuada para separar el contenido de la página y la forma
como se debe representar la misma por medio de la hoja de estilo.
En las primeras versiones de HTML se comenzaron a introducir elementos con la finalidad
de mejorar la "presentación" del "contenido" de la página. Así aparecieron elementos
para definir las fuentes, tamaños, colores, alineamiento de textos y bloques etc.
Luego se creo otra tecnología que separa el "contenido" de la "presentación", esta es
la de Hojas de Estilo. Con esto quedó perfectamente definido el objetivo de HTML
(disponemos contenido) y CSS (definimos la presentación de ese contenido).
Las hojas de estilo si son sensibles a mayúsculas y minúsculas, por lo que color no es
lo mismo que definir COLOR.
El estilo puede ser definido:
● Dentro de un elemento HTML (a nivel de marca HTML)
● En la seccion de Cabecera (HEAD) de una pagina HTML
● En un archivo .css Externo
Orden de Prioridad (de menor a mayor)
1. Default del Navegador
2. Hoja de Estilo Externa
3. Hoja de Estilo Interna
4. Estilo en-línea (dentro de un elemento HTML)
Definición de estilos a nivel de marca HTML.
Es la forma más fácil pero menos recomendada para aplicación de un estilo a una marca
HTML. Se define en la propiedad style los estilos a definir para dicha marca.
Es común definir estilos directamente en las marcas HTML cuando estamos diseñando la
página y posteriormente trasladar el estilo creado a una hoja de estilos.
Las propiedades que definimos dentro de style deben ir separadas por punto y coma.
La propiedad que debemos inicializar se llama style y la tienen todos los elementos
HTML.
Veamos la sintaxis para aplicar color de frente y fondo a un elemento HTML mediante
CSS:
<p style="color:#888888;background-color:#ffffdd">
Definición de estilos a nivel de página.
Es la definición de estilos en una sección de la cabecera de la página HTML donde
podemos definir estilos que se aplican a las distintas marcas HTML de la página.
El problema del concepto anterior donde debíamos crear un estilo similar para la marca
h1 se puede resolver en forma más adecuada empleando la definición de estilos a nivel
de página.
en la cabecera de la página definimos la sección:
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
h2 {color:#ff00ff;background-color:#ff1100}
</style>
Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en
todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo
de color de texto el rojo y fondo el amarillo. Podemos observar que es mucho más
eficiente que definir los estilos directamente sobre las marcas HTML.
Separamos por coma todas las marcas a las que se aplicará la misma regla de estilo:
h1,h2,h3 {
font-family:verdana;
color:#0000ff;
}
Definición de un estilo en función del contexto.
Este otro recurso que provee las css es la definición de un estilo para una marca HTML
siempre y cuando la misma esté contenida por otra marca determinada. Sólo en ese caso
el estilo para dicha marca se activará.
Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold)
dentro de un párrafo el color de la misma sea verde. Pero si la marca b está contenida
por la marca h1 el color debe ser rojo, luego la sintaxis del problema es:
<style type="text/css">
p b{
color:#0000ff;
}
h1 b{
color:#ff0000;
}
</style>
Definición de hojas de estilo en un archivo externo.
La metodología más empleada es la definición de una hoja de estilo en un archivo
separado que deberá tener la extensión css.
Este archivo contendrá las reglas de estilo (igual como las hemos visto hasta ahora)
pero estarán separadas del archivo HTML.
La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a
parte o a todas las páginas del sitio web. Veremos que esto será muy provechoso cuando
necesitemos hacer cambios de estilo (cambiando las reglas de estilo de este archivo
estaremos cambiando la apariencia de múltiples páginas del sitio).
También tiene como ventaja que al programador le resulta más ordenado tener lo
referente a HTML en un archivo y las reglas de estilo en un archivo aparte.
Otra ventaja es que cuando un navegador solicita una página, se le envía el archivo
HTML y el archivo CSS, quedando guardado este último archivo en la caché de la
computadora, con lo cual, en las sucesivas páginas que requieran el mismo archivo de
estilos, ese mismo archivo se rescata de la caché y no requiere que el servidor web se
lo reenvíe (ahorrando tiempo de transferencia).
<head>
<title>Problema</title>
<link rel="StyleSheet" href="[Link]" type="text/css">
</head>
Definición de estilos por medio de clases.
La sintaxis para definir una clase aplicable a cualquier marca HTML es:
.resaltado{
color:#000000;
background-color:#ffff00;
font-style:italic;
}
Es decir, la inicializamos con el caracter punto y seguidamente un nombre de clase.
Dentro definimos las reglas de estilo como hemos venido trabajando normalmente.
El nombre de la clase no puede comenzar con un número.
Luego, para indicar que una marca sea afectada por esta regla:
<h1 class="resaltado">Titulo de nivel 1</h1>
Es decir, agregamos la propiedad class y le asignamos el nombre de la clase (sin el
punto).
Se puede especificar únicamente en el ámbito de cierta etiqueta HTML:
[Link]{
list-style-type:none;
}
Definición de estilos por medio de Id.
La diferencia fundamental en la definición de un estilo por medio de Id con respecto a
las clases, es que sólo podremos aplicar dicho estilo a una sola marca dentro de la
página HTML, ya que todos los Id que se definen en una página HTML deben ser distintos.
La sintaxis para definir un estilo por medio de Id es:
#cabecera {
font-family:Times New Roman;
font-size:30px;
text-align:center;
color:#0000ff;
background-color:#bbbbbb;
}
Es decir, utilizamos el carácter numeral (#) para indicar que se trata de un estilo de
tipo Id.
Luego, sólo una marca HTML dentro de una página puede definir un estilo de este tipo:
<div id="cabecera">
El selector universal *
Si queremos inicializar las propiedades de todas las marcas HTML podemos utilizar el
selector universal. Utilizamos el carácter asterisco para hacer referencia a este
selector.
* {
color:#0000aa;
margin:0px;
padding:0px;
}
Esta marca se usa en forma implícita cuando se define una clase ya que:
.curso = *.curso
Pseudoclases (aplicable a <a>)
Las pseudoclases son unas clases especiales, que se refieren a algunos estados del
elemento HTML, las que se utilizan fundamentalmente son las que se aplican a la marca
<a> (ancla). La sintaxis varía con respecto al concepto de clase visto anteriormente:
a:pseudoclase {
propiedad: valor;
}
Para la marca HTML <a> tenemos 4 pseudoclases fundamentales:
1) link - Enlace sin ingresar
2) visited - Enlace presionado
3) hover - Enlace que tiene la flecha del mouse encima
4) active - Es la que tiene foco en ese momento (pruebe de tocar la tecla tab)
Es importante hacer notar que el orden en que definimos las pseudoclases es fundamental
para su funcionamiento. Debe respetarse el orden: link-visited-hover-active .
Así podemos eliminar el SUBRAYADO de los enlaces/links:
a:link, a:visited {
text-decoration: none;
}
EJEMPLO DE UN MENÚ VERTICAL (html+css) :
[Link]
EJEMPLO DE UN MENÚ HORIZONTAL c/ LISTA (html+css) :
[Link]
Unidades de medida.
px (pixeles)
em (altura de la fuente por defecto)
ex (altura de la letra x)
in (pulgadas)
cm (centímetros)
mm (milímetros)
pt (puntos, 1 punto es lo mismo que 1/72 pulgadas)
pc (picas, 1 pc es lo mismo que 12 puntos)
% (porcentaje)
deg (grados)
s (segundos)
Ejemplo de Letra Capital (usando float)
.letra {
float:left;
font-size:3em;
}
Ejemplo de estructura de página
CABECERA + ColFija+ColAjust+ColFija + PIE
[Link]
CASOS VARIOS
[Link]
(CSS3) Importar una fuente no disponible en el navegador (@font-face)
En CSS3 se especifica una nueva sintaxis para importar fuentes no disponibles en el
navegador y que se descargan de un servidor web.
El problema actual es que hay varios formatos de fuentes que son apoyados por distintos
navegadores. El IE8 e inferiores solo admite el formato EOT que es propietario. El
formato True Type es ampliamente soportado por navegadores modernos. Otros formatos son
el OpenType, SVG y WOFF.
Esta diversidad de formatos de fuente hace necesario que indiquemos la mayor cantidad
de formatos de fuentes posibles para nuestro sitio.
Para importar una fuente que será utilizada por una página web tenemos que utilizar la
regla @font-face, en la misma indicamos el nombre de la fuente a importar y la
dirección web de donde la debe descargar el navegador, la sintaxis es:
@font-face {
font-family: [nombre de la fuente];
src: local(""),
url("[Link]") format("woff"),
url("[Link]") format("opentype"),
url("[Link]#nombre de la fuente") format("svg");
}
Podemos descargar una fuente del sitio [Link]
para probar la importación de fuentes (hay una sección donde podemos descargar varios
formatos para la misma fuente).
Ejemplo:
@font-face {
font-family: "Ubuntu";
src: url("[Link]") format("eot"),
url("[Link]") format("woff"),
url("[Link]") format("truetype"),
url("[Link]#UbuntuTitle") format("svg");
}
(CSS3) Efectos en objetos : TRANSICIÓN
Cambio de propiedades al posarse encima
#recuadro1{
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
#recuadro1:hover{
width:300px;
}
Transición a las nuevas propiedades, con TRANSITION
transition: propiedad duración_transición [velocidades] [demora_inicio],
propiedad duración_transición [velocidades] [demora_inicio];
#recuadro1{
border-radius: 20px;
background-color:#ff0;
width:200px;
padding:10px;
transition:width 1s,
background-color 8s;
-moz-transition:width 1s,
background-color 8s;
-ms-transition:width 1s,
background-color 8s;
-webkit-transition:width 1s,
background-color 8s;
-o-transition:width 1s,
background-color 8s;
}
#recuadro1:hover{
width:300px;
background-color: #f00;
}
Función de Velocidades:
ease : Define un efecto de transición con un comienzo lento, luego rápido y finalmente
termina lento (cuando no definimos la función de transición elige esta por defecto)
linear : Define un efecto de transición con la misma velocidad de inicio a fin.
ease-in : Define un efecto de transición con un comienzo lento.
ease-out : Define un efecto de transición con un final lento.
ease-in-out : Define un efecto de transición con un comienzo lento y un final lento.
Alternativa a la Transición
transition-property: [nombre de propiedad];
transition-duration: [duración de la transición];
transition-timing-function: [función de transición];
transition-delay: [tiempo de inicio];
(CSS3) Animaciones
Las animaciones en css3 nos permiten hacer cosas que con las transiciones no alcanzamos
y nos quedamos cortos.
La sintaxis básica para una animación:
animation-name: [nombre de la animación];
animation-duration: [tiempo de duración];
animation-iteration-count: [cantidad_repeticiones o "infinite"];
animation-direction: ["normal" o "alternate"];
animation-timing-function: [función de velocidad];
animation-delay: [demora para iniciar];
animation-play-state: [running o paused];
@ keyframes [nombre de la animación] {
from {
[propiedades y valores del estado inicial de la animación]
}
to {
[propiedades y valores del estado final de la animación]
}
}
Multiples keyframes
@-moz-keyframes [nombre de la animación] {
0%{
[propiedades y valores]
}
[valor en porcentaje]%{
[propiedades y valores]
}
[valor en porcentaje]%{
[propiedades y valores]
}
100%{
[propiedades y valores]
}
}
FORMATO DEL FONDO/IMAGENES
background : define el fondo en una línea = background: #ffffee url("[Link]")
repeat-x;
background-color : color del fondo, incluso detras de las imagenes
background-image: url("[Link]"), url("[Link]"); .Imagen/es de fondo. La primera
imagen que se dibuja es la que indicamos al final de la lista.
background-repeat : repetir imagen = repeat-x, repeat-y, no-repeat
background-position: posYimg1 posXimg1, posYimg2 posXimg2; . Valores: (top, center,
bottom, Ypx, Y%)(left, center, right, Xpx, X%)
background-size: 50% 50%, 250px 250px, auto auto;
background-origin: border-box/padding-box/content-box;
background-clip) Determina el área en el que se mostrará el fondo y admite dos posibles
valores: border-box y padding-box
border-box: (defecto) incluye el fondo en el área ocupada por el borde.
padding-box: limita el área en la que se mostrará el fondo a la ocupada por el padding
y el contenido, aunque el origen del fondo esté en el borde, no se mostrará la imagen
por debajo de este.
background-attachment : indica si la imagen se desplaza junto con el elemento o si
queda fija (scroll,fixed,local,initial,inherit)
FORMATO DEL TEXTO
color : color de texto. Lo debemos hacer indicando la candidad de rojo,verde y azul
(color en RGB= #0000ff = rgb(0,0,255) = rgb(0,0,100%) = #00f). El valor lo debemos
indicar en formato hexadecimal.
text-align Esta propiedad define el alineamiento del texto y puede tomar alguno de
estos cuatro valores: left, right, center,justify
text-align:center;
El texto aparecerá centrado. Si queremos justificar a derecha, emplearemos el valor
right y si queremos a la izquierda, el valor será left.
text-decoration Esta propiedad nos permite entre otras cosas que aparezca subrayado el
texto, tachado o una línea en la parte superior, los valores posibles de esta propiedad
son: none, underline, overline, line-through
letter-spacing Esta propiedad permiten indicar el espacio que debe haber entre los
caracteres.
word-spacing La propiedad word-spacing permiten indicar el espacio que debe haber entre
las palabras.
text-indent La propiedad indenta la primera linea de un texto. A partir de la segunda
línea, el texto aparece sin indentación. Podemos indicar un valor negativo con lo que
la indentación es hacia la izquierda.
text-transform la propiedad puede inicializarse con alguno de los siguientes valores:
none - capitalize - lowercase - uppercase.
FORMATO DE TIPOGRAFIA
font : permite definir el formato entero de la tipografia, todo junto (font:bold italic
25px verdana;). Es importante recordar que font-size y font-family deben ser los
últimos valores inicializados y en ese orden. No debemos separar por coma.
font-style : Podemos indicar alguno de los siguientes valores: normal, italic, oblique
font-weight : Entre otros podemos indicar los siguientes valores: normal, bold,
bolder,lighter
font-variant : small-caps, normal
font-size : Define el tamaño de la fuente. Entre otras medidas podemos indicarla en
píxeles.
font-family : Define la fuente. Las fuentes más comunes presentes en los navegadores
son: Arial, Arial Black, Courier New, Georgia, Impact, Tahoma, Times New Roman, Verdana
Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el
navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda
a derecha): font-family: verdana, arial, georgia;
DEFINIR EL MARGEN / UBICACION
margin : definimos todo margen en una sola línea con el siguiente formato = margin
margin-top margin-right margin-bottom margin-left (margin:70px 20px;). Con (margin: 0
auto;) se centra el contenido.
margin-top
margin-right
margin-bottom
margin-left
El margen está por fuera del borde.
FORMATO DEL BORDE
border : Define el borde en una sola línea = border:5px solid #ff0000;
border-width : espesor del borde
border-style : tipo de borde
(none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset)
border-color ;
MODIFICAR CADA LADO DEL BORDE:
order-top-width
border-right-width
border-bottom-width
border-left-width
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-color
border-right-color
border-bottom-color
border-left-color
FORMATO ESPACIADO DE BORDES
padding : definir todo el espaciado con el formato = padding:padding-top padding-right
padding-bottom padding-left (padding:5px 30px;)
o podemos configurar en forma independiente cada lado:
padding-top
padding-right
padding-bottom
padding-left
FORMATO DE LISTAS
list-style-type : none,disc,circle,square,decimal,decimal-leading-zero,lower-
roman,upper-roman,lower-alpha,upper-alpha
list-style-position : inside,outside
list-style-image : none,url
FORMATO DE TABLAS
border-collapse : se indica si las celdas están unidas con separación o sin (separate,
collapse)
FORMATO DE BLOQUES u OBJETOS (div,link,li,p)
position : modo de ubicación del elemento (static, relative, absolute, fixed). Permite
determitar el modo de Ubicación. Static es la ubicación normal del Flujo del Documemto;
Relative y Absolute son ubicarlo con las propiedades LEFT y TOP, relativo a su posición
estandar o al (0,0) de la página (no se le reserva espacio en el flujo del documento);
Fixed es un absolute pero que si hacemos scroll de la página el elemento permanece
siempre en el mismo lugar.
left:20px;
top:20px;
float : Indica que se ubique hacia que lado del texto (u otros elementos) se ubica, sin
estar en la línea del mismo, con lo que terminará rodeado (left, right, none). En caso
de NONE, no será rodeado de texto. Aplicable a <img>, <li> y otros. Normalmente cuando
se utiliza la propiedad float, también debe inicializar la propiedad width para fijar
el ancho del elemento. Cuando se define un elemento que flote el alto del mismo afecta
como se disponen los demás elementos de la página, será distinto si es un texto que
envolverá al elemento flotante o si se trata de una imagen o div.
clear : La propiedad clear hace que un elemento no tenga elementos flotantes a su lado
(both, left, right, none).
z-index : valor que indica la capa o nivel de visibilidad (1 = frente)
display : modo de vista... (block, inline) (block = permite que el ancla ocupe todo el
espacio del párrafo, indistintamente del largo del hipervínculo.) (inline = Indicamos
que todos los list item (li) se muestren en la misma línea. Si lo aplicamos a <p>,
varios párrafos deberían aparecer en la misma línea.)
width : en <a>, fija el ancho máximo que puede tener el hipervínculo antes de provocar
un salto de línea.
height : fija el alto del objeto (% o px)
cursor : puntero del mouse sobre el objeto (crosshair, default, pointer, move, e-
resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text,
wait, help, auto)
Novedades de CSS3
[Link]
1 - Bordes redondeados
(border-radius: 20px;)
(border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-
bottom-left-radius)Bordes redondeados de alguno de los vértices
2 - Sombras.
Debemos definir tres valores y un color. (box-shadow: 30px 10px 20px #aaa;)
Sombras múltiples (box-shadow: -30px -30px 20px #f00, 30px 30px 20px #0f0;)
Sombras interiores (box-shadow: inset 0px 0px 40px #f00;)
Sombras con transparencias (box-shadow: 30px 30px 30px rgba(255,0,0,0.5);)
3 - Sombras de texto (text-shadow: desplazamientoX desplazamientoY radio-de-desenfoque
color;). Acepta también múltiples sombras.
4 - Transformaciones 2D: (transform: función de transformación(valor(es));)
Las transformaciones todavía no están definidas como un estándar en todos los
navegadores, por lo que es necesario agregar el prefijo del navegador que la
implementa:
Elemento {
-ms-transform: función de transformación(valor(es)); /* IExplorer */
-webkit-transform: función de transformación(valor(es)); /* WebKit */
-moz-transform: función de transformación(valor(es)); /* Firefox */
-o-transform: función de transformación(valor(es)); /* Opera */
}
Funciones de Transformación:
rotate(XXXdeg)
Transformaciones múltiples:
transform: rotate(grados) scale(valorx ,valory) translate(valorx ,valory)
skew(gradosx ,gradosy);
punto de origen (transform-origin: X Y;) Valores posibles: right, left, top, bottom, %
rotación (transform:rotate(r-deg);)
The CSS snippet above works well within IE9, but IE8 and lower require some filter
magic: filter:progid:[Link](rotation=1.5)
La rotación es en el sentido de las agujas del reloj. También podemos observar que
cuando la rotación se ejecuta no ocupa más espacio el elemento HTML sino que se solapa
eventualmente con otros elementos de la página
escalado (transform:scale(x,y); scaleX(x); scaleY(y);). transform: scale(0.8 , 1.2);
Un valor negativo genera la reflexión del Objeto. transform: scale(1.20 ,-1);
desplazamiento/translación (transform:translate(x-px,y-px); translateX(x-px);
translateY(y-px);)
torcer (transform:skew(x-deg,y-deg); skewX(x-deg); skewY(y-deg);)
múltiples transformaciones en forma simultanea
5 - Opacidad
(opacity: valor;) Valor decimal entre 0 y 1.
(color: rgba(rojo,verde,azul,opacidad); )
6 - Múltiples columnas
(column-count: CantCols;) definir por cantidad de columnas
(column-width: ancho-px;) definir por ancho de cada columna
(column-gap: separacion-px;) indica la separación entre columnas
(column-rule: grosor estilo color;) especifica una línea de separación entre cols.
column-rule-width: grosor;
column-rule-style: estilo;
column-rule-color: color;
7 - Importar una fuente no disponible en el navegador (@font-face)
8 - Imágenes de fondo (background)
9 - Transiciones
10 - Animaciones
Understand ‘+’, ‘>’ and ‘~’ symbols in
CSS Selector
By Brij Mohan
It explains How to use different signs (+,> and ~) in CSS selector and their
differences. Before starting, let us take a sample code to understand the signs.
?
<div id="container">
<p>First</p>
<div>
<p>Child
Paragraph</p>
</div>
<p>Second</p>
<p>Third</p>
</div>
Space:
?
div#container
p{
font-
weight:bold;
}
It is the descendant selector. It will target all p tags within container div.
> Sign:
It will target elements which are DIRECT children of a particular element.
?
div#container > p {
border: 1px solid
black;
}
It will target all P element which are direct children of container div, not children
of child div.
+ Sign:
It is Adjacent sibling combinator. It combines two sequences of simple selectors having
the same parent and the second one must come IMMEDIATELY after the first.
?
div + p {
color:
green;
}
It will only select the first element that is immediately preceded by the former
selector. In our example, it will target to Second ONLY because the owner P element
comes just after Div tag.
~ Sign:
It is general sibling combinator and similar to Adjacent sibling combinator. the
difference is that the second selector does NOT have to immediately follow the first
one means It will select all elements that is preceded by the former selector.
?
div ~ p{
background-
color:blue;
}
It will target both second and third.