WE-03.2-Cascading Style Sheet

Ingeniería Web
Introducción a Hojas de estilo en Cascada Prof. Edwin Valencia Castillo

Departamento de Sistemas
Cascading Style Sheets (CSS) Facultad de Ingeniería
Universidad Nacional de Cajamarca
2020
Ingeniería web
Objetivos de la sesión
✓En este capítulo, aprenderas acerca de:
➢Listar las ventajas de usar Cascading Style Sheets
➢Crear hojas de estilo que configuren texto y color comunes
➢Aplicar estilos en linea
➢Utilizar hojas de estilo embebidas
➢Utilizar hojas de estilo externas
➢Crear clases CSS y selectores id
➢Validar CSS
Ingeniería web
Una aplicación web
✓HTML <!DOCTYPE html>

<html>
✓Lenguaje de marcado <head>
<meta charset="UTF-8">
✓CSS <title>HTML5</title>
✓Estilo de visualización <style type="text/css">

body {
✓JavaScript }
color: blue;
</style>
✓Lenguaje de programación
</head>
<body>
<h3>Fecha y hora</h3>
<script>
document.write(new Date());
</script>
</body>
</html>
Ingeniería web
Visión General Cascading Style Sheets (CSS)

✓Hojas de Estilo
➢Usado por años en la autoedicion de escritorio aplicando estilos tipograficos y
espaciamiento en medios impresos
✓CSS
➢Para los desarrolladores web proporciona la funcionalidad de hojas de estilo (y
mucho mas)
➢Un lenguaje flexible, multiplataforma y basado en estandares desarrollado por el
W3C.
Ingeniería web
Ventajas de CSS
✓Mayor control tipografico y diseño de pagina
✓El estilo esta separado de la estructura
✓El estilo puede ser almacenado en un documeto separado y enlazado
desde la pagina web
✓Documentos potencialmente mas pequeños
✓Mantenimiento del sitio mucho mas facil
Ingeniería web
Proceso de HTML y CSS en un navegador

Ingeniería web
Niveles de Hojas de Estilo en Cascada (1)

✓Estilos en línea (no recomendada)
✓Estilos embebidos (documento)
✓Estilos externos
✓Estilos importados
Ingeniería web

✓Estilos en linea
➢Configurado en el cuerpo de la pagina web
➢Uso del atributo style en una etiqueta HTML
➢Se aplica solo a elementos específicos
✓Estilos Embebidos (documento)
➢Configurado en la sección header de la pagina web.
➢Uso del elemento HTML <style>
➢Se aplica al documento completo de la pagina web
Ingeniería web

✓Estilos Externos
➢Configurado en un archivo de texto separado, con extension .css
➢El elemento HTML <link /> en la seccion header de la pagina web se asocia con el
archivo .css
✓Estilos Importados
➢Similar a los Estilos Externos, utiliza la directiva @import
• @import url(nombre del archivo);
➢Nos concentraremos en los otros tres tipos de estilos
Ingeniería web
CSS Sintaxis y Selectores

Sintaxis selector { property:value; }
declaration
Sintaxis en linea <tagname style="property:value;">content</tagname>

Selectores
Selector de Tipo: Selecciona un grupo de elementos <h1>...</h1>
a traves de su nombre h1 { font-size: 12pt; }
<p id="first">…</p>
Selector ID: Selecciona un elemento único via id (‘#’) #first { color: red; }
Selector de Clase: Selecciona un grupo de <p class="small">…</p>

<h1 class="small">…<h1/>
elementos a través de class (‘.’) .small { font-size: 5pt; }
September 9, 2020 10
Ingeniería web
Configurando Color con CSS en linea (1)

✓El atributo Style
➢Valor: Uno o mas declaraciones de estilo de par propiedad y valor
Ejemplo 1: configurando texto de color rojo en un elemento <h1>:

<h1 style="color:#ff0000">Heading text is red</h1>
Ingeniería web
Configurando Color con CSS en linea (2)
Ejemplo 2: Configurar el titulo del texto en rojo

Configurar el titulo con fondo gris
Las declaraciones de las reglas de estilo se separan con ;

<h1 style="color:#FF0000;background-color:#cccccc">This
is displayed as a red heading with gray background</h1>
Ingeniería web
Valores de la propiedad Color

✓Nombres de color: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow
✓Codigos RGB: red, green, and blue valores desde 0 (none) hasta 255 (full)
✓Codigos hex: Valores RGB en base16 desde 00 (0, none) hasta FF (255,
full)
Ingeniería web
Sintaxis CSS embebida (documento)

✓Las hojas de estilo estan compuestas por "Reglas" que describen el estilo
a ser aplicado.
✓Cada regla contiene un selector y un bloque de declaración.
Ingeniería web
Ejemplo de sintaxis CSS

✓Configurar una pagina web para visualizar texto azul y fondo amarillo.
body { color: blue;
background-color: yellow; }
✓Esto también puede ser escrito usando valores de color hexadecimal
como se muestra a continuación.
body { color: #0000FF;
background-color: #FFFF00; }
Ingeniería web
Estilos CSS embebidos

✓Configurado en la seccion header de la pagina web.
✓Utiliza el elemento HTML <style>
✓Se aplica al documento completo de la pagina web
✓Las declaraciones de estilo son contenidas entre entiquetas <style> de
apertura y cierre.
✓El atributo type indica el tipo MIME, text/css
✓Ejemplo: Configurar una pagina web con texto blanco en un fondo negro
Ingeniería web
Control 1
✓Describa una ventaja de utilizar estilos embebidos en lugar de estilos en
linea
Ingeniería web
Propiedades comunes de formato CSS

font-family: Arial, sans-serif;
✓Formatting Text/Fonts font-style: italic;
➢Font family, style, size, and weight font-size: 1.2em;
font-weight: bold;
➢Color color: #00ff00;
line-height: 120%;
➢Line Height text-alignment: center;
➢Text Alignment
✓Background background-color:
➢Color rgb(250,20,16); background-
image: url("bg.jpg");
➢Image, Repeat, Attachment, Position background-repeat: repeat-x;
✓Lists background-position: right top;
➢Item marker or Image list-style-type: circle;

list-style-image: url('logo.gif');
✓Borders
➢Rounded corners border: 2px solid #A1A1A1;
border-radius: 25px;
➢Shadow
border: 1px solid black;
box-shadow: 3px 3px 3px #FF9900;
September 9, 2020 18
Ingeniería web
Configurando Texto con CSS

✓Las propiedades CSS para configurar texto son:
➢font-weight
• Configura la fuerza del texto
➢font-style
• Configura el texto a un tipo de letra cursiva
➢font-size
• Configura el tamaño del texto
➢font-family
• Configura el tipo de letra del texto
Ingeniería web
La propiedad font-size
✓Recomendación de Accesibilidad:
➢Utilice los tamaños de fuente porcentuales, estos pueden ser facilmente
ampliados en todos los navegadores por los usuarios
Ingeniería web
La propiedad font-family
✓No todos tienen las mismas fuentes instaladas en sus computadores

✓Configurar una lista de fuentes e incluir un nombre de familia genérico
➢p {font-family: Arial,Verdana, sans-serif;}
Ingeniería web
La propiedad font-family
✓Abreviaturas de Fuente
✓Para especificar una lista de propiedades de fuente
fuente: bolder 14pt Arial Helvetica
✓El orden debe ser: estilo, grosor, tamaño y nombre(s) de fuente
Ingeniería web
Selectores CSS
✓Las reglas de estilo CSS se pueden configurar para un:
➢Selector de elemento HTML (selector simple)
➢Selector de clase
➢Selector de identificacion
Ingeniería web
Selectores de elementos HTML

✓El selector es un nombre de etiqueta o una lista de nombres de etiqueta,
separados por comas
p { color: blue; }
h1, h2, h3, h4 { font-style: italic; }
/*(agrupamiento)*/
✓Selectores contextuales (descendente)
body ol li{ font-weight: bold; }
Ingeniería web
Selector de clase genérico

✓Aplica una regla CSS a
cierta "clase" de elementos
en una pagina web
✓No asocia el estilo a un
elemento particular HTML
✓Se configura con .classname
➢En el ejemplo se crea una clase llamada “new” con texto en cursiva de color rojo.
✓Para utilizar la clase, codificar el siguiente HTML:
<p class=“new”>This is text is red and in italics</p>
Ingeniería web
Elementos del selector de clase

✓Un estilo de clase tiene un nombre, que se adjunta a un nombre de
etiqueta.
p.narrow {propiedad/lista de valores}
p.wide {propiedad/lista de valores}
Ingeniería web
Selector id
✓Aplica una regla CSS a un UNICO elemento en una pagina web.
✓Se configura con #idname
• El ejemplo crea un id llamado “new” con

texto rojo de gran tamaño y cursiva.
• Para usar el id, codificar el siguiente HTML:
<p id=“new”>This is text is red, large, and in
italics</p>
Ingeniería web
Pseudo clases CSS

✓Las pseudo clases son estilos que se aplican cuando algo sucede y no
porque el elemento de destino simplemente exista.
✓Los nombre empiezan con dos puntos
➢a:link – Enlace no visitado o activado por el usuario
➢a:hover – Cuando se coloca el ratón sobre el enlace
➢a:active – Cuando se pincha sobre el enlace
➢a:visited – Enlace ya visitado por el usuario
Ingeniería web
Pseudo clases CSS

Ingeniería web
Hojas de estilo externas - 1

✓Las reglas de estilo CSS son contenidas en un archivo de texto separado
de los documentos HTML.
✓El archivo de texto de la hoja de estilo externa tiene:
➢extension ".css"
➢Contiene solo reglas de estilo
➢No contiene etiquetas HTML
Ingeniería web
Hojas de estilo externas - 2

✓Multiples paginas web pueden asociarse con el mismo archivo de hojas
de estilo externa.
site.css
Ingeniería web
El elemento <link />

✓Una etiqueta autocontenida
✓Colocado en la seccion header
✓Proposito: asociar el archivo de la hoja de estilo externa con la pagina
web.
✓Ejemplo:
<link rel="stylesheet" href="styles/miestilo.css">

Ingeniería web
Usando una hoja de estilos externa

✓Hoja de estilos externa color.css
Para enlazar una hoja de estilo externa llamada color.css, el codigo

HTML colocado en la seccion header sería:
<link rel="stylesheet" href=“color.css">

Ingeniería web
Cascada de estilos
✓¿Qué ocurre cuando hay dos declaraciones contradictorias?
p { color: red; }
p { color: blue; }
✓En general, la regla básica es:
➢Cuanto más específico sea un selector, más importancia tiene su regla asociada
➢A igual especificidad, se considera la última regla indicada
• De ficheros externos a estilos dentro del propio elemento
• En una lista de reglas en el mismo ámbito, se elige la última
Ingeniería web
Consejos para solucionar problemas CSS

✓Verificar que estan usando los simbolos : y ; en los lugares adecuados —
son faciles de confundir.
✓Comprueba que no estes usando el signo = en lugar de los : entre cada
propiedad y su valor.
✓Verifica que los simbolos { y } son colocados apropiadamente
✓Verifica la sintaxis de los selectores, sus propiedades y valores de las
propiedades para su uso correcto.
✓Si una parte de tu CSS trabaja y una parte no:
➢Revisa el CSS
➢Determina la primera regla que no se aplica.
• A menudo el error esta en la regla anterior a la regla que no se aplica.
✓ Valida tu CSS en http://jigsaw.w3.org/css-validator
Ingeniería web
Validacion CSS del W3C

✓https://jigsaw.w3.org/css-validator/
Ingeniería web
Resumen
✓Se ha introducido las reglas de estilo en cascada asociadas con color y
texto en paginas web.
✓Has configurado estilos en linea, estilos embebidos y estilos externos.
✓Has aplicado reglas de estilo CSS a selectores HTML, clases, y selectores
de identificacion (id).
✓Estas en condiciones de hacer una trabajo usando CSS
Ingeniería web
Laboratorio 03
✓Implementar lo visto en clase, en su proyecto personal y publicarlo en
github, con los siguientes requisitos:
➢El nombre del archivo css: estilopersonal.css
➢Utilizar colores y fondos para las diversas etiquetas utilizadas, se evalúa
presentación, manejo pertinente de colores y fuentes, estructurar sus paginas web
con un header, footer fijo y organice de manera pertinente el contenido de su
página.
✓Presentar en el SIA:
➢URL de la pagina personal y url del proyecto en github
➢Captura de pantalla del árbol de proyecto en visual studio code
➢Captura de pantalla de la validación de código HTML
➢Captura de pantalla de la validación de código CSS
Ingeniería web
Caracterización de los estilos

✓Unidades de medida y colores
✓Posicionamiento y visualización
➢Modelo de cajas
➢Modelo de posicionamiento
➢Propiedades de visualización
✓Estilos de los elementos
➢Texto
➢Enlaces --> con las pseudoclases a:link, a:hover, a:active, a:visited
➢Imágenes
➢Listas
➢Tablas
➢Formularios
Ingeniería web
Unidades de medida
✓Para definir la altura, anchura, márgenes, tamaño de letra, …
✓Los valores se expresan como números enteros o con decimales
✓Unidades absolutas
➢cm, centímetros
➢mm, milímetros
➢in, pulgadas (inches). 1in==2.54cm
➢pt, puntos. 1pt==0.35mm (la más utilizada)
➢pc, picas. 1pc==12 pt
✓Unidades relativas
➢em, relativa respecto al tamaño de letra del elemento
• Si el font-size es de 12pt, 1em==12pt
➢ex, relativa respecto a la altura de la letra x minúscula
➢px, (píxel) relativa respecto a la resolución de la pantalla del dispositivo (respecto al tamaño del canvas)
✓Porcentajes
➢Valor numérico seguido del símbolo %
• p { font‐size: 150% /* 150% del valor del padre */
• padding: 50% } /* 50% del width del padre */
Ingeniería web
Colores
✓Los colores se pueden especificar de varias maneras:
➢Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
orange, purple, red, silver, teal, white, yellow.
➢RGB hexadecimal: #ff0000 (la más habitual)
➢RGB decimal: rgb(255,0,0)
➢RGB porcentual: rgb(100%, 0%, 0%)
Ingeniería web
El modelo de cajas
✓Para cada etiqueta HTML se crea una caja rectangular que encierra los
contenidos de ese elemento
✓El tamaño de cada área (margin, border, padding) se define con
propiedades relativas a las cuatro direcciones:
➢top, bottom, left, right (margen)
• margin: 10px /* Propiedad resumida */ (borde)
• margin‐top: 20px; (relleno)
• margin‐right: 20px;
color background
Incoloro, transparente
Ingeniería web
El modelo de cajas
✓El tamaño del contenido se define con:
➢width
➢height
• <medida>
• <porcentaje>
• auto: lo ajusta el navegador
• inherit: valor del elemento padre
✓Propiedades del borde
➢Estilo del borde: border-style
➢none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
➢Anchura: border-width
➢Color: border-color
➢Lados individuales: border-top-style, border-right-style, border-bottom-style, border-left-
style
➢Resumen: border
• ( <medida_borde> || <color_borde> || <estilo_borde> ) | inherit
➢CSS3 añade bordes redondeados y sombras
Ingeniería web
El modelo de cajas
✓Fondo
➢Un color: background-color
• <color> | transparent | inherit
➢Una imagen: background-image
• <url> | none | inherit
• La imagen se puede repetir, esto se controla con background-repeat
• repeat | repeat-x | repeat-y | no-repeat | inherit
• Qué ocurre con la imagen de fondo cuando se hace scrolling en la página: background-attachment
• scroll | fixed | inherit
➢Todas las propiedades: background
• (<background-color> | |< background-image > | | < background-repeat> | | < background-
attachment> | | < background-position> ) | inherit
Ingeniería web
Ejercicio
CSS
/* General styles */
body {
margin: 0;
HTML }
<div id="wrapper"> #wrapper * {
padding: 20px;
<header>Header</header> font-size: 20px;
<main>Main content</main> border: 20px solid rgba(0,0,0,0.5);
}
<footer>Footer</footer>
</div> /* specific boxes */
#wrapper header, #wrapper footer {
background-color: blue;
color: white;
}
#wrapper main {
background-color: yellow;
}
#wrapper header {
}
#wrapper footer {
}
Ingeniería web
El modelo de posicionamiento
✓Tipos de elementos
➢De bloque
• Siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea
• address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes,
noscript, ol, p, pre, table, ul
➢En línea
• Sólo ocupan el espacio necesario para mostrar sus contenidos
• Se pueden insertar en elementos de bloque y de línea
• a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s,
samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
✓Para cada elemento se genera una caja
➢La caja de un elemento contiene las cajas de los elementos que contiene
➢El elemento raíz del documento (<body>) genera una caja que sirve como bloque
contenedor inicial para el resto de elementos
Ingeniería web
Tipos de posicionamiento
✓Una caja se puede colocar según uno de los siguientes modos:
➢position: static
• Normal o estático: es el modo de posicionamiento habitual
➢position: relative
• Como el posicionamiento normal pero la caja se desplaza según los atributos left, right, top, bottom
➢position: absolute
• La caja se coloca de manera absoluta con respecto a la primera caja contenedora no estática según los
valores left, right, top, bottom
• Si no estuviera contenido en ninguna caja no estática tomaría <body>
• El atributo z-index permite controlar como se apilan las cajas
• Las cajas que queden debajo se ocultarán
➢position: fixed
• Tipo de posicionamiento absoluto, pero la caja mantiene su posición y no se mueve cuando se usan las
barras de desplazamiento
➢float
• Posicionamiento flotante: Desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la
línea en la que se encuentran.
Ingeniería web
Posicionamiento normal (estático)

✓Las cajas se colocan seguidas verticalmente de arriba abajo, en el orden en el
que aparecen los elementos correspondientes en el documento
➢Sólo se tiene en cuenta si el elemento es de bloque o en línea, sus propiedades width y
height y su contenido
➢Si las cajas en línea ocupan más espacio del disponible en su propia línea, el resto de cajas
se muestran en las líneas inferiores. Si las cajas en línea ocupan un espacio menor que su
propia línea, se puede controlar la distribución de las cajas mediante la propiedad text-
align para centrarlas, alinearlas a la derecha o justificarlas.
Ingeniería web
Posicionamiento relativo
✓ La caja se desplaza respecto de su posición normal según se indica en las propiedades top, right, bottom y left
➢ Por defecto top, right, botton y left tienen el valor auto
➢ El valor positivo de alguno de estos valores implica un desplazamiento
• top hacia abajo desde el borde superior, bottom hacia arriba
• left hacia la derecha desde el borde izquierdo, right hacia la izquierda
✓ Las cajas desplazadas de forma relativa no modifican su tamaño
➢ Las propiedades left y right siempre cumplen que left = -right
• Si left es auto, su valor será –right
• Si left y right tienen valores no compatibles se toma el que determine la propiedad direction (ltr o rtl)
✓ El resto de las cajas no se ven afectadas
✓ En la imagen anterior, la caja 2 se ha desplazado lateralmente hacia la derecha y verticalmente de forma descendente. Como el resto de
cajas de la página no modifican su posición, se producen solapamientos entre los contenidos de las cajas.
https://uniwebsidad.com/libros/css/capitulo-5/posicionamiento-relativo
Ingeniería web
Posicionamiento absoluto
✓La posición de la caja se determina con las propiedades top, right, bottom y left
respecto al primer elemento contenedor no estático
➢Si no hubiera un contenedor posicionado, entonces se usa la ventana del navegador como
referencia
➢Para que el contenedor se considere posicionado basta con declararle position: relative
✓El resto de las cajas sí pueden verse afectadas
➢Pasan a ocupar la posición que ha dejado la anterior
➢Se pueden producir solapamientos
https://uniwebsidad.com/libros/css/capitulo-
5/posicionamiento-absoluto
➢La caja 2 está posicionada de forma absoluta, lo que provoca que el resto de elementos de la
página modifiquen su posición. En concreto, la caja 3 deja su lugar original y pasa a ocupar el hueco
dejado por la caja 2.
Ingeniería web
Posicionamiento fijo
✓Igual que el anterior pero las cajas correspondientes no se mueven en la
pantalla del navegador aun cuando se usen las barras de desplazamiento
✓Puede servir por ejemplo en el medio print para imprimir páginas con
encabezado y pie de página
Ingeniería web
Posicionamiento flotante
✓Una caja flotante se declara con float:right o float:left
✓Una caja flotante se desplaza horizontalmente
➢Hasta la zona más a la izquierda o más a la derecha posible
➢Si hay otras cajas flotantes, se van colocando seguidas
➢Si no existe sitio en la línea actual, la caja flotante baja a la línea inferior hasta que
encuentra el sitio necesario para mostrarse lo más a la izquierda o lo más a la derecha
posible en esa nueva línea
✓La caja deja de pertenecer al flujo normal de la página, lo que significa que el
resto de cajas ocupan el lugar que ha dejado
➢Para que un elemento no se vea afectado por lo que hagan las cajas flotantes a su
alrededor puede definir la propiedad clear que fuerza a que el elemento se muestre
debajo de cualquier caja flotante
➢Atributos de clear: none | left | right | both | inherit
• Si clear: left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en
la que no haya ninguna caja flotante en el lado izquierdo
• Si clear: both, el elemento se colocará debajo de cualquier caja flotante
Ingeniería web
https://uniwebsidad.com/libros/css/capitulo-5/posicionamiento-flotante
Ingeniería web
✓Uno de los principales motivos para la creación del posicionamiento float fue colocar
imágenes alrededor de las cuales fluye el texto
✓Los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos
para que fluyan alrededor del elemento posicionado
✓Con clear se consigue que un contenido no fluya alrededor de un contenido float sino que se
muestre debajo
https://uniwebsidad.com/libros/css/capitulo-5/posicionamiento-flotante
Ingeniería web
Estructura de la página
✓Las etiquetas <div> y <span> en principio no tienen ningún significado
para la presentación
➢Solo agrupan elementos
• <div> a nivel de bloque
• <span> a nivel de línea
✓Combinados con selectores de clase permiten estructurar la aplicación
de estilos en una página
✓Para estructurar una página
➢Definir bloques con <div> y su composición
• A cada bloque asignarle una clase o un id
• Cada bloque <div> puede constar de otros bloques <div>
• A nivel de línea se pueden definir cajas con <span>
➢Asociar propiedades de posicionamiento y visualización a cada una de las cajas
definidas con clase o id
Ingeniería web
Representación visual del modelo de cajas tradicional
Ahora aplicaremos estilos

que permitan configurar
las cajas según el modelo
presentado
Ingeniería web
Trucos de posicionamiento
✓Centrar una página horizontalmente con ancho determinado
➢Agrupar todos los contenidos de la página en un elemento <div>
➢Asignarle a ese <div> unos márgenes laterales automáticos con la propiedad
margin de CSS
<body>
#contenedor { <div id="contenedor">
width: 400px; <h1>Sección 1</h1>
margin: 0 auto; <p> bla bla bla </p>
} ...
</div>
</body>
http://librosweb.es/css/capitulo_12/centrar_una_pagina_horizontalmente.html
Ingeniería web
Iconos personalizados con fuentes y CSS

✓Seleccionar los iconos a utilizar
➢https://icomoon.io/
✓Exportar como fuentes, en preferences cambiar nombre del archivo
✓Ubicar el archivo de fuentes en nuestro proyecto, modificar el archivo
style.css con la ruta correcta
<link rel="stylesheet" href="fonts/iconfonts/font-mfizz-2.4.1/font-mfizz.css">
<style>
h1 span { color:blue; margin-right: 20px; font-size: 10px;
}
<style/>
✓Probar
➢<h1> <span class=“icon-user” ><span/>Usando iconos personalizados<h1/>
Ingeniería web
Crear botones flat con iconos CSS

✓Tener como referencia una paleta de colores
➢https://flatuicolors.com/
✓Con la referencia anterior
<a href=“#” class=“button”>Inicio <a/>
✓Agregar el estilo
<style>
* { margin:0; padding:0; }
/*Estilos generales */
.button {
background: color;
color: color;
display:inline-block;
}
<style/>
Ingeniería web
OOCSS Object Oriented CSS

✓OOCSS se basa en la creación de clases orientadas a objetos, en su más
mínima expresión. Como por ejemplo crear clases para colores de texto o
de fondo, etc.
✓Dejar de escribir ID para utilizarlos como selectores CSS, solo se debe
utilizar para el uso de formularios y cosas por el estilo.
✓Utilizar clases ya que nos otorgan grandes ventajas respecto a los ID, en
primer lugar las clases se pueden repetir en varios elementos, los ID no
Ingeniería web

✓La buena practica es eliminar propiedades en común, veamos el ejemplo
CODIGO HTML CODIGO CSS
<div class="caja1"></div> .caja1 {
<div class="caja2"></div> background: #302f2f;
display: inline-block;
width: 200px;
height: 200px;
margin: 20px;
}
.caja2 {
background: #4a88f4;
width: 200px;
height: 200px;
margin: 20px;
}
Ingeniería web

✓El ejemplo anterior se puede CODIGO CSS
.caja {
mejorar usando OOCSS background: #272f2f;
CODIGO HTML width: 200px;
height: 200px;
<div class="caja azul"></div> margin: 20px;
<div class="caja }
naranja"></div> .azul {
<div class="caja verde"></div> background: #4a88f4;
}
.naranja {
background:#e67e22;
}
.verde {
background:#27ae60;
}
Ingeniería web
Barra social fija

✓CODIGO HTML
<div class="social">
<ul>
<li><a href="http://www.facebook.com/usuario" target="_blank" class="icon-facebook"></a></li>
<li><a href="http://www.twitter.com/usuario" target="_blank" class="icon-twitter"></a></li>
<li><a href="http://www.googleplus.com/usuario" target="_blank" class="icon-google"></a></li>
<li><a href="http://www.pinterest.com/usuario" target="_blank" class="icon-pinterest"></a></li>
<li><a href="mailto:contacto@dominio.com" class="icon-mail"></a></li>
</ul>
</div>
Ingeniería web
Ejercicio final
Ingeniería web
Ejercicio

WE-03.2-Cascading Style Sheet

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

WE-03.2-Cascading Style Sheet

Cargado por

Copyright:

Formatos disponibles

Ingeniería Web

Introducción a Hojas de estilo en Cascada Prof. Edwin Valencia Castillo

Una aplicación web

✓HTML <!DOCTYPE html>

✓Estilo de visualización <style type="text/css">

Visión General Cascading Style Sheets (CSS)

Proceso de HTML y CSS en un navegador

Niveles de Hojas de Estilo en Cascada (1)

Niveles de Hojas de Estilo en Cascada (2)

Niveles de Hojas de Estilo en Cascada (3)

CSS Sintaxis y Selectores

Sintaxis en linea <tagname style="property:value;">content</tagname>

Selector de Clase: Selecciona un grupo de <p class="small">…</p>

Configurando Color con CSS en linea (1)

Ejemplo 1: configurando texto de color rojo en un elemento <h1>:

Configurando Color con CSS en linea (2)

Ejemplo 2: Configurar el titulo del texto en rojo

Las declaraciones de las reglas de estilo se separan con ;

Valores de la propiedad Color

Sintaxis CSS embebida (documento)

Ejemplo de sintaxis CSS

Estilos CSS embebidos

Propiedades comunes de formato CSS

➢Item marker or Image list-style-type: circle;

Configurando Texto con CSS

✓No todos tienen las mismas fuentes instaladas en sus computadores

Selectores de elementos HTML

Selector de clase genérico

Elementos del selector de clase

• El ejemplo crea un id llamado “new” con

Pseudo clases CSS

Pseudo clases CSS

Hojas de estilo externas - 1

Hojas de estilo externas - 2

El elemento <link />

<link rel="stylesheet" href="styles/miestilo.css">

Usando una hoja de estilos externa

Para enlazar una hoja de estilo externa llamada color.css, el codigo

<link rel="stylesheet" href=“color.css">

Consejos para solucionar problemas CSS

Validacion CSS del W3C

Caracterización de los estilos

• margin‐top: 20px; (relleno)

Posicionamiento normal (estático)

Representación visual del modelo de cajas tradicional

Ahora aplicaremos estilos

Iconos personalizados con fuentes y CSS

Crear botones flat con iconos CSS

OOCSS Object Oriented CSS

OOCSS Object Oriented CSS

OOCSS Object Oriented CSS

Barra social fija

También podría gustarte