hojas de_estilo_css

Hojas de estilo (CSS)

Santiago Molina
Dpto. 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
Bienvenido a planeta
Criptón.
¡Ustednunca, nunca, NUNCA encontrar&aaacute;mejores precios que los
nuestros!

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
Este es un párrafo

Múltiples estilos en cascada
• ¿Qué estilo será usado cuando haya más de
un estilo especificado para un elemento
HTML?
P
Navegador (default)
R
I
O CSS externo
R
“VIRTUAL – CSS”
I
D CSS interno
A
D Estilo inline

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-repeat: repeat-x;
}

Imagen de fondo: no-repeat
• En ocasiones queremos que la imagen se
repita una vez:
body{
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-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 texto
p {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]

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 */

• 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

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 Valores para listas ordenadas
none: Sin marcador decimal
disc (default) decimal-leading-zero: 01, 02, 03…
circle lower-roman: i, ii, iii, iv, v, vi
square 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
table, th, td{
border: 1px solid black;
}
• Width, Height
Table {
width:100%;
}
th{
height:50px;
}

Styling Tables [2]
• Text alignment
td{
text-align:right;
vertical-align:bottom;
}

• Padding
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, in
set, 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
h1,h2,p{
color:green;
}

• Anidando selectors
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
h2.pos_left{
position:relative;
left:-20px;
}
h2.pos_right{
position:relative;
left:20px;
}

• Absolute
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 elemento
img{
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.
Cliente Servidor Web

HTTP request (n)

<img .. />
REDUCIR HTTP RRQ <img …/>
<img … />
<img …/>

hojas de_estilo_css

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (8)

En vedette

En vedette (20)

Similaire à hojas de_estilo_css

Similaire à hojas de_estilo_css (20)

Dernier

Dernier (20)

hojas de_estilo_css