c ascading s tyle s heets css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
C ascading S tyle S heets (CSS) PowerPoint Presentation
Download Presentation
C ascading S tyle S heets (CSS)

Loading in 2 Seconds...

play fullscreen
1 / 75

C ascading S tyle S heets (CSS) - PowerPoint PPT Presentation


  • 140 Views
  • Uploaded on

C ascading S tyle S heets (CSS). David Pinto. 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). XHTML. XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.1

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'C ascading S tyle S heets (CSS)' - pabla


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web standards
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)
xhtml
XHTML
  • XHTML 1.0 Transitional
  • XHTML 1.0 Strict
  • XHTML 1.1
  • XHTML 2.0 (W3C Working Draft)

No más desarrollo en HTML!

c ascading s tyle s heets
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
css motivaci n
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
css ejemplo probar este ejemplo
Archivo HTML

<html>

<head>

<link rel="stylesheet" type="text/css" href="ejemplo1.css" />

</head>

<body>

<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>

</html>

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}

CSS: Ejemplo (Probar este ejemplo)
css sintaxis
CSS: Sintaxis
  • Tres partes:
    • Un selector
    • Una propiedad
    • Un valor
  • Sintaxis:
    • selector {property:value}
css sintaxis1
Uso:

body {color:black}

p {font-family:"sans serif"}

p {text-align:center;color:red}

Uso:

p{text-align:center;color:black;font-family:arial}

h1,h2,h3,h4,h5,h6{color:green}

CSS: Sintaxis
css el selector class
CSS: El selector class

Se pueden definir diferentes estilos para el mismo elemento

  • Definición:
    • p.right {text-align:right}
    • p.center {text-align:center}
  • Uso:
    • <p class="right">This paragraph will be right-aligned.</p>
    • <p class="center">This paragraph will be center-aligned.</p>
    • <p class="center bold">This is a paragraph.</p>
css el selector class1
CSS: El selector class

Se puede omitir el elemento para indicar que se aplicará para cualquier elemento

  • Definición:
    • .center {text-align:center}
  • Uso:
    • <h1 class="center">This heading will be center-aligned</h1>
    • <p class="center">This paragraph will also be center-aligned.</p>
css otros
CSS: Otros
  • Definición:
    • input[type="text"] {background-color:blue}
  • Comentarios:

/* Este es un comentario */

p{text-align:center;

/* Este es otro comentario */

color:black;font-family:arial}

css el selector id
CSS: El selector id

Se puede también definir estilos con el selector id

  • Definición:
    • #green {color:green}
    • p#para1{text-align:center;color:red}
  • Uso:

<p id="para1">

Este párrafo está centrado y en color rojo.

</p>

css modo de referencia
CSS: Modo de referencia
  • Archivos HTML / XHTML
    • Referencia externa:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

    • Referencia interna:

<head>

<style type="text/css">hr {color:sienna}p {margin-left:20px}body {background-image:url("images/back40.gif")}

</style>

</head>

    • Referencia en línea:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

css modo de referencia1
CSS: Modo de referencia
  • Archivos XML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<?xml-stylesheet type="text/css" href="tutorials.css"?>

<tutorials>

<tutorial>

<name>XML Tutorial</name>

<url>http://www.mytutorial.com/xml/tutorial</url>

</tutorial>

<tutorial>

<name>HTML Tutorial</name>

<url>http://www. mytutorial.com/html/tutorial</url>

</tutorial>

</tutorials>

css precedencia de valores
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)
css background
CSS: Background
  • Propiedades usadas para el efecto background
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
css background color
CSS: background-color
  • body {background-color:#b0c4de}
  • h1 {background-color:#6495ed}
  • p {background-color:#e0ffff}
  • div {background-color:#ffffff}
  • Modos de referencia para el color:
    • nombre - "red“, “white”, “blue”, etc
    • RGB - un valor como "rgb(255,0,0)"
    • Hex – un valor como "#ff0000"
css background image
CSS: background-image
  • body {background-image:url(‘imagen.gif')}
  • body {background-image:url('imagen.jpg')}
  • body{background-image:url(‘img/imagen.png');}
css background repeat
CSS: background-repeat
  • body{background-image:url('gradient2.png');background-repeat:repeat-x;}
  • body{background-image:url('img_tree.png');background-repeat:no-repeat;}
css background repeat background position
CSS: background-repeat background-position
  • body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:top right;}
  • Versión resumida:

body {background:#ffffff url('img_tree.png') no-repeat top right}

Se requiere un orden:

    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
css background attachment
CSS: background-attachment

body

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment:fixed

}

css ejercicio
CSS: Ejercicio
  • Crear un archivo de estilo para el documento XML de la práctica 10.
  • Usar propiedades de background.
css texto
CSS: Texto
  • Color del texto
    • body {color:blue}
    • h1 {color:#00ff00}
    • h2 {color:rgb(255,0,0)}
  • Alineación
    • h1 {text-align:center}
    • p.date {text-align:right}
    • p.main {text-align:justify}
css texto1
CSS: Texto
  • Decoración
    • h1 {text-decoration:overline}
    • h2 {text-decoration:line-through}
    • h3 {text-decoration:underline}
    • h4 {text-decoration:blink}
    • a {text-decoration:none}
  • Transformación
    • p.uppercase {text-transform:uppercase}
    • p.lowercase {text-transform:lowercase}
    • p.capitalize {text-transform:capitalize}
  • Identación
    • p {text-indent:50px}
css font
CSS: Font
  • p{font-family:"Times New Roman",Georgia,Serif}
css font1
CSS: Font
  • font-style
    • p.normal {font-style:normal}
    • p.italic {font-style:italic}
    • p.oblique {font-style:oblique}
  • 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)
css font2
CSS: Font
  • font-size -> default = (16px=1em)
    • h1 {font-size:40px}
    • h2 {font-size:30px}
    • p {font-size:14px}
    • h1 {font-size:2.5em} /* 40px/16=2.5em */
    • h2 {font-size:1.875em} /* 30px/16=1.875em */
    • p {font-size:0.875em} /* 14px/16=0.875em */
    • body {font-size:100%}
    • h1 {font-size:2.5em}
    • h2 {font-size:1.875em}
    • p {font-size:0.875em}
css ejercicio1
CSS: Ejercicio
  • Modificar el archivo CSS del ejercicio anterior e incluir estilo para diferentes elementos de texto.
css el modelo de la caja
width:250px;padding:10px;border:5px solid gray;margin:10px;

250px (width)+ 20px (padding)+ 10px (border)+ 20px (margin)= 300px

width:220px;padding:10px;border:5px solid gray;margin:0px;

CSS: El modelo de la caja
css el modelo de la caja en ciertos navegadores
CSS: El modelo de la caja en ciertos navegadores

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head><style type="text/css">div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}</style></head>

css border
p.one{border-style:solid;border-width:5px;}p.two{border-style:solid;border-width:medium;}

p{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;}

p.one{border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;}

border-style:dotted solid;

border-style:dotted solid double dashed;

border-style:dotted solid double;

border-style:dotted solid;

border-style:dotted;

CSS: Border
css border versi n corta
CSS: Border (versión corta)
  • border:5px solid red;
  • Orden de los valores de la propiedad border
    • border-width
    • border-style
    • border-color
css m rgenes
CSS: Márgenes
  • margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;
  • p.ex1 {margin-top:2cm}
  • p.bottommargin {margin-bottom:25%
  • En corto:
    • margin:100px 50px;
css padding
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-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px
    • padding:25px 50px 75px 100px;
    • padding:25px 50px 75px;
    • padding:25px 50px;
    • padding:25px;
css ejercicio2
CSS: Ejercicio
  • Crear una página simple en HTML que contenga elementos de tipo párrafo (<p>).
  • 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.
css list style type listas no ordenadas
CSS: list-style-type (listas no ordenadas)
  • Listas no ordenadas
    • ul.circle {list-style-type:circle}
    • ul.square {list-style-type:square}
css list style type listas ordenadas
CSS: list-style-type (listas ordenadas)
  • Listas ordenadas
    • ol.upper-roman {list-style-type:upper-roman}
    • ol.lower-alpha {list-style-type:lower-alpha}
css list style type
CSS: list-style-type
  • ul.inside {list-style-position:inside}ul.outside {list-style-position:outside}
  • ul{list-style-image:url('arrow.gif');}
  • ul{list-style-type:none;padding:0px;margin:0px;}

li{background-image:url(arrow.gif);background-repeat:no-repeat;background-position:0px 5px; padding-left:14px; }

css ejercicio3
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.
css tables
CSS: Tables

<html>

<head>

<style type="text/css">

table.ex1 {table-layout:auto}

table.ex2 {table-layout:fixed}

</style>

</head>

<body>

<table class="ex1" border="1" width="100%">

<tr>

<td width="5%">1000000000000000000000000000</td>

<td width="95%">10000000</td>

</tr>

</table>

<br />

<table class="ex2" border="1" width="100%">

<tr>

<td width="5%">1000000000000000000000000000</td>

<td width="95%">10000000</td>

</tr>

</table>

</body>

</html>

css div
CSS: Div
  • DIVs pueden ser una alternativa a <table>
  • DIVs son un contenedor comouna celda de una tabla
  • CSS puede posicionar a los DIV

<div id="article">xxx</div>

#article{

width:250px;

padding:5px;

float:right;}

css dimensiones
CSS: Dimensiones

<html>

<head>

<style type="text/css">

img.normal {height:auto}

img.big {height:50%}

img.small {height:10%}

</style>

</head>

<body>

<img class="normal" src="logocss.gif" width="95" height="84" /><br />

<img class="big" src="logocss.gif" width="95" height="84" /><br />

<img class="small" src="logocss.gif" width="95" height="84" />

</body>

</html>

css display
CSS: Display
  • Hidden
    • h1.hidden {visibility:hidden}
    • h1.hidden {display:none}

Block vs Inline

  • Ejemplos de elementos bloque
    • <h1>
    • <p>
    • <div>
  • Ejemplos de elementos Inline
    • <span>
    • <a>
css display block vs inline
CSS: Display (block vs inline)
  • li {display:inline}
  • span {display:block}

<html>

<head>

<style type="text/css">

p {display: inline}

</style>

</head>

<body>

<p>A display property with a value of "inline" results in</p>

<p>no distance between two elements.</p>

</body>

</html>

css display block vs inline ver ejemplo
<head>

<style type="text/css">

a

{

float:left;

width:6em;

text-decoration:none;

color:white;

background-color:purple;

padding:0.2em 0.6em;

border-right:1px solid white;

}

a:hover {background-color:#ff3300}

li {display:inline}

ul

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

}

</style>

</head>

CSS: Display (block vs inline) Ver ejemplo…
css posicionamiento
Fijo:

p.pos_fixed{position:fixed;top:30px;right:5px;}

Relativo y absoluto:

h2.pos_left{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}

h2{position:absolute;left:100px;top:150px;}

Traslape:

img{position:absolute;left:0px;top:0px;z-index:-1}

CSS: Posicionamiento
css float
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:

img{float:right;}

  • Galería de imágenes:

.thumbnail {float:left;width:110px;height:90px;margin:5px;}

  • Desactivar el flotado de los elementos (circundantes):

.text_line{clear:both;}

css pseudo classes
CSS: Pseudo-Classes
  • Clases predefinidas y se puede establecer efectos especiales
  • 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 */
  • a.red:visited {color:#FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>
css pseudo elementos
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
css pseudo elementos first line
CSS: Pseudo-elementos(:first-line)
  • Ejemplos:
    • p:first-line {color:#ff0000;font-variant:small-caps;}
  • Propiedades:
    • font properties
    • color properties 
    • background properties
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear
css pseudo elementos first letter
CSS: Pseudo-elementos(:first-letter)
  • Ejemplos:
    • p:first-letter {color:#ff0000;font-size:xx-large;}
  • 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
css pseudo elementos1
CSS: Pseudo-elementos
  • Ejemplos:
    • p.article:first-letter {color:#ff0000}<p class="article">A paragraph in an article</p>
    • p:first-letter{color:#ff0000;font-size:xx-large;}p:first-line {color:#0000ff;font-variant:small-caps;}
    • h1:after{content:url(smiley.gif);}

CSS 2

w3c css 3 recommendation
W3C CSS 3 recommendation

Transparencia:

  • Firefox -- opacity:x [0.0 – 1.0]
  • IE -- filter:alpha(opacity=x) [0 – 100]

NOTA: Entre más bajo el valor, más transparente.

  • Ejemplos:
    • <img src=“imagen.jpg" width="150" height="113" alt=“imagen_texto"style="opacity:0.4;filter:alpha(opacity=40)" />
    • <img src=“imagen.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
tipos de dispositivos1
Tipos de dispositivos
  • <html><head><style>@media screen  {  p.test {font-family:verdana,sans-serif;font-size:14px}  }@media print  {  p.test {font-family:times,serif;font-size:10px}  }@media screen,print  {  p.test {font-weight:bold}  }</style></head><body>....</body></html>
ejercicios
Ejercicios
  • Diseñar un estilo css para su proyecto de libros.