css:
cascade style sheets

John Cardozo

John Cardozo

css:
cascade style sheets

qué es css?

Pueden controlar múltiples páginas a la vez

Puede ser almacenado en archivos CSS

Describe cómo se muestran los elementos HTML en pantalla

HTML

CSS

Describe el contenido

Describe el estilo

sintaxis de css

selector

bloque de declaración

Regla CSS

 h1 { color: blue; font-size: 12px; }

El selector apunta a elementos HTML

El bloque de declaración contiene una o más declaraciones separadas por punto y coma (;) enmarcadas en { }

Cada declaración incluye una propiedad y un valor separados por dos puntos (:)

cómo agregar css?

atributo "style" en los tags

<p style="color: red">
  parrafo
</p>

html

inline

usa el tag "<style>" en el encabezado de la página

<head>
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p>parrafo</p>
</body>

html

interno

define el estilo en un archivo .css que se enlaza con el archivo .html

<head>
  <link rel="stylesheet"
        href="estilo.css">
</head>
<body>
  <p>parrafo</p>
</body>

html

externo

p { 
  color: red; 
}

css

estilo.css

1

2

3

4

selectores

selectores   simples

selectores de combinación

selectores de pseudo-clases

selectores de pseudo-elementos

selectores de atributos

tag, id, class

relaciones entre elementos

estado del elemento

parte del elemento

atributo

selectores simples

 a { color: red; }

selecciona todos los elementos <a>

<a href="#">link 1</a>
<a href="#">link 2</a>
#parrafo2 {
  color: red;
}
<p id="parrafo2">
  lorem
</p>
.naranja {
  color: orange;
}
<span class="naranja">lorem</span>
<h1 class="naranja">titulo</h1>
<p class="naranja">parrafo</p>

css

html

css

html

css

html

tag

id

class

selecciona el elemento con id = parrafo2

selecciona los elementos con class = articulo

selectores de combinación - I

div p {
  color: red;
}

selecciona todos los descendientes <p> de <div>

css

descendientes

div > p {
  color: red;
}

selecciona todos los hijos <p> de <div>

<div>
  <p>parrafo 1</p>
  <article>
    <p>parrafo 2</p>
  </article>
</div>
<p>parrafo 3</p>

css

html

hijos

Una regla de hijos sobre-escribe una regla de descendientes

selectores de combinación - II

a + p {
  color: green;
}

El primer <p> ubicado inmediatamente después de un <a>

<div>
  <p>parrafo 1</p>
  <a href="#">link</a>
  <p>parrafo 2</p>
  <p>parrafo 3</p>
</div>
<p>parrafo 4</p>
<p>parrafo 5</p>

css

Hermano inmediato

div ~ p {
  color: red;
}

Todos los <p> precedidos de un <div>

css

html

Hermanos precedentes

selectores de pseudo-clases

a:hover {
  color: red;
}

cuando pasa el mouse sobre el elemento

<a href="#">link</a>

css

html

mouse over

p:first-child {
  color: red;
}

cualquier <p> que se el primer hijo de cualquier elemento

<div>
  <p>parrafo</p>
  <p>parrafo</p>
</div>

css

html

primer hijo

p:nth-child(2) {
  color: red;
}

enésimo hijo de cualquier elemento

<div>
  <p>parrafo</p>
  <p>parrafo</p>
  <p>parrafo</p>  
</div>

css

html

enésimo hijo

selectores de pseudo-elementos

h1::before {
  content: "[ ";
}

agrega el texto "[ " antes de todos los <h1>

[ <h1>
  titulo
</h1>

css

html

antes

h1::after {
  content: " ]";
}

agrega el texto " ]" después de todos los <h1>

<h1>
  titulo
</h1> ]

css

html

después

h1::selection {
  color: red;
  background: yellow;
}

modifica el estilo del texto seleccionado

<h1>
  titulo
</h1>

css

html

selección

selectores de atributos

input[type="text"]{
  color: red;
}

todos los input que tengan como atributo type=text

<input type="text">
<input type="password">
<input type="text">

css

html

valor de atributo

option[selected]{
  color: red;
}

todos los <option> que tengan el atributo "selected>

<select>
  <option value="1">USA</option>
  <option value="2" selected>UK</option>
  <option value="3">Canada</option>
</select>

css

html

atributo

referencia de selectores - I

Selector Ejemplo Descripción
.class .titulo Selecciona todos los elementos con class="titulo"
#id #principal Selecciona el elemento con id="principal"
* * Selecciona todos los elementos
elemento h1 Selecciona todos los elementos <h1>
elemento, elemento h1, h2, h3 Selecciona todos los elementos h1, h2 y h3
elemento elemento div h1 Selecciona todos los <h1> descendientes de un <div>
elemento>elemento div > h1 Selecciona todos los <h1> hijos de un <div>
elemento + elemento div + p Selecciona todos los <p> que estén después de un <div>
elemento ~elemento div ~ p Selecciona todos los <p> que sean hermanos de <div>

referencia de selectores - II

Selector Ejemplo Descripción
:first-child li:first-child Selecciona todos los <p> que sean el primer hijo de su padre
:focus input:focus Selecciona todos los input que tengan el cursor en el input
:hover a:hover Selecciona los <a> que tengan el puntero del mouse encima
:last-child li:last-child Selecciona todos los <li> que sean el último hijo de su padre
:nth-child(n) li:nth-child(3) Selecciona todos los <li> que sean el 3er hijo de su papá
::after p::after Inserta contenido después de todos los <p>
::before p::before Inserta contenido antes de todos los <p>
::selection p::selection Selecciona una parte de <p> seleccionado por el usuario
[atributo] [checked] Selecciona todos los elementos que tengan el atributo "checked"
[atributo=valor] input[type="text"] Selecciona todos los elementos que tengan el atributo type="text"

colores

p {
  color: red;
}

css

color de texto

140 nombres

Nombres de colores

p {
  background: red;
}

css

color de fondo

combinación de rojo, verde y azul

rgb

Valores entre 0 y 255

Ejemplo: rgb(139, 33, 33)

Ejemplos: red, green, orange

formato: #rrggbb

Hexagesimal

Ejemplos: #8b2121, #9ee912

box model

margin

border

padding

content

bordes

p {
  border-width: 3px;
  border-color: red;
  border-style: solid;
}

css

ancho, color, estilo

p {
  border: 3px red solid;
}

css

ancho, color, estilo = shortcut

border-style

solid, dotted, dashed

p {
  border-top: 1px solid red;
  border-right: 2px dotted yellow;
  border-bottom: 4px dashed blue;
  border-left: 3px solid green;
}

css

bordes por separado

p {
  border-radius: 10px;
}

css

bordes redondeados

márgenes

p {
  margin: 10px;
}

css

márgenes generales

p {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 2px;
  margin-left: 20px;
}

css

márgenes por separado

p {
  margin: 10px 20px;
}

css

(arriba y abajo) y (izquierda y derecha)

p {
  margin: 10px 20px 5px 15px;
}

css

arriba, derecha, abajo, izquierda

espacio del borde del elemento hacia afuera

padding

p {
  padding: 10px;
}

css

padding general

p {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 2px;
  padding-left: 20px;
}

css

padding por separado

p {
  padding: 10px 20px;
}

css

(arriba y abajo) y (izquierda y derecha)

p {
  padding: 10px 20px 5px 15px;
}

css

arriba, derecha, abajo, izquierda

espacio del borde del elemento hacia adentro

texto

p {
  text-align: center;
}

css

alineación

text-align

center, left, right, justify

a {
  text-decoration: none;
}

css

decoración

text-decoration

none, underline, line-through

p {
  text-transform: uppercase;
}

css

transformación

text-transform

capitalize, uppercase, lowercase

p {
  letter-spacing: 2px;
  word-spacing: 10px;
  line-height: 20px;
}

css

espaciado

fuentes

p {
  font-family: Arial, Verdana, sans-serif;
}

familia o fuente

css

fuente

Familia Fuente
Serif Times New Roman
Sans-serif Arial
Monospace Courier New

precedencia de fuentes

fuentes: estilos y tamaños

p {
  font-style: italic;
}

font-style

css

estilo

normal, italic

p {
  font-weight: bold;
}

font-weight

css

peso

normal, bold

p {
  font-size: 10px;
}

font-size

css

tamaño

10px, 1.2rem, 10vw

google fonts

p {
  font-family: "Ubuntu";
}

css

<head>
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>

html

https://fonts.google.com/

iconos: fontawesome

<head>
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
</head>
<body>
  <i class="fas fa-home-alt"></i>
</body>

html

https://fontawesome.com/

https://fontawesome.com/icons/

Lista de iconos

icono de home

listas

ul {
  list-style-type: none;
}

tipo de marcador

css

list-style-type

none, circle, square, upper-roman, lower-alpha

ul {
  list-style-image: url('hoja.png'); 
}

imagen como marcador

css

barra de navegación: ul + li

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline;
}
nav a{
  text-decoration: none;
  color: white;
  text-align: center;
  background: tomato;
  padding: 5px 10px;
}
nav a:hover{
  background: white;
  color: tomato;
}

css

<nav>
  <ul>
    <li>
      <a href="#">inicio</a>
    </li>
    <li>
      <a href="#">nosotros</a>
    </li>
    <li>
      <a href="#">contacto</a>
    </li>
  </ul>  
</nav>

html

tablas

table, th, td {
  border: 1px solid gray;
  border-collapse: collapse;
}

bordes

css

/* Encabezado */
th {
  background-color: navy;
  color: white;
}

/* Colores alternos */
tr:nth-child(even) {
  background-color: gray;
}

/* Color: mouse encima */
tr:hover {
  background-color: blue;
}

colores

css

th {
  text-align: center;
  padding: 10px;
}

td {
  padding: 5px;
}

alineación y padding

css

VARIABLES

:root {
  --nombre-variable: #1d71ba;
}

definición

css

h1 {
  color: var(--nombre-variable);
}

definición

css

VARIABLES - ejemplo

:root {
  --color-primario: #1d71ba;
  --color-secundario: #3d7fb9;
}
h1 {
  color: var(--color-primario);
}
p {
  color: var(--color-secundario);
}
button {
  color: #fff;
  padding: 5px 10px;
  background: var(--color-primario);
  border: 1px solid var(--color-primario);
}
button:hover {
  background: var(--color-secundario);
  cursor: pointer;
}

css

css

<h1>Titulo</h1>
<p>Lorem, ipsum dolor sit amet</p>
<button>ver</button>

html

html

css grid

header

menú

footer

contenido

contenedor

css grid

header

menú

footer

contenido

1

2

3

1

2

3

4

css grid: inicio

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Inicializar CSS de la página

html

css

<div class="contenedor">
  <div class="header">header</div>
  <div class="menu">menu</div>
  <div class="contenido">contenido</div>
  <div class="footer">footer</div>
</div>

HTML inicial

.contenedor {
  width: 100vw;
  height: 100vh;
  background: violet;
}
.header {
  background: #BED5A8;
}
.menu {
  background: #AAC2C7;
}
.contenido {
  background: #AFA6D4;
}
.footer {
  background: #F8E49B;
}

Bloques iniciales

css

css grid - display: grid

.contenedor {
  display: grid;
}

Contenedor: grid

css

css grid: grid-template

.contenedor {
  display: grid;
  grid-template: 50px auto 50px / 0.3fr 1fr;
  gap: 5px;
}

Definición del grid

css

3 filas

2 columnas

px

pixeles

fr

fraction

unidades

css grid: grid-column y grid-row

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}
.menu {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}
.contenido {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
.footer {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

grid-column y grid-row

css

header

menú

footer

contenido

1

2

3

1

2

3

4

css grid: alinear items

.contenido {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  /* Definición de grid */
  display: grid;
  /* Alineación de items */
  justify-items: center;
  align-items: center;
}

justify-items y align-items

css

area

.area {
  width: 50px;
  height: 50px;
  background: black;
  color: white;
}

css

<div class="contenido">
  <div class="area">
    area
  </div>
</div>

area

html

justify-items = alineación horizontal

start, center, end

align-items = alineación vertical

place-items: center

Centrar vertical y horizontal

css grid: grid-template-areas

.header {
  background: #BED5A8;
  grid-area: header;
}

.menu {
  background: #AAC2C7;
  grid-area: menu;
}

.contenido {
  background: #AFA6D4;
  grid-area: contenido;
}

.footer {
  background: #F8E49B;
  grid-area: footer;
}

grid-area

css

.contenedor {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template: 50px auto 50px / 0.3fr 1fr;
  grid-template-areas: 
    "header header"
    "menu contenido" 
    "menu footer";
}

css

<div class="contenedor">
  <div class="header">header</div>
  <div class="menu">menu</div>
  <div class="contenido">contenido</div>
  <div class="footer">footer</div>
</div>

página

html

grid-template-areas

css FLEXbox

Flexbox provee una manera eficiente de alinear y distribuir espacio entre elementos en un contenedor, aún cuando su tamaño sea desconocido o dinámico.

Flexible

.container {
  display: flex;
}

Define un contenedor flex para todos sus hijos directos

FLEX-direction: ejes

.container {
  display: flex;
  flex-direction: row;
}

main axis

horizontal

cross axis

vertical

main axis

vertical

cross axis

horizontal

.container {
  display: flex;
  flex-direction: column;
}

main axis

main axis

cross axis

cross axis

Valor por default

alineación de items

main axis

cross axis

main axis

main axis

cross axis

cross axis

justify

align

justify content: alineación del main axis

.container {
  display: flex;
  justify-content: flex-start;
}
.container {
  display: flex;
  justify-content: flex-end;
}
.container {
  display: flex;
  justify-content: center;
}

justify content: distribución de main axis

.container {
  display: flex;
  justify-content: space-between;
}
.container {
  display: flex;
  justify-content: space-around;
}
.container {
  display: flex;
  justify-content: space-evenly;
}

align items: alineación de cross axis

.container {
  display: flex;
  align-items: flex-start;
}
.container {
  display: flex;
  align-items: flex-end;
}
.container {
  display: flex;
  align-items: center;
}

flex wrap

.container {
  display: flex;
  flex-wrap: nowrap;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

Por defecto, los items intentarán encajar en una sola línea. flex-wrap permite que los items se distribuyan en otras líneas.

align content

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

Sólo funciona cuando hay flex-wrap: wrap

Alinea las líneas del contenedor cuando hay espacio extra

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Mismos valores de align-items

align self

.container {
  display: flex;
  align-items: flex-start;
}

.item {
  align-self: flex-end;
}

Permite la alineación de un elemento y sobre-escribe la alineación del contenedor.

Alinea todos los items del contenedor a la parte superior

Sobreescribe la alineación para un item

grid + flexbox

Permite dividir el espacio disponible en filas y columnas formando una cuadrícula

GRID

FLEXBOX

Permite posicionar y alinear elementos de forma horizontal o vertical

Grid y Flexbox pueden utilizarse al mismo tiempo en una página

css: ejercicio 1

header

menú

footer

contenido

contenedor

area 1

area 2

logo

salir

css: ejercicio 2

john cardozo

johncardozo@gmail.com

Made with Slides.com