CSS - Cascade Style Sheet

Introduccin
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentacin y es imprescindible para crear pginas web complejas.
CSS Cascade Style Sheet

Introduccin
Funcionamiento Bsico
Antes
<h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1>
Funcionamiento Bsico
<html > <head> <title>Ejemplo de estilos con CSS</title> <style type="text/css"> h1 { color: red; font-family: A rial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> <body> <h1>Titular de la pgina</h1> <p>Un prrafo de texto no muy largo.</p> </body> </html>
Con CSS
<style type="text/css"> h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style>
Como Introducir CSS en un documento HTML

en el mismo documento HTML Como en el ejemplo anterior en un archivo externo
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las pginas HTML enlazan mediante la etiqueta <link>
Como Introducir CSS en un documento HTML Archivo Externo

1) Se crea un archivo de texto y se le aade solamente el siguiente contenido: p { color: black; font-family: Verdana; } 2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atencin a que el archivo tenga extensin .css y no .txt 3) En la p g ) pgina HTML se enlaza el archivo CSS externo mediante la etiqueta <link> <head> <title>Ejemplo de estilos CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" /> </head>
en los elementos HTML
Como Introducir CSS en un documento HTML en los Ementos

El ltimo mtodo para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilizacin de las etiquetas.
Trminos Bsicos
<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>
Regla: cada u o de los es os que co po e u a hoja de es os CSS eg a uno os estilos componen una oja estilos CSS. Cada regla est compuesta de una parte de "selectores", un smbolo de "llave de apertura" ({), otra parte denominada "declaracin" y por ltimo, un smbolo de "llave de cierre" (}). Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. Declaracin: especifica los estilos que se aplican a los elementos. Est compuesta por una o ms propiedades CSS. Propiedad: permite modificar el aspecto de una caracterstica del elemento. Valor: indica el nuevo valor de la caracterstica modificada en el elemento.
Comentarios
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en los siguientes ejemplos:
Sintaxis de la definicin de cada propiedad CSS

carcter | : el valor de la propiedad debe tomar uno y slo uno de los valores indicados. <porcentaje> | <medida> | <inherit> smbolo || :el valor de la propiedad puede tomar uno o ms valores de los indicados y en cualquier orden.
/* Este es un comentario en CSS */ n /* Este es un comentario CSS de varias lineas */
<color> || <estilo> || <medida> carcter * indica que el valor ocurre cero o ms veces. el carcter + indica que el valor ocurre una o ms veces carcter {nmero_1, nmero_2} :indica que el valor ocurre al menos tantas veces como el valor indicado en nmero_1 y como mximo tantas veces como el valor indicado en nmero_2.
Selectores
Que hay que hacer
Selectores Bsicos
* Selector universal: Se utiliza para seleccionar todos los elementos de la pgina .
* { margin: 0; padding: 0; }
Selector de tipo o etiqueta: Selecciona todos los elementos de la p g pgina cuya etiqueta HTML coincide con el valor del selector y q
p { ... } solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >)
Encadenar:
A Quien h1, h2, h3 { }
Selectores Bsicos
Selector descendente: Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
<p> ... <span>texto1</span> ... <a href="">...<span>texto2</span></a> ... </p>
Selectores Bsicos
No debe confundirse el selector descendente con la combinacin de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; } /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ p a span em { text-decoration: underline; }
p span { color: red; }
Selectores Bsicos
Selector de clase:
.destacado { color: red; } <body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p> / <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body>

Selectores Avanzados
p.destacado { color: red } : restringe el selector de clase solo a los Elemento p
Selector de hijos
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>): En el ejemplo, el selector p > span se interpreta como "cualquier elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condicin del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.
Selector adyacente
El selector adyacente utiliza el signo + y su sintaxis es elemento1 + elemento2 { ... } La explicacin del comportamiento de este selector no es sencilla, ya que sencilla selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones: elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo. elemento2 debe aparecer inmediatamente despus de elemento1 en el cdigo HTML de la pgina
p > span { color: blue;} <p><span>Texto1</span></p> <p><aref="#"><span>Texto2</span></a> </p>
Selector adyacente
Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la pgina, pero no al segundo <h2>, ya que
El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>. As, los dos elementos <h2> cumplen la primera condicin del selector adyacente. El primer elemento <h2> aparece en el cdigo HTML justo despus del elemento <h1>, por lo que este elemento <h2> tambin cumple la segunda condicin del selector adyacente. Por el contrario, el segundo elemento <h2> no aparece justo despus del elemento <h1>, por lo que no cumple la segunda condicin del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.
Selector de atributos
[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor. [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor. l [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor. [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector slo es til para los atributos de tipo lang que indican el idioma del contenido del elemento.
h1 + h2 { color: red } <body> <h1>Titulo1</h1> <h2>Subttulo</h2> ... <h2>Otro subttulo</h2> ... </body>
Agrupacin de Reglas
Herencia
Uno de los conceptos ms caractersticos de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de alguna propiedad en un elemento, todos sus descendientes heredan inicialmente ese mismo valor.
h1 { color: red; } ... h1 { font-size: 2em; } ... h1 { font-family: Verdana; }
h1 { color: red; font-size: 2em; font-family: font family: Verdana; }
la etiqueta <body> tiene asignado un tipo de letra Arial y un color de letra negro. As, todos los elementos de la pgina (salvo que se indique lo contrario) se muestran de color negro y con la fuente Arial. los elementos <h1> se muestran con otra tipografa diferente a la heredada los elementos <p> varan su color respecto del color que han heredado
Unidades de Medidas
CSS divide todas las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relacin con otra medida, por lo que para obtener su valor real, se debe realizar alguna operacin 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 diseadores que empiezan con CSS
Unidades de Relativas
em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamao de letra empleado. Aunque no es una definicin exacta, el valor de 1em se puede aproximar por la anchura de la letra M ("eme mayscula") del tipo de letra que se est utilizando ex, relativa respecto de la altura de la letra x ("equis minscula") del ( ) tipo de letra que se est utilizando. px, (pxel) relativa respecto de la pantalla del usuario
body { font-size: 0.9em; } body { font-size: .9em; } la medida indicada es igual al 90% del tamao de letra por defecto. Si este tamao por defecto es 12, el valor 0.9em sera igual a 0.9 x 12 = 10.8.
Unidades de Absolutas
in, del ingls "inches", pulgadas (1 pulgada son 2.54 centmetros) cm, centmetros . mm, milmetros pt, pt puntos (1 punto equivale a 1 pulgada/72 es decir unos 0 35 pulgada/72, decir, 0.35 milmetros) pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milmetros) body { margin: 0.5in; } h1 { line-height: 2cm; } p { word-spacing: 4mm; } a { font-size: 12pt } span { font-size: 1pc }
Porcentajes
CSS define otra unidad de medida relativa basada en los porcentajes. Un porcentaje est formado por un valor numrico seguido del smbolo % y siempre est referenciado a otra medida
Los tamaos establecidos para los elementos <h1> y <h2> mediante las reglas anteriores, anteriores son equivalentes a 2em y 1.5em respectivamente, por lo que es ms habitual definirlos mediante em.
body { font-size: 1em; } y ; h1 { font-size: 200%; } h2 { font-size: 150%; }
Colores
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numrico y RGB porcentual
Palabra Clave
RGB decimal
Colores
el modelo RGB( R (rojo), G (verde) y B (azul) ) consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color. Tcnicamente, el modelo RGB es un modelo de tipo "aditivo", ya que los colores se obtienen sumando sus componentes Si todas las componentes valen 0, el color creado es el negro y si todas las p , g componentes toman su valor mximo, el color obtenido es el blanco. En CSS, las componentes de los colores definidos mediante RGB decimal pueden tomar valores entre 0 y 255 La sintaxis que se utiliza para indicar los colores es rgb() y entre parntesis se indican las tres componentes RGB, en ese mismo orden y separadas por comas
p { color: rgb(71, 98, 176); }
Colores
RGB porcentual El funcionamiento y la sintaxis de este mtodo es el mismo que el del RGB decimal. La nica diferencia en este caso es que el valor de las componentes RGB puede tomar valores entre 0% y 100% p { color: rgb(27%, 38%, 69%); } RGB hexadecimal hexadecimal R = 71, G = 98, B = 176. Para obtener el color completo en formato RGB hexadecimal, se concatenan los valores de las componentes RGB en ese orden y se les aade el prefijo # R = 47, G = 62, B = B0.

Modelo de cajas
p { color: #4762B0; }
Modelo de Cajas
Las cajas de una pgina se crean automticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento El modelo de cajas o "box model" es seguramente la caracterstica ms importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseo de todas las pginas web p g
Box Model del CSS

Contenido (content): se trata del contenido HTML del elemento (las palabras de un prrafo, una imagen, el texto de una lista de elementos, etc.) Relleno (padding): espacio libre opcional existente entre el contenido y el borde. Borde (border): lnea que encierra completamente el contenido y su relleno relleno. Imagen de fondo (background image): imagen que se muestra por detrs del contenido y el espacio de relleno. Color de fondo (background color): color que se muestra por detrs del contenido y el espacio de relleno. Margen (margin): separacin opcional existente entre la caja y el resto de cajas adyacentes.
Ancho
height width Valores Se plica a Valor inicial Descripcin Anchura <medida> | <porcentaje> | auto | inherit Todos los elementos, salvo los elementos en lnea que no sean imgenes, las filas de tabla y los grupos de filas de tabla auto Establece la anchura de un elemento Valores Se aplica a Valor inicial Descripcin Altura
Alto
<medida> | <porcentaje> | auto | inherit Todos los elementos, salvo los elementos en lnea que no sean imgenes, las columnas de tabla y los grupos de columnas de tabla auto Establece la altura de un elemento
#cabecera { height: 60px; } #lateral { width: 200px; } <div id="lateral"> ... </div> <div id="cabecera"> ... </div>
Margen
margin-top margin-right margin-bottom margin-left Valores Se aplica a p Valor inicial Descripcin Margen superior Margen derecho Margen inferior Margen izquierdo <medida> | <porcentaje> | auto | inherit Todos los elementos, salvo margin-top y marginbottom que slo se aplican a los elementos de bloque y a las imgenes 0 Establece cada uno de los mrgenes horizontales y verticales de un elemento
Margen
.destacado { margin-left: 2em; } <p class="destacado">Vestibulum lectus diam
Margen
margin Valores Se aplica a Valor inicial Descripcin {1, 4}
Si solo se indica un valor, todos los mrgenes tienen ese valor. Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los mrgenes izquierdo y derecho. Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los mrgenes izquierdo y derecho. Si se indican los cuatro valores, el orden de asignacin es: margen superior, margen derecho, margen inferior y margen izquierdo.
Relleno
padding-top padding-right padding-bottom padding-left Valores Se aplica a Valor inicial Descripcin Relleno superior Relleno derecho Relleno inferior Relleno izquierdo <medida> | <porcentaje> | inherit Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla 0 Establece cada uno de los rellenos horizontales y verticales de un elemento
Margen
( <medida> | <porcentaje> | auto ) {1, 4} | inherit
Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas Establece de forma directa todos los mrgenes de un elemento
Relleno
.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; } <p class="relleno">Lorem ipsum dolor sit amet, p p consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p>
Relleno
padding Valores Se aplica a Valor inicial Descripcin {1, 4}
body {padding: 2em} /* Todos los rellenos valen 2em */ body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em */ body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 2em */ body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em */
Relleno
( <medida> | <porcentaje> ) {1, 4} | inherit
Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla Establece d f E bl de forma di directa todos l rellenos d l d los ll de los elementos
Posicionamiento y visualizacin
Las propiedades width y height de la caja (si estn establecidas). El tipo de cada elemento HTML (elemento de bloque o elemento en lnea). Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante). Las relaciones entre elementos (dnde se encuentra cada elemento Las elemento, elementos descendientes, etc.) Otro tipo de informacin, como por ejemplo el tamao de las imgenes y el tamao de la ventana del navegador.
Tipos de elementos
Los elementos en lnea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var. Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.
Posicionamiento
Posicionamiento normal o esttico: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario. Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja segn el posicionamiento normal y despus desplazarla respecto de su posicin original. Posicionamiento absoluto: la posicin de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la pgina ignoran la nueva posicin del elemento. Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posicin en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la pgina en la ventana del navegador. Posicionamiento flotante: se trata del modelo ms especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la lnea en la que se encuentran.
Layout
El diseo de las pginas web habituales se divide en bloques: cabecera, men, contenidos y pie de pgina. Visualmente, los bloques se disponen en varias filas y columnas. Por este motivo, hace varios aos la estructura de las pginas HTML se defina mediante tablas. El desarrollo de CSS ha permitido que se puedan realizar los mismos diseos sin utilizar tablas HTML
Mantenimiento Accesibilidad Velocidad de carga Semntica
Centrar una pgina horizontalmente
Centrar una pgina horizontalmente
Centrar una pgina verticalmente
Estructura o layout
Diseo a 2 columnas con cabecera y pie de pgina
Qu es JavaScript?
JavaScript es un lenguaje de programacin que se utiliza principalmente para crear pginas web dinmicas. Tcnicamente, JavaScript es un lenguaje de programacin interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
Javascript
Introduccin
Cmo incluir JavaScript en documentos HTML

Incluir JavaScript en el mismo documento XHTML Definir JavaScript en un archivo externo D fi i J S i t hi t Incluir JavaScript en los elementos XHTML
Incluir JavaScript en el mismo documento XHTML

El cdigo JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de cdigo en cualquier zona de la pgina, se recomienda definir el cdigo JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head>)
Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos XHTML enlazan mediante la etiqueta <script>. Se pueden crear todos los archivos JavaScript que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript como necesite.
Incluir JavaScript en los elementos XHTML

Este ltimo mtodo es el menos utilizado, ya que consiste en incluir trozos de JavaScript dentro del cdigo XHTML de la pgina
Etiqueta noscript
El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario cuando su navegador no puede ejecutar JavaScript. El siguiente cdigo muestra un ejemplo del uso de la etiqueta <noscript> La etiqueta <noscript> se debe incluir en el interior de la etiqueta <body> (normalmente se incluye al principio de <body>). El mensaje que muestra <noscript> p p puede incluir cualquier elemento o etiqueta XHTML q q
Sintaxis
No se tienen en cuenta los espacios en blanco y las nuevas lneas: Se distinguen las maysculas y minsculas:. minsculas: No se define el tipo de las variables: No es necesario terminar cada sentencia con el carcter de punto y coma (;): Se pueden incluir comentarios:
Programacin Bsica
Antes de comenzar a desarrollar programas y utilidades con JavaScript, es necesario conocer los elementos bsicos con los que se construyen las aplicaciones : Variables Variables Tipos de Datos Operadores Estructuras de Control de Flujos Funciones y propiedades Bsicas de Javascript
Javascript
Programacin Bsica
10
Variables
Numricas Las variables en JavaScript se crean mediante la palabra reservada var. De esta forma, el ejemplo anterior se puede realizar en JavaScript de la siguiente manera :
Tipos de Variables
Cadenas de texto
El nombre de una variable tambin se conoce como identificador y debe cumplir las siguientes normas: Slo puede estar formado por letras, nmeros y los smbolos $ (dlar) y _ (guin bajo). El primer carcter no puede ser un nmero.
Tipos de Variables
Asignacin Arrays
Operadores
Incremento y decremento
Booleanos
Operadores
Lgicos Matemticos
Operadores
Relacionales
11
Estructura de Control de flujo

Estructura if
Estructura de Control de flujo

While Estructura do...while
Estructura switch
Estructura for
Estructura for...in
Funciones y propiedades bsicas de JavaScript

Funciones tiles para cadenas de texto

Funciones tiles para arrays

Funciones tiles para nmeros
Javascript
Programacin Avanzada
12
Funciones
Javascript
DOM
DOM
DOM La creacin del Document Object Model o DOM es una de las innovaciones que ms ha influido en el desarrollo de las pginas web dinmicas y de las aplicaciones web ms complejas.
rbol de nodos
DOM permite a los programadores web acceder y manipular las pginas XHTML como si fueran documentosXML. De hecho, DOM se dise originalmente para manipular de forma sencilla los documentos XML.
Tipos de nodos
La especificacin completa de DOM define 12 tipos de nodos, aunque las pginas XHTML habituales se pueden manipular manejando solamente cuatro o cinco tipos de nodos: Document, nodo raz del que derivan todos los dems nodos del rbol. Element, representa cada una de las etiquetas XHTML. Se trata del nico nodo que puede contener atributos y el nico del que pueden derivar otros nodos. Attr, se define un nodo de este tipo para representar cada uno de los atributos de las etiquetas XHTML, es decir, uno por cada par atributo=valor. Text, nodo que contiene el texto encerrado por una etiqueta XHTML. Comment, representa los comentarios incluidos en la pgina XHTML. Los otros tipos de nodos existentes son DocumentType, CDataSection, DocumentFragment,Entity, EntityReference, Proc essingInstruction y Notation.
Acceso a un nodos
13
Modelo de Eventos
Modelo bsico de eventos Modelo de eventos estndar Modelo de eventos de Internet Explorer Manejadores de eventos
Javascript
Eventos
Manejadores como atributos de los elementos XHTML. Manejadores como funciones JavaScript externas. Manejadores "semnticos".
Manejadores como atributos de los elementos XHTML

Manejadores como atributos de los elementos XHTML <input type="button" value=Click y vers" onclick="alert('Gracias por hacer click');" /> Manejadores de eventos como funciones externas <input type="button" value=Click y vers" onclick="alert('Gracias por hacer click');" />
Manejadores como atributos de los elementos XHTML

Manejadores de eventos semnticos // Funcin externa function muestraMensaje() { alert('Gracias por pinchar'); } // Asignar la funcin externa al elemento document.getElementById("pinchable").onclick = muestraMensaje; // Elemento XHTML <input id="pinchable" type="button" value="Pinchame y vers" />
function muestraMensaje() { alert('Gracias por pinchar'); } <input type="button" value="Pinchame y vers" onclick="muestraMensaje()" />
14

CSS - Cascade Style Sheet

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CSS - Cascade Style Sheet

Transféré par

Droits d'auteur :

Formats disponibles

Introduccin

CSS Cascade Style Sheet

Como Introducir CSS en un documento HTML

Como Introducir CSS en un documento HTML Archivo Externo

en los elementos HTML

Como Introducir CSS en un documento HTML en los Ementos

<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>

Sintaxis de la definicin de cada propiedad CSS

/* Este es un comentario en CSS */ n /* Este es un comentario CSS de varias lineas */

p span { color: red; }

CSS Cascade Style Sheet

p.destacado { color: red } : restringe el selector de clase solo a los Elemento p

p > span { color: blue;} <p><span>Texto1</span></p> <p><aref="#"><span>Texto2</span></a> </p>

h1 { color: red; } ... h1 { font-size: 2em; } ... h1 { font-family: Verdana; }

h1 { color: red; font-size: 2em; font-family: font family: Verdana; }

body { font-size: 1em; } y ; h1 { font-size: 200%; } h2 { font-size: 150%; }

p { color: rgb(71, 98, 176); }

CSS Cascade Style Sheet

Box Model del CSS

Mantenimiento Accesibilidad Velocidad de carga Semntica

Centrar una pgina horizontalmente

Centrar una pgina horizontalmente

Centrar una pgina verticalmente

Centrar una pgina verticalmente

Centrar una pgina verticalmente

Cmo incluir JavaScript en documentos HTML

Incluir JavaScript en el mismo documento XHTML

Definir JavaScript en un archivo externo

Incluir JavaScript en los elementos XHTML

Estructura de Control de flujo

Estructura de Control de flujo

Funciones y propiedades bsicas de JavaScript

Funciones y propiedades bsicas de JavaScript

Funciones y propiedades bsicas de JavaScript

Manejadores como atributos de los elementos XHTML

Manejadores como atributos de los elementos XHTML

Vous aimerez peut-être aussi

/* Este es un comentario en CSS / n / Este es un comentario CSS de varias lineas */