Tutorial de Css Básico

TUTORIAL DE CSS BÁSICO
 CSS I
 <SPAN> -> Para definir estilos en secciones reducidas de una página.

<p>
Esto es un párrafo en varias palabras <SPAN style = ”color: green”> en color verde</SPAN>.
resulta muy fácil.
</p>  Pinta de color verde las palabras “en color verde”
 Estilo definido para una etiqueta:
<p style = “color: #990000”>

Esto es un párrafo de color rojo.
</p>
<p style= “color: #000099”>
Esto es un párrafo en color azul
</p>
 Estilo definido en una parte de la página:
 <DIV> -> Definir secciones de una página
<div style = “color: #000099; font-weight: bold”>

<h3> Estas etiquetas van en <i> azul y negrita </i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los estilos
</p>
</div>
 Estilo definido para toda una página:
<html>
<head>
<Title> Ejemplo de estilos para toda una página </title>
<STYLE type = “text/css”>
<!—
H1 {text-decoration: underline; text-align: center}
P {font-Family: arial, verdana; color: white; background-color: black}
BODY {color: black; background-color: #cccccc; text-indent: 1cm}
//-->
</STYLE>
</head>
<body>
<h1> P%aacute;gina con estilos </h1>
Bienvenidos…
<p> Siento ser tan hortera, pero esto es un ejemplo sin más importancia </p>
</body>
</html>
 Estilo definido para todo un sitio web:
P{
font-size: 12pt;
font-family: arial, helvética;
font-weight: normal;
}
H1 {
font-size: 36pt;
font-family: verdana, arial;
text-decoration: underline;
text-align: center;
background-color: Teal;
}
TD {
font-size: 10pt;
text-align: center;
background-color: 666666;
}
BODY {
background-color: #006600;
font-family: arial;
color: white;
}
 Enlazamos la página web con la hoja de estilos:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional// EN”>

<html><head>
<LINK REL = “STYLESHEET” type= “text/css” href = “estilos.css”>
<title> Página que lee estilos </title>
</head><body>
<h1> Página que lee estilos </h1>
Esta Página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de
estilos. Es muy fácil.
<br>
<br>
<table width = “300” cellspacing = “2” border = “0”>
<tr>
<td> Esto está dentro de un TD, luego tiene estilo propio, declarado en el
fichero externo </td>
</tr>
<tr>
<td> La segunda fila del TD </td>
</tr>
</table></body></html>
 También podemos incluir estilos en un archivo externo con @import
url(“estilos.css”):
<style type = “text/css”>
@import url(“estilos.css”);
body {
background-color = “#ffffcc”;
}
</style>
Se suele utilizar cuando hay unas pautas básicas en el trabajo con los estilos y unos estilos
específicos para cada página.
 Sintaxis y unidad de CSS:

 Definir un estilo  font-size: 10pt; text-decoration: underline; color: black;…
 Definir estilo de una etiqueta  H1 {text-align: center; color: black;…}
 Unidades de medida relativas:

 Fuente actual (em) p.e. si 1em = 12pt, 2em = 24pt.
 Altura de letra “x” (ex) p.e. 1ex = altura normal, x = mitad de la altura normal.
 Píxeles (px) -> es un punto en la pantalla del dispositivo.
 Unidades de medida absolutas:

 Puntos (pt) -> 1pt = 1/72 in
 Pulgadas (in)
 Centímetros (cm)
 Milímetros (mm)
 Picas (pc) -> 1pc = 12pt
 Porcentaje (%) p.e. Utilizamos 12pt, 150% = 150% de 12pt  18pt
 Notación de colores en CSS:

 Notación hexadecimal -> background-color: #ff8800
 Notación hexadecimal abreviada -> background-color: #f80
 Nombre del color -> color: red; border-color: Lime;…
 Notación de color con % de RGB -> color: rgb(33%, 0%, 0%);
 Notación por valores decimales de RGB (de 0 a 255) -> color: rgb(200, 255, 0);
 Color transparente -> background-color: transparent; (no es que sea transparente, sino
que se le asigna automáticamente el mismo color del fondo en donde está)
 Definicioón de estilos CSS Shorthand:

 Propiedad Font (fuente):
o font-style||font-variant||font-weight||font-size/line-height||familia fuente
o P.e. P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial}
 Propiedad Background (fondo):

o Background-color||background-imate||background-repeat||background-
attachment||background-position.
o P.e. Body {background: #FFF url(…/images/ejemplo.gif) no-repeat fixed center}
 Margin (margen):
o longitud | porcentaje | auto
o P.e. Body {margin: 5px} -> Todos los márgenes a 5px
P {margin 2px 4px} -> sup. e inf. a 2px, dcha. e izq. a 4px
DIV {margin 1px 2px 3px 4px} -> sup. 1px, dcha. 2px, inf. 3px, izq. 4px
 Padding (relleno):
o longitud | porcentaje | auto
o P.e. Body {padding 2em 3em 4em 5em} -> sup. 2em, dcha. 3em, inf. 4em, izq.
5em
Body {padding: 2em 4em} -> sup. e inf. a 2em, dcha. e izq. a 4em
Body {padding 5em} -> Todos los lados a 5em
 Border (borde):
o border-width || border-style || color
o P.e. H3 {border: thick dotted blue} -> Borde punteado, grueso y azul
 Pseudo-element en CSS (pseudo elementos) -> Sirve para dar color a una letra o
una palabra en concreto dentro de una etiqueta
 Pseudo-element first-letter:
1. P: first-letter {
font-size: 200%;
color: #993333, font-weight: bold;
}
 Pseudo-element first-line:
1. P: first-line {
text-decoration: underline;
font-weight: bold
}
 Propiedades de estilos aplicables:

 first-letter  font propierties, color propierties, background propierties,
“text-decoration”, “vertical-align”(solo si “float” está asignado a “none”),
“text-transform”, “line-height”, margin propierties, padding propierties,
border propierties, “float”, “text-shadow” y “clear”.
 first-line  font propierties, color propierties, background propierties,

“word-spacing”, “letter-spacing”, “text-decoration”, “vertical-align”, “text-
transform”, “line-height”, “text-shadow” y “clear”.
 Uso de las clases con los pseudo-elementos:

 P.nombreclase: first-line {
font-weight: bold;
}
 Pseudo-elementos en CSS2:
 P.nota: before {
content: “Nota:”;
}
 Trucos avanzados con CSS:
 Definir estilos utilizando clases:
1. Definimos una clase -> .nombredelaclase {atributo1: valor1, …}
2. Utilizamos la clase creada en una etiqueta de HTML
 <ETIQUETA class = “nombredelaclase”>
 Estilo en los enlaces:

 Enlaces nomales -> A:link {atributos}
 Enlaces visitados -> A:visited {atributos}
 Enlaces activos (activos en el preciso momento que se pincha sobre ellos)
- > A:active {atributos}
 Enlaces hover (cuando el ratón está encima de ellos) -> A:hover {atributos}
 URL como valor de un atributo (p.e. background-image):

 background-image: url(fondo.gif) -> en el caso de que la imagen esté en el
mismo directorio que la página.
 background-image: url(http://www.desarrolloweb.com/images/fondo.gif)
 Ocultar estilos en navegadores antiguos:

 <!—esto es un comentario --> (ocultar mediante esto, todo lo que haya
entre <style> y </style>)
 ¿Qúe son las capas?

 <DIV> para crear capas
 <DIV> y <SPAN> también sirven para aplicar estilos a partes de la página,
<DIV> aplica cambios a partes más amplias.
 Atributos para crear una capa

 <div id = “c1” style = “position.absolute; left: 20px; top: 100px;”>
Hola!
</div>
 También hay:
 width y height  anchura y altura de la capa
 Z-index  que capas se ven encima de que otras, si hay solapamiento
 clip  recortar una capa y hacer que partes de ella no sean visibles
 visibility  define si la capa es visible o no
 Atributos para las capas:

 Atributo color -> Color del texto de la capa
 Atributo font-size -> Tamaño del texto
 Atributo position -> Tipo de posicionamiento de la capa; 2 tipos:
1. relative -> La posición de la capa es relativa al lugar donde se
estaba escribiendo en la página en el momento de escribir la capa
con su etiqueta.
2. absolute -> La posición se calcula con respecto al punto superior
izquierdo de la capa
 Atributo top -> Distancia en vertical donde se colocará la capa
1. Si era absolute: borde sup de la capa con respecto al sup de la pág.
2. Si era relative: desde donde se estaba escribiendo hasta el borde
sup de la capa
 Atributo left -> Igual que el top pero en horizontal
 Atributo height -> Tamaño de la capa en vertical (altura)
 Atributo width -> Tamaño de la capa en horizontal (anchura)
 Atributo visibility -> Tiene 3 valores:
1. visible -> se podrá ver
2. hidden -> estará oculta

3. inherit -> valor por defecto, su visibilidad la marca la capa en
donde esté esta capa.
 Atributo Z-index -> Qué capas se ven encima de que otras
 Atributo clip -> Recortar una capa y hacer que partes son visibles y que no
 rect (<top>, <right>, <bottom>, <left>)
 El modelo de caja en CSS:

 Áreas y propiedades:
1. Área de Contenido  <div>
2. Área de Margen  Margin
3. Área de Relleno  Padding
4. Área de Borde  Border
Cada área se divide en 4 partes: top, right, bottom, left.
1. div {margin: 20px} -> Márgen homogéneo de 20px alrededor de la caja.

2. div {margin: 10px 5px 20px 0} -> sup. 10px, dcha. 5px, inf. 20px, izq. 0
3. div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
}
El 2 y el 3 describen lo mismo pero escrito de manera distinta, según los gustos de la persona.
 Propiedades de margen y relleno
 margin-top, margin-left, margin-bottom, margin-right
 padding-top, padding-left, padding-bottom, padding-right
 Propiedades del borde

 Ancho -> “border-top-width”, “border-left-width”,…
“thin” (fino), “medium” (mediano), “thick” (grueso)
 Color -> “border-top-color”, “border-left-color”,…
 Estilo -> “border-top-style”, “border-left-style”,…

Toma valores como: none, hidden, dotted, dashed, solid, doublé, Groove,
ridge, inset y outset.
*En el área de contenido y relleno se verá lo de dentro del background

*En el área de borde se verá aquello determinado en border (altura, anchura,…)
*El área margen (margin) siempre es transparente
 Estilos que se utilizan solo una vez:

 <div id = “capa1”>
#capa1 {
font-size: 12pt;
font-family: arial;
}
 Atributo CSS “float” y el flujo:

 Listas (etiqueta li)
 li {
float: right;
}
<ul>  <ul> = lista desordenada / <ol> = lista ordenada

<li> Elemento 1 </li>
</ul>
 Flujo y atributo position:

 <div style = “position: absolute; top: 10px; left: 100px;”>
Este elemento tiene posicionamiento absoluto
</div>
Top -> distancia desde la parte de arriba
Left -> distancia desde la parte de la izquierda
 Position fixed:
El posicionamiento fixed es un posicionamiento absoluto pero fijo en todo momento a la

página, es decir si usamos el scroll (movemos la pantalla con la rueda del raton) siempre saldrá
en la misma posición.
*En el código de position fixed usamos muchos <br> para que la página pueda tener
desplazamiento.
 El atributo Overflow de CSS2:
Overflow sirve para decirle al navegador qué es lo que debe hacer con el contenido que no
cabe dentro de una capa. Se puede configurar overflow para que aparezcan unas barras de
desplazamiento para ver el contenido que no cabe en la capa.
 visible -> muestra todo, lo que cabe y lo que no
 hidden -> muestra solo lo que cabe
 scroll -> barras de desplazamiento (respetando dimensiones asignadas a la
capa)
 auto -> se respetan las dimensiones y pueden aparecer o no barras de
desplazamiento automáticas según si cabe todo o no
<div style = “overflow: hidden; width: 200px;….”>

Contenido….
</div>
 Trucos de CSS:
1. Usa un contenedor global para todas las cajas (cuando las cosas se disparan)
#contenedor{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;  Contenedor de 900px
margin-left: auto;
width: 900px;
}
 Que flote a la izquierda (cuando las cajas se superponen)
#caja {
float: left;
width: 300px;
}
2. Calcular bien los paddings o rellenos (cuando las cajas se van abajo)
Tenemos una caja de 300px y añadimos un padding de 10px, luego lo que tenemos ahora sería
una caja con padding de 310px que puede trastocar todo lo que teníamos ajustado.
*Solución: Caja de 290px con un padding de 10px  Total, caja de 300px
#caja {
float: left;
width: 290px;
padding-left: 10px;
background-color: #FFE6DD;
}
3. El pie de página con ancho fijo (cuando el pie de página enloquece)
#pie {
width: 900px;
background-color: #666666;
}
4. No todo es 1+1=2 en CSS (cuando los anchos no cierran)
No siempre cierran perfectamente los anchos de las cajas, a veces auque parezca ilógico hay
que añadir algunos px mas a los contenedores.
 OTROS TRUCOS RÁPIDOS:

o Usa colores diferentes para distinguir las páginas
o Pon una palabra descriptiva en cada caja
o Comenta el código fuente y señala los finales de los contenedores grandes
o No racanees espacios entre div’s
o No quieras escribir tu CSS con 2 o 3 líneas. Si no quieres errores escribe lo necesario
o Cuidado con el tamaño de las imágenes que insertes, cambian el ancho de los
contenedores
o Elige bien los nombres de cada div y se ordenado en el código
o Si vas a trabajar con varias cajas, trata de agruparlas para poder aclararte y leerlo
mejor
 Propiedad Z-index a fondo:

*Cuando hay problemas de solapamiento entre cajas, una de las soluciones es darle menos
opacidad a dichas cajas y así ver su contenido sin que se topen unas con otras.
div: first-child {
opacity: .99;  Esta opacidad se le añadiría a la caja padre
}
 Ordenar el apilamiento
Cuando introduces la propiedad de posición a la caja padre (y sus hijos automáticamente) se
muestra delante de elementos no posicionados.
*Elemento posicionado -> cuando tiene un valor distinto a “static”, “relative”, “absolute”,…
*Z-indez solo funciona con elementos posicionados. A z-index se le da un valor, los que tengan
el valor más grande aparecerán delante de los del valor más pequeño.
 Contextos de apilamiento:
*Formados en un elemento de 3 maneras:
 Cuando un elemento es el elemento raíz de un documento (el elemento <html>)
 Cuando un elemento tiene un valor de posición que no sea “static” y valor de z-index
distinto a “auto”
 Cuando un elemento tiene un valor de opacidad menor que 1
 Orden de apilamiento dentro del mismo contexto de apilamiento:

1) El contexto de apilamiento del elemento raíz
2) Elementos posicionados (y sus hijos) con valores z-index negativos (los valores más
altos son apilados delante de valores menores; elementos con el mismo valor son
apilados de acuerdo a su aparición en HTML)
3) Elementos no posicionados (ordenados por aparición en HTML)
4) Elementos posicionados (y sus hijos) con un valor z-index de auto (ordenados por
aparición en HTML)
5) Elementos posicionados (y sus hijos) con valores z-index positivos (los valores mayores
son apilados delante de valores menores; elementos con el mismo valor son apilados
de acuerdo a su posición en HTML)
- Etiquetas de html:
 Maquetear en base a capas (div) y no a tablas (table)
 Párrafos (p)
 Encabezados (h1, h2,…, h6)
 Tablas (table, thead/tr/th, tbody/tr/td)
 Listas (ul/li, ol/li)
 Menús: basados en listas con el atributo display: inline
- Usar medidas relativas en tamaño de fuentes (% y em):

1em = 100%
1.2em = 120%
0.7em = 70%
- 10 errores comunes en los CSS

1) Uso innecesario del valor 0:
a. padding: 0px 0px 5px 0px;  padding: 0 0 5px 0;
margin: 0px;  margin: 0;
*line-height:1; -> puede no tener unidad (px)
2) Los colores en formato hexadecimal necesitan una almohadilla:

a. color: ea6bc2;  color: #ea6bc2;
3) Valores duplicados en los códigos de colores:

a. color: #ffffff;  color: #fff;
b. background-color: #000000;  background-color: #000;
c. border: 1px solid #ee66aa;  border: 1px solid #e6a;
*No se puede hacer en códigos como: #fe69b2; (no hay duplicidad)
4) Evitar repeticiones de código innecesarias:

a. border-top: 1px solid #00f;
b. border-right: 1px solid #00f;
c. border-bottom: 1px solid #00f;  border: 1px solid #00f;
d. border-left: 1px solid #00f;
5) La duplicación es necesaria con los estilos en cascada:

a. border: 1px solid #00f;
b. border-left: 1px solid #f00;
6) Los estilos inválidos no hacen nada:

a. padding: auto;  este estilo sólo es aplicable a width y height
7) Código específico para cada navegador:

a. Hay que pensar si es rentable porque algunos usuarios no van a apreciar esos
cambios
8) Espacio perdido:
a. Hay que dejar espacio entre líneas para mayor legibilidad pero sin pasarse,
para evitar “boquetes”
9) Especificar colores sin usar palabras:

a. Hay que especificar el color siempre de forma hexadecimal normal o abreviada
i. p.e. utilizar “#fff” en lugar de “white”
10) Agrupar estilos idénticos:

a. h1: font family: Arial, Helvética, sans-serif;
b. p: font family: Arial, Helvética, sans-serif;
c. #footer: font family: Arial, Helvética, sans-serif;
d. .intro: font family: Arial, Helvética, sans-serif;
 h1, p, #footer, .intro {

font family: Arial, Helvética, sans-serif;
}
- Reglas de estilo CSS de usuario y de autor:

o usuario: (user stylesheet rules)
o autor: (author stylesheet rules)
*El usuario puede cambiar el tipo de letra de las páginas que visita aunque el programador
ponga otro tipo distinto. Hay que añadir en la carpeta de estilos de usuario (userContent-
example.css) un documento de texto con el siguiente código:
body {
font-size: 16pt;
}
*En las páginas donde el programador haya dejado sin tocar (por defecto) el tipo de letra, al
meter este documento cambiará la letra, pero en las que haya un tipo de letra puesto por el
programador no.
*Para obligar a todas las páginas a tener la letra que queramos hay que modificar el código:
body {
font-size: 16pt !important;
}
*Con esto, las páginas aunque estén configuradas con otro tipo de letra las podemos cambiar a
nuestro gusto
- Declaración !important en CSS:

td {
font-family: verdana, arial !important;
}
td.micelda {
font-family: monospace;
}
*Con esto podemos hacer que la primera celda, de clase “micelda” estuviese con “monospace”
y la segunda celda con “verdana, arial”, pero no es así porque con !important TODO estará en
la fuente especificada.
*Para internet explorer 6 por ejemplo podemos poner una fuente o un fondo específico
diferente a otros navegadores porque no entiende !important
div {
background-image: url(fondo_semitransparente.png) !important
background-image: url(fondo.gif)
}
*ie6 leerá el segundo background-image solo y es el que imprimirá
- Usos de la regla @media de CSS2

 Estilos que funcionan solo en impresión en papel
@media print {
table {
width: 90%;
border: 2px solid #ff0000;
}
.miclase {
display: none;
}
}
 Estilos para verlos en varios medios a la vez
@media tv, handheld {
body {
font-size: 0.5em;
}
}
 Estilos para todos los medios
@media all {
div.imprimir {
display: hidden;
}
}
<link media = “print” href = “css_solo_para_impresión.css” rel = “stylesheet” type = “text/css”>
- Tipos de medios en CSS2:

 All: cualquier tipo de medio
 Braille: medio relacionado con dispositivos táctiles braille
 Embossed: para impresoras braille
 Handheld: para móviles
 Print: para cuando se imprimen documentos en la impresora
 Projection: para proyectores
 Screen: para pantallas grandes (normalmente las de pc)
 Speech: para sintetizadores de voz
 Tty: para teletipos, terminales, consolas de comandos; medios que tienen un tamaño
fijo de carácter (no usan píxeles)
 Tv: para televisiones
- Depurar CSS (consejos para solucionar errores)
 Firebug -> herramienta de Firefox; te ayuda a encontrar:
o Errores de sintaxis
o Errores en rutas de imágenes y otros recursos
o Errores en tu HTML
 Otros productos similares a firebug para otros navegadores:

o IEDeveloper Toolbar -> Internet Explorer 7
o DebugBar para Explorer
o Firebug para Google Chrome
o Opera Dragonfly para Opera
- Validar tu hoja de estilos con un validador CSS:

 El mejor es: herramienta de W3C para validación de hojas de estilo
 A través de Opera podemos acceder al validador con ALT+CTRL+Mayús+U
- Aislar y reducir el código HTML:

 Simplificar tu código HTML quitando uno por uno los elementos que tiene (tablas,
div’s, banners,…) para ver si alguno de esos es el que provoca el error y solucionarlo
(prueba y ensayo)
- Utilizar un DOCTYPE:
 Es una cadena de texto que se debe incluir al pricipio del código HTML, para decirle
que versión de HTML o XHTML estamos utilizando (para evitar errores de
compatibilidad con otros navegadores)
 Es recomendable empezar con DOCTYPE y luego ir desarrollando el código, para
asegurarnos que el trabajo realizado se vea igual en todos los navegadores.
 Tiene la forma:
<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional// EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Lo incluiremos en la primera línea del código.
 Tipos de DOCTYPE:
o DOCTYPE XHTML 1.0 strict
o DOCTYPE XHTML 1.0 transitional
o DOCTYPE XHTML 1.0 frameset
o DOCTYPE HTML 4.01 strict
o DOCTYPE HTML 4.01 transitional
o DOCTYPE HTML 4.01 frameset
- Listado de distintos frameworks CSS:

 960 Grid System -> el más utilizado (anchura de 960px) ofrece dos posibilidades, con
rejillas de 12 o 16 columnas
 Simple -> en castellano (creador chileno)
 Blueprint -> Ofrece una estructura sólida por medio de la típica rejilla pero además
ofrece formularios, botones, pestañas, tipografías o para que tus páginas web se
puedan imprimir de manera óptima en papel
 YUI Grids CSS -> Es el framework CSS de Yahoo!, permite maquetar páginas de
distintas anchuras (750px, 750px, 974px) también tiene 6 plantillas predefinidas y mas
de 1000 combinaciones para maquetación en regiones de 2, 3 y 4 columnas
 Tripoli -> No es un framework CSS, ofrece un código CSS que resetea los estilos
predefinidos de los navegadores y los redefine para que lo vean igual todos los clientes
web
 Boilerplate -> Creado por un desarrollador inicial de Blueprint, tiene todo lo necesario
para maquetar una web sin las complejidades de Blueprint
 Bluetrip -> Es una combinación de BLUEprint y TRIPoli, también contiene algunas cosas
de 960 Grid System. Tiene lo mejor de cada uno
 Otros frameworks CSS:
o Elements
o ESWAT
o Content with style
o My CSS framework
o Hartija
o Malo (Framework CSS ultra pequeño)
o esmastic
- Propiedades nuevas en CSS3:

 Bordes: border-color-image-radius-shadow
 Fondos: background-origin-clip-size
o Hacer capas con múltiples imágenes de fondo
 Color: HSL, HSLA, RGBA, Opacidad
 Texto: text-shadow-overflow
o Rotura de palabras largas
o Web Fonts
 Interfaz: box-sizing, resize, outline <7li>
o nav-top-right-bottom-left
 Selectores: selectores por atributos
 Modelo de caja básico: overflow-x-y
 Degradados CSS3: degradado lineal, radial, lineal de repetición, radial de repetición
 Otros: media queries, creación de múltiples columnas de texto, animaciones CSS3,
Flexbox, CSS Grid Layout
- Unidades CSS viewportwidth y viewportheight:

 viewportwidth -> “vw”  anchura para diferentes dispositivos, 1vw = 1% anchura
dispositivo
 viewportheight -> “vh”  altura para diferentes dispositivos, 1vh = 1% altura
dispositivo
 El tamaño de letra de los wiewport es responsive (adaptable)
o body {
fontsize: 2.5vw;
}
h1 {
fontsize: 4.8vh;
}
- Table model en CSS (modelo tabla):
 display:table -> asigna un comportamiento de tabla a los elementos que haya dentro,
anidadas a la etiqueta donde está el display:table
 display:table-row -> actúa como un elmento fila, etiqueta TR
 display:table-cell -> actúa como un elemento celda, etiqueta TD
o table-caption -> se comporta como la etiqueta CAPTION
o table-column -> se comporta como la etiqueta COL
o table-column-group -> se comporta como la etiqueta COLGROUP
o table-footer-group -> se comporta como la etiqueta TFOOT
o table-header-group -> se comporta como la etiqueta THEAD
o table-row-group -> se comporta como la etiqueta TBODY
 display:inline-table -> igual que display:table pero en vez de comportarse como un
bloque, se comporta como “inline”

Tutorial de Css Básico

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tutorial de Css Básico

Caricato da

Copyright:

Formati disponibili

TUTORIAL DE CSS BÁSICO

 <SPAN> -> Para definir estilos en secciones reducidas de una página.

 Estilo definido para una etiqueta:

<p style = “color: #990000”>

 <DIV> -> Definir secciones de una página

<div style = “color: #000099; font-weight: bold”>

 Estilo definido para toda una página:

 Enlazamos la página web con la hoja de estilos:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional// EN”>

 Sintaxis y unidad de CSS:

 Unidades de medida relativas:

 Unidades de medida absolutas:

 Porcentaje (%) p.e. Utilizamos 12pt, 150% = 150% de 12pt  18pt

 Notación de colores en CSS:

 Definicioón de estilos CSS Shorthand:

 Propiedad Background (fondo):

 Propiedades de estilos aplicables:

 first-line  font propierties, color propierties, background propierties,

 Uso de las clases con los pseudo-elementos:

 Estilo en los enlaces:

 URL como valor de un atributo (p.e. background-image):

 Ocultar estilos en navegadores antiguos:

 ¿Qúe son las capas?

 Atributos para crear una capa

 Atributos para las capas:

2. hidden -> estará oculta

 El modelo de caja en CSS:

Cada área se divide en 4 partes: top, right, bottom, left.

1. div {margin: 20px} -> Márgen homogéneo de 20px alrededor de la caja.

 Propiedades del borde

 Color -> “border-top-color”, “border-left-color”,…

 Estilo -> “border-top-style”, “border-left-style”,…

*En el área de contenido y relleno se verá lo de dentro del background

 Estilos que se utilizan solo una vez:

 Atributo CSS “float” y el flujo:

<ul>  <ul> = lista desordenada / <ol> = lista ordenada

 Flujo y atributo position:

El posicionamiento fixed es un posicionamiento absoluto pero fijo en todo momento a la

 El atributo Overflow de CSS2:

<div style = “overflow: hidden; width: 200px;….”>

 OTROS TRUCOS RÁPIDOS:

 Propiedad Z-index a fondo:

 Orden de apilamiento dentro del mismo contexto de apilamiento:

- Usar medidas relativas en tamaño de fuentes (% y em):

- 10 errores comunes en los CSS

2) Los colores en formato hexadecimal necesitan una almohadilla:

3) Valores duplicados en los códigos de colores:

*No se puede hacer en códigos como: #fe69b2; (no hay duplicidad)

4) Evitar repeticiones de código innecesarias:

5) La duplicación es necesaria con los estilos en cascada:

6) Los estilos inválidos no hacen nada:

7) Código específico para cada navegador:

9) Especificar colores sin usar palabras:

10) Agrupar estilos idénticos:

 h1, p, #footer, .intro {

- Reglas de estilo CSS de usuario y de autor:

- Declaración !important en CSS:

- Usos de la regla @media de CSS2

<link media = “print” href = “css_solo_para_impresión.css” rel = “stylesheet” type = “text/css”>

- Tipos de medios en CSS2:

 Otros productos similares a firebug para otros navegadores:

- Validar tu hoja de estilos con un validador CSS:

- Aislar y reducir el código HTML:

<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional// EN”