Hojas de Estilo : CSS
|
|
|
- Cristián Fernando Carrasco Ríos
- hace 7 años
- Vistas:
Transcripción
1 Hojas de Estilo : CSS Cascading Style Sheets Dr. José Raúl Pérez Cázares 1
2 Para que sirven las CSS? Para separar la presentación (color, font..) del contenido del documento Para facilitar la definición y cambios de estilo de un sitio web. Para lograr un estilo consistente en un sitio. Para que un usuario modifique a su preferencia la presentación de una página web. Para adaptar el estilo de presentación de un document a los diferentes medios (pantalla, impresión, ). Dr. José Raúl Pérez Cázares 2
3 Versiones CSS revisada en 1999 contiene los aspectos básicos CSS 2.1 Noviembre 2006 'final call working draft' IE7 and Firefox 2 cumplen con casi todo CSS 3 En desarrollo Dr. José Raúl Pérez Cázares 3
4 Donde se ponen las hojas de estilo? Existen 3 opciones: Hojas externas Hojas Internas Estilos en línea Dr. José Raúl Pérez Cázares 4
5 Hojas Externas mystyle.css hr {color: sienna} p {margin-left: 20px} body {background-image: url("back40.gif")} Es la manera mas recomendada, la hoja de estilo se escribe en un archivo de texto, con extensión.css <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> En la página XHTML se indica la relación con la hoja externa. Dr. José Raúl Pérez Cázares 5
6 Hojas Internas <html > <head> <style type="text/css"> p { color: red;background: yellow;} </style> </head> <body > <p>este es un párrafo</p> <p>este es otro párrafo</p> </body> </html> Se utilizan cuando el estilo se aplica solo a un documento Dr. José Raúl Pérez Cázares 6
7 Estilos en línea <ETIQUETA style="propiedad:valor;...">... </ETIQUETA> <p style="color: sienna; margin-left: 20px"> Este es un párrafo con estilo </p> <p> Este es un párrafo normal </p> Se pierden muchas de las ventajas de las hojas de estilo ya que se mezcla contenido con presentación. Este método se usa cuando el estilo se aplica a un solo elemento. Dr. José Raúl Pérez Cázares 7
8 Orden de aplicación 1. Las definidas por el navegador 2. Las definidas por el usuario Menor Prioridad 3. Hoja de estilo externa 4. Hoja de estilo interna 5. Directamente sobre la etiqueta HTML 6. Las definidas por el usuario como importantes Mayor Prioridad Dr. José Raúl Pérez Cázares 8
9 Estructura de una regla Dr. José Raúl Pérez Cázares 9
10 Selectores Selectores de elementos (etiquetas HTML) h1 {color: purple;} h1, h2, p {color: purple;} (agrupación) Contextuales (etiquetas HTML, pero en contexto) ejemplo: li b {color: purple;} (ocurrencia de b dentro de li) Dr. José Raúl Pérez Cázares 10
11 Selectores Selectores de clase h1.aviso {color: red;} (elementos h1 de la clase aviso) ó.aviso {color:red;} (cualquier elemento de la clase aviso) <h class= aviso >Peligro!</h1> <p class= aviso >Tenga cuidado </p>. Dr. José Raúl Pérez Cázares 11
12 Selectores Pseudo-elementos (partes de un elemento) p:first-letter {color:#ff0000;font-size:xx-large} p:first-line {color:#0000ff;font-variant:small-caps} Dr. José Raúl Pérez Cázares 12
13 Selectores Pseudo-Clases (Variantes de un selector) selector:pseudo-clase { propiedad: valor } a:link {color: #FF0000} /* link no visitado */ a:visited {color: #00FF00} /* link visitado */ a:hover {color: #FF00FF} /* mouse sobre el link */ a:active {color: #0000FF} /* link seleccionado */ p:first-child {color: #FF0000} /* primer párrafo dentro de otro elemento*/ Dr. José Raúl Pérez Cázares 13
14 Selectores Selector por id #ParteAzul{color: blue;} #ParteRoja{color: red;} <body > <div id= ParteAzul">La parte azul</div> <div id= ParteRoja">La parte roja</div> </body> Dr. José Raúl Pérez Cázares 14
15 Ejemplos de Propiedades Dr. José Raúl Pérez Cázares 15
16 Background background-color background-image background-repeat background-attachment background-position Dr. José Raúl Pérez Cázares 16
17 Background <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>this is header 1</h1> <h2>this is header 2</h2> <p>this is a paragraph</p> </body> </html> Dr. José Raúl Pérez Cázares 17
18 Texto color direction line-height letter-spacing text-decoration text-indent Dr. José Raúl Pérez Cázares 18
19 <html> <head> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>this is header 1</h1> <h2>this is header 2</h2> <p>this is a paragraph</p> </body> </html> Texto: color Dr. José Raúl Pérez Cázares 19
20 Texto: text-decoration <html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} </style> </head> <body> <h1>this is header 1</h1> <h2>this is header 2</h2> <h3>this is header 3</h3> </body> </html> Dr. José Raúl Pérez Cázares 20
21 <html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> </head> <body> <h1>this is header 1</h1> <h2>this is header 2</h2> <h3>this is header 3</h3> </body> </html> Texto: text-align Dr. José Raúl Pérez Cázares 21
22 Fuentes font-familiy font-style font-variant font-weight font-size Dr. José Raúl Pérez Cázares 22
23 Fuentes: font-family <html> <head> <style type="text/css"> h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} </style> </head> <body> <h3>this is header 3</h3> <p>this is a paragraph</p> <p class="sansserif">this is a paragraph</p> </body> </html> Dr. José Raúl Pérez Cázares 23
24 Fuentes: font-size <html> <head> <style type="text/css"> h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} p.grande {font-size: 32pt} </style> </head> <body> <h1>this is header 1</h1> <h2>this is header 2</h2> <p>this is a paragraph</p> <p class="grande"> This is a big paragraph</p> </body> </html> Dr. José Raúl Pérez Cázares 24
25 Bordes border-width border-style border-color Dr. José Raúl Pérez Cázares 25
26 Bordes: border-style <html> <head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> <body> <p class="dotted">a dotted border</p> <p class="dashed">a dashed border</p> <p class="solid">a solid border</p> <p class="double">a double border</p> <p class="groove">a groove border</p> <p class="ridge">a ridge border</p> <p class="inset">an inset border</p> <p class="outset">an outset border</p> </body> </html> Dr. José Raúl Pérez Cázares 26
27 Bordes: border-style Dr. José Raúl Pérez Cázares 27
28 Bordes: border-width <html> <head> <style type="text/css"> p.one {border-style: solid; border-top-width: 15px} p.two {border-style: solid; border-top-width: thin} </style> </head> <body> <p class="one"><b>note:</b> The "border-top-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> <p class="two">some text. Some more text.</p> </body> </html> Dr. José Raúl Pérez Cázares 28
29 Bordes: border-width Dr. José Raúl Pérez Cázares 29
30 Caja (Box model) Dr. José Raúl Pérez Cázares 30
31 Caja <html> <head> <style type="text/css"> p.boxed { margin: 20px; border: solid; border-width: 10px; border-color: green; padding: 10px; } </style> </head> <body> <p class="boxed">this is a boxed paragraph. Please note the border properties, the distance betwen the content and the border (padding) and the margin</p> <p class="sansserif">this is a paragraph</p> </body> </html> Dr. José Raúl Pérez Cázares 31
32 Caja: ejemplo Dr. José Raúl Pérez Cázares 32
33 Listas list-style-type list-style-position list-style-image Dr. José Raúl Pérez Cázares 33
34 Listas: list-style-type <html> <head> <style type="text/css"> ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} </style> </head> <body> <ul class="disc"> <li>coffee</li> <li>tea</li> <li>coca Cola</li> </ul> <ul class="circle"> <li>coffee</li> <li>tea</li> <li>coca Cola</li> </ul> <ul class="square"> <li>coffee</li> <li>tea</li> <li>coca Cola</li> </ul> <ul class="none"> <li>coffee</li> <li>tea</li> <li>coca Cola</li> </ul> </body> </html> Dr. José Raúl Pérez Cázares 34
35 Listas: list-style-type Dr. José Raúl Pérez Cázares 35
36 Tablas border-collapse border-spacing caption-side empty-cells table-layout Dr. José Raúl Pérez Cázares 36
37 Tablas: border-collapse <html> <head> <style type="text/css"> table.coll { border-collapse: collapse } table.sep { border-collapse: separate } </style> </head> <body> <table class="coll" border="1"> <tr><td>peter</td><td>griffin</td></tr> <tr><td>lois</td><td>griffin</td></tr> </table> <br /> <table class="sep" border="1"> <tr><td>peter</td><td>griffin</td></tr> <tr><td>lois</td><td>griffin</td></tr> </table> </body> </html> Dr. José Raúl Pérez Cázares 37
38 Tablas: border-collapse Dr. José Raúl Pérez Cázares 38
39 Posición absoluta <html> <head> <style type="text/css"> h2.pos_abs{ position:absolute; left:100px; top:150px} </style> </head> <body> <h2 class="pos_abs">this is a heading with an absolute position</h2> <p>with absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> </body> </html> Dr. José Raúl Pérez Cázares 39
40 Posición absoluta Dr. José Raúl Pérez Cázares 40
41 Posición relativa <html> <head> <style type="text/css"> h2.pos_left{ position:relative; left:-20px} h2.pos_right{ position:relative; left:20px} </style> </head> <!--Aquí va el body --> </html> <body> <h2>this is a heading in normal position</h2> <h2 class="pos_left">this heading is moved left to its normal position</h2> <h2 class="pos_right">this heading is moved right to its normal position</h2> <p>relative positioning moves an element RELATIVE to its original position.</p> <p>the style "left:-20px" subtracts 20 pixels from the element's original left position.</p> <p>the style "left:20px" adds 20 pixels to the element's original left position.</p> </body> Dr. José Raúl Pérez Cázares 41
42 Posición relativa Dr. José Raúl Pérez Cázares 42
Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1
Introducción a CSS Jesús Arias Fisteus Aplicaciones Web (2016/17) Aplicaciones Web (2016/17) Introducción a CSS 1 Parte I Introducción a CSS Aplicaciones Web (2016/17) Introducción a CSS 2 Hola Mundo!
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
HOJAS DE ESTILO EN CASCADA
HOJAS DE ESTILO EN CASCADA Introducción Permiten definir las páginas con aspecto homogéneo sin tanto esfuerzo. Forma de definir los estilos Como atributo de una etiqueta afecta a esa etiqueta Sintaxis:
Resumen del Manual de CSS. Resumen CSS. Este es un resumen de lo visto en el manual de CSS de Aprende-Web.
Resumen CSS Este es un resumen de lo visto en el manual de CSS de Aprende-Web. http://aprende-web.net/css Selectores y otros elementos. Selectores básicos * : Selector universal. Afecta a toda la página.
Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;
Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto;
En que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
escuela técnica superior de ingeniería informática
Tiempo: 2h escuela técnica superior de ingeniería informática Hojas de Estilo en Cascada (CSS) Departamento de Lenguajes Grupo de Ingeniería del Software Octubre 2007 Versiones previas: David Benavides
escuela técnica superior de ingeniería informática
Versiones previas: David Benavides y Amador Durán (septiembre 2006) Reestructuracion General: Manuel Resinas (octubre 2007) Ultima Revision: Cambios Menores. Pablo Fernandez (Octubre 2010) Tiempo: 2h escuela
CSS-Hojas de estilos en cascada
Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG.
Departamento de Lenguajes y Sistemas Informáticos. Hojas de Estilo en Cascada (CSS)
escuela técnica superior de ingeniería informática Tiempo: 2h Hojas de Estilo en Cascada (CSS( CSS) Departamento de Lenguajes Grupo de Ingeniería a del Software Noviembre 2006 Versión previa: David Benavides
1. Selector. Representa una etiqueta estándar del HTML.
Hojas de estilo: CSS Con la intención de separar el contenido de la presentación y de ofrecer mayores y más fáciles posibilidades de presentación el W3 Consortium sugirió la utilización de las Hojas de
Maquetación con estilos
Objetivos específicos Maquetación con estilos Aplicar estilos relacionados con tamaños, bordes y márgenes. Aplicar estilos relacionados con el posicionamiento de los objetos. Contenidos Estilos de caja.
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2017 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Selector universal Se utiliza para seleccionar todos los elementos de la página. * { } margin: 0; padding:
Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Selector
CSS. Contenido. Programación en Internet Curso Introducción Sintaxis. Cajas Posicionamiento. Programación en Internet
Departamento de Lenguajes y Sistemas Informáticos CSS Programación en Internet Curso 2006-2007 Introducción Selectores Propiedades Contenedores Uso de un CSS Unidades Colores Cajas Posicionamiento Contenido
ELECTIVA FE I. Tema 3: Introducción a las hojas
Tema 3: Introducción a las hojas de estilo en cascada CSS Qué son las hojas de estilo en cascada o CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos
Tema 2. I- Hojas de estilo CSS.
Tema 2. I- Hojas de estilo CSS. Programación Multimedia. G.I.M. Inmaculada Coma, Francisco Grimaldo Resumen En este tema: Recordaremos cómo crear estilos CSS e insertarlos en una página HTML. Recordaremos
Computación Web (Curso 2015/2016)
Introducción a CSS Computación Web (Curso 2015/2016) Jesús Arias Fisteus // jaf@it.uc3m.es Introducción a CSS p. 1 Introducción a CSS Introducción a CSS p. 2 Hola Mundo! 1 body { 2 color: rgb(200, 200,
Maquetación Web: HTML 5 y CSS
Maquetación Web: HTML 5 y CSS Programa de Estudio Maquetación Web: HTML 5 y CSS Aprende amaquetar sitios Web de forma ágil y profesional sin usar tablas.separa el diseño visual del contenido y optimiza
CSS: hojas de estilo en cascada. Visualización de una página I. Luis Fernando Llana Díaz. 21 de abril de 2008
Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol que repesenta el documento (document
REFERENCIA DE PROPIEDADES PARA CSS 2.0 (TOMADO DE W3C.ORG)
REFERENCIA DE PROPIEDADES PARA CSS 2.0 (TOMADO DE W3C.ORG) Esta referencia se distribuye bajo licencia Creative Commons. Usted es libre de: Copiar, distribuir y comunicar públicamente Hacer obras derivadas
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS CSS - Hojas
CSS: hojas de estilo en cascada
CSS: hojas de estilo en cascada Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol
Técnicas de visualización
Técnicas de visualización Hojas de estilo CSS Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez
CCS sintaxis. Declaración {color: (propiedad) blue (valor); font-size(propiedad): 12px (valor);} Ejemplo
CSS Css se utiliza para dar estilo a documentos HTML y XML. Los Estilos definen la forma de mostrar los elementos HTML y XML CSS permite a los desarrolladores Web controlar el estilo y la imagen y los
Que son las hojas de estilo (CSS)?
Que son las hojas de estilo (CSS)? CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnología que nos permite controlar la apariencia
Roberto Gómez Cárdenas Qué es CSS? Cascading Style Sheets, hojas de estilo en
CSS y XML Roberto Gómez Cárdenas rogomez@itesm.mx http://homepage.cem.itesm.mx/rogomez Lámina 1 Qué es CSS? Cascading Style Sheets, hojas de estilo en cascada. Tecnología desarrollada por la W3C con el
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Dar formato a los documentos XML
Dar formato a los documentos XML Ofimática Avanzada Profesor: Víctor Fresno Fernández Hojas de estilo La función de las hojas de estilo CSS es la de separar el contenido de la presentación Lenguaje diseñado
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
CSS3. Tutor: Ignacio Pérez Martín. Índice. Curso: Programación Python y HTML-5. CEP Marbella-Coín.
CSS3 Tutor: Ignacio Pérez Martín. Curso: Programación Python y HTML-5. CEP Marbella-Coín. Resumen En este tema veremos como dar formato a un documento HTML utilizando las hojas de estilos (CSS). Leed este
ESTILIZANDO CON CSS. Sesión 08. By Ing. David Gil
ESTILIZANDO CON CSS Sesión 08 By Ing. David Gil UNIDADES CSS UNIDADES DE LONGITUD Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que
CSS BÁSICO Hojas de Estilo. Iván Martínez Toro
CSS BÁSICO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo. CSS (CASCADING STYLE
Propiedades CSS1. Sintaxis usada en definición de propiedades. Propiedades de fuentes.
Page 1 of 29 Propiedades CSS1 ntaxis usada en definición de propiedades Propiedades de fuentes Propiedades de color y fondo Propiedades de texto Propiedades de cuadros Clasificación de propiedades Unidades
Figura 1: página de la vivienda sin estilo
Diseño de Interfaces Hombre Máquina Prácticas de laboratorio Curso 2009/10 Práctica 2 Interacción con hojas de estilo en cascada 1 Objetivo 1.1 Creación de una hoja de estilo La figura 1 muestra una página
Accesibilidad en la Web
Accesibilidad en la Web Universidad de Colima México Departamento de Lenguajes y Sistemas Informáticos Hojas de estilo en cascada Sergio Luján Mora Departamento de Lenguajes y Sistemas Informáticos Universidad
Cap. IV - Selectores, identificadores, clases y otros by Tux Merlin - Joomla-gnu.com
CSS como dijimos significa Cascading Style Sheet, traducido Hojas de Estilo en Cascada, pero por qué lo de "cascading"? Esto se refiere a la de herencia que poseen los elementos, es decir, cuando definimos
WEB: Diseño e Interacción
WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 26 de Febrero Universidad de los Andes Facultad de Arquitectura y Diseño Departamento de Diseño Clase Taller: Martes 7:00 am 9:50 am
Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)
APRENDERAPROGRAMAR.COM Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde cero
Hojas de estilo (CSS)
Tema 2b Hojas de estilo (CSS) Texto http://www.flickr.com/photos/urke/3223200963 Dando estilo visual a las páginas HTML Hojas de estilo 2 Separar la estructura del documento (etiquetas HTML) del estilo
Técnicas para la enseñanza de. Desarrollo Web. M is notas de CSS. Liliana Gutiérrez Flores. Enero de 2016
Técnicas para la enseñanza de Desarrollo Web M is notas de CSS. Liliana Gutiérrez Flores Enero de 2016 En el presente documento se presenta el proyecto de creación de una página Web con notas de CSS. Se
HOJAS DE ESTILO: CSS3
HOJAS DE ESTILO: CSS3 ETIQUETAS HTML5 HOJAS DE ESTILO CSS3 CONTENIDO PRESENTACIÓN El mismo contenido puede visualizarse en función de la hoja de estilo. Permiten actualizar y cambiar la presentación de
Curso de Maquetación Web: HTML 5 y CSS
Curso de Maquetación Web: HTML 5 y CSS Aprende a maquetar sitios Web de forma ágil y profesional sin usar tablas. Separa el diseño visual del contenido y optimiza al máximo los estilos de las páginas Web.
Diseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS
Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML.
Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML. CSS es la mejor forma de separar los contenidos y su
DISEÑANDO. Web. Empresa. de mi. COmo crear una web empresarial sin ser programador ni diseñador
introducción Bienvenida El Instructor Juan Sebastián Ossa Domínguez Diseñador Gráfico y Diseñador Desarroldor de Software introducción Bienvenida Objetivo del Curso Transmitir los conceptos básicos diseño
DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
CSS. Apuntes de guerrilla
CSS Apuntes de guerrilla Index Introducción en html 3 Diferentes medios en CSS 4 Comentarios 5 Selectores 5-6 Unidades de medidas 7 Colores 7 Box Model 8-12 Posicionamiento 13-14 Visualización 14-15 Texto
Aplicaciones Web XHTML+CSS. David Cabrero Souto. Grupo MADS (http://www.grupomads.org/) Universidade da Coruña
Aplicaciones Web XHTML+CSS David Cabrero Souto Grupo MADS (http://www.grupomads.org/) Universidade da Coruña W3C Establece estándares: recomendaciones. HTML 4.0 XHTML 1.0, XHTML 1.1, XHTML 2.0, XFORMS
CSS: Hojas de Estilo en Cascada
CSS: Hojas de Estilo en Cascada B. Cristina Pelayo García-Bustelo Lenguajes para Internet EUITIO 1 Introdución Sintaxis Selectores Pseudo-clases y Pseudo-elementos Unidades de longitud 2 Herencia Cascada
CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos
Desarrollo de aplicaciones web Manuel Torres Gil mtorres@ual.es Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.producciondigitalup.com.ar alumnos@producciondigitalup.com.ar Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla
Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15
Hojas de Estilos - CSS Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15 Introducción Motivación: Separar el formato del contenido y estructura de una
CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
Sintaxis de CSS CSS ({ })
Qué es CSS? CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla. CSS nos permite controlar el estilo y el
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto
Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.
1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio
Modelos de caja. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
Modelo de caja El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente.
Curso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas.
Pag. 1 de 16. Curso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas. Cursos Thales CICA Web 2006. Curso WEBCSS A. Gámez, L.M. Marín, F. Mesa & S. Fandiño El modelo de cajas Índice del bloque
Edición HTML. Estilos CSS MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL
MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL DIRECCIÓN GENERAL DE EDUCACIÓN, FORMACIÓN PROFESIONAL E INNOVACIÓN EDUCATIVA CENTRO NACIONAL DE INFORMACIÓN Y COMUNICACIÓN
Ejemplos-Capítulo-6 Ejemplo-1: Distintos tipos de sombras en el navegador Safari de Apple
Ejemplos-Capítulo-6 Ejemplo-1: Distintos tipos de sombras en el navegador Safari de Apple
Hojas de estilo en cascada (CSS) Tecnologías Web
Hojas de estilo en cascada (CSS) Tecnologías Web Motivación El objetivo fundamental de las hojas de estilo CSS es separar el contenido de la apariencia La información de nuestros sitios WEB tienen que
Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com
Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite
CSS: Hojas de Estilo en Cascada. Didier Fabián Granados Muñoz
CSS: Hojas de Estilo en Cascada Didier Fabián Granados Muñoz Contexto Qué hay detrás de esto? Contexto Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades
Curso de Cascade Style Sheet Manual del alumno <CSS>
Curso de Cascade Style Sheet Manual del alumno Ing. Cedric Simon Tel: 2268 0974 Cel: 8888 2387 Email: c e d r i c @ s o l u c i o n j a v a. c o m Web: www.solucionjava.com SolucionJava.com Curso
Diseño de columnas con CSS
Para el diseño de una web con varias columnas mediante CSS no existe una receta universal. De momento, y mientras se sigue desarrollando el CSS, nos basaremos en dos principios esenciales: position:absolute
Resumen Rápido de CSS
Resumen Rápido de CSS Selectores. Resumimos la manera de seleccionar los elementos a ''lookear''. * Todos los elementos div #div #div * Todos los elementos dentro de
Tema 2, parte II: CSS
Tema 2, parte II: CSS 2b.1 Introducción y sintaxis básica Las reglas CSS asocian fragmentos de HTML con propiedades de estilo Hojas de estilo Separar la estructura del documento (etiquetas HTML) del estilo
Asignatura: Programación 4
Clase Práctica #2 HTML y CSS. Objetivos: Continuar el trabajo con elementos del leguaje HTML. Formularios. Crear hojas de estilo en cascada para un sitio web, y estilos específicos de una página web. Bibliografía:
CAPÍTULO I. INTRODUCCIÓN ABSTRACT INTRODUCCIÓN CONCEPTO DE ESTILO VENTAJAS DE LAS CSS FORMAS DE APLICAR ESTILOS.4 1.
CURSO CSS 1 CAPÍTULO I. INTRODUCCIÓN...2 1.1 ABSTRACT...2 1.2 INTRODUCCIÓN...2 1.3 CONCEPTO DE ESTILO...2 1.4 VENTAJAS DE LAS CSS...3 1.5 FORMAS DE APLICAR ESTILOS...4 1.6 HOJAS DE ESTILO: UN POCO DE PRÁCTICA...5
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 3 Box
5.7. Visualización Propiedades display y visibility Propiedad overflow Propiedad z-index...28 Capítulo 6.
Tema 11: CSS Índice de contenido Capitulo 1. Introducción...4 1.1. Qué es CSS?...4 1.2. Funcionamiento básico de CSS...4 1.3. Cómo incluir CSS en un documento XHTML...5 1.3.1. Incluir CSS en el mismo documento
MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D)
APRENDERAPROGRAMAR.COM MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D) Sección: Cursos Categoría: Tutorial básico del programador
Yusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados www.nosolousabilidad.com
Yusef Hassan Montero Francisco Jesús Martín Fernández Referencia CSS Todos los derechos reservados www.nosolousabilidad.com Introducción Este documento tiene por objetivo servir de material de apoyo y
1. Introducción de estilo en sitios web
Informática Grado en Ingeniería Agrícola Curso 2011/2012 Nombre: Fecha: /02/2012 Grupo: 1 PRÁCTICA 4 CSS. INTRODUCCIÓN DE ESTILO EN SITIOS WEB Esta práctica estará dividida en dos partes. En la primera
III. Hojas de estilo en cascada (CSS)
III. Hojas de estilo en cascada (CSS) 1. Introducción 2. Declaración de CSS 2.1. Propiedades típicas en CSS 2.2. Inserción de CSS en HTML 3. Herencia de propiedades en CSS 4. Declaración avanzada de CSS
Hojas de estilo. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR
Hojas de estilo CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR Hojas de estilo Las hojas de estilo son un gran avance para los diseñadores, ya que expanden su
EL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
REPASO DE TABLAS HTML
REPASO DE TABLAS HTML Las tablas HTML se dividen en filas y celdas. A la hora de dibujar tablas hay que hacerlo de arriba a abajo y de izquierda a derecha. Es decir, primero empezaremos dibujando la primera
DESTINATARIOS Este curso está dirigido a aquellos alumnos que deseen adquirir conocimientos sobre el diseño mediante hojas de estilo.
DESTINATARIOS Este curso está dirigido a aquellos alumnos que deseen adquirir conocimientos sobre el diseño mediante hojas de estilo. OBJETIVOS Aplicar una metodología orientada a objetos para el diseño
CSS, hojas de estilos
Introducción a las CSS CSS, hojas de estilos El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fué concebido para otros usos (científicos sobretodo), distinto
Formateo de Texto. (parte II)
Formateo de Texto (parte II) JUAN CARLOS CONDE RAMÍREZ WEB-TOOLS Objetivos Identificar la diferencia entre background y foreground. Conocer las diferentes maneras de aplicar color al texto. Conocer más
Material de apoyo CSS
1 - Que son las hojas de estilo (CSS)? CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnología que nos permite controlar la apariencia
UCEMA Ingeniería Informática Introducción a HTML y Javascript
UCEMA Ingeniería Informática Introducción a HTML y Javascript,QJ'LHJR-$UFXVLQ GDUFXVLQ#FHPDHGXDU Objetivos del Curso 9 Proveer al asistente de conceptos fundamentales que le permitan utilizar los lenguajes
EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D)
APRENDERAPROGRAMAR.COM EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D) Sección: Cursos Categoría: Tutorial básico del programador web:
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D)
APRENDERAPROGRAMAR.COM ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D) Sección: Cursos Categoría: Tutorial básico del programador
Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.
Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la
ETIQUETAS PRINCIPALES
HTML... 1 ETIQUETAS PRINCIPALES... 1 ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES... 3 FORMATO DE TEXTO... 5 LISTAS... 6 ENLACES E IMÁGENES... 7 TABLAS... 9 HTML Las páginas web son documentos de texto,
PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)
APRENDERAPROGRAMAR.COM PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D) Sección: Cursos Categoría: Tutorial
DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)
APRENDERAPROGRAMAR.COM DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D) Sección: Cursos Categoría: Tutorial básico del programador
SUBRAYAR CON MARCATEXTO EL PARRAFO DONDE ENCONTRÓ LA PREGUNTA LAS RESPUESTAS LAS ENCUENTRAS DE LA PAG 26 A LA 96 DEBE COPIAR PREGUNTA Y RESPUESTA
TAREA NO 1 INTRODUCCIÓN A HTML5 Y CSS3 PRIMERO BÁSICO PROF. VICTOR AQUINO URRUTIA CURSO: TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN (TICS) CICLO: 2017 ------------------------------------------------------------------------------------------
Universidad de Chile Facultad de Ciencias Físicas y Matemáticas. Guía Básica de HTML. v2.2
Universidad de Chile Facultad de Ciencias Físicas y Matemáticas Guía Básica de HTML v2.2 Índice 1 Comandos Básicos en Linux... 3 2 Servidor para Tareas... 4 3 Creando una Página WEB... 4 4 Usando SFTP...
Contenedores. Elementos <div>
Html5 añade nuevos elementos semánticos pero todos ellos se basan en el uso del . Estos elementos sirven para dividir la página (de ahí el nombre div, de divisor) en contenido relacionado, un div
Asignatura: Programación 4
Conferencia #2 HTML y CSS Objetivos: Conocer el trabajo con los formularios, como otro elemento básico del lenguaje HTML. Saber utilizar las hojas de estilos para dotar a todas las páginas de un sitio
Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.
En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior.
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior. 1. Lo que va siempre Ejemplo con todo lo básico-minimo obligatorio que irá siempre: