Semana 3 Introduccion CSS

HOJAS DE ESTILO
EN CASCADA
Mg. Richard E. Mendoza G.

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
• 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

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

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

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

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

•Unaclasees utilizadaparadefinirlos estilos deun grupo de
Elementos
•Unaclaseusaelatributo “class”deun elemento HTML y en
CSS sedefinecon elsímbolo .
SINTAXIS CSS

•Tambiénes posible especificarqueciertos elementossean
modificados por unaclaseen particular
• NO utilizarnúmeros alinicio delnombre deunaclase
SINTAXIS CSS

•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

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

•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

•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”

•Los estilos en línea se utilizan principalmente cuando se desea
redefinirelformato dealgúnelementoenparticular
• Seutilizaelatributo “style”deun elemento HTML

https://cssreference.io

https://i.emezeta.com/weblog/css3-cheatsheet/css3-cheatsheet-2017-emezeta.pdf

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

h1 {
font-size: 20px;
}
Selector
Valor
Propiedad
TERMINOLOGIA CSS

1. Por identificador
2. Por clase
3. Por nombre de
etiqueta
4. Por jerarquía
5. Por agrupación
MANEJO DE CSS

<p id="introduccion">Lorem ipsum</p>
#introduccion{
color: # 3300FF;
}
HTML
CSS
POR IDENTIFICADOR

<p class="grande">Lorem ipsum</p>
.grande{
font-size: 40px;
}
CSS
HTML
POR CLASE

<h1>Lorem ipsum</h1>
h1{
font-family: Verdana;
}
CSS
HTML
POR NOMBRE DE ETIQUETA

<p><strong>Lorem</strong>ipsum</p>
p strong{
color:#AAAAAA;
}
CSS
HTML
POR JERARQUIA

<p id="primero">Lorem ipsum</p>
<p id="segundo">Lorem ipsum</p>
# primero, # segundo{
color:#336600;
}
CSS
HTML
POR AGRUPACION

<!DOCTYPE html>
<html lang="es">
<head>
<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;
}

• 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

• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
ESTILOS DE TEXTO
Propiedad que determina si
el texto es normal o en estilo
bold. Valores posibles:
• bold
• normal
• 100
• 900

• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
ESTILOS DE TEXTO
Propiedad que determina si
el texto es normal o en estilo
itálico. Valores posibles:
• italic
• oblique
• normal

• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
ESTILOS DE TEXTO
Propiedad que
proporciona estilos
adicionales como:
• underline
• overline
• line-through
• none

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

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

<!DOCTYPE html>
<html lang="es">
<head>
<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: " | ";
}

https://codepen.io/pen/

Semana 3 Introduccion CSS

Más contenido relacionado

La actualidad más candente (20)

Similar a Semana 3 Introduccion CSS (20)

Más de Richard Eliseo Mendoza Gafaro (20)

Último (20)

Semana 3 Introduccion CSS