Title: Cascading Style Sheets (CSS)
1Cascading Style Sheets (CSS)
2Web Standards
Web Recommendations Standards
- XHTML 1.0 or higher
- CSS Level 1 CSS Level 2
- DOM Level 1 DOM Level 2
- ECMAScript 262 (current JavaScript)
3XHTML
- XHTML 1.0 Transitional
- XHTML 1.0 Strict
- XHTML 1.1
- XHTML 2.0 (W3C Working Draft)
- No más desarrollo en HTML!
4Cascading Style Sheets
- Los estilos definen cómo desplegar la información
(elementos HTML/XHTML/XML) - Fueron agregados a HTML 4.0 para solucionar un
problema - Los archivos externos de estilo separan
presentación de información y ahorran mucho
trabajo - Se usan archivos .css
- Permite el cambio de apariencia y presentación
con solo editar un archivo
5CSS Motivación
- El concepto de piel (skin)
- Diseño que se coloca por encima de la estructura
(esqueleto). - Ejemplo Teléfonos
- Estructura
- Modelo del teléfono
- Piel
- Placas de colores
6(No Transcript)
7CSS Motivación http//www.csszengarden.com
8CSS Motivación http//www.csszengarden.com
9CSS Motivación http//www.csszengarden.com
10CSS Motivación http//www.csszengarden.com
11CSS Motivación http//www.csszengarden.com
12CSS Ejemplo (Probar este ejemplo)
- Archivo HTML
- lthtmlgt
- ltheadgt
- ltlink rel"stylesheet" type"text/css"
href"ejemplo1.css" /gt - lt/headgt
- ltbodygt
- lth1gtThis header is 36 ptlt/h1gt
- lth2gtThis header is bluelt/h2gt
- ltpgtThis paragraph has a left margin of 50
pixelslt/pgt - lt/bodygt
- lt/htmlgt
- Archivo CSS
- body background-color yellow
- h1 font-size 36pt
- h2 color blue
- p margin-left 50px
- Archivo CSS
- body background-color blue
- h1 font-size 12pt
- h2 color yellow
- p margin-left 5px
13CSS Sintaxis
- Tres partes
- Un selector
- Una propiedad
- Un valor
- Sintaxis
- selector propertyvalue
14CSS Sintaxis
- Uso
- body colorblack
- p font-family"sans serif"
- p text-aligncentercolorred
- Uso
- ptext-aligncentercolorblackfont-familyar
ial - h1,h2,h3,h4,h5,h6colorgreen
15CSS El selector class
- Se pueden definir diferentes estilos para el
mismo elemento - Definición
- p.right text-alignright
- p.center text-aligncenter
- Uso
- ltp class"right"gtThis paragraph will be
right-aligned.lt/pgt - ltp class"center"gtThis paragraph will be
center-aligned.lt/pgt - ltp class"center bold"gtThis is a paragraph.lt/pgt
16CSS El selector class
- Se puede omitir el elemento para indicar que se
aplicará para cualquier elemento - Definición
- .center text-aligncenter
- Uso
- lth1 class"center"gtThis heading will be
center-alignedlt/h1gt - ltp class"center"gtThis paragraph will also be
center-aligned.lt/pgt
17CSS Otros
- Definición
- inputtype"text" background-colorblue
- Comentarios
- / Este es un comentario /
- ptext-aligncenter
- / Este es otro comentario /
- colorblackfont-familyarial
18CSS El selector id
- Se puede también definir estilos con el selector
id - Definición
- green colorgreen
- ppara1text-aligncentercolorred
- Uso
- ltp id"para1"gt
- Este párrafo está centrado y en color rojo.
- lt/pgt
19CSS Modo de referencia
- Archivos HTML / XHTML
- Referencia externa
- ltheadgt
- ltlink rel"stylesheet" type"text/css"
href"mystyle.css" /gt - lt/headgt
- Referencia interna
- ltheadgt
- ltstyle type"text/css"gthr colorsiennap
margin-left20pxbody background-imageurl("ima
ges/back40.gif") - lt/stylegt
- lt/headgt
- Referencia en línea
- ltp style"colorsiennamargin-left20px"gtThis is
a paragraph.lt/pgt
20CSS Modo de referencia
- Archivos XML
- lt?xml version"1.0" encoding"UTF-8"
standalone"yes"?gt - lt?xml-stylesheet type"text/css"
href"tutorials.css"?gt - lttutorialsgt
- lttutorialgt
- ltnamegtXML Tutoriallt/namegt
- lturlgthttp//www.mytutorial.com/xml/tutoriallt/url
gt - lt/tutorialgt
- lttutorialgt
- ltnamegtHTML Tutoriallt/namegt
- lturlgthttp//www. mytutorial.com/html/tutoriallt/u
rlgt - lt/tutorialgt
- lt/tutorialsgt
21CSS Precedencia de valores
- Valores por default del navegador
- Hoja de estilo externa
- Hoja de estilo interna (en la sección de
encabezado) - Estilo en línea (dentro de un elemento)
22CSS Background
- Propiedades usadas para el efecto background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
23CSS background-color
- body background-colorb0c4de
- h1 background-color6495ed
- p background-colore0ffff
- div background-colorffffff
- Modos de referencia para el color
- nombre - "red, white, blue, etc
- RGB - un valor como "rgb(255,0,0)"
- Hex un valor como "ff0000"
24CSS background-image
- body background-imageurl(imagen.gif')
- body background-imageurl('imagen.jpg')
- bodybackground-imageurl(img/imagen.png')
25CSS background-repeat
- bodybackground-imageurl('gradient2.png')back
ground-repeatrepeat-x - bodybackground-imageurl('img_tree.png')backg
round-repeatno-repeat
26CSS background-repeat background-position
- bodybackground-imageurl('img_tree.png')backg
round-repeatno-repeatbackground-positiontop
right - Versión resumida
- body backgroundffffff url('img_tree.png')
no-repeat top right - Se requiere un orden
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
27CSS background-attachment
- body
-
- background-imageurl('smiley.gif')
- background-repeatno-repeat
- background-attachmentfixed
28CSS Propiedades de background
29CSS Ejercicio
- Crear un archivo de estilo para el documento XML
de la práctica 10. - Usar propiedades de background.
30CSS Texto
- Color del texto
- body colorblue
- h1 color00ff00
- h2 colorrgb(255,0,0)
- Alineación
- h1 text-aligncenter
- p.date text-alignright
- p.main text-alignjustify
31CSS Texto
- Decoración
- h1 text-decorationoverline
- h2 text-decorationline-through
- h3 text-decorationunderline
- h4 text-decorationblink
- a text-decorationnone
- Transformación
- p.uppercase text-transformuppercase
- p.lowercase text-transformlowercase
- p.capitalize text-transformcapitalize
- Identación
- p text-indent50px
32CSS Propiedades de texto
33CSS Font
- pfont-family"Times New Roman",Georgia,Serif
34CSS Font
- font-style
- p.normal font-stylenormal
- p.italic font-styleitalic
- p.oblique font-styleoblique
- Tres tipos
- normal El texto se muestra de manera normal
- italic El texto se muestra en itálica
- oblique El texto está inclinado (similar a
itálica, pero es soportado menos)
35CSS Font
- font-size -gt default (16px1em)
- h1 font-size40px
- h2 font-size30px
- p font-size14px
- h1 font-size2.5em / 40px/162.5em /
- h2 font-size1.875em / 30px/161.875em /
- p font-size0.875em / 14px/160.875em /
- body font-size100
- h1 font-size2.5em
- h2 font-size1.875em
- p font-size0.875em
36CSS Propiedades de font
37CSS Ejercicio
- Modificar el archivo CSS del ejercicio anterior e
incluir estilo para diferentes elementos de texto.
38CSS El modelo de la caja
- width250pxpadding10pxborder5px solid
graymargin10px - 250px (width) 20px (padding) 10px (border)
20px (margin) 300px
- width220pxpadding10pxborder5px solid
graymargin0px
39CSS El modelo de la caja en ciertos navegadores
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt - lthtmlgtltheadgtltstyle type"text/css"gtdiv.exwid
th220pxpadding10pxborder5px solid
graymargin0pxlt/stylegtlt/headgt
40CSS Border
- p.oneborder-stylesolidborder-width5pxp.
twoborder-stylesolidborder-widthmedium - pborder-top-styledottedborder-right-styleso
lidborder-bottom-styledottedborder-left-style
solid
- p.oneborder-stylesolidborder-colorredp.
twoborder-stylesolidborder-color98bf21
- border-styledotted solid
- border-styledotted solid double dashed
- border-styledotted solid double
- border-styledotted solid
- border-styledotted
41CSS Border (versión corta)
- border5px solid red
- Orden de los valores de la propiedad border
- border-width
- border-style
- border-color
42(No Transcript)
43CSS Outlines
44CSS Márgenes
- margin-top100pxmargin-bottom100pxmargin-righ
t50pxmargin-left50px - p.ex1 margin-top2cm
- p.bottommargin margin-bottom25
- En corto
- margin100px 50px
45CSS Márgenes
46CSS Padding
- La propiedad padding limpia una área alrededor
del contenido de un elemento (dentro del borde).
Se encuentra afectado por el color de fondo del
elemento. - padding-top25pxpadding-bottom25pxpadding-rig
ht50pxpadding-left50px - padding25px 50px 75px 100px
- padding25px 50px 75px
- padding25px 50px
- padding25px
47CSS Padding
48CSS Ejercicio
- Crear una página simple en HTML que contenga
elementos de tipo párrafo (ltpgt). - Experimentar en la hoja de estilos con el modelo
de caja, usando diferentes elementos. - Incluir una imagen (dentro de la hoja de estilo)
que no se desplace, a pesar de que el usuario si
lo haga en la página HTML.
49CSS list-style-type (listas no ordenadas)
- Listas no ordenadas
- ul.circle list-style-typecircle
- ul.square list-style-typesquare
50CSS list-style-type (listas ordenadas)
- Listas ordenadas
- ol.upper-roman list-style-typeupper-roman
- ol.lower-alpha list-style-typelower-alpha
51CSS list-style-type
- ul.inside list-style-positioninsideul.outside
list-style-positionoutside - ullist-style-imageurl('arrow.gif')
- ullist-style-typenonepadding0pxmargin0px
- libackground-imageurl(arrow.gif)background-
repeatno-repeatbackground-position0px 5px
padding-left14px
52CSS list-style-type
53CSS Ejercicio
- Pruebe el uso de viñetas. Predefinidas y con
archivos de imágenes. - Pruebe al menos tres tipos de numeración en las
listas ordenadas.
54CSS Tables
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- table.ex1 table-layoutauto
- table.ex2 table-layoutfixed
- lt/stylegt
- lt/headgt
- ltbodygt
- lttable class"ex1" border"1" width"100"gt
- lttrgt
- lttd width"5"gt1000000000000000000000000000lt/tdgt
- lttd width"95"gt10000000lt/tdgt
- lt/trgt
- lt/tablegt
- ltbr /gt
- lttable class"ex2" border"1" width"100"gt
- lttrgt
55CSS Tables
56CSS Div
- DIVs pueden ser una alternativa a lttablegt
- DIVs son un contenedor comouna celda de una tabla
- CSS puede posicionar a los DIV
- ltdiv id"article"gtxxxlt/divgt
- article
- width250px
- padding5px
- floatright
57(No Transcript)
58CSS Dimensiones
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- img.normal heightauto
- img.big height50
- img.small height10
- lt/stylegt
- lt/headgt
- ltbodygt
- ltimg class"normal" src"logocss.gif" width"95"
height"84" /gtltbr /gt - ltimg class"big" src"logocss.gif" width"95"
height"84" /gtltbr /gt - ltimg class"small" src"logocss.gif" width"95"
height"84" /gt - lt/bodygt
- lt/htmlgt
59CSS Display
- Hidden
- h1.hidden visibilityhidden
- h1.hidden displaynone
- Block vs Inline
- Ejemplos de elementos bloque
- lth1gt
- ltpgt
- ltdivgt
- Ejemplos de elementos Inline
- ltspangt
- ltagt
60CSS Display (block vs inline)
- li displayinline
- span displayblock
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- p display inline
- lt/stylegt
- lt/headgt
- ltbodygt
- ltpgtA display property with a value of "inline"
results inlt/pgt - ltpgtno distance between two elements.lt/pgt
- lt/bodygt
- lt/htmlgt
61CSS Display (block vs inline) Ver ejemplo
- ltheadgt
- ltstyle type"text/css"gt
- a
-
- floatleft
- width6em
- text-decorationnone
- colorwhite
- background-colorpurple
- padding0.2em 0.6em
- border-right1px solid white
-
- ahover background-colorff3300
- li displayinline
- ul
-
- floatleft
- width100
- padding0
- margin0
- list-style-typenone
-
- lt/stylegt
- lt/headgt
62CSS Display
63CSS Posicionamiento
- Fijo
- p.pos_fixedpositionfixedtop30pxright5px
- Relativo y absoluto
- h2.pos_leftpositionrelativeleft-20pxh2.
pos_rightpositionrelativeleft20px - h2positionabsoluteleft100pxtop150px
- Traslape
- imgpositionabsoluteleft0pxtop0pxz-inde
x-1
64(No Transcript)
65CSS Float
- La propiedad float permite que un elemento
flote horizontalmente. De manera que los otros
elementos que le siguen se ajusten de acuerdo al
valor del float. - Ejemplo
- imgfloatright
- Galería de imágenes
- .thumbnail floatleftwidth110pxheight90px
margin5px - Desactivar el flotado de los elementos
(circundantes) - .text_lineclearboth
66CSS Float
67CSS Pseudo-Classes
- Clases predefinidas y se puede establecer efectos
especiales - alink colorFF0000 / unvisited link /
- avisited color00FF00 / visited link /
- ahover colorFF00FF / mouse over link /
- aactive color0000FF / selected link /
- a.redvisited colorFF0000lta class"red"
href"css_syntax.asp"gtCSS Syntaxlt/agt
68CSS Pseudo-elementos
- after Agrega contenido después de un elemento
- before Agrega contenido antes de un elemento
- first-letter Establece el estilo para el primer
carácter de un texto - first-line Establece el estilo para la primera
línea de un texto
69CSS Pseudo-elementos(first-line)
- Ejemplos
- pfirst-line colorff0000font-variantsmall-
caps - Propiedades
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
70CSS Pseudo-elementos(first-letter)
- Ejemplos
- pfirst-letter colorff0000font-sizexx-larg
e - Propiedades
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
71CSS Pseudo-elementos
- Ejemplos
- p.articlefirst-letter colorff0000ltp
class"article"gtA paragraph in an articlelt/pgt - pfirst-lettercolorff0000font-sizexx-large
pfirst-line color0000fffont-variantsm
all-caps - h1aftercontenturl(smiley.gif)
CSS 2
72W3C CSS 3 recommendation
- Transparencia
- Firefox -- opacityx 0.0 1.0
- IE -- filteralpha(opacityx) 0 100
- NOTA Entre más bajo el valor, más transparente.
- Ejemplos
- ltimg srcimagen.jpg" width"150" height"113"
altimagen_texto"style"opacity0.4filteralpha
(opacity40)" /gt - ltimg srcimagen.jpg" style"opacity0.4filteral
pha(opacity40)"onmouseover"this.style.opacity1
this.filters.alpha.opacity100"onmouseout"this.
style.opacity0.4this.filters.alpha.opacity40"
/gt
73Tipos de dispositivos
74Tipos de dispositivos
- lthtmlgtltheadgtltstylegt_at_media screen p.test
font-familyverdana,sans-seriffont-size14px
_at_media print p.test font-familytimes,ser
iffont-size10px _at_media screen,print
p.test font-weightbold lt/stylegtlt/headgtltb
odygt....lt/bodygtlt/htmlgt
75Ejercicios
- Diseñar un estilo css para su proyecto de libros.