Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Semana 3   Maquetación CSS
Semana 3 Maquetación CSS
Cargando en…3
×

Eche un vistazo a continuación

1 de 36 Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Anuncio

Más de Richard Eliseo Mendoza Gafaro (20)

Más reciente (20)

Anuncio

Semana 3 Introduccion CSS

  1. 1. HOJAS DE ESTILO EN CASCADA Mg. Richard E. Mendoza G.
  2. 2. CSS: CASCADE STYLE SHEET (HOJA DE ESTILO EN CASCADA) CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML 5. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. CSS
  3. 3. 5 • Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHT ML bien definidos y con significado completo (también llamados "documentos semánticos"). • Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. VENTAJAS CSS
  4. 4. A partir delaespecificaciónHTML 4.0ladefinicióndel formato deun documento puedeestar aparteenun archivoCSS • Actualmente todos los navegadores Web soportan CSS •CSS permitecambiar laaparienciaydiseño detodo un sitio webcon sólo modificar un archivo deestilos INTRODUCCION CSS
  5. 5. Una reglaCSS consta dedos partes:selector y declaraciones •Un selector es normalmente elelementoHTML alquese le quiereaplicar un estilo •Una declaración consiste en un par propiedad:valor,termina con punto ycoma(;) y seagrupan con llaves { } SINTAXIS CSS
  6. 6. Se puedenintroducir comentarios enun archivo CSS • / * Estees un comentario CSS */ •Los comentarios son útilesparaexplicarelcódigo y son ignorados por los navegadores •CSS permitedefinirselectores personalizados llamados identificadores yclases SINTAXIS CSS
  7. 7. El identificador es usado para definir el estilo de un solo y único elemento •El identificador usa el atributo “id” de un elemento HTML y en CSS sedefinecon elsímbolo # •NO utilizar números al inicio del nombre de un identificador SINTAXIS CSS
  8. 8. •Unaclasees utilizadaparadefinirlos estilos deun grupo de Elementos •Unaclaseusaelatributo “class”deun elemento HTML y en CSS sedefinecon elsímbolo . SINTAXIS CSS
  9. 9. •Tambiénes posible especificarqueciertos elementossean modificados por unaclaseen particular • NO utilizarnúmeros alinicio delnombre deunaclase SINTAXIS CSS
  10. 10. •Existen tres formas para definir estilos •Estilos en línea •Estilos internos •Hojade estilo externa (archivo .css) •Los navegadores web aplican el formato a un documento HTML de acuerdo a los estilos DEFINICION DE ESTILOS CSS
  11. 11. PRACTICA ESTILOS CSS <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device- width, initial-scale=1.0"> <title>Estilos CSS</title> <link rel="stylesheet" href="style.css"> <style> h2 { font- family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sa ns-serif;color: darkblue; } </style></head> <body> <p><h1 style="font- family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans -serif;color: salmon;">Titulo de la Empresa</h1></p> <h2>Lorem ipsum </h2> <h3>Lorem, ipsum </h3></body></html> h3 { color: dimgray; font- family: 'Segoe UI', Tahoma, Geneva, Verda na, sans-serif; font-size: 18px; } index.html style.css
  12. 12. •Una hojadeestilo externa es idealcuando los mismos estilos son aplicadosadiferentesdocumentos HTML •Con unahojadeestilo externa se puedecambiareldiseño y formato detodo un sitio web • Se utilizaelelemento “link”paraincluir unahojadeestilo DEFINICION DE ESTILOS CSS
  13. 13. •Los estilos internos son utilizados cuando un solo documento contiene estilos únicos •Los estilos internos se definen en la sección <head> utilizando la etiqueta“style” DEFINICION DE ESTILOS CSS
  14. 14. •Los estilos en línea se utilizan principalmente cuando se desea redefinirelformato dealgúnelementoenparticular • Seutilizaelatributo “style”deun elemento HTML DEFINICION DE ESTILOS CSS
  15. 15. https://cssreference.io
  16. 16. https://i.emezeta.com/weblog/css3-cheatsheet/css3-cheatsheet-2017-emezeta.pdf
  17. 17. Verificar que todas las llaves abiertas estén debidamente cerradas. Nunca omitir puntos y comas. Utilizar nombres representativos para todas las clases. REGLAS GENERALES CSS
  18. 18. h1 { font-size: 20px; } Selector Valor Propiedad TERMINOLOGIA CSS
  19. 19. 1. Por identificador 2. Por clase 3. Por nombre de etiqueta 4. Por jerarquía 5. Por agrupación MANEJO DE CSS
  20. 20. <p id="introduccion">Lorem ipsum</p> #introduccion{ color: # 3300FF; } HTML CSS POR IDENTIFICADOR
  21. 21. <p class="grande">Lorem ipsum</p> .grande{ font-size: 40px; } CSS HTML POR CLASE
  22. 22. <h1>Lorem ipsum</h1> h1{ font-family: Verdana; } CSS HTML POR NOMBRE DE ETIQUETA
  23. 23. <p><strong>Lorem</strong>ipsum</p> p strong{ color:#AAAAAA; } CSS HTML POR JERARQUIA
  24. 24. <p id="primero">Lorem ipsum</p> <p id="segundo">Lorem ipsum</p> # primero, # segundo{ color:#336600; } CSS HTML POR AGRUPACION
  25. 25. PRACTICA ESTILOS CSS index.html style.css <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"></head> <body> <header> <h1 id="header-title">Titulo de la Empresa</h1> </header> <main> <section> <h3>Titulo del Articulo</h3> </section> <article> <div class="section-title"> <h2>Lorem ipsum </h2></div> <h2>Lorem ipsum</h2> </article></main> <aside> <p id="primero">Lorem ipsum </p> <p id="segundo">Lorem ipsum </p> </aside> <footer><p><strong>Copyright</strong> Derechos reservados 2021</p> </footer></body></html> #header-title {/*MANEJO CSS POR IDENTIFICADOR*/ color:#035AA6; font- family: Impact, Haettenschweiler, 'Arial Narrow Bold', sa ns-serif; font-size: 20px; } .section-title {/*MANEJO CSS POR CLASE*/ color: #E171B0; font- family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; } h3 {/*MANEJO CSS POR ETIQUETA*/ color: #049DBF; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; } p strong{/*MANEJO CSS POR JERARQUIA*/ color:#035AA6; } #primero, #segundo{/*MANEJO CSS POR AGRUPACION*/ color:#035AA6; }
  26. 26. • color • font-family • font-size • font-weight • font-style • text-decoration PROPIEDADES BASICAS: ESTILOS DE TEXTO Color del texto en valor hexadecimal Familia tipográfica (Arial, Verdana, etc.) Valor en pixeles que determina el tamaño del texto
  27. 27. COLORES EN HEXADECIMAL
  28. 28. • color • font-family • font-size • font-weight • font-style • text-decoration PROPIEDADES BASICAS: ESTILOS DE TEXTO Propiedad que determina si el texto es normal o en estilo bold. Valores posibles: • bold • normal • 100 • 900
  29. 29. • color • font-family • font-size • font-weight • font-style • text-decoration PROPIEDADES BASICAS: ESTILOS DE TEXTO Propiedad que determina si el texto es normal o en estilo itálico. Valores posibles: • italic • oblique • normal
  30. 30. • color • font-family • font-size • font-weight • font-style • text-decoration PROPIEDADES BASICAS: ESTILOS DE TEXTO Propiedad que proporciona estilos adicionales como: • underline • overline • line-through • none
  31. 31. Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector. PSEUDO-CLASSES
  32. 32. Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el selector. PSEUDOELEMENTOS
  33. 33. PRACTICA ESTILOS CSS index.html style.css <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Estilos de Texto</title> <link rel="stylesheet" href="style.css"> </head> <body> <header>Titulo de la empresa</header> <nav> <ul class="nav"> <li><a href="">Inicio</a></li> <li><a href="">Quienes somos</a></li> <li><a href="">Mision</a></li> <li><a href="">Vision</a></li> <li><a href="">Objetivos Corporativos</a></li> <li><a href="">Contactenos</a></li> </ul> </nav> <h1>Titulo de Texto</h1> <h2>Lorem ipsum ?</h2></body></html> h1 { font-size: 18px; font-weight: bold; font-style: italic; text-decoration:line-through; } .nav{ font- family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Gra nde', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; list-style: none ; } .nav a{ color: chocolate; text-decoration: none; } .nav a:hover{ background-color:yellowgreen ; color:rgb(194, 41, 21); text-decoration: none; } .nav a::after{ content: " | "; }
  34. 34. https://codepen.io/pen/

×