Presentación css
Upcoming SlideShare
Loading in...5
×
 

Presentación css

on

  • 3,241 views

Presentación de CSS para la clase de Programación V de la Corporación Universitaria Autónoma del Cauca. Andrés Giovanni Lara Collazos Robert Velasco Luis Muñoz

Presentación de CSS para la clase de Programación V de la Corporación Universitaria Autónoma del Cauca. Andrés Giovanni Lara Collazos Robert Velasco Luis Muñoz

Statistics

Views

Total Views
3,241
Views on SlideShare
1,016
Embed Views
2,225

Actions

Likes
1
Downloads
32
Comments
0

3 Embeds 2,225

http://donestandares.wordpress.com 2221
http://static.ak.facebook.com 3
http://www.copyscape.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Presentación css Presentación css Presentation Transcript

  • Andrés Giovanni Lara CollazosRobert VelascoLuis Muñoz css Cascade Style Sheets
  • cssCascade Style Sheets
  • Es la forma como indicamos el diseño, colores, tamaños, etc deun sitio web, separado de la programación y la estructura de este Cascade Style Sheets
  • web CSS HTMLEl estilo, la ropa, Estructura, músculos, peinado huesos Cascade Style Sheets
  • Historia
  • HTML DOOM CHSS y CSS CSS 3 SSP1975 1996 1998 1994 1994 1997 Futuro SGML CSS 1 CSS 2 Cascade Style Sheets
  • Capas diseño web
  • Contenido HTML e Información Diseño CSSComportamiento Javascript Cascade Style Sheets
  • Insertar código CSS
  • Código directo <style type="text/css"> /*Código CSS*/ </style>En archivo .css <link rel="stylesheet" href="prueba.css"/> Cascade Style Sheets
  • Formato
  • Los Elementos sonetiquetas únicas que no se repiten Cascade Style Sheets
  • Nombre del elemento#elemento_de_pruebaNumeral, indica que es un elemento Cascade Style Sheets
  • Código CSS elemento #elemento{ /*Propiedades CSS*/ } Cascade Style Sheets
  • Código HTML elemento <div id=”nombre_elemento”> ¡Hola Colombia! </div> Cascade Style Sheets
  • Las Clases son Elementoscon características iguales Cascade Style Sheets
  • Nombre de la clase.clase_de_prueba Punto, indica que es una clase Cascade Style Sheets
  • Código CSS clase .clase{ /*Propiedades CSS*/ } Cascade Style Sheets
  • Código HTML de la clase <div class=”nombre_clase”> ¡Hola Colombia! </div> Cascade Style Sheets
  • Ejemplo
  • HTML <div id=”listado_de_frutas”> <ul> <li class=”estilo_de_li”>Guanábana</li> <li class=”estilo_de_li”>Pera</li> <li class=”estilo_de_li”>Guayaba</li> <li class=”estilo_de_li”>Manzana</li> <li class=”estilo_de_li”>Uva</li> </ul> </div> Cascade Style Sheets
  • CSS #listado_de_frutas{ background: RED; } .estilo_de_li{ color: #B1B1B1; border: 1px solid #000; } Cascade Style Sheets
  • Resultado CSS Guanábana #listado_de_frutas{ Pera background: RED; Guayaba } Manzana .estilo_de_li{ Uva color: #B1B1B1; border: 1px solid #000; } Cascade Style Sheets
  • Elementos globales es la forma de darle estilo a todas las etiquetas con determinado nombre Cascade Style Sheets
  • Solo el nombre del elemento globalelemento_global Va sin punto (.) ó numeral (#) Cascade Style Sheets
  • CSS li{ color: #B1B1B1; border: 1px solid #000; } Cascade Style Sheets
  • HTML <div id=”listado_de_frutas”> <ul> <li>Guanábana</li> <li>Pera</li> <li>Guayaba</li> <li>Manzana</li> <li>Uva</li> </ul> </div> Cascade Style Sheets
  • La Herencia nos permiteque etiquetas que estén dentro de otra tomen características en conjunto Cascade Style Sheets
  • No todas las propiedadesse heredan, por lo general solo las de tipo fuente Cascade Style Sheets
  • Selectores CSS ejemplo #listado_de_sopas ul li{ background: RED; } #listado_de_sopas, #listado_de_frutas, #listado_de_ensaladas, #listado_de_jugos{ color: #B1B1B1; border: 1px solid #000; } .clase_1, .clase_2, .clase_3, .clase_4{ color: #B1B1B1; border: 1px solid #000; } Cascade Style Sheets
  • Propiedades texto
  • Valor de la propiedad en pixels font-size:12px;Nombre de la propiedad Cascade Style Sheets
  • Listado de fuentes Font-family: Arial, Helvetica;Nombre de la propiedad Cascade Style Sheets
  • Arial, Helvetica, sans-serif.“Times New Roman”, Times, serif.“Courier New”, Courier, monospace.Georgia, “Times New Roman”, Times, serif.Verdana, Arial, Helvetica, sans-serif.Geneva, Arial, Helvetica, sans-serif. Cascade Style Sheets
  • Valor de la propiedad hexadecimal color: #000;Nombre de la propiedad Cascade Style Sheets
  • Tipo de alineado text-align: center;Nombre de la propiedad Cascade Style Sheets
  • Propiedad Informacióntext-align: center; Alinear al centro text-align: left; Alinear a la izquierdatext-align: right; Alinear a la derechatext-align: justify; Justificartext-align: none; Ninguna Cascade Style Sheets
  • Propiedades general
  • margin padding Div Cascade Style Sheets
  • margin Div Cascade Style Sheets
  • padding DivCascade Style Sheets
  • Padding .clase_1{ padding: 3px; }Margin .clase_1{ margin: 3px; } Cascade Style Sheets
  • border: 4px solid #B1B1B1; Div Cascade Style Sheets
  • Propiedad Información dotted Linea de puntos dashed Linea discontinua solid Linea continua double Doble linea Cascade Style Sheets
  • Border .clase_1{ border: 1px solid #B1B1B1; } Cascade Style Sheets
  • background: #000; Div#un_div_que_elijamos{ Background: #000;} Cascade Style Sheets
  • body{ background: url(“nyan.jpg”) #000;} Cascade Style Sheets
  • Propiedad Información no-repeat No repetir repeat-x Repetir en el eje X repeat-y Repetir en el eje Y none Ninguno Cascade Style Sheets
  • body{ background:url(“orange.png”) repeat-x #6FA8DC;} Cascade Style Sheets
  • ¡Gracias! Cascade Style Sheets