sesión 2: css y html fase 2 presenta: josé miguel gómez ingeniero de sistemas – universidad de...

S

Sesión 2: CSS y HTML fase 2

Presenta:José Miguel Gómez

Ingeniero de Sistemas – Universidad de Los Andes

Plan de trabajo

Introducción a CSS

Ejemplos de trabajo CSS

Que es CSS?

Cascading Styles Sheet: Una de las muchas maneras de estilizar y presentar documentos HTML.

HTML define el contenido, CSS define la presentación del contenido

La manera de “programar” estilos no es igual a HTML, pero es bastante sencillo.

Facilita la unificación de estilos entre muchas paginas.

Que es CSS?

CSS resuelve varios problemas implícitos en el diseño de paginas web en HTML. En vez de tener que definir tipo de texto, colores, fondos y otros ítems para cada uno de los párrafos, CSS me ahorra el trabajo y me permite definir esta clase de cosas para grupos implícitos en HTML.

Que es CSS?

Puedo aplicar CSS directamente en los elementos dentro del HTML

Por ejemplo, para cambiar el color de la letra de un párrafo, aplico CSS a la etiqueta P

<p style=“color: red”>este es mi párrafo rojo</p>

Esto solamente vuelve ESE párrafo en especifico de color rojo.

QUE PASA SI YO QUIERO QUE TODOS LOS PARRAFOS DE MI PAGINA SEAN ROJOS?

Que es CSS?

<head><title>Titulo de mi pagina</title><style>p {color: red;}a {color: green;}</style>…

Que ocurre? Todos mis párrafos (P) rojos, todos mis vínculos (A) verdes.

OJO: note LOS CORCHETES {} y los PUNTO Y COMA ;

Que pasa si yo tengo muchas paginas y quiero que TODAS tengan sus párrafos rojos sin tener que volver a escribir lo mismo en cada una de mis paginas?

Que es CSS?

Creo un archivo separado llamado xxxxx.css

p {color: red;}a {color: green;}…

y luego en la pagina HTML donde quiero aplicar el estilo, hago lo siguiente

<head><title>Titulo de mi pagina</title><link rel=“stylesheet” href=“xxxxx.css”>

Que ocurre? Todos mis párrafos (P) rojos, todos mis vínculos (A) verdes en todas las paginas donde yo aplique ese vinculo.

Que es CSS?

Sintaxis para CSS

selector {parametro1: valor1; parametro2: valor2; …}

y al igual que en HTML, también puedo incluir comentarios

/* esto es un comentario */

Que es CSS?

Quien tiene la prioridad?

Ej. Si yo tengo un archivo CSS que define un estilo para P, y en mi pagina defino otro valor para P, quien “gana” en esa batalla?

LA PRIORIDAD SIEMPRE LA TIENE EL CSS INTERNO

De manera que puedo hacer cambios breves o cambios rapidos a una parte en especifico, sin necesidad de redefinir el CSS externo.


TIPO DE VALOR (DOS PUNTOS) VALOR (PUNTO Y COMA)

body {color: red;font-size: 14px;}


Note la estructura básica de CSS:Defino la propiedad (ej: P para párrafo)Los valores de estilo para la propiedad dentro de corchetes {}

TIPO DE VALOR (DOS PUNTOS) VALOR (PUNTO Y COMA)

body {color: red;font-size: 14px;}

Quien puede decirme que hace la regla CSS en el ejemplo anterior?


Tamaños y porcentajes:

-Px PIXELES (12px) = 12 pixeles-em MULTIPLICADOR (2em) = 2 veces el tamaño actual-pt PUNTOS (12pt) = 12 puntos-% PORCENTAJE (12%) = 12 por ciento

OJO: hay tamaños que no resultan muy obvios. Por ejemplo, 12% de tamaño a una letra no da resultados muy consistentes (aunque claro, funciona)

En donde resulta util usar un porcentaje?


Colores:todos los siguientes colores son el mismo

-color: red;-color: rgb(255,0,0);-color: rgb(100%,0%,0%);-color: #ff0000;

Puedo usarlos con el tipo de valor COLOR y BACKGROUND-COLOR

h1 {font-size: 14px;color: red;background-color: blue;}

QUE HACE EL EJEMPLO ANTERIOR?

EN QUE CASOS ES MEJOR USAR COLORES HEX Y EN CUALES USAR COLORES TEXTUALES?


Texto y tipo de texto

-font-family: “Times New Roman”;-font-size: 12px;-font-weight: bold; (bolder, normal, 800, 1000)-font-style: italic;-text-transform: capitalize; (uppercase, lowercase)

h1 {font-size: 14px;font-family: “arial”;text-transform: uppercase;}

Que hace el ejemplo anterior?


Texto, tipo de texto y color aplicado a vínculos. Aplicamos el CSS a la etiqueta a, pero a tiene varios elementos particulares que definen: vinculo nuevo, vinculo visitado, resaltar vinculo, vinculo activo

a:link, a:visited, a:hover, a:active

a:hover {color:red;}

a:link {color:white}



Margenes y PADDING (relleno)

h1 {font-size: 14px;font-family: “arial”;text-transform: uppercase;margin: 20pxpadding: 40px}



Un padding para cada celda de datos

Cellspacing = 5 para toda la tabla


Margenes y PADDING (relleno)

h1 {font-size: 14px;font-family: “arial”;text-transform: uppercase;margin-top: 20pxpadding-left: 40px}

Note que si yo defino padding solamente, el elemento aplica para todas las esquinas. Si yo pongo padding-left, solo aplica para la esquina izquierda.


Padding de 10 en todas las celdas, pero en cada uno de los ejemplos se ilustra padding-left, padding-right, padding-top y padding-bottom


Bordes

border-style: dashed; (double, solid, dotted, groove, ridge…)border-width: 1pxborder-color: blue;

h1 {font-size: 14px;font-family: “arial”;text-transform: uppercase;margin-top: 20pxpadding-left: 40pxborder-style: solid;border-width: 3px;}

Al igual que las margenes, yo puedo aplicar solo bordes derechos, izquierdos, arriba, abajo o la combinacion de los anteriores (border-style-left)…


Mas Bordes

Puede probar cualquiera de los siguientes para border-style

dotted, dashed, solid, double, groove, ridge, inset, outset

Al igual que las margenes, yo puedo aplicar solo bordes derechos, izquierdos, arriba, abajo o la combinacion de los anteriores (border-style-left)…


Tabla con border-style: dashedParrafo con border-style: double

Note que la tabla tiene borde pero solo EXTERNO. Como hago para que los bordes tomen todas las celdas (bordes interiores?)


Fondos

background-color: black;background-image: url(“mifoto.jpg”);background-repeat:repeat-x; (no-repeat)background-size: 100% (cover por ejemplo permite una foto que cubra todo el fondo)

Y va dentro de Body o HTML en CSS

body {background-image: url(“mifoto.jpg”);}

html {background-image: url(“mifoto.jpg”);background-size: cover;}

Con la combinación de los anteriores, es posible lograr muy buenos o MUY MALOS fondos de pagina o de pantalla.


Hay alguna forma de probar todo lo anterior?

USE W3C SCHOOLS

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding_sides


Aplicando CSS a ítems en especifico

p{..} -> Aplica a todos los párrafos P (ELEMENTO)

p.mielemento {…} -> Aplica a todos los parrafos P con estilo “mielemento” (CLASE)

En html lo defino de la siguiente manera

<p class=“mielemento”>Texto de mi parrafo</p>


Aplicando CSS a ítems en especifico

Puedo agrupar elementos

P, h1, h2{..} -> Aplica a todos los párrafos P, h1 y h2 (ELEMENTO)

Tambien puedo aplicar reglas a etiquetas HTML con un ID

#miid {..} -> Aplica a todos los elementos con ID miid

<p id=“miid”>Texto de mi parrafo</p>


Listas. En HTML trabajamos en listas básicas, puedo cambiar la viñeta de la lista con mucha facilidad

Aplicamos CSS a la etiqueta UL.clase

ul.a {list-style-type:circle}ul.b {list-style-type:square}

y en el HTML

<ul class=“a”> …



Tablas. CSS permite embellecer las tablas de manera dramatica

Aplicamos CSS a la etiqueta table, th y td

table, tr, td{border: 1px solid black;}

Cada celda quedo con un borde de 1 pixel. Note sin embargo que como cada celda tiene borde, entre celdas los bordes quedan dobles




table, tr, td{border: 1px solid black;border-collapse: collapse;}





td{padding: 15px;}



Tablas. CSS permite embellecer las tablas de manera dramática


table, td, th{border: 1px red;}th{background-color: blue;color: white;}



Posicionamiento: puedo mover elementos libremente en una pagina y puedo especificar su posición relativa o absoluta con respecto a otros elementos.

p.izquierdo{position: relative;left:-20px;}p.derecho{position: relative;left:20px;}



Posicionamiento: puedo mover elementos libremente en una pagina y puedo especificar su posición relativa o absoluta con respecto a otros elementos.

p.absoluto{position: absolute;left:100px;top:150px;}



En el ejemplo anterior vimos que unos elementos pueden quedar sobre otros elementos. Como defino que elemento va encima del otro?

p.absoluto{…z-index:1}p.absoluto2{…z-index:2}



Elementos flotantes

Que sucede si yo agrego una imagen a mi pagina y quiero que el texto “fluya” alrededor de la misma?


Elementos flotantes. Puedo posicionar un elemento flotante y todos los otros elementos van a “fluir” alrededor de el

img{float:left;}


Elementos flotantes. Puedo posicionar un elemento flotante y todos los otros elementos van a “fluir” alrededor de el

img{float:right;}


Poniendo todo junto:

-Trate de usar siempre un archivo html externo

-No olvide los corchetes {} y los punto y coma ;

-Recuerde que en html los elementos se definen con =, en CSS con :

-Haga un cambio a la vez y pruebe el resultado recargando la pagina.

HTML Fase 2

SPAN

Como hago para agrupar pedazos pequenos de codigo HTML? (digamos, tengo una frase que quiero aplicarle un estilo)

<p>Este es mi parrafo<span class=“miclase”>y esto va con estilo</span></p>

Y en mi CSS tengo

span.miclase {…} Solo elementos span

.miclase {…} Se podria aplicar a cualquier elemento

HTML Fase 2

SPAN

Recuerdan las tablas? Si yo no respeto las columnas, las celdas se pintan “corridas”. Puedo usar SPAN para evitar esto.

<tr><td>1</td><td>2</td></tr><td>3</td>

En el anterior ejemplo, tengo dos filas, dos columnas en la primera fila, una columna en la segunda.

HTML Fase 2

SPAN

Recuerdan las tablas? Si yo no respeto las columnas, las celdas se pintan “corridas”. Puedo usar SPAN para evitar esto.

<tr><td>1</td><td>2</td></tr><td colspan=“2”>3</td>

He “amarrado” correctamente la columna de la segunda fila.

HTML Fase 2

TABINDEX

Cuando yo no tengo un mouse en mi computador, me desplazo usando la tecla TAB. Puedo “forzar” el orden en el que funciona el TAB

<ul>

<li><a href=”a.html" tabindex="1”>Primero</a></li>

<li><a href=”b.html" tabindex="3”>Segundo</a></li>

<li><a href=”c.html" tabindex="2”>Tercero</a></li>

</ul>

Si uso la tecla TAB, pasa primero por PRIMERO, segundo por TERCERO y tercero por SEGUNDO

HTML Fase 2

ANCLAS

Puedo hacer vínculos para que las personas vayan directamente a un ítem dentro de la misma pagina. Es muy útil para paginas web de mucho contenido y con un índice.

<a href=“#item1”>Item 1</a>

…

<p id=“item1”> …

Al hacer click en el primer vinculo, va a ir directamente al párrafo llamado item1

HTML Fase 2

Taller 1:

INCLUIR UN VIDEO DE YOUTUBE EN LA PAGINA QUE ESTOY TRABAJANDO ACTUALMENTE

HTML Fase 2

Taller 2:

INCLUIR UN MAPA DE GOOGLE MAPS EN LA PAGINA QUE ESTOY TRABAJANDO ACTUALMENTE. EL MAPA DEBE TENER UNA UBICACIÓN CONOCIDA

HTML Fase 2

IFRAME

Puedo desplegar paginas web en recuadros dentro de otra pagina web.

<iframe src=“otrapagina.html></iframe>

Al igual que muchas otras etiquetas, puedo usar parámetros como posición relativa o absoluta, ancho, alto o incluso aplicar CSS.

sesión 2: css y html fase 2 presenta: josé miguel gómez ingeniero de sistemas – universidad de...

Documents