Cascading Style Sheets (CSS) - PowerPoint PPT Presentation

About This Presentation
Title:

Cascading Style Sheets (CSS)

Description:

Los estilos definen c mo desplegar la informaci n (elementos HTML/XHTML/XML) ... border-style:dotted solid double dashed; border-style:dotted solid double; ... – PowerPoint PPT presentation

Number of Views:183
Avg rating:3.0/5.0
Slides: 76
Provided by: Vai898
Category:
Tags: css | cascading | dbl | sheets | style

less

Transcript and Presenter's Notes

Title: Cascading Style Sheets (CSS)


1
Cascading Style Sheets (CSS)
  • David Pinto

2
Web 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)

3
XHTML
  • XHTML 1.0 Transitional
  • XHTML 1.0 Strict
  • XHTML 1.1
  • XHTML 2.0 (W3C Working Draft)
  • No más desarrollo en HTML!

4
Cascading 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

5
CSS 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)
7
CSS Motivación http//www.csszengarden.com
8
CSS Motivación http//www.csszengarden.com
9
CSS Motivación http//www.csszengarden.com
10
CSS Motivación http//www.csszengarden.com
11
CSS Motivación http//www.csszengarden.com
12
CSS 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

13
CSS Sintaxis
  • Tres partes
  • Un selector
  • Una propiedad
  • Un valor
  • Sintaxis
  • selector propertyvalue

14
CSS Sintaxis
  • Uso
  • body colorblack
  • p font-family"sans serif"
  • p text-aligncentercolorred
  • Uso
  • ptext-aligncentercolorblackfont-familyar
    ial
  • h1,h2,h3,h4,h5,h6colorgreen

15
CSS 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

16
CSS 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

17
CSS Otros
  • Definición
  • inputtype"text" background-colorblue
  • Comentarios
  • / Este es un comentario /
  • ptext-aligncenter
  • / Este es otro comentario /
  • colorblackfont-familyarial

18
CSS 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

19
CSS 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

20
CSS 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

21
CSS 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)

22
CSS Background
  • Propiedades usadas para el efecto background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

23
CSS 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"

24
CSS background-image
  • body background-imageurl(imagen.gif')
  • body background-imageurl('imagen.jpg')
  • bodybackground-imageurl(img/imagen.png')

25
CSS background-repeat
  • bodybackground-imageurl('gradient2.png')back
    ground-repeatrepeat-x
  • bodybackground-imageurl('img_tree.png')backg
    round-repeatno-repeat

26
CSS 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

27
CSS background-attachment
  • body
  • background-imageurl('smiley.gif')
  • background-repeatno-repeat
  • background-attachmentfixed

28
CSS Propiedades de background
29
CSS Ejercicio
  • Crear un archivo de estilo para el documento XML
    de la práctica 10.
  • Usar propiedades de background.

30
CSS 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

31
CSS 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

32
CSS Propiedades de texto
33
CSS Font
  • pfont-family"Times New Roman",Georgia,Serif

34
CSS 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)

35
CSS 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

36
CSS Propiedades de font
37
CSS Ejercicio
  • Modificar el archivo CSS del ejercicio anterior e
    incluir estilo para diferentes elementos de texto.

38
CSS El modelo de la caja
  • width250pxpadding10pxborder5px solid
    graymargin10px
  • 250px (width) 20px (padding) 10px (border)
    20px (margin) 300px
  • width220pxpadding10pxborder5px solid
    graymargin0px

39
CSS 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

40
CSS 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

41
CSS Border (versión corta)
  • border5px solid red
  • Orden de los valores de la propiedad border
  • border-width
  • border-style
  • border-color

42
(No Transcript)
43
CSS Outlines
44
CSS Márgenes
  • margin-top100pxmargin-bottom100pxmargin-righ
    t50pxmargin-left50px
  • p.ex1 margin-top2cm
  • p.bottommargin margin-bottom25
  • En corto
  • margin100px 50px

45
CSS Márgenes
46
CSS 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

47
CSS Padding
48
CSS 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.

49
CSS list-style-type (listas no ordenadas)
  • Listas no ordenadas
  • ul.circle list-style-typecircle
  • ul.square list-style-typesquare

50
CSS list-style-type (listas ordenadas)
  • Listas ordenadas
  • ol.upper-roman list-style-typeupper-roman
  • ol.lower-alpha list-style-typelower-alpha

51
CSS 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

52
CSS list-style-type
53
CSS 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.

54
CSS 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

55
CSS Tables
56
CSS 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)
58
CSS 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

59
CSS Display
  • Hidden
  • h1.hidden visibilityhidden
  • h1.hidden displaynone
  • Block vs Inline
  • Ejemplos de elementos bloque
  • lth1gt
  • ltpgt
  • ltdivgt
  • Ejemplos de elementos Inline
  • ltspangt
  • ltagt

60
CSS 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

61
CSS 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

62
CSS Display
63
CSS Posicionamiento
  • Fijo
  • p.pos_fixedpositionfixedtop30pxright5px
  • Relativo y absoluto
  • h2.pos_leftpositionrelativeleft-20pxh2.
    pos_rightpositionrelativeleft20px
  • h2positionabsoluteleft100pxtop150px
  • Traslape
  • imgpositionabsoluteleft0pxtop0pxz-inde
    x-1

64
(No Transcript)
65
CSS 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

66
CSS Float
67
CSS 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

68
CSS 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

69
CSS 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

70
CSS 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

71
CSS 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
72
W3C 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

73
Tipos de dispositivos
74
Tipos 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

75
Ejercicios
  • Diseñar un estilo css para su proyecto de libros.
Write a Comment
User Comments (0)
About PowerShow.com