Indice: Fichero HTML. Fichero estilos2.css
|
|
|
- Roberto Correa
- hace 5 años
- Vistas:
Transcripción
1 Indice: 1 Conectar un fichero HTML a un fichero CSS. Uso de Link. 2 Reglas Básicas 3. Las clases CSS 4. Uso de margin, pading border. 5. Uso de CSS con enlaces 6. Uso de CSS con listas Ol, Ul. 7. so de CSS con imagenes. 8. Uso de CSS con tablas. 9. Uso de CSS con Formularios. 1. Conectar un fichero HTML a un fichero CSS. Uso de Link. En este ejemplo podemos observar la forma de conectar un fichero HTML con un fichero CSS haciendo uso de la etiqueta <link >. Podemos observar también como cambia la sintaxis de los dos lenguajes. Fichero HTML <html> <head> <link rel="stylesheet" Type="text/css" href="estilos2.css"> <title>página que lee estilos</title> </head> <body> <h1>página que lee estilos</h1> Página que enlaza con una hoja de estilos <br> <br> <table width= 300 cellspacing= 2 border= 0 > <tr> <td>estilo propio dentro de un td</td> </tr> <tr> <td>segunda fila del td</td> </tr> </table> </body> </html> Fichero estilos2.css P{ font-size:12pt; font-family:arial,helvetica; font-weight:normal; H1{ font-size:36pt; font-family:verdana,arial; text-decoration:underline; text-align:center; background-color:teal; TD{ font-size:10pt; font-family:verdana,arial; text-align:center; background-color:#666666; BODY { font-family:arial; background-color#:006666; color:pink;
2 2. En CSS son REGLAS BÁSICAS: Para definir una propiedad. Se usa atributo:valor; Ej: font-size:10pt: Para definir el estilo de una etiqueta. Se usa Etiqueta{atributo:valor;... Ejemplo: H1{ text-align:center; color:black; Mismo estilo a un conjunto de etiquetas. Puedo separarlas por comas. Ej: H1,p{color:red; Unidades de Medidas: relativo, absoluto, porcentaje. Relativas: se ajustan al medio donde se muestran (portatil. Móvil). Fuente actual: em. Ej: Si la fuente por defecto es 12pt 2em será 24 pts. Altura de la letra: 1ex es la altura de la fuente. Pixeles: px puntos por pantalla que depende de la resolución. Absolutas (fijas): pt, cm centímetro, mm milímetro, px pixel. Porcentaje: % Si la fuente tiene 12pt y definimos la unidad 150% nos referimos a 18 puntos. Colores. Basados en el sistemas RGB. Hexadecimal.- #ffffff ejemplo: background:#ff8800 ; Hexadecimal abreviada.- #fff = #ffffff ejemplo: background:#f80: Nombre de color.- ejemplo: color:red: Color en %: rgb(33%,0%,0%) Ejemplo: color:rgb(33%,0%,0%); Color en decimales: rgb(200,255,0) Ejemplo: color:rgb(200,255,0); Color transparente: background-color:transparent; Valor de las URL: Absoluta.- URL( ) Relativa.- URL(../images/otramagen.jpg )
3 3. Bordes, márgenes y rellenos Podemos ver que con estas propiedades configuramos el borde en relación a un texto (border), distancia del borde con el texto (padding) y distancia de los márgenes al borde (margin). Las propiedades de los bordes son: border-width: thin (fino), medium (mediano), thick (grande), o 4px (cuatro lados); border-color: blue (4 bordes azules) o blue red #ffcc00 black (cada borde de un color); border-style: tipos de bordes; dotted, dashed, solid, double, ridge inset, outset. Aclarar que podemos indicar características concretas para el borde superior, derecho, inferior e izquierdo con instrucciones como: Border-width-top:4px; Border-width-right:3px; Border-width-botton:2px; Border-width-top:1px; Existen también formas abreviadas a la hora de asignar valores: Border-width:6px; significa que todos los bordes tienen el mismo grosor. Border-width: 5px,8px; significa que el superior mide 5px, el derecho 8px, el inferior 5px y el izquierdo 8px. (Siguiendo el orden de las agujas del reloj). Estas características son idénticas para el margin y el padding. Tipos de bordes: Dotted dashed solid double ridge inset outset
4 Margin Los mágenes: distancia entre los bordes y el relleno. Ej: table{margin: 20px 20px 20px 20px o table{margin: 20px Podemos referirnos a cada margen: margin-top (superior), margin-right (derecho), margin-botton (inferior), margin-left (Izqdo). Padding: distancia entre los bordes y los elementos internos. Ej: padding{20px 40px 20px 40px También podemos especificar: padding-top, padding-right, padding-bottom, padding-left.
5 4. Definir estilos utilizando clases. Definiciones de estilo que se pueden utilizar repetidas veces. Se pueden declarar de dos formas: Etiqueta <style> Fichero externo. Declaración de sintaxis:.nombredelaclase{atributo:valor;atributo2:valor2;... Una vez declarada la podemos usar con cualquier etiqueta html. Uso sintaxis: <Etiquetas class= nombredelaclase > Ejemplos: Definición de clase.miclase{color:blue; Definición de clase body, td,p{ backgroundcolor:#000000;color:#ffffff;.inverso { background-color:#ffffff; color:#000000; Aplicación <p class= miclase >Parrafo con clase</p> Aplicación <body> <p>parrafo normal</p> <p class= inverso >Parrafo invertido</p> <table> <tr> <td class= inverso >inverso</td> <td>normal</td> </tr> </table> </body> Uso de id El atributo id es similar a class. El atributo ID sirve para identificar un elemento, y solo debe usarse para idetificar un único elemento, si queremos que pertenezcan a varios elementos entonces debemos usar las clases.se podría decir que las clases son para grupos. Con el atributo ID también se puede dirigir al visitante a un punto de la página (<a href= #ID >texto</a>). Un uso incorrecto de las clases sería definir las clases para un único elemento, porque se puede utilizar #ID para este propósito. Por ejemplo, cuando debemos identificar una única cabecera (class= header ). Un uso incorrecto de los #ID s es definir los estilos de cada elemento de forma individual en lugar de agrupar todos los estilos que sean comunes y aplicarlos por clases. Ejemplo: Aplicación <div id="elegante"> Definición #elegante{
6 Soy un simple texto en un div. </div> width: 90%; padding: 10px; border: 2px dashed #CCC; background: white; ATENCIÓN! Si te fijas, hemos puesto una almohadilla (#elegante) en vez de un punto (.elegante) como hacíamos con el atributo class, esta es otra de las diferencias respecto al otro atributo.
7 5. Estilos en los enlaces: Hacer enlaces quitándoles el subrayado o varios enlaces de diferente color en una misma página. Se pueden declarar de dos formas: Etiqueta <style> Fichero externo Enlaces normales A:Link {atributos Enlaces visitados A:visited{atributos Enlaces Activos A:active {atributos Enlaces hover A:hover {atributos Atributos: sin-subrayado text-decoration:none color:tucolor Ejemplos: HTML <html> <head> <title>ejemplo de utilización de enlaces</title> </head> <body> <a class= nuevo href= nuevo</a> <br> <a class= menus href= enlaces.html ">enlace visitado</a> Pulsa y ponte encima para ver los colores. </body> </html> CSS A.nuevo:link{text-decoration:none;color:#0000cc; A:.nuevo:visited{text-decoration:none;color:#ffcc33; A.nuevo:active{text-decoration:none;color:#ff0000; A.nuevo:hover {text-decoration:underline;color:#999999;font-weght:bold; a.menus:link { text-decoration:none; color: #ffffff; background: #990000; a.menus:visited {text-decoration:none; color:#cccccc a.menus:active {text-decoration:none; color: #003399; background: #993333; a.menus:hover {text-decoration:underline; color: #003399; background: #993333;
8 6. Css con listas Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas se muestran por defecto con la numeración decimal utilizada en la mayoría de países. No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas, además de poder controlar la posición de la propia viñeta. La propiedad básica es la que controla el tipo de viñeta que se muestra y que se denomina list-style-type. Propiedad list-style-type Valores disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-latin upper-latin armenian georgian lower-alpha upper-alpha none inherit El resto de valores de la propiedad list-style-type se dividen en tres tipos: gráficos, numéricos y alfabéticos. Los valores gráficos son disc, circle y square y muestran como viñeta un círculo relleno, un círculo vacío y un cuadrado relleno respectivamente. Los valores numéricos están formados por decimal, decimal-leading-zero, lower-roman, upper-roman, armenian y georgian. Por último, los valores alfanuméricos se controlan mediante lower-latin, lower-alpha, upper-latin, upper-alpha y lower-greek. La siguiente imagen muestra algunos de los valores definidos por la propiedad list-styletype: Ejemplo de propiedad list-style-type
9 Ejemplos: <ul style="list-style-type: square"> <li>list-style-type: square</li> <li>elemento</li> <li>elemento</li> </ul> <ol style="list-style-type: lower-roman"> <li>list-style-type: lower-roman</li> <li>elemento</li> <li>elemento</li> </ol> <ol style="list-style-type: decimal-leading-zero; padding-left: 2em;"> <li>list-style-type: decimal-leading-zero</li> <li>elemento</li> <li>elemento</li> </ol> Utilizando las propiedades anteriores (list-style-type y list-style-position), se puede seleccionar el tipo de viñeta y su posición, pero no es posible personalizar algunas de sus características básicas como su color y tamaño. Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la propiedad liststyle-image, que permite mostrar una imagen propia en vez de una viñeta automática. Propiedad list-style-image Valores url none inherit
10 Las imágenes personalizadas se indican mediante la URL de la imagen. Si no se encuentra la imagen o no se puede cargar, se muestra la viñeta automática correspondiente (salvo que explícitamente se haya eliminado mediante la propiedad list-style-type). La siguiente imagen muestra el uso de la propiedad list-style-image mediante tres ejemplos sencillos de listas con viñetas personalizadas: Ejemplo de propiedad list-style-image Ejemplo par que en toda la página la lista tenga el mismo estilo: ul { list-style-image: url("cuadrado_rojo.gif"); Ejemplo con clases para cambiar el estilo de lista en la página: html <ul class="vinieta1"> <li> Elemento lista 1</li> </ul> <ul class="vinieta2"> <li> Elemento lista 2</li> </ul> <ul class="vinieta3"> <li> Elemento lista 3</li> </ul> css.vinieta1{ list-style-image: url('list1.gif');.vinieta2{ list-style-image: url('list2.png');.vinieta3{ list-style-image: url('list3.png');
11 7. CSS con imágenes La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupan el contenido y el relleno del elemento, justo hasta su borde. Para indicar la imagen que se muestra como fondo de un elemento, se utiliza una URL. Los navegadores no restringen el tipo de URL que se pueden utilizar, por lo que pueden ser URL externas/internas y URL relativas/absolutas. La URL de la imagen que se quiere mostrar se incluye dentro de los paréntesis de la palabra url(). De forma opcional, el valor de la URL se puede encerrar entre comillas simples o entre comillas dobles. Ejemplos: body {background-image:url( h1, h2, h3 { background-image: url("imagenes/fondo.png"); Si la imagen de fondo es más grande que el sitio disponible para mostrarla, el navegador sólo muestra la parte visible que resulta de colocar la esquina superior izquierda de la imagen en la esquina superior izquierda del espacio que ocupa el elemento: body { background-image: url("images/imagen.png"); Por el contrario, si la imagen es más pequeña que el sitio disponible, el navegador repite la misma imagen en todas las direcciones hasta cubrir completamente el espacio que ocupa el elemento: body { background-image: url("images/imagen_pequena.png"); Sobre un mismo elemento se puede establecer de forma simultánea una imagen de fondo y un color de fondo. Este comportamiento es habitual en algunos elementos, como por ejemplo el fondo de la propia página web. Si un mismo elemento tiene definida una imagen y un color de fondo, la imagen tiene prioridad. El color de fondo se muestra en las zonas transparentes de la imagen y en las zonas que no están cubiertas por la imagen. Se recomienda establecer un color de fondo siempre que se utilice una imagen de fondo. Como las imágenes se indican mediante URL y el navegador las tiene que descargar, es posible que se produzcan errores y la descarga de la imagen no se pueda realizar. Por lo tanto, si se establece un color de fondo junto con la imagen de fondo y se produce un error que impide mostrar la imagen, el navegador mostrará el color de fondo establecido. Por este motivo, el color de fondo debe ser similar a la imagen utilizada.
12 El estándar CSS no permite modificar el tamaño con el que se muestra la imagen de fondo. Sin embargo, es posible modificar opciones como si la imagen se repite o no (backgroundrepeat), si la imagen permanece fija o no (background-attachment) y modificar su posición por defecto (background-position). Por último, no se pueden establecer dos o más imágenes diferentes sobre un mismo elemento. Si se quieren mostrar dos imágenes diferentes como fondo de una página web, se puede establecer la primera imagen sobre el selector htmly la segunda imagen sobre el selector body: Ejemplos: html { background-image: url("imagenes/primera_imagen.png"); body { background-image: url("imagenes/segunda_imagen.png"); Para que este último ejemplo sea realmente útil, es imprescindible utilizar al menos la propiedad background-repeat.
13 8. CSS con tablas Vamos a ver un uso de las CSS que puede ser muy interesante para hacer tablas con títulos que tengan un cierto estilo. Lo bueno de las CSS es que podemos definir el estilo una vez y se puede utilizar en múltiples elementos de la página. Con todo ello vamos a tratar la definición de un estilo y la aplicación para hacer distintos tipos de decoración de tablas. Definición de los estilos Vamos a definir un estilo por defecto para las celdas (etiqueta <td>) y un par de clases, la primera para las tablas y la segunda para las celdas titular (las que tienen color de fondo). Ejemplo: HTML CSS <table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla"> <tr> <td class="estilocelda">título de sección</td> </tr> <tr> <td>este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido relacionado con este título.</td> </tr> </table> td { font-family:verdana,arial; font-size:8pt;.estilotabla{ background-color:ffffff; border-style:solid; border-color:666666; border-width:1px;.estilocelda{ background-color:ddeeff; color:333333; font-weight:bold; font-size:10pt; Los atributos de estilos se pueden conocer en el manual de CSS. En este caso, para la clase estilotabla estamos definiendo un color de fondo, un borde sólido, un color del borde y un ancho del borde, por ese orden. Para la clase estilocelda estamos definiendo un color de fondo, un color del texto, un grosor de la fuente y un tamaño de la fuente. Lo único que tiene de especial es que utiliza las clases que se han definido previamente. En la etiqueta <table> se utiliza la clase estilotabla y en la etiqueta <td> que queremos que sea el titular se utiliza la clase estilocelda. La otra celda tendrá el estilo definido para todas las celdas en general. En este caso utilizamos dos tablas para hacer el efecto. La tabla de arriba tiene un borde y la de abajo no. Para ello aplicamos la clase definida para la tabla y la celda solamente en la tabla de arriba, así el borde definido en la declaración de estilos sólo afecta a la tabla de arriba.
14 9. CSS CON FORMULARIOS Para mostrar un formulario tal y como aparece en la imagen anterior no es necesario crear una tabla y controlar la anchura de sus columnas para conseguir una alineación perfecta. Sin embargo, sí que es necesario añadir un nuevo elemento (por ejemplo un <div>) que encierre a cada uno de los campos del formulario (<label> y <input>). El esquema de la solución propuesta es el siguiente: Esquema de la técnica de alineación de etiquetas label y campos de formulario Por tanto, en el código HTML del formulario anterior se añaden los elementos <div>: <form> <fieldset> <legend>alta en el servicio</legend> <div> <label for="nombre">nombre</label> <input type="text" id="nombre" /> </div> <div> <label for="apellidos">apellidos</label> <input type="text" id="apellidos" size="35" /> </div>... </fieldset> </form> Y en el código CSS se añaden las reglas necesarias para alinear los campos del formulario: div { margin:.4em 0; div label { width: 25%; float: left;
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. 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
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
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
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
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
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
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
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
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.
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:
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
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
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:
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
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 Programación de Web Estático
UNIVERSIDAD AUTÓNOMA METROPOLITANA UNIDAD CUAJIMALPA CSS Programación de Web Estático Propiedades CSS para listas Las propiedades CSS de listas permiten hacer lo siguiente: - Colocar diferentes marcadores
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.
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
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
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
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
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
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
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
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
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
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
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
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:
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
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
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
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)
Modelo de Cajas. Maquetación Web con HTML 5 y CSS 3. Ing. Rasjido Jose UNPA - UACO
Modelo de Cajas Maquetación Web con HTML 5 y CSS 3 Ing. Rasjido Jose UNPA - UACO AGENDA Propiedades de las cajas Tipos de cajas Esquemas de posicionamiento Bibliografía 2 Propiedades de las cajas Cada
SHORTAND: NOTACIÓN CSS ABREVIADA. BORDER- WIDTH Y THIN, MEDIUM, THICK, BORDER-COLOR Y TRANSPARENT. BORDER. EJEMPLOS. (CU01027D)
APRENDERAPROGRAMAR.COM SHORTAND: NOTACIÓN CSS ABREVIADA. BORDER- WIDTH Y THIN, MEDIUM, THICK, BORDER-COLOR Y TRANSPARENT. BORDER. EJEMPLOS. (CU01027D) Sección: Cursos Categoría: Tutorial básico del programador
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
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
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
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
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
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
CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D)
APRENDERAPROGRAMAR.COM CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Tablas...2 2 Ejercicio 2 - Cajas Div... 2 3 Ejercicio 3 - Terminando la Web de ejemplo...3 En esta primera sesión vamos a
TEST TICO 2º BACHILLERATO
TEST TICO 2º BACHILLERATO UNIDAD: DISEÑO Y EDICIÓN PÁGINAS WEB CON HTML (COMPLETO) Cada pregunta consta de 3 opciones, siendo solo una respuesta la correcta. Calificación: Respuesta correcta: +1 Respuesta
Curso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
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
TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D)
APRENDERAPROGRAMAR.COM TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D) Sección: Cursos Categoría: Tutorial básico del programador web:
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
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
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
Apuntes de CSS Novedades CSS3
Apuntes de CSS3 14. Novedades CSS3 0. Bordes en nuestra página. Todos los elementos HTML son considerados como bloques. Para visualizar sus bordes podemos recurrir a nuestra hoja de estilos CSS. El ejemplo
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
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
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.
Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.
![Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.](/thumbs/65/52446163.jpg "Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.")
Lección 3: Colores y fondos En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán
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
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
ESTILOS DE LISTAS CSS. LIST-STYLE-TYPE (DISC, NONE, ETC.) LIST-STYLE- POSITION (OUTSIDE, INSIDE), LIST-STYLE- IMAGE. SHORTAND LIST- STYLE.
APRENDERAPROGRAMAR.COM ESTILOS DE LISTAS CSS. LIST-STYLE-TYPE (DISC, NONE, ETC.) LIST-STYLE- POSITION (OUTSIDE, INSIDE), LIST-STYLE- IMAGE. SHORTAND LIST- STYLE. (CU01048D) Sección: Cursos Categoría: Tutorial
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.
DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D)
APRENDERAPROGRAMAR.COM DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D) Sección: Cursos Categoría: Tutorial básico del programador
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
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
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
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
Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco
Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por
PROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D)
APRENDERAPROGRAMAR.COM PROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D) Sección: Cursos Categoría: Tutorial básico del programador
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 CSS - Hojas de Estilo Las hojas de estilo en cascada son un lenguaje formal usado para definir la presentación
Tablas Formularios Frames
Tablas Formularios Frames Una tabla nos permite organizar y distribuir los espacios de la página de la manera más optima. Nos puede ayudar a : generar texto en columnas como los periódicos prefijar los
Tema 5. Estructuración de contenidos. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!
Tema 5. Estructuración de contenidos ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Listas! Permiten enumerar una serie de contenidos. Todas ellas
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
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
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
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
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
GUIA DE CLASES ONCE DOCENTE IRINA DONADO CUEVAS GRADO ONCE GRUPOS TECNOLOGÍA E
Página 1 de 13 GUIA DE CLASES ONCE DOCENTE IRINA DONADO CUEVAS GRADO ONCE GRUPOS 01 02 03 ÁREA TECNOLOGÍA E INFORMÁTICA PERIODO: SEGUNDO ASIGNATURA INFORMÁTICA META DE FORMACIÓN DEL ÁREA: El 92% de los
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
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
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
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2.
Barra de navegación vertical con Botones rollovers ver. 2_TIC 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2
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,
Estructura General del Sitio y Estilos
Estructura General del Sitio y Estilos Aunque los sitios pueden ser muy diversos, la mayoría tiene una estructura general en la que se pueden encontrar varias secciones principales: Cabecera para el logo,
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
RESUMEN HTML. Elementos de estructura
RESUMEN HTML Elementos de estructura primer elemento que enmarca todo el fichero HTML (obligatorio) zona de cabecera (obligatorio) definición de un título (obligatorio) cuerpo
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
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
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
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
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
Proyectos Terminales y Descargas de Software
Proyectos Terminales y Descargas de Software En esta práctica se realizará el diseño de las plantillas de Proyectos Terminales y de Descargas de Software. Proyectos Terminales Se trabajará con la plantilla
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Estructura en HTML (0.6 puntos)... 2 2 Ejercicio 2 - Terminando la Web de ejemplo (0.6 puntos)... 2 3 Ejercicio 3 - Estructura
Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un
Las tablas Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos:
Í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
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
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:
CSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D)
APRENDERAPROGRAMAR.COM CSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D) Sección: Cursos Categoría: Tutorial básico del programador
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