Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje07-04-2010, 18:45 (UTC)    
Título del mensaje: Recopilacion Tutoriales Diseño y css

Hola...
Ago Este post en Nombre de mi y pues de los que no Saven Css...


Yo no se mucho..
y este post lo ago para recopilar Todos los Tutoriales de Diseños y css y tambien Creen sus Tutoriales de modificar plantilla...

dejo uno que me Hizo Webtaller cosa que casi no Entiendo:


parte1_
___________

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN> Con su atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color verde

<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>
</p>

Que tiene como resultado:

Esto es un párrafo con varias palabras en color verde. resulta muy fácil.
Estilo definido para una etiqueta

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS).

<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Que tiene como resultado:


Estilo definido en una parte de la página

Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.

<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

Que tiene como resultado:
Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los etilos


Parte 2
-______________

--------------Tutorial Parte 2-------------------

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez.

Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera más avanzada. Pero no te preocupes puesto que con los ejemplos irás aprendiendo su uso y más tarde comentaremos la sintaxis en profundidad.

En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la página para definir los distintos estilos del documento.

A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de estilos.

<html>
<head>
<title>Ejemplo de estilos para toda una página</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head>

<body>
<h1>Página con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p>
</body>
</html>


Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará

* Subrayado
* Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <BODY>) se le apliquen los estilos siguientes:

* Color del texto negro
* Color del fondo grisaceo
* Margen lateral de 1 centímetro

Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos serán heredados por el resto de las etiquetas del documento. Esto es así siempre y cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta más concreta será el que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, que es más concreta.

Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos: <!--Declaración de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la página. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribirían ese "feo código" en la página.

Pulsa para ver el ejemplo anterior.

Hemos preparado la misma página, pero con declaraciones de estilos distintas, para que comprobéis las diferencias en la forma del documento con sólo unos cambios en sus estilos. Puedes verla pinchando aquí.

Estilo definido para todo un sitio web

Una de las características más potentes de la programación con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas. Con las ventajas añadidas de que se ahorra en líneas de código HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se comentó anteriormente.

Veamos ahora cómo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquer extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erroneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}

H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}

TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}

BODY {
background-color : #006600;
font-family : arial;
color : White;
}



2- Enlazamos la página web con la hoja de estilos
Para ello, vamos a colocar la etiqueta <LINK> con los atributos

* rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
* type="text/css" porque ela archivo es de texto, en sintaxis CSS
* href="estilos.css" indica el nombre del fichero fuente de los estilos

Veamos una página web entera que enlaza con la declaración de estilos anterior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>

<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>

</body>
</html>


El resultado conseguido se puede ver aquí

Reglas de importancia en los estilos

Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si tenemos declarado en el <BODY> unos estilos, por lo general, estas declaraciones también afectatarán a etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.

En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página. Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se pueden realizar de múltiples modos y con varias etiquetas, también entre estos modos hay una jerarquía de importancia para resolver conflictos entre varias declaracionesde estilos distintas para una misma porción de página. Se puede ver a continuación esta jerarquía, primero ponemos las formas de declaración más generales, y por tanto menos respetadas en caso de conflicto:

* Declaración de estilos con fichero externo. (Para todo un sitio web)
* Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la página)
* Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)
* Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>)

Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un repaso con la lista anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus páginas y aumentar la productividad de tu trabajo. Pero estate atento a los siguientes capítulos donde aprenderás las lecciones que te faltan para dominar bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que mejorarán tus páginas.

Ya Esta Con ese tutorial crearas Tu diseño web
______________

Mensaje07-04-2010, 22:40 (UTC)    
Título del mensaje:

Muy bueno amigo gracias por el aporte

Salu2!!
______________
Tutoriales para PC | Trucos para PC | Descargas | Juegos | y mucho más!

Ayudo porque me nace no por ganar popularidad
No haga SPAM, evita el Cierre de tu Web
No hagas DOBLE POST, usa el boton EDITAR
Usa el Buscador
Mensaje07-04-2010, 23:27 (UTC)    
Título del mensaje:

Gracias
______________

Mensaje08-04-2010, 13:01 (UTC)    
Título del mensaje:

buen aporte statings, pero ordena un poco para que sea mas facil de leer
utilizando el [quote][/quote] y el [code][/code]
______________
Mensaje08-04-2010, 13:05 (UTC)    
Título del mensaje:

Amigo por favor coloca la fuente para dar crédito a los autores

Gracias!
Mensaje08-04-2010, 17:45 (UTC)    
Título del mensaje:

tokarg escribió:
Amigo por favor coloca la fuente para dar crédito a los autores

Gracias!



Si no me Equiboco Lo puse lo Hizo Webtaller
______________

Mensaje08-04-2010, 18:30 (UTC)    
Título del mensaje:

Ok, en todo caso él debería citarte la fuente de donde ha extraído los materiales para que tu puedas postearlo, sino estaría ocupando créditos que no le corresponden
Más info:
http://www.paginawebgratis.es/forum/viewtopic.php?t=14308

Saludo!
Mensaje08-04-2010, 20:10 (UTC)    
Título del mensaje:

tokarg escribió:
Ok, en todo caso él debería citarte la fuente de donde ha extraído los materiales para que tu puedas postearlo, sino estaría ocupando créditos que no le corresponden
Más info:
http://www.paginawebgratis.es/forum/viewtopic.php?t=14308

Saludo!


El lo creo para mi
______________

Mensaje08-04-2010, 21:01 (UTC)    
Título del mensaje:

desordenado y repetitivo , pon las etiquetas code , a estos niveles que estamos , pudiste poner imágenes y mejorarlo , de todos gracias por el aporte, sigue aportando

saludos!
______________
@JuanjoApps
JuanjoApps
Mensaje10-04-2010, 12:26 (UTC)    
Título del mensaje:

OTro Code:

_________________

Poner Nuevo Menu:

Pega este codigo en Advertencia referente al campo de contenido:

<div style="position:absolute;left:398px;top:87px;">
Codigo Del menu (HTML)
</div>

Luego el codigo CSS del menu lo pegas en:
CSS CODE

---------------------------------------------------

Y para quitar un menu:

Busca por donde enpieza el menu Luego justifica hasta la terminasion y Lo borras y Fijate si quedo

---------------------------------------------
Quitar Columna CSS:
No Tengo ni idea:( Alguien lo tiene?

Listo
______________

Mensaje10-04-2010, 12:31 (UTC)    
Título del mensaje:

Si no tienes ni idea de como quitar columna css, no lo pongas.
______________
http://www.view2.be/?r=114817
Free YouTube Views
Mensaje11-04-2010, 03:26 (UTC)    
Título del mensaje:

gen-avanzados escribió:
Si no tienes ni idea de como quitar columna css, no lo pongas.


Si que eres repugnante!.

Esta bueno seria bueno que pusieras las division de las partes.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mensaje12-04-2010, 22:29 (UTC)    
Título del mensaje: hola

hoal pues veo a statings que esto lo saco de librosweb.es
ahi aprende un mucho
por cierto eso que puso del
Cita:
<span style="color:green">aki texto </span>

eso se usava en anos atras y muy pocos aora lo usan pero segun investige que por eso se iso el css(CASCADING STYLE SHEET) bueno aora eso segun se utilisa para todos lo que son <span>en el CSS se puede acer asi


Cita:
span{
y el estilo que uds escojan y eso y se cierarn los que son las llaves de style}

por eso ese casi estilo no se usa mas que muchos las utilizan en las tablas
y statings eso lo vi en librosweb.es

POSDATA:y porfavor si lo vas a publicar aprendetelo bien por que me dices que te modifike el diseno y tu que vas a acer namas ver solo es para que veas que aki todos aprendemos y nadie ace las cosas de los demas como por msn le digo a stating que escoja disenos si gusta de mi web pero dice que el kiere su propio pues pongase a estudiar el css y el html saludos

es para que tu aprendas a acer las cosas que uno kiere no digo que no te kiera ayudar si no que tu vas a kerer las cosas a tu modo asi que si me lo pides ami y no te gusta sera mi perdida de tiempo mio
Mensaje12-04-2010, 22:30 (UTC)    
Título del mensaje:

Falta organización.
Mensaje13-04-2010, 18:26 (UTC)    
Título del mensaje:

nesbet escribió:
Falta organización.


Volviste...

si lo se!

olle Responde mps
______________

Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group