4. 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
5. 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
6. 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
7. 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
8. 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
9. 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
12. •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
14. •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
15. •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
16. •Los estilos en línea se utilizan principalmente cuando se desea
redefinirelformato dealgúnelementoenparticular
• Seutilizaelatributo “style”deun elemento HTML
DEFINICION DE ESTILOS CSS
19. 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
27. 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;
}
28. • 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
30. • 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
31. • 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
33. 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
34. 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