Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
|
|
|
- Ángel Correa Peña
- hace 6 años
- Vistas:
Transcripción
1 Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
2 CSS - Hojas de Estilo Las hojas de estilo en cascada son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML, XML o XHTML. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.
3 Las ventajas de utilizar CSS Control centralizado de la presentación de un sitio web completo, con lo que se agiliza considerablemente la actualización del mismo. Posibilidad de los usuarios de especificar una hoja de estilos local que será aplicada a un sitio web, con lo que aumenta la accesibilidad (ej: problemas de visión).
4 Las ventajas de utilizar CSS Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre, o incluso a elección del usuario. El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño.
5 HTML5 y CSS3 HTML5 fue desarrollado considerando CSS a cargo del diseño. La integración entre HTML y CSS es vital para el desarrollo web. Entonces cuando hablamos de HTML 5 también estamos haciendo referencia a CSS3, aunque se trate de dos tecnologías separadas.
6 CSS En resumen, CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento.
7 Por qué en cascada? La información de estilos puede ser incluida de varias formas: Pueden especificarse para cada elemento HTML mediante el atributo "style" Pueden declararse en el <head> de un documento HTML En un documento externo archivo.css O incluso en varios documentos externos.
8 Orden de cascada Hoja de estilos del navegador (default) Hoja de estilos externa (declarada antes del tag <style>) Estilos definidos en el <head> del documento HTML Estilos definidos en un tag HTML
9 Sintaxis La sintaxis CSS tiene 3 partes: selector {propiedad: valor} El selector es normalmente el elemento HTML a definir, la propiedad es el atributo de ese elemento que queremos cambiar y cada propiedad va a tener un valor. La propiedades y valores se escriben separados por ":" y rodeados por llaves body {color: black} p {font-family: "sans serif"}
10 Sintaxis Si queremos definir más de una propiedad, cada una debe finalizar con ";" p { text-align: center; color: red; } Para que se lean mejor y más claro lo hacemos de la siguiente forma: p { text-align: center; color: black; font-family: arial; }
11 Agrupamientos Se pueden agrupar selectores separándolos mediante "," h1,h2,h3,h4,h5,h6 { color: green; }
12 Comentarios Con el fin de ordenar el código o simplemente porque más de una persona lo utilizará, se hace necesario el uso de los comentarios /* Esto es un comentario */ p { text-align: center; /* esto es otro comentario que ocupa más de un renglón */ color: black; }
13 Tipos de selectores Los selectores de etiquetas HTML se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. Los selectores de identificador se usan para aplicar estilos solo a las etiquetas identificadas con un nombre definido. Los selectores de clase se utilizan para aplicar estilos en forma repetitiva, aplicándolos en todas las etiquetas que los llamen por un nombre previamente definido. Por ej.:.mi_clase
14 Selectores de etiquetas Para definirlos utilizamos el nombre de la etiqueta que queremos afectar: body { font-family: arial; font-size: 12px; color: black; background-color: #cccccc; } Este tipo de selector no requiere aplicación, las etiquetas heredan automáticamente las propiedades que definimos.
15 Selector de identificación Para definirlos utilizamos el # antes del nombre de identificación: #recuadro { background-color: #ff0000; color: #ffffff; font-size: 26px; } En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador "id": <div id="recuadro">aquí el contenido</div>
16 Selector de clase Para definirlos utilizamos un "." antes del nombre que le asignamos:.mi_clase { margin: 5px; height: 100px; width: 200px; } Utilizamos el atributo "class" en las etiquetas HTML para aplicar el estilo: <div class="mi_clase">contenido</div>
17 Aplicación de estilos Existen 3 formas de aplicación: Hoja de estilos externa Estilos definidos en el <head> del documento HTML Estilos definidos en un tag HTML
18 Hoja de estilos externa Se trata de un archivo de texto plano, vinculado al documento HTML desde la sección head de la página: <link href="archivo.css" rel="stylesheet"> Esta es la forma más recomendable para la definición de estilos.
19 Definidos en el <head> Dentro del <head> del documento HTML se declaran los estilos de la siguiente forma: <head> <title>página X</title> <style> body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; } </style> </head> Esta opción es recomendable si se necesitan estilos específicos para una página en particular.
20 Definidos en un tag HTML Este método es el menos recomendable, y solo se utilizará en casos puntuales que así lo requieran: <div style="background-color: #333333;" ></div>
21 Propiedades CSS Hay propiedades para definir: Los fondos; Los bordes; Los bloques; El texto y la tipografía; Las listas; El posicionamiento; Y más!
22 background background-color background-image background-repeat Fondos (algunas propiedades)
23 font font-family font-size font-style font-weight Tipografías (algunas propiedades)
24 text-align text-decoration text-transform Texto (algunas propiedades)
25 height width margin margin-top margin-right margin-bottom margin-left padding Bloques (algunas propiedades)
26 Selector universal Se utiliza para seleccionar todos los elementos de la página. * { } margin: 0; padding: 0;
27 Selector de etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. h1 { } color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif;
28 Selectores de etiqueta combinados h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
29 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 { color: red; } h1 span { color: blue; }
30 Selector descendente No debe confundirse el selector descendente con la combinación 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; }
31 Selector de clase Para aplicar estilos a un solo elemento de la página se utiliza el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar. HTML <p class="destacado">texto texto...</p> CSS.destacado { color: red; }
32 Selector de clase En una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class. <p class="destacado">texto texto...</p> <p>texto <a href="#" class="destacado">link</a> texto...</p> <p>texto <em class="destacado">texto</em> texto...</p>
33 Combinar selectores de etiqueta y clase Combinando el selector de etiqueta y el selector de clase, se obtiene un selector mucho más específico. p.destacado { color: red; } Este ejemplo se aplica sólo a aquellos elementos <p> que dispongan de un atributo class con valor destacado.
34 Selectores combinados /* Todos los elementos de tipo "p" con atributo class="aviso" */ p.aviso {... } /* Todos los elementos con atributo class="aviso" que estén dentro de cualquier elemento de tipo "p" */ p.aviso {... } /* Todos los elementos "p" de la página y todos los elementos con atributo class="aviso" de la página */ p,.aviso {... }
35 Selector de ID El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.
36 Selector de ID CSS #destacado { color: red; } HTML <p>primer parrafo</p> <p id="destacado">segundo parrafo</p> <p>tercer parrafo</p>
37 Combinar selectores de etiqueta y de ID Este ejemplo se aplica al elemento de tipo <p> que tenga un atributo id igual a aviso. p#aviso { color: blue; }
38 Selectores combinados /* Todos los elementos de tipo "p" con atributo id="aviso" */ p#aviso {... } /* Todos los elementos con atributo id="aviso" que estén dentro de cualquier elemento de tipo "p" */ p #aviso {... } /* Todos los elementos "p" de la página y el los elementos con atributo id="aviso" de la página */ p, #aviso {... }
39 Herencia Cuando se establece el valor de alguna propiedad en un elemento, todos sus descendientes heredan inicialmente ese mismo valor. La herencia de estilos no funciona en todas las propiedades CSS, por lo que se debe estudiar cada propiedad de forma individual.
40 Unidades de medida Las medidas en CSS se usan, entre otras, para definir altura, ancho y márgenes de los elementos y para establecer el tamaño de letra del texto. CSS divide todas las unidades de medida en absolutas y relativas. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente.
41 Unidades relativas em ex px relativa respecto del tamaño de letra empleado (ancho de la M) del elemento padre relativa respecto de la altura x del tipo de letra que se esté utilizando relativa respecto de la pantalla del usuario
42 Unidades absolutas in, pulgadas (1 pulgada son 2.54 centímetros) cm, centímetros mm, milímetros pt, puntos (1 punto es 1/72 pulgada) pc, picas (1 pica equivale a 12 puntos)
43 Porcentajes CSS define otra unidad de medida relativa basada en los porcentajes. Un porcentaje siempre está referenciado a otra medida, normalmente el elemento contenedor. Los elementos de bloque de manera predeterminada tienen un ancho de 100%.
44 Recomendaciones Usar em como unidad de medida para los tamaños del texto y los tamaños de los elementos relacionados con el texto (interlineado, márgenes entre párrafos, etc.). Usar porcentajes para los demás elementos, definiendo un contenedor. Pero siempre, siempre evaluar lo que mejor sirve según cada caso.
45 Colores Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave (color name), colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. El método más habitual es el del RGB hexadecimal.
46 Colores Color names aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow, etc. Son 140 en total olors/colors_names.asp
47 Colores RGB hexadecimal Para obtener el color completo en formato RGB hexadecimal, se concatenan los valores de las componentes RGB en ese orden y se les añade el prefijo #. Por ejemplo: #4762B0
48 Colores Una de las ventajas del formato RGB hexadecimal es que se pueden comprimir sus valores cuando todas sus componentes son iguales dos a dos: #AAA = #AAAAAA #FFF = #FFFFFF #A0F = #AA00FF #369 = #336699
49 Tipografía CSS define numerosas propiedades para modificar la apariencia del texto. color font-family font-size font-weight font-style font-variant
50 Tipografías en la web Se deben utilizar tipografías que estén disponibles en los distintos sistemas operativos y que sean de buena legibilidad en pantalla Se definen por grupos Arial, Helvetica, sans-serif Verdana, Arial, Helvetica, sans-serif Times New Roman, Times, serif Georgia, Times New Roman, Times, serif Courier New, Courier, monospace
51 Texto Además de las propiedades relativas a la tipografía del texto, CSS define numerosas propiedades que determinan la apariencia del texto en su conjunto. text-align line-height text-decoration text-transform
52 Links Los estilos más sencillos que se pueden aplicar a los links son los que modifican su tamaño de letra, su color y la decoración del texto del link. CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado utilizando pseudo-clases.
53 Pseudo-clases Una pseudo-clase es una palabra clave que se agrega a los selectores para especificar un estado especial del elemento. Las pseudo-clases permiten aplicar estilos a un elemento no sólo en relación a la estructura del documento, sino también en relación a factores externos como el history del navegador o la posición del mouse.
54 Pseudo-clases :link, aplica estilos a links que aún no han sido visitados :visited, aplica estilos a links que han sido visitados anteriormente :hover, aplica estilos al link sobre el que el usuario ha posicionado el mouse :active, aplica estilos al link que el usuario está presionando
55 Pseudo-clases para links /* link no visitado */ a:link { color: #FF0000; } /* link visitado*/ a:visited { color: #00FF00; } /* mouse over */ a:hover { color: #FF00FF; } /* seleccionado */ a:active { color: #0000FF; }
56 Combinando clases y pseudo-clases a.uno:hover { } color: #ff0000; Sólo aplica el estilo al link que tiene el atributo class="uno" cuando el usuario pasa el mouse por encima
57 Pseudo-clases CSS3 :first-of-type, aplica estilos al primer elemento de su tipo :last-of-type, aplica estilos al último elemento de su tipo :only-of-type, aplica estilo al elemento único en su tipo
58 Pseudo-clases CSS3 :first-child, aplica estilos al primer elemento hijo del elemento padre :last-child, aplica estilos al último elemento hijo del elemento padre :only-child, aplica estilos al elemento hijo único del elemento padre
59 Pseudo-elementos Un pseudo-elemento es una palabra clave que se agrega a los selectores para aplicar estilos a una parte específica del documento.
60 Pseudo-elementos CSS3 ::first-line, aplica estilos a la primera línea de texto del elemento ::first-letter, aplica estilos a la primera letra de la primera línea ::selection, aplica estilos al elemento seleccionado en el momento Nota: en CSS2 se escribía con : y en CSS3 se escribe :: (no todos los pseudo-elementos funcionan con : pero sí todos con ::)
61 Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
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
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
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
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
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
CSS (Cascading Style Sheets)
Herencia CSS (Cascading Style Sheets) La herencia de los estilos definidos mediante CSS es uno de los conceptos más característicos de este lenguaje de hojas de estilos. Muchas de las propiedades que se
Hojas de estilo en cascada
Hojas de estilo en cascada Es la forma como indicamos el diseño, colores, tamaños, etc de un sitio web, separado de la programación y la estructura de este. HTML Estructura, músculos, huesos web CSS El
Taller de Programación II J2EE
ᄎ INACAP Universidad Tecnológica de Chile Sede Santiago Centro Taller de Programación II J2EE Tema 02 Cascading Style Sheets (CSS) Ing. Manuel López R. Qué es CSS? La tecnología CSS (Cascading Style Sheets
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
HTML Estático: Hojas de Estilo. HTML Estático: Hojas de Estilo
escuela técnica superior de ingeniería informática HTML Estático: Hojas de Estilo Departamento de Lenguajes Noviembre 2004 Usando el atributo STYLE dentro de una etiqueta HTML Esto Esto es es un un párrafo
Introducción. En CSS, los selectores se usan para elegir los elementos HTML que queremos estilizar de nuestra
Tema. Selectores Objetivos. Construir hojas de estilo basadas en los selectores CSS Material a utilizar. * Editor de texto para el código HTML * Navegador Web Introducción. En CSS, los selectores se usan
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:
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
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
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!
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
CSS AVANZADO Hojas de Estilo. Iván Martínez Toro
CSS AVANZADO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Pseudoclases. Fuentes. Modelo de caja: posición. Floaty Clear. Display. Fondos. Listas con estilo. Enlace importante. PSEUDOCLASES Modifican
Problemas típicos con HTML
Introducción a Lenguajes web Estela Conde Álvarez Isdefe 4 Noviembre 2 008 Introducción al Diseño Para Td Todos en las TIC Problemas típicos con HTML Permitía errores Cada navegador etiquetas propias Mezcla
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
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
Qué es CSS. Si necesitamos hacer modificaciones lo hacemos en un sólo lugar y no tenemos que editar todos los documentos HTML por separado.
Qué es HTML y CSS Una página web es un documento de texto el cual se escribe en lenguaje HTML, con el que se que crea el contenido de una web. Aquí se manejan los contenidos. Por otro lado, existe el código
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
Al igual que cuando se trabaja con HTML, en cualquier momento, se tendrán al menos dos aplicaciones abiertas:
Tema. CSS: contenido, estilos y posicionamiento Objetivos. Aplicar los conceptos básicos sobre CSS3. Material a utilizar. Editor de texto para el código HTML. Navegador Web. Introducción. El CSS es una
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
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
CSS. Añadir estilos a las páginas web
CSS Añadir estilos a las páginas web Qué es CSS? CSS (Cascade Style Sheets) es un tipo de archivo que permite añadir estilos a páginas web (colores de texto, bordes, separaciones, etc.) Son archivos de
Hojas de Estilo en Cascada (CSS)
Hojas de Estilo en Cascada (CSS) Grupo de Ingeniería del Software y Bases de Datos Universidad de Sevilla Presentación y La separación del (la información que se muestra) de la presentación (cómo se muestra)
Capas. Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML
Capas Capas Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML y Uso principal es poder aplicar estilo en el cuerpo/porción del documento
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
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
CSS. Rogelio Ferreira Escutia
CSS Rogelio Ferreira Escutia Definición La hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML
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
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
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;
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. 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
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
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
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
TIC II Tema 2: Programación Web
TIC II Tema 2: Programación Web INTRODUCCIÓN Las Hojas de Estilo en Cascada o CSS es un lenguaje creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML. CSS es
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
CSS. Página 1/16. Atributo id #texto1 {font-size: 20px;} <p id= texto1 >Texto</p> p:nth-child(2) { background: # }
CSS. Página 1/16 Introducción CSS p, span{ color: #FF0000; font-size:24px; Pseudoclases
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 2009-2010 Introducción Selectores Propiedades Contenedores Uso de un CSS Unidades d Colores Cajas Posicionamiento Contenido
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.
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
Funcionamiento básico de CSS
Funcionamiento básico de CSS Índice de contenido Funcionamiento básico de CSS...1 1.- Introducción...2 2.- Cómo funcionan las hojas de estilo en cascada?...3 Veamos un ejemplo concreto de cómo se expresarían
TIC II Tema 2: Programación Web
TIC II Tema 2: Programación Web REFERENCIAS Existen varios métodos para seleccionar qué elementos HTML serán afectados por las reglas CSS: Referencia por la palabra clave del elemento. Referencia por el
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
Catedra de Base de Datos
Catedra de Base de Datos Facultad de Ciencias Exactas y Tecnología Universidad Nacional de Tucumán Ciclo Lectivo 2017 Diseño en HTML y CSS Tipología de los sitios web. La estructura de las paginas. Etiquetas
QUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E)
APRENDERAPROGRAMAR.COM QUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción y conceptos básicos de CSS Lugar de ejecución:
CSS Cascading Style Sheets Selectores y Unidades
Selectores y Unidades Los selectores seleccionan el cuadro al que se aplica el formato Como ya sabemos, toda regla CSS empieza por un selector, que son una de estas tres cosas, o una combinación de las
Curso Web accesible con XHTML y CSS. Bloque III. Hojas de Estilo en Cascada: Selectores. Cursos Thales CICA Web Curso WEBCSS
Página 1 de 14 Curso Web accesible con XHTML y CSS. Bloque III. Hojas de Estilo en Cascada: Selectores. Cursos Thales CICA Web 2006. Curso WEBCSS A. Gámez, L.M. Marín, F. Mesa & S. Fandiño Índice del Bloque
TECNOLOGÍAS DE INFORMACIÓN PARA LA INNOVACIÓN. Facultad de Estadística e Informática
TECNOLOGÍAS DE INFORMACIÓN PARA LA INNOVACIÓN Bibliografía w3schools.com. (s.f.). Consultado el 12 de septiembre de 2017. Extraído de: https://www.w3schools.com/ Listas con viñetas. (s.f.). Extraído desde
Cascading Style Sheets (CSS) Programación de Web Estático
UNIVERSIDAD AUTÓNOMA METROPOLITANA UNIDAD CUAJIMALPA Cascading Style Sheets (CSS) Programación de Web Estático Introducción CSS: Cascading Style Sheets Hojas de estilo en cascada Los estilos definen cómo
Examen de CSS - Cuestionario
Examen de CSS - Cuestionario Qué propiedad de CSS se emplea para definir el espacio entre caracteres? word-spacing white-space letter-spacing Las anteriores respuestas no son correctas Cómo se hace en
Índice general. Pág. N. 1. Capítulo 1. Capítulo 2
Pág. N. 1 Índice general Capítulo 1 Introducción al diseño web con HTML 5 y CSS3 1.1 Las versiones del HTML 1.2 Los navegadores y sus diferencias 1.2.1 Tiempo de carga 1.2.2 Entorno de trabajo 1.2.3 Ventanas
CSS Cascading Style Sheets
CSS, Qué es? CSS es un lenguaje creado especialmente para dar formato a los elementos HTML Un style es un patrón o instrucción de formato Una sheet es una hoja de papel o una recopilación Cascading hace
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
Cómo se define? selector {propiedad1: valor1; propiedad2: valor2}
Hojas de Estilos Cómo se define? selector {propiedad1: valor1; propiedad2: valor2} Tipos de selector Etiqueta de HTML Identificador De clase sintaxis Nbre_Etiqueta #nbre_identificador.nombredeclase Dónde
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.
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
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,
HTML: Organización del Documento
Francisco J. Martín Mateos Carmen Graciani Díaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Documentos HTML Los documentos HTML son ficheros con código HTML Se puede
Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Box
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Box model El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página
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.
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,
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
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
Conceptos básicos para la definición de estilos CSS. Conceptos. Bases de Datos 2012/2013. Luis Valencia Cabrera
Conceptos básicos para la definición de estilos CSS Conceptos Básicos de CSS Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Reglas CSS... 2 Selectores... 3 Selectores básicos... 3 Ejercicios...
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
Producción Digital I. Lic. Wenceslao Zavala 26 de Septiembre 2018
Producción Digital I Lic. Wenceslao Zavala 26 de Septiembre 2018 El ancho de la caja del sitio no debe superar los 1300 px, y si la resolución es más pequeña, debe adaptarse al navegador. Trabajo Práctico
ESTRUCTURA DEL CÓDIGO HTML5
ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo
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:
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
UNIDADES DE MEDIDA CSS. RELATIVAS O ABSOLUTAS. PULGADA IN, CM, MM, PUNTO PT, PICA PC, PIXEL PX, PORCENTAJE, EM, EX. (CU01024D)
APRENDERAPROGRAMAR.COM UNIDADES DE MEDIDA CSS. RELATIVAS O ABSOLUTAS. PULGADA IN, CM, MM, PUNTO PT, PICA PC, PIXEL PX, PORCENTAJE, EM, EX. (CU01024D) Sección: Cursos Categoría: Tutorial básico del programador
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
Roatan Bilingual School
Roatan Bilingual School Evaluación final de Informática Grado: Noveno Valor: 15% Primer paso: Crear una carpeta con su nombre en documentos de la computadora. Segundo paso: Copia y pega el código en el
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
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
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. 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
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
CSS 3. Fernando O!ega.
CSS 3 Fernando O!ega fernando.ortega@eui.upm.es Qué falta en CSS 2.1? 2 Selectores Lista completa de nuevos selectores: http://www.w3.org/tr/css3- selectors/ Selector de atributo condicional: Permite seleccionar
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
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
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
Ejemplo: font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista de atributos es opcional)
Anexo: Reglas básicas sobre la sintaxis CSS: Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un
CSS básico. Introducción, Unidades y Selectores
CSS básico. Introducción, Unidades y Selectores LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red [1] introducción a CSS LMSGI, módulo del ciclo de FP de Grado
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
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
Comentario [Y1]: EQUIPO 1. 1-Funcionamiento básico de CSS
![Comentario [Y1]: EQUIPO 1. 1-Funcionamiento básico de CSS](/thumbs/78/78182054.jpg "Comentario [Y1]: EQUIPO 1. 1-Funcionamiento básico de CSS")
1-Funcionamiento básico de CSS Comentario [Y1]: EQUIPO 1 Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales para modificar el aspecto de los
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
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