CSS

Laboratorio N° 2 pacd1985

Los estilos son mecanismos para definir la apariencia física de los elementos html.

Pueden ser añadidos directamente a los elementos utilizando el atributo style o indirectamente con hojas de estilo (archivos CSS).

Este atributo se ha extendido a la mayoría de los elementos html.

style=“nom_elem1:val_elem1;nom_elem2:val_elem2;…"

Algunos ejemplos:

style="background-color:yellow“

style="font-size:10px"

style="font-family:Times"

style="text-align:center"

<body style="background-color:PowderBlue;">

<h1>Este es un header simple.</h1>

<p style="font-family:verdana;color:red">

Este es un texto en verdana de color rojo.

</p>

<p style="font-family:times;color:green">

Este es un texto en times de color verde.

</p>

<p style="font-size:30px">

Este texto es de 30 pixeles de tamaño

</p>

</body>

Los estilos son normalmente almacenados en hojas de estilo.

Una hoja de estilo puede ser aplicada a varias páginas web. Esto centraliza los cambios.

Una página web puede utilizar mas de una hoja de estilo.

p,li,th,td

{

font-size: 75%;

}

body

{

background-color: #ffffff;

}

h1,h2,h3,hr

{

color:black;

}

Una hoja de estilo puede ser interna o externa.

Las hojas de estilo internas son creadas dentro del documento html y utilizan el tag style y son creadas dentro del head.

Una hoja de estilo externa tiene la extensión .css .

Un ejemplo de hoja de estilo interna.

<head>

<style type="text/css">

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

</style>

</head>

Un ejemplo de hoja de estilo externa referenciada.

<head>

<link rel="stylesheet" type="text/css" href=“estilo.css" />

</head>

En este caso, la hoja de estilo se llama estilo.css .

¿Qué estilo será usado si hay mas de uno especificado para un mismo elemento html?

Se podría decir que hay una hoja de estilo “virtual” en la que la prioridad de definiciones es la siguiente:

Default del navegador

Hoja de estilo externa

Hoja de estilo interna

Atributo style (más alta prioridad)

Si la referencia a una hoja de estilo externa es colocada debajo de una hoja de estilo interna, la externa tiene mayor prioridad.

Tiene tres partes:

El selector. Es el tag html que se desea definir.

La propiedad. Es el atributo que se desea definir.

El valor. Es el valor del atributo.

selector {propiedad: valor}

Si el valor tiene más de una palabra se deben poner entre comillas.

p {font-family: "sans serif"}

Se pueden agrupar selectores así:

h1,h2,h3,h4,h5,h6 { color: green }

Es una buena práctica definir una propiedad por línea.

p {

text-align: center;

color: black;

font-family: arial

}

Se puede definir distintos estilos por elemento clasificándolos.

p.right {text-align: right}

p.center {text-align: center}

En el html:

<p class="right"> Párrafo a la derecha. </p>

<p class="center"> Párrafo al centro. </p>

En general:

<[sel] class=“clase1 clase2 …"> Párrafo.</[sel]>

Tambi én podemos definir clases independientes de un selector para asignarlas indistintamente a cualquier tag.

.center {text-align: center}

Se puede lograr lo mismo utilizando el atributo id en vez de class .

#green {color: green}

p#para1 { text-align: center; color: red }

Los elementos que tengan el atributo id con el valor “green” y los elementos <p> con el atributo id con el valor “para1” .

También se pueden hacer comentarios.

/* This is a comment */

Para inidicar que un estilo se aplica a todos los elementos se utiliza el selector * .

Veamos como funcionan las prioridades en la definiciones de estilos. Por ejemplo, tenemos una hoja de estilo externa con la siguiente definición:

h3

{

color: red;

text-align: left;

font-size: 8pt

}

Y también tenemos una hoja de estilo interna con la siguiente definición:

h3

{

text-align: right;

font-size: 20pt

}

Ahora, la hoja de estilo “virtual” ser ía:

h3

{

color: red;

text-align: right;

font-size: 20pt

}

Define el espacio entre los elementos html.

Define el espacio entre el borde del elemento y el contenido del elemento.

Este tag define una sección de un documento html.

Se usa para agrupar elementos y formatearlos con estilos.

Se le puede aplicar los estilos de la misma manera que a cualquier otro elemento html.

Un ejemplo sencillo:

<html>

<body>

<h3>This is a header</h3>

<p>This is a paragraph.</p>

<div style="color:#00FF00">

<h3>This is a header</h3>

<p>This is a paragraph.</p>

</div>

</body>

</html>

Funciona básicamente igual que <div> , aunque se usa más para estilizar contenidos específicos o manipularlos con javascript.

span.blue {color:lightskyblue;font-weight:bold}

span.green {color:darkolivegreen;font-weight:bold}

<p> My mother has <span class="blue">light blue</span> eyes and my father has <span class="green">dark green</span> eyes. </p>

Un formulario se define con el tag <form> .

Define un área donde poner elementos que generalmente permiten al usuario ingresar información.

Estos elementos pueden ser inputs, textareas, selects, etc.

Los elementos más usados dentro de un formulario son los <input > .

Estos pueden ser:

Text Fields

Radio Buttons

Checkboxes

Submit

Text Fields

<form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" />

</form>

Radio Buttons

<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female

</form>

Checkboxes

<form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" />

</form>

Submit

<form name="input" action="html_form_submit.php" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" />

</form>

Es un input multil ínea que puede contener un número ilimitado de caracteres.

Su tamaño puede ser especificado con los atributos rows y cols o con las propiedades de estilo height y width .

<textarea rows="2" cols="20"> bla bla bla bla bla bla bla bla bla bla bla bla …

</textarea>

Sirve para mostrar al usuario una lista desplegable de opciones.

<select name="carlist">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</select>

CSS

0 comments

Notes on slide 1

Favorites, Groups & Events

CSS - Presentation Transcript

More by user

More info about this document

Categories

Tags

CSS

0 comments

Notes on slide 1

Favorites, Groups & Events

CSS - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories

Tags