Embed Size (px)
Citation preview
Hojas de estilo (CSS)
Santiago MolinaDpto. de Computación
UNAN - León
Agenda
• Motivación• Introducción: ¿Qué es CSS?• Sintaxis CSS• Cómo agregar CSS a un doc HTML• CSS Id y Class• Estilos con CSS
– Background (fondo), Texto, Fuentes, Enlaces, Listas, Tablas• CSS box model
– Box model, Border, Outline, Margin, Padding• CSS Avanzado
– Dimension, Display, Positioning, Floating, Navigation Bar, Images Sprite
La peor forma de crear estilos
<p><font face="Arial">Bienvenido a planeta Criptón. ¡Usted<b>nunca, <i>nunca, <u>NUNCA</u></i></b> encontrar&aaacute;<font size="+1" color="red">mejores precios</font> que los nuestros!</font></p>
Bienvenido a planeta Criptón. ¡Usted nunca, nunca, NUNCA encontrará mejores precios que los nuestros!
¿Qué es CSS?
• CSS: Cascading Style Sheets• Describe la apariencia, disposición y presentación
de la información en una página Web.• Describe cómo será mostrada la información y no
lo que será visualizado.• Los estilos fueron agregados a HTML 4.0 para
resolver un problema• Puede estar incrustado en un doc HTML o en un
archivo separado (.css).
Sintaxis CSS
Crédito: W3School
selector { property: value; property: value; ... property: value;
}
Comentarios CSS
• Los usamos para explicar el código y de ayuda para recordar lo que hemos hecho.
• Un comentario CSS inicia con /*; y termina con */
/*Esto es un comentario*/p{text-align:center; /*Esto es otro comentario*/ color:black;font-family:arial;}
Agregar CSS a doc HTML
• Hay tres formas de hacerlo:– Hoja de estilo externa– Hoja de estilo interno– Estilo “inline”
CSS Externo
<head><link rel="stylesheet" type="text/css" href=“filename" />
</head>
<head><link rel="stylesheet" type="text/css" href=“mystyle.css" />
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/css/gsearch.css" />
</head>
• Se pueden enlazar múltiples archivos css• En caso de conflicto (dos hojas definen un estilo para el mismo
elemento HTML), la propiedad de la última hoja se aplica.
CSS Interno
• Utilizado cuando un documento tiene un único estilo.
<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style>
</head>
Estilo inline
• No se recomienda, pero puede ser útil:• Se aplica usando la propiedad style en un
elemento HTML<p style="color:sienna;margin-left:20px">Este es un párrafo</p>
Múltiples estilos en cascada
• ¿Qué estilo será usado cuando haya más de un estilo especificado para un elemento HTML?
Navegador (default)
CSS externo
CSS interno
Estilo inline
PRIORIDAD
“VIRTUAL – CSS”
Selectores Id y class
• CSS permite especificar tus propios selectores llamados “id” y “class”.
• El selector “id” se usa para especificar un estilo para un solo elemento, único.
#para1{text-align:center;color:red;}
Selectores class
• El selector “class” se usa para especificar un estilo para un grupo de elementos. – Suele ser usado en varios elementos.
• Esto permite especificar un estilo particular para cualquier elemento HTML con la misma clase.
• El selector “class” utiliza el atributo class.• Es definido con un “.”
Selector class
.center {text-align:center;}
• Se puede especificar que sólo ciertos elementos HTML serán afectados por la clase.
Propiedades CSS para colores
p{color: red;background-color: yellow;
}
• color: color del texto del elemento• background-color: color detrás del elemento
Especificando colores
p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; }
• Nombre de colores comunes• Código RGB• Códigos hexadecimales
Styling Backgrounds
• Definir efectos de fondo de un elemento• Propiedades:– background-color– background-image– background-repeat– background-attachment– background-position
background-image
• Especifica una imagen a usar como fondo de un elemento
• Por defecto, la imagen es repetida para cubrir el elemento enteramente.
body{background-image:url('gradient2.png');
}
Imagen de fondo: repeat H. o V.
• Algunas imágenes deseamos que se repitan horizontal o verticalmente.
• Repetir horizontalmente: repeat-x• Repetir verticalmente: repeat-y
body{background-image:url('gradient2.png');background-repeat: repeat-x;
}
Imagen de fondo: no-repeat
• En ocasiones queremos que la imagen se repita una vez:
body{background-image:url('gradient2.png');background-repeat: no-repeat;
}
Imagen de fondo: attachment
• ¿La imagen estará fija o hará scrolling con el resto del texto?– background-attachment: fixed– background-attachment: scroll
Imagen de fondo: posición
• También quisiéramos cambiar la posición de la imagen para que no estorbe al texto:
body{background-image:url('gradient2.png');background-repeat: no-repeat; background-position:right top;
}
Background – shorthand property
• Especificar todas las propiedades en una sola línea:
body {background:#ffffff url('img_tree.png') no-repeat right top;}
• Se debe seguir el siguiente orden:• background-color• background-image• background-repeat• background-attachment• background-position
Styling text
• Propiedades para cambiar el estilo del texto:– color– text-align: alineación del texto dentro de su
elemento.– text-decoration: decoraciones como subrayado– text-transform: uppercase, lowercase, capitalize– text-indent: indentación del texto
Text alingment
h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}
Text decoration
• Para fijar o quitar decoraciones al texto:– overline, underline, line-through, blink
h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;}
Text transformation
• Para especificar texto en mayúsculas, minúsculas o capitalizar la primera letra de cada palabra.
p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}
Text indentation
• Para dar sangría a la primera línea del textop {text-indent:50px;}
• Más propiedades:– http://www.w3schools.com/css/css_text.asp
Styling Fonts
• CSS Font families: hay dos tipos de nombres de familia de fuentes:– Generic family: un grupo de fuentes con aspecto
similar (Serif, Monospace)– Font family: una familia de fuentes específica
(Times New Roman, Arial)
Font-family (propiedad)
• Establecer varios nombres de fuentes.• Empezar con la fuente que deseamos y
terminar con una familia genérica
p{font-family:"Times New Roman", Times, serif;}
Font size
• El valor especificado a la propiedad font-size puede ser absoluto o relativo:– Tamaño absoluto:
• Establece el texto al tamaño especificado• No se permite al usuario cambiar el tamaño del texto en
todos los navegadores• Útil cuando se conoce el tamaño físico de la salida
– Tamaño relativo:• Establece tamaño relativo alrededor de los elementos• Se le permite al usuario cambiar el tamaño del texto en los
navegadores
font-size
h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}
• vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large• relative font sizes: smaller, larger• percentage font size: 90%, 120%• unidades: pixels (px), point (pt), m-size (em):–16px, 16pt, 1.16em
font-style y font-weight
• font-style: Usado para especificar texto en itálica• Valores posibles: normal, italic, oblique
p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}
• font-weight: Usado para especificar grosor del texto• Valores posibles: normal, bold, bolder, 100, etc.
p { font-weight: bold; }
Styling links
• Puede atribuírsele un estilo diferente a un enlace según el estado de éste.
• Hay 4 estados:– a:link – normal, enlace no visitado– a:visited – enlace que ha sido visitado– a:hover – cuando se pasa el ratón encima– a:active – cuando se da clic en el enlace
Styling links [2]
• Cuando se crea estilo para diferentes estados del enlace:– a:hover DEBE ir después de a:link y a:visited– a:active DEBE ir después de a:hover
a:link {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */
Listas
• Con las propiedades para listas podemos establecer:– Marcadores para listas ordenadas– Marcadores para listas desordenadas– Imagen como marcador de lista
ul.a {list-style-type: circle;}ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}
Listas: list-style-type (propiedad)
Valores para listas desordenadas
none: Sin marcador
disc (default)
circle
square
Valores para listas ordenadas
decimal
decimal-leading-zero: 01, 02, 03…
lower-roman: i, ii, iii, iv, v, vi
upper-roman: I, II, III, IV, V
lower-alpha: a, b, c, d
upper-alpha: A, B, C, D
lower-greek: alpha, beta, gamma…
Styling Tables
• Bordes
• Width, Height
table, th, td{border: 1px solid black;
}
Table {width:100%;
}th{
height:50px;}
Styling Tables [2]
• Text alignment
• Padding
td{text-align:right;vertical-align:bottom;
}
td{padding:15px;
}
CSS Box Model
• En CSS el término es usado cuando hablamos de diseño y disposición.
• Esencialmente es una caja que envuelve a los elementos HTML y consiste de: márgenes, bordes, padding y contenido.
CSS Box Model
• Margin: no tiene color de fondo y es transparente.• Border: es afectado por el color de fondo de la caja.• Padding: área alrededor del contenido. Afectado por el color de fondo de
la caja.• Content: donde el texto e imágenes aparecen.
CSS Box Model: alto y ancho de un elemento
• Al especificar el ancho (width) y alto (height) de un elemento, nada más lo hacemos para el área de contenido.
• Hay que sumar el padding, border y margin para conocer el ancho total. Ejemplo:width: 250px;padding: 10px;border: 5px solid gray;margin: 10px;Total: 300px
CSS Border
• Las propiedades permiten especificar el estilo y color del borde de un elemento.
• border-style: dotted, dashed, solid, double, groove, ridge, inset, outset
• border-width: 10px, thin, medium, thick.– No funciona si no se establece border-style
• border-color: name, rgb, hex
Border: lados individuales
• En CSS es posible especificar diferentes bordes para los diferentes lados.
p{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;
}
border-style: single property• border-style:dotted solid double dashed;
– top border es dotted– right border es solid– bottom border es double– left border es dashed
• border-style:dotted solid double;– top border es dotted– right and left border es solid– bottom border es double
• border-style:dotted solid;– top and bottom borders dotted– right and left borders solid
• border-style:dotted;– Todos los bordes dotted
Margin
• No posee color de fondo, completamente transparente.
• Los márgenes top, right, bottom y left pueden ser cambiados independientemente.
• Valores posibles: auto, length (px, pt, em), %p.margin{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;}
Margin - Shorthand property
margin:25px 50px 75px 100px;• top, right, bottom, left
margin:25px 50px 75px;• top, right y left, bottom
margin:25px 50px;• top y bottom, right y left
margin:25px;• todos igual
Padding
• Define el espacio entre el borde y contenido de un elemento.
• Es afectado por el color de fondo del elemento.
• Valores posibles: %, fixed length(px, pt, em)p.padding{padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;}
Padding - Shorthand property
• padding:25px 50px 75px 100px;– top, right, bottom, left
• padding:25px 50px 75px;– top, right y left, bottom
• padding:25px 50px;– top y bottom, right y left
• padding:25px;– todos igual
CSS Avanzado
• Agrupando selectors
• Anidando selectors
h1,h2,p{color:green;}
p{color:blue;text-align:center;}.marked{background-color:blue;}.marked p{color:white;}
Propiedad display
• Establece el tipo de box model con que un elemento se visualiza.
• Puede ser: none, inline, block, compact,…• Usarlo poco, porque altera radicalmente el
esquema de la página.
h2 { display: inline;}
Propiedad visibility
• Establece si un elemento será mostrado o no en pantalla.
• El elemento mantiene su espacio, aunque no sea mostrado.
• Valores: visible (default) o hidden• Puede usarse para mostrar/ocultar contenido
HTML dinámico en respuesta a eventos.p.secret { visibility: hidden; }
Propiedad position
• Static: posicionamiento por defecto.– El elemento es siempre posicionado de acuerdo
con el flujo normal de la página.• Fixed: el elemento es posicionado relativo a la
ventana del navegador. No se mueve si hay scrolling.
p.pos_fixed{position:fixed;top:30px;right:5px;}
Propiedad position [2]
• Relative
• Absolute
h2.pos_left{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}
h2{position:absolute;left:100px;top:150px;}
Propiedad z-index
• Overlapping de elementos– Algunos elementos pueden solaparse cuando se
cambia su flujo normal– La propiedad z-index especifica el orden de pila
(delante, atrás de) un elementoimg{position:absolute;left:0px;top:0px;z-index:-1}
Barra de navegación
• Básicamente se requiere de una lista de enlaces: ul y li
• Remover bullets, margin y padding de ul• Establecer float:left para <li> y especificar
display:block y width para <a>
Layouts
Créditos: Denis Espinoza
Sprites
• Una imagen sprite es una colección de imágenes, todas en un solo archivo.
Servidor WebCliente
<img .. /><img …/><img … /><img …/>
HTTP request (n)
REDUCIR HTTP RRQ
