sintesis

CSS
Códigos disponibles en git

Contexto

contexto

¿Cómo?

etiquetas

Enlace

  • Externo

    • Muy recomendado porque modulariza permitiendo la reusabilidad desde muchos documentos HTML

  • Interno en metainformación

    • Poco recomendado porque no modulariza y se acopla a un único documento HTML

 
<!DOCTYPE html>
<html>
  <head>
    <!--- contenido de la cabecera -->
    <link rel="stylesheet" type="text/css"
      href="ruta/fichero.css"/>
    <!--- contenido de la cabecera -->
  </head>
  <body>
    <!--- contenido del cuerpo -->
  </body>
</html>
 
<!DOCTYPE html>
<html>
  <head>
    <!--- contenido de la cabecera -->
    <style type="text/css">
      /* reglas de estilo */
    </style>
    <!--- contenido de la cabecera -->
      <body>
    <!--- contenido del cuerpo -->
  </body>
</html>

  • Elemento link, hijo del elemento head, con atributos:

    • rel, con el valor del tipo de enlace: stylesheet, author, search, …​

    • type, con el valor del tipo de tipo de enlace: text/css, otros formatos posibles, …​

    • href, col el valor de la ruta del fichero de hojas de estilo

  • Elemento style, hijo del elemento head, con atributos:

    • type, con el valor del tipo de tipo de enlace: text/css, otros formatos posibles, …​

  • Comentarios en CSS

  • Interno en atributo style

    • Poco recomendado porque no es legible y potencialmente repite mucho código

  • Elementos no soportados de HTML

    • Nada recomendado porque desvirtua la separación del documento HTML, para la estructura de la información, y las hojas de estilo CSS, para los estilos, fuentes, colores, tamaños, …​

 
<!DOCTYPE html>
<html>
  <head>
    <!--- contenido de la cabecera -->
  </head>
  <body>
    <!--- contenido del cuerpo -->
    <elemento style="estilos:valor">
      Contenido
    </elemento>
    <!--- contenido del cuerpo -->
  </body>
</html>
 
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <elemento>
      <font color="valor" face="valor"
        size="5">Informacion</font>
    </elemento>
    ...

  • atributo style de cualquier elemento de HTML cuyo valor es una secuencia de estilos

  • elemento font, con atributos:

    • color, con el valor del color

    • size, con el valor del tamaño

    • face, col el valor de la fuente tipográfica

Regla de Estilos

expresion

  • Colisión de estilos

    • si dos estilos de la misma propiedad especifican distintos valores al mismo elemento seleccionado por distintos selectores, se aplicará de mayor a menor prioridad:

      • por mayor especificidad:

        • acumula 1000 para estilos con selector de atributos

        • acumula 100 para estilos con selector de identificador

        • acumula 10 por estilos con selector de clase o pseudo-clase

        • acumula 1 por estilos con selector de nombre o pseudo-elemento

      • ante igual especificidad, por origen de la declaración:

        • estilos configurados por el diseñador con importancia

        • estilos configurados por el diseñador con atributo style

        • estilos configurados por el diseñador con reglas de estilo internas del elemento style

        • estilos configurados por el diseñador con reglas de estilo externas del elemento link

        • estilos configurados por el usuario

        • estilos configurados por defecto del navegador

      • ante igual especificidad e igual origen, por última posición en declaración

  • Ejemplo:

selector {
    propiedad : valor ;
    propiedad : valor valor !important;(1)
    /* ... */
    propiedad : valor valor valor valor;
}
1 estilo prioritario en caso de colisión

  • Herencia de estilos

    • Si un elemento no tiene un valor especificado para una propiedad, heredará el valor de esa propiedad del elemento padre

    • El elemento raíz tiene configurados los valores de todas las propiedades según el navegador

Selectores

Selector Sintaxis

Todos los elementos

*

Elementos de un tipo

etiqueta

Elemento de un identificador

selector? \# identificador

Elemento de una clase, atributo class en elemento de HTML

selector? (. clase)+

Elemento con atributo

selector? [ atributo ]

Elemento con valor de atributo

selector? [ atributo = valor ]

Elemento con principio de valor de atributo

selector? [ atributo = (~||) valor ]

Elemento con pseudo-clases

selector? : (link|visited|hover|active|…​)

Pseudo-elementos

selector? :: (before|after|selection|first-line|first-letter)

Elementos descendientes

selector selector+

Elementos hijos

selector ( > selector)+

Elementos adyacentes

selector ( + selector)+

Unión de elementos

selector ( , selector)+

Valores

Longitudes

picas

  • Unidades Absolutas, no recomendadas!!!

    • mm, en milímetros

    • cm, en centimetros: 1cm = 10mm = 0.39in

    • in, en pulgadas: 1in = 2.54cm

    • pt, en puntos: 1pt = 1/72in = 0.014in = 0.005cm = 0.05mm

    • pc, en picas: 1pc = 12pt = 12/72in = 1/6in = 0.17cm = 1.7mm

  • Unidades Relativas, recomendadas!!!

    • px, en pixel (picture element): unidad mínima de color que forma una imagen digital dependiente del dispositivo por la resolución (pixel/pulgada) de pantalla, impresora, …​

    • %, relativo al elemento padre

    • em, relativo al tamaño de la fuente del elemento

    • rem, relativo al tamaño de la fuente del elemento raiz

    • ch, relativo al ancho del "0"

    • ex, relativo a la altura-x de la fuente de elemento, raro!!!

    • vw, relativo al 1% del ancho del dispositivo

    • vh, relativo al 1% de alto del dispositivo

    • vmin, relativo al 1% de la dimensión más pequeña del dispositivo

    • vmax, relativo al 1% de la dimensión más grande del dispositivo
unidad

Colores

newton

espectro

ojo

  • Colores aditivos, de luz

    • cuanto más color, más luz, más claridad, más blanco, …​

      • cuanto menos color, menos luz, más oscuro, más negro, …​

    • primarios: rojo, verde y azul

      • blanco, mezcla total de todos los primarios: la luz blanca es la composicion de los tres colores primarios

      • negro, ausencia total de todos los primarios: la oscuridad negra es la ausencia de todos los tres colores primarios

      • secundarios, mezcla equilibrada de dos primarios: magenta, cyan y amarillo

refraccion coloresAditivosSustractivos

Herramienta

  • Colores substractivos, de materia:

    • cuanto más color, más pintura, más tapado, más negro, …​

    • cuanto menos color, menos pintura, menos tapado, más blanco, …​

    • primarios: magenta, cyan y amarillo

      • negro, mezcla total de todos los primarios: la materia negra es la composicion de los tres colores primarios …​ pero no llega!!!

      • blanco, ausencia total de todos los primarios: la materia blanca es la ausencia de los tres colores primarios

      • secundarios, mezcla equilibrada de dos primarios: rojo, verde y azul
Hexadecimal RGB (Red Green Blue)

RgbVsHex
hexadecimal
rgb
HSL (hue, saturation, lightness) , …​ otros formatos: CMYK, HWB, …​

RgbVsHsl

hsl
hsl

  • Matiz, hue, con valores enteros, siendo el módulo resto de 360

  • Saturación, saturation, con valores entre 0 y 1 ó entre 0% y 100%

  • Luminosidad, lightness, con valores entre 0 y 1 ó entre 0% y 100%

  • Herramienta

Enumerados

cardinales

  • Cardinales

    • Norte: top

    • Sur: down

    • Este: right

    • Oeste: left

  • Fuente tipográfica

    • Nombre de Familias: Times New Roman, Arial, …​ times, courier, …​

    • Familias genéricas: serif, sans-serif, cursive, fantasy, monospace

tipografias

Propiedades

Textos

Propiedad Valor

font-style

italic | oblique | normal | inherit

font-variant

small-caps | normal | inherit

font-weight

bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | inherit

font-size

longitud | (xx-small | x-small | small | medium | large | x-large | xx-large) | (larger | smaller) | inherit

font-family

(( nombre_familia | familia_generica ) (, nombre_familia | familia_generica)* ) | inherit

font

( ( font-style || font-variant || font-weight )? font-size ( / line-height )? font-family ) | caption | icon | menu | message-box | small-caption | status-bar | inherit

color

color | inherit

text-align

left | right | center | justify | inherit

vertical-align

longitud | baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit

text-indent

longitud | inherit

letter-spacing

longitud | normal | inherit

word-spacing

longitud | normal | inherit

white-space

pre | nowrap | pre-wrap | pre-line | normal | inherit

line-height

longitud | normal | inherit

text-decoration

none | ( underline || overline || line-through || blink ) | inherit

text-transform

capitalize | uppercase | lowercase | none | inherit

texto

 
<!DOCTYPE html>
<html lang="en">
<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">
  <link rel="stylesheet" href="style.css">
  <title>Ejemplos textos</title>
</head>
<body>
  <h1>Este texto incluye: color-gold, alinacion el texto-end!</h1>
  <p class="style1"> Este texto esta en estilo de fuente - italic, variante de la fuente - small-caps, peso de la fuente - bold, tamaño de la fuente - xx-small,<br> familia de la fuente - Verdana, Geneva, Tahoma, sans-serif, color - ForestGreen, alinacion el texto - left, <br>alinacion vertical - baseline, sangrado de texto - inherit, espacio entre letras - initial, espacio entre palabras - inherit, <br>espacio en blanco - pre, altura de linea - inherit, decoracion de texto - underline, transformacion de texto - capitalize.</p>

  <p class="style2"> Este texto esta en estilo de fuente - oblique, variante de la fuente - normal, peso de la fuente - bolder, tamaño de la fuente - medium,<br> familia de la fuente - Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, color - SkyBlue, alinacion el texto - center, <br>alinacion vertical - super, sangrado de texto - initial, espacio entre letras - inherit, espacio entre palabras - normal, <br>espacio en blanco - nowrap, altura de linea - normal, decoracion de texto - solid, transformacion de texto - uppercase.</p>

  <p class="style3"> Este texto esta en estilo de fuente - normal, variante de la fuente - inherit,<br> peso de la fuente - normal, tamaño de la fuente - larger, <br>familia de la fuente - Georgia, 'Times New Roman', Times, serif, color - DodgerBlue, alinacion el texto - right,<br> alinacion vertical - text-bottom, sangrado de texto - unset, espacio entre letras - inherit, espacio entre palabras - normal,<br> espacio en blanco - nowrap, altura de linea - normal, decoracion de texto - wavy, <br>transformacion de texto - lowercase.</p>

  <p class="style4"> Este texto esta en estilo de fuente - inherit, variante de la fuente - inherit, peso de la fuente - inherit, tamaño de la fuente - xx-large, familia de la fuente - Cambria, Cochin, Georgia, Times, 'Times New Roman', serif, color - DarkGrey, alinacion el texto - justify, alinacion vertical - align:sub, sangrado de texto - initial, espacio entre letras - 3px, espacio entre palabras - initial, espacio en blanco - pre-wrap, altura de linea - initial, decoracion de texto - solid, transformacion de texto - uppercase.</p>
</body>
</html>
 
h1 {
  color:#FFD700;
  text-align:end;
  }

.style1 {
  font-style:italic;
  font-variant:small-caps ;
  font-weight: bold;
  font-size:xx-small;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #228B22;
  text-align: left;
  vertical-align: baseline;
  text-indent: inherit;
  letter-spacing: initial;
  word-spacing: inherit;
  white-space: pre;
  line-height: inherit;
  text-decoration: underline;
  text-transform: capitalize;
}

.style2 {
  font-style:oblique;
  font-variant:normal ;
  font-weight: bolder;
  font-size:medium;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: #87ceeb;
  text-align: center;
  vertical-align:super;
  text-indent:initial;
  letter-spacing:inherit;
  word-spacing:normal;
  white-space:nowrap;
  line-height:normal;
  text-decoration:solid;
  text-transform:uppercase;
}

.style3 {
  font-style:normal;
  font-variant:inherit ;
  font-weight:normal;
  font-size:larger;
  font-family:Georgia, 'Times New Roman', Times, serif;
  color: #1E90FF;
  text-align:right;
  vertical-align:text-bottom;
  text-indent:unset;
  letter-spacing:inherit;
  word-spacing:normal;
  white-space:nowrap;
  line-height:normal;
  text-decoration:wavy;
  text-transform:lowercase;
}

.style4 {
  font-style:inherit;
  font-variant:inherit;
  font-weight:inherit;
  font-size:xx-large;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: #a9a9a9;
  text-align:justify;
  vertical-align:sub;
  text-indent:initial;
  letter-spacing:3px;
  word-spacing:initial;
  white-space:pre-wrap;
  line-height:initial;
  text-decoration:solid;
  text-transform:uppercase;
}

Listas

Propiedad Valor

list-style-type

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

list-style-position

inside | outside | inherit

list-style-image

url | none | inherit

list-style

( list-style-type || list-style-position || list-style-image ) | inherit

listaOrdenada

listaDesordenada

listaDefinicion

 
body {
  color: forestgreen;
}

ol {
  list-style-type: decimal;
  list-style-position: initial;
  list-style-image: none;
}
 
body {
  color: crimson;
}

ul {
  list-style-image: url('https://mdn. mozillademos.org/files/ 11981/starsolid.gif');
  list-style-type: square;
  list-style-position: outside;
}
 
h1 {
  color: dodgerblue;
}

dd {
  color: dodgerblue;
}
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Lista ordenada</title>
</head>
<body>
  <h1>Lista ordenada</h1>
  <ol>
    <li>Enlace</li>
    <li>Regla de Estilos</li>
    <li>Selectores</li>
    <li>Valores</li>
      <ol>
        <li>Longitudes</li>
        <li>Colores</li>
        <li>Enumerados</li>
      </ol>
    <li>Propiedades</li>
      <ol>
        <li>Textos</li>
        <li>Listas</li>
        <li>Tablas</li>
        <li>Modelo de Cajas</li>
        <li>Visualuzación</li>
      </ol>
  </ol>
</body>
</html>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Lista desordenada</title>
</head>
<body>
  <h1>Lista desordenada</h1>
  <ul>
    <li>Enlace</li>
    <li>Regla de Estilos</li>
    <li>Selectores</li>
    <li>Valores</li>
      <ul>
        <li>Longitudes</li>
        <li>Colores</li>
        <li>Enumerados</li>
      </ul>
    <li>Propiedades</li>
      <ul>
        <li>Textos</li>
        <li>Listas</li>
        <li>Tablas</li>
        <li>Modelo de Cajas</li>
        <li>Visualuzación</li>
      </ul>
    </ul>
</body>
</html>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Lista definición</title>
</head>
  <body>
    <h1>Lista definición</h1>
    <dl>
      <dt>Localizador de Recursos Universal, URL</dt>
      <dd>Secuencia de caracteres, de acuerdo a una sintaxis, que se usa para localizar recursos en internet</dd>
      <dt>Lenguaje de Marcas de Hipertexto, HTML</dt>
      <dd>Para describir la estructura mediante etiquetas y el contenido en forma de texto, así como para complementarlo con imágenes, …</dd>
      <dt>Protocolo de Transerencia de Hipertextos, HTTP</dt>
      <dd>Define la sintaxis y la semántica que utilizan los elementos de software de la arquitectura web. Orientado a transacciones, sigue el esquema petición-respuesta entre un cliente y un servidor sin estado, sin guardar ninguna información sobre conexiones previas</dd>
    </dl>
  </body>
</html>

Tablas

Propiedad Valor

border-collapse

collapse | separate | inherit

tabla

border-spacing

longitud | inherit

empty-cells

show | hide | inherit

caption-side

top | bottom | inherit

 
<!DOCTYPE html>
<html lang="en">
<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">
  <link rel="stylesheet" href="style.css">
  <title>Tablas</title>
</head>
  <body>
    <table>
      <caption>
      Lenguajes de Programación
      </caption>
      <colgroup>
      <col span="3" />
      </colgroup>
      <thead>
      <tr>
        <th>Paradigma</th>
        <th>Lenguaje</th>
        <th colspan="2">Autor</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td class="paradigm" >Imperativo</td>
        <td>C</td>
        <td colspan="2">Dennis Ritchie</td>
      </tr>
      <tr>
        <td class="paradigm" rowspan="2">Orientado a Objetos</td>
        <td>Objective C</td>
        <td>Brad Cox</td>
        <td>Tom Love</td>
      </tr>
      <tr>
        <td>C++</td>
        <td colspan="2">Barjne Stroustrup</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td class="paradigmSummary">2 paradigmas</td>
        <td>3 lenguajes</td>
        <td colspan="2">4 autores</td>
      </tr>
      </tfoot>
    </table>
    </body>
</html>
 
table {
  border-collapse:separate;
  border-spacing: 2px;
  empty-cells:show;
}

caption {
  caption-side: bottom;
  font-size:xx-large;
  color: green;
}

th, td {
  text-align: center;
  font-size:xx-large;
  color: blue;
}

thead ,th{
  color: palevioletred;
}

.paradigmSummary {
  font-style: italic;
  color: greenyellow;
}

.paradigm {
  font-style: oblique;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: brown;
}

Modelo de Cajas

ejemploCajas

modeloCajas

calculoCajas

Herramienta
Propiedad Valor

width

longitud | none | inherit

max-width

longitud | none | inherit

min-width

longitud | none | inherit

height

longitud | none | inherit

max-height

longitud | none | inherit

min-height

longitud | none | inherit

background-color

color | transparent | inherit

background-image

url | none | inherit

background-repeat

repeat | repeat-x | repeat-y | no-repeat | inherit

background-attachment

scroll | fixed | inherit

background-position

( ( longitud | left | center | right ) ( longitud | top | center | bottom )? ) | ( ( left | center | right ) || ( top | center | bot_tom ) ) | inherit

background

( background-color || background-image || background-repeat || background-attachment || background-position ) | inherit

padding-top, padding-right, padding-bottom, padding-left

longitud | inherit

padding

longitud {1, 4} | inherit

border-top-width, border-right-width, border-bottom-width, border-left-width

( longitud | thin | medium | thick ) | inherit

border-width

( longitud | thin | medium | thick ) {1, 4} | inherit

border-top-color, border-right-color, border-bottom-color, border-left-color

color | transparent | inherit

border-color

( color | transparent ) {1, 4} | inherit

border-top-style, border-right-style, border-bottom-style, border-left-style

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

border-style

(none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ) {1, 4} | inherit

border-top, border-right, border-bottom, border-left

( border-width || border-color || border-style ) | inherit

border

( border-width || border-color || border-style ) | inherit

margin-top, margin-right, margin-bottom, margin-left

longitud | auto | inherit

margin

( longitud | auto ) {1, 4} | inherit

outline-width

longitud | thin | medium | thick | inherit

outline-color

color | inherit

outline-style

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

outline

outline-width || outline-color || outline-style

Visualización

Propiedad Valor
Herramienta

display

none | inline | block

position

static | relative | absolute | fixed

float

left | right | none | inherit

top

longitud | porcentaje | inherit

bottom

longitud | porcentaje | inherit

left

longitud | porcentaje | inherit

right

longitud | porcentaje | inherit

visibility

visible | hidden | collapse | initial | inherit

 
body {
  width: 80%;
  border : 1px solid black;
  position: relative;
  left: 8%;
}

.general {
  margin : 0.5%;
  padding : 0% 0.2%;
  border : 1px solid black;
}

header {
  background-color: #72c3c6;
}

nav {
  background-color: #4a8056;
}

main {
  width : 68%;
  background-color: #ba89d6;
  float: left;
}

  section {
      width: 48%;
      background-color: #e07f7f;
      float: left;
  }

      article {
          width: 47%;
          background-color: #e07f7f;
          float: left;
      }

      summary {
          width: 80%;
          margin : 5% 2.5% 2.5% 0.5%;
          padding : 0% 0.2%;
          border : 1px solid black;
          background-color: #e07f7f;
          float: right;
      }

aside {
  width : 28%;
  background-color: #7cafd6;
  float: right;
}

div.noFloat {
  clear: both;
}

footer {
  background-color: #ccaa4d;
}

p {
  margin : 1%;
}

semanticas

 
<!DOCTYPE html>
<html>
    <head>
        <title>Layout</title>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body>
        <header class="general">
            <p>header</p>
        </header>
        <nav class="general">
            <p>nav</p>
        </nav>
        <main class="general">
            <p>main</p>
            <section class="general">
                <p>section</p>
                <article class="general">
                    <p>article</p>
                </article>
                <article class="general">
                    <p>article</p>
                </article>
                <article class="general">
                    <p>article</p>
                </article>
                <div class="noFloat"></div>
                <summary>
                    <p>sumary</p>
                </summary>
            </section>
            <section class="general">
                <p>section</p>
                <article class="general">
                    <p>article</p>
                </article>
                <article class="general">
                    <p>article</p>
                </article class="general">
                <div class="noFloat"></div>
                <summary>
                    <p>sumary</p>
                </summary>
            </section>
        </main>
        <aside class="general">
            <p>aside</p>
        </aside>
        <div class="noFloat"></div>
        <footer class="general">
            <p>footer</p>
        </footer>
    </body>
</html>
Aplicacion

Sintesis

sintesis

Bibliografía

Obra, Autor y Edición Portada Obra, Autor y Edición Portada

uniwedsidad

w3schools

Ponente

  • Luis Fernández Muñoz

setillo

  • Doctor en Inteligencia Artificial por la UPM

  • Ingeniero en Informática por la UMA

  • Diplomado en Informática por la UPM

  • Profesor Titular de ETSISI de la UPM