CSS: Cascading Style Sheets

Slides:



Advertisements
Presentaciones similares
CSS: Cascading Style Sheets Yusef Hassan Montero
Advertisements

CSS Rogelio Ferreira Escutia. 2 Hojas de estilo cascada, mayo 2010 Definición La hojas de estilo en cascada (en inglés.
Laboratorio 5 Hojas de Estilo CSS
Visualización de documentos XML con CSS
1 XML Extensible Markup Language HTML HyperText Markup Language normas06_01.xml.
INTRODUCCION A CSS.
Ing. Jéber G. Martínez. HTML: Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concretamente,
HOJAS DE ESTILO EN CASCADA CSS
INTRODUCCION A HTML Y JAVASCRIPT Ing. Diego J. Arcusin
Titulo Arial 32 pts. Fecha Día Mes Año..
CSS WALC 2004 – Track 2 Pep Turró Cuzco, octubre de 2004.
Introducción a Lenguajes web
SEPARANDO FORMA DE CONTENIDO Prof. Leonel Del Carpio
HTML Estructura.
CSS Prioridad. Selectores CSS El selector aplica a todos los elementos HTML de la página con esa etiqueta (p). El selector múltiple de CSS, incluye varios.
1 Las hojas de estilo en cascada Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal utilizado para definir la presentación.
HTML/CSS Marcas básicas.
DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB
Creación de Páginas de Web M.C. Luis Zarza. CSS: Hoja de estilos en cascada Fue desarrollado por el W3 Consortium para permitir la separación entre documentos.
CSS Módulo V. Funcionamiento Visor Web Servidor Web Documentos Página Web Solicitud Entrega.
Curso: XML, de los datos a la presentación Julio de 2005 CAPTIVA · Hojas de estilo CSS.
Hojas de Estilo Una hoja de estilo es un documento es un documento independiente, donde se definen todos los estilos que se utilizarán en todas las páginas.
Hojas de Estilo en Cascada MC Beatriz Beltrán Martínez.
DISEÑO SITIOS WEB CON HTML Los sitios html comienzan con el código de inicio y terminan con el código Así que ponemos Los sitios html se dividen en un.
Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)
Anatomía de la declaración La declaración consta de dos partes:  Propiedad  Valor Selector Propiedad Valor A { color: #000013;}  La propiedad es una.
Desarrollo CSS.
Disposición de la división de las páginas: La zona de contenido principal tendrá 25 píxeles de espacio en blanco en la parte izquierda superior. /*División.
Curso: XML, de los datos a la presentación Julio de 2005 CAPTIVA · eXtensible Stylesheet Language Formatting Objects.
 El primer navegador Web incluía un lenguaje de estilo interno que utilizaba dicho navegador para mostrar las páginas HTML.  Sin embargo estos primeros.
Ingeniero de Sistemas – Universidad de Los Andes
Principios Básicos de Diseño Web
Ventas de CDs. ahora Eric trabaja los… Jueves… Viernes…
Preparación de textos HTML, PDF y MSWord Julio Takayama Silvia de Medeiros Cabral Oficina de Comunicación y Marketing BIREME - OPAS - OMS Julio Takayama.
Opción1 Portada. Subtítulo o fecha entre 14 pt y 19pt, Arial Negrita Portada Fleet.
Título de Presentación. 2 3 Haga clic para modificar el estilo de texto del patrón Segundo nivel Tercer nivel Cuarto nivel Quinto nivel.
El presente proyecto, cofinanciado por el Fondo de Cohesión de la Unión Europea, contribuye a reducir las disparidades sociales y económicas entre los.
 Un lenguaje que permite asociar estilos de composición a documentos estructurados, como HTML y aplicaciones XML  Un conjunto de propiedades y valores.
Introducción Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris et tortor. Ut placerat diam a dui. Maecenas vel leo sit amet eros consectetuer.
CSS: CASCADING STYLE SHEETS
Hojas de Estilo en Cascada (Cascading Style Sheets)
CSS Cascading Style Sheets
H1 { color : black; } Sintaxis de CSS Regla CSS
Karina Quispe. Multiplataforma Simple Esta en todos lados No es mas que simple texto Libre.
> INTRODUCCIÓN “Título de la introducción ” Praesent lacinia, lectus eget viverra convallis, lectus leo pretium est, eget scelerisque arcu ligula non justo.
GUIA DE CSS 3 BASICA AUTOR: CARLOS BERBECI QUE ES CSS3 ? CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML.
DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 6: CSS Jose Miguel Vidagany Igual.
TÍTULO DE LA PRESENTACIÓN MÁSTER EN / GRADO EN... ASIGNATURA SUBTÍTULO DE LA PRESENTACIÓN.
1 Área Razón Social Escribe aquí el subtítulo. Máximo 3 líneas Escribe aquí el título. Máximo 3 líneas.
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT Curabitur non iaculis risus. Curabitur at sapien sed sem condimentum suscipit. Phasellus vehicula.
Conociendo los blogs Miriam Ruiz. ¿Qué es un blog?
Nombre y apellido del Autor 1
NUEVA IMAGEN PARA LA PILOTO
MODELO DE PRESENTACIÓN CORPORATIVA
MODELO DE PRESENTACIÓN CORPORATIVA
MODELO DE PRESENTACIÓN CORPORATIVA
REFERENCIAS BIBLIOGRÁFICAS
CSS: “CASCADING STYLE SHEETS”
TÍTULO EN ARIAL NARROW BOLD 96 PT
TÍTULO EN ARIAL NARROW BOLD 96 PT EN DOS LINEAS SI NECESARIO
TÍTULO DE LA PRESENTACIÓN
TÍTULO DE LA PRESENTACIÓN
ALPINE SKI HOUSE WWW. ALPINESKIHOUSE.COM.
ALPINE CASA DE ESQUÍ WWW. CASADEESQUIALPINE.COM.
TÍTULO DE LA PRESENTACIÓN
NOMBRE Y CÓDIGO DE INICIATIVA/PROYECTO
FACULTAD DE ARTES LIBERALES
Título Autor Antecedentes Desarrollo de la Propuesta Problemas
ESCUELA DE GOBIERNO.
Autores en fuente tipográfica: Calibri 40
Transcripción de la presentación:

CSS: Cascading Style Sheets

Introducción CSS nos permite: Separar presentación de contenido Mayor flexibilidad, escalabilidad, y posibilidades en la presentación de contenidos web Dinamismo (junto a JScript y DOM) Correctamente utilizado reduce el peso de las páginas

Sintaxis Básica H1 {color:#CC9900;} Selector { propiedad: valor; ...} Declaración Selector { propiedad: valor; ...} Ejemplo: H1 {color:#CC9900;}

Aplicar CSS En la Cabecera (<HEAD>) <STYLE TYPE="text/css"> <!-- P {text-align:right} --> </STYLE> Estilo como atributo <P STYLE="text-align: right">Estilo propio</P> Hoja de estilo externa <LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">

Selectores Elementos H1 {font-family: Arial, Helvetica, sans-serif; font size: 10pt; font-style: italic;} Elementos agrupados H1, P, B {font-color: blue;} Clases para elementos P.enfatizada {font-weight: bold;} Clases generales .enfatizada {font-weight: bold;} Selectores ID #enfatizada {font-weight: bold;}

Selectores Pseudo-Elementos :first-line Se aplica a la primera línea del elemento :first-letter Se aplica a la primera letra del elemento Pseudo-Clases :first-child Se aplica al primer hijo del elemento :link Enlace (ej. A:link {...}) :visited Enlace visitado :hover Enlace sobrevolado

Cajas Margin Padding Border Vestibulum convallis dignissim diam. Sed et ligula. Proin ullamcorper odio eu mi. Aliquam erat volutpat. Nunc ac leo sed erat commodo ornare. Duis urna. Nunc ac justo a risus dictum scelerisque. Curabitur felis augue, rutrum eu, sollicitudin ac, auctor non, dolor. Border

El modelo de caja El modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El modelo de caja también contiene opciones detalladas en lo referente al ajuste de márgenes, bordes, relleno (padding) y contenido de cada elemento:

Modelo de caja

Un caso con un encabezado y algo de texto Un caso con un encabezado y algo de texto. El código HTML de nuestro ejemplo es el siguiente (extraído de la Declaración Universal de los Derechos Humanos): <h1>Artículo 1:</h1> <p>Todos los hombres nacen libres e iguales en dignidad y derechos. Están dotados de razonamiento y consciencia y deberían de comportarse entre sí con espíritu de hermandad.</p>