• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Estilos css para aplicarlos en los elementos HTML
 

Estilos css para aplicarlos en los elementos HTML

on

  • 769 views

 

Statistics

Views

Total Views
769
Views on SlideShare
769
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Estilos css para aplicarlos en los elementos HTML Estilos css para aplicarlos en los elementos HTML Presentation Transcript

    • Estilos CSS para aplicarlos en los elementos HTML
    • Antes de dar inicio a los ejemplos de css que sepueden aplicar por mediode los elementos HTML, daremos una pequeña introducción sobre los Estilos CSS
    • (Cascading Style Sheets - CSS). También llamado Hojas de estilocascada, CSS es un lenguaje usado para definir la presentación deun documento estructurado escrito en HTML o XML2 (y porextensión en XHTML). El W3C (World Wide Web Consortium)es el encargado de formular la especificación de las hojas deestilo que servirán de estándar para los agentes deusuario o navegadores.
    • Las clases en css pueden ser usadas enmúltiples elementos HTML, a diferencia de losidentificadores (id) que, aunque se puede, según lasespecificaciones de los estándares solo debenaparecer en un elemnto del documento HTML.
    • ESTILO DEL TEXTOVeamos los parámetros disponibles para dar estilo al texto. Como yasabes, las unidades de medida aplicables a todos ellos son varias, peropara mayor claridad, en todos los ejemplos utilizaremos solamente elpíxel: px. Sea por ejemplo la siguiente página:
    • <HTML><HEAD><TITLE>Estilos</TITLE><LINK REL="stylesheet" TYPE="text/css"HREF="estilo.css"></HEAD><BODY>Texto fuera de párrafo.<BR>Segunda línea fuera de párrafo.<P>texto de párrafo. <BR> segunda línea depárrafo.</P></BODY></HTML>
    • Y si escribimos la siguiente hoja de estilo estilo.css:BODY {color:green }P {color:red; font-size:20px; font-family:Courier; font-weight:bold; font-style:italic; line-height:30px; letter-spacing:5px; text-decoration:underline; text-transform:capitalize; text-align:left; text-indent:30px; }
    • Se obtiene:Texto fuera de párrafo.Segunda línea fuera de párrafo. Texto De Párrafo. Segunda Línea De Párrafo
    • ESTILOS EN LOS LINKSHay un elemento HTML que genera un estilo propio pordefecto: <A>. Como ya sabes, los enlaces aparecen pordefecto de otro color y subrayados, y cambian de colorsegún hayan sido visitados o no. Estos efectos de estilono definidos por el usuario se llaman pseudoclases.
    • Hay dos posibles modificaciones de estilo para esteelemento; el color del enlace en sus distintos estados ysi aparece subrayado o no. Teóricamente no debierainfluir el orden en que se escriban los distintos estadosen la CSS, pero es mejor escribir las declaraciones en elsiguiente orden (por supuesto, los colores son libres):
    • a {text-decoration: none;} a:link {color: #FF0000;} a:visited {color: #00FF00;} a:hover {color: #FF00FF;} a:active {color: #0000FF;}Donde link indica que el enlace no ha sidovisitado, visited que el enlace ha sidovisitado, active que el enlace está siendo pulsado,y hover que el ratón está pasando sobre él (sinpulsar).
    • ESTILOS EN LOS FORMULARIOSTodo lo visto sobre los estilos, también es aplicable a loselementos de un formulario, bien desde las hojas CSS o en elcódigo HTML del propio formulario. Por ejemplo elformulario:
    • <FORM METHOD="GET" ACTION=""> <INPUT TYPE="text“ STYLE="background:yellow;color:red“ NAME="campo1" VALUE="Borde simple"> <INPUT TYPE="text“ STYLE="border:double; background:yellow; color:blue" NAME="campo2“ VALUE="Borde doble"> <INPUT TYPE="text" STYLE="border:0;background:yellow; color:blue" readonly NAME="campo3" VALUE="Solo lectura sin borde"> <INPUT TYPE="button" STYLE="background:transparent; color:red" VALUE="Botón transparente"></FORM>
    • Este formulario tiene las instrucciones de estilo embebidas en el código html. Su equivalente utilizando hoja css sería:<FORM METHOD="GET" ACTION=""> <INPUT CLASS="controles1" TYPE="text" NAME="campo1“ VALUE="Borde simple" > <INPUT CLASS="controles2“ TYPE="text" NAME="campo2“ VALUE="Borde doble"> <INPUT CLASS="controles3" TYPE="text" readonly NAME="campo3“ VALUE="Solo lectura sin borde"> <INPUT CLASS="botones" TYPE="button" VALUE="Botón transparente"></FORM>
    • Y esta sería la hoja de estilo correspondiente:/* Hoja de estilo del formulario */.controles1 {background:yellow;color:red;}.controles2 {border:double;background:yellow;color:blue}.controles3 {border:0;background:yellow;color:blue}.botones {background:transparent;color:red}En los formularios se puede cambiar el estilo de los bordes de loscontroles, pero no el grosor como se hace en los bloques de texto. Unformulario se puede considerar un bloque, por lo que también esposible cambiar el color del fondo, definir bordes, etc. Por supuesto,todo esto también es aplicable a las tablas, imágenes y al resto deelementos html.
    • E F E C TO S E S P E C I A L E S C O N E L T E X TOAlgunas veces habrás visto páginas con textos queparecen gráficos. Algunos tipos, en efecto,solamente se pueden conseguir con editoresgráficos, pero algunas veces son simples efectos deestilo. Veamos un ejemplo:
    • all.texto { margin-top:-24px; color:yellow; font-size:20px; font-family:Verdana;}all.sombra { margin-top:2px; margin-left:2px; color:black; font-size:20px; font-family:Verdana;}<DIV ALIGN="CENTER" CLASS="sombra">Prueba de texto sombreado</DIV><DIV ALIGN="CENTER" CLASS="texto">Prueba de texto sombreado</DIV>
    • Se obtiene:Y si en lugar de escribir una hoja css prefieres hacerlo con estilo embebido en elHTML, este es el código:<DIV ALIGN="CENTER" STYLE="margin-top:2px; margin-left:2px; color:black;font-size:20px; font-family:Verdana;">Prueba de texto sombreado</DIV><DIV ALIGN="CENTER" STYLE="margin-top:-24px; color:yellow; font-size:20px;font-family:Verdana;">Prueba de texto sombreado</DIV>
    • GRÁFICOS Y BLOQUES F L OTA N T E SDentro de un bloque, además de texto, pueden ir gráficos uotros bloques. Para conseguir que estos objetos se alineenrespecto al texto que ya exista en el bloque, o para que sealineen varios bloques entre sí, se utiliza lainstrucción float que puede tener tresparámetros: left right none (por defecto). Por ejemplo:
    • p {color:red; font-size:10px; font-family:Verdana; border:2px; border-color:blue; border-style:solid; width:200px; height:100px; }img { float: right; }
    • Se obtiene:Y por supuesto, además de posicionarlos en el bloque, losgráficos se pueden redimensionar y darles los atributos que seannecesarios para la mejor composición. Por ejemplo:
    • img {float: right; width:60px; height:60px; padding: 2px;}
    • Después de haber utilizado una instrucción float en unbloque, para cerrar su efecto sobre la alineación de losobjetos hay que escribir otra en el siguiente bloque: clearque también tiene un parámetro con tres posibles valores:left right both Evidentemente, habrá que utilizar left oright según se haya definido el float anterior, y si se hanincluido los dos, se utilizará both (ambos). Recuerda que lasinstrucciones de posicionamiento y dimensionado cadanavegador las interpreta a su manera, y como siempre, sedeberán probar con los navegadores más habituales hastadar con los parámetros que mejor funcionen en todos ellos(y esto puede llevar su tiempo...).
    •  http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada http://www.bloogie.es/tecnologia/programacion/75-como-utilizar-varias-clases-css-en-un-mismo-elemento-html http://sestud.uv.es/manual.esp/estilo2.htm#punto2