Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje28-11-2012, 13:06 (UTC)    
Título del mensaje: Tutorial 1 CSS : Primeros conceptos

¿Que es?

CSS (Cascade Style Sheet) son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. El HTML posee ciertas limitaciones a la hora de aplicarle forma a un documento. Pero con las CSS somos capaces de superar esas limitaciones. Las CSS complementan al lenguaje HTML, dándole a éste mayores posibilidades.

Para este curso no necesita ningún software específico. Basta con cualquier editor de texto, por ejemplo, el bloc de notas de Windows, aunque es recomendable algún programa que ayude en la visualización del código.

¿Como agrego CSS a PWG?

Para agregrar CSS a PWG tenemos que darle a Editar diseño > CSS-Design , después vamos a Configuraciones avanzadas > CSS Syn Style Tags y ahi pegaremos el código correspondiente.

Identificadores y clases

Un id (identificador)

El atributo id sirve para identificar de forma única a un elemento dentro de un documento HTML

El valor del atributo id de un elemento no deberia repetirse en ningún otro atributo id del mismo documento. ya que es un valor unico.

Una clase

El valor del atributo class puede repetirse cuantas veces sea necesario, incluso puede llevar más de una clase
El valor del atributo class no tiene ningún valor identificativo del elemento que lo contiene, únicamente sirve para asociarle los estilos al elemento.

Ahora procederemos a realizar un ejemplo de cada uno de ellos , lo podemos pegar en cualquier apartado de la pagina (Texto por encima, Texto por debajo o en el propio contenido)

Código:
<div id="contenido">
Esto es un identificador
</div>


A cotninuación le agregaremos su código css correspondiente en CSS-Syn Style Tags

Código:
#contenido {
background-color:green;
}


Para realizar lo mismo con una clase , el formato cambia

Código:
<div class="contenido">
Esto es una clase
</div>


Código:
Aplicaremos su estilo correspondiente


Código:
.contenido {
background-color:orange;
}


Muy bien si hemos entendido esto , ya comprendemos lo más básico de CSS.

Aplicando css a un elemento en concreto

No se si en el título se entenderá muy bien , pero espero que con el ejemplo quede claro , imaginemos que tenemos dos elementos <a> en cada div correspondiente , y sólo queremos que se ponga de color naranja el elemento <a> del primer div.

Código:
<div id="contenido">
Esto es un div
<a>Enlace</a>
</div>
<div id="contenido2">
<a>Enlace2</a>
</div>


Aplicaremos el CSS que hay a continuación

Código:
#contenido a{
color:red;
}


Aplicando css a una clase en concreto

Igual que el ejemplo anterior pero con clases

Código HTML

Código:
<div class="contenido">
Esto es una clase <a>enlace1</a>
</div>
<div class="contenido2">
Esto es una clase <a> enlace2 </a>
</div>


Código CSS

Código:
.contenido a {
color:orange;
}


Aplicar estilo a un <div> que está dentro de otro <div>

HTML

Código:
<div id="contenido">
Esto es un div
<div id="contenido2">
Esto es un div dentro de un div
</div>
</div>


CSS

Código:
#contenido #contenido2 {
background-color:orange;
}


Próximo aporte : Entendiendo los conceptos (margin,padding,width y height)


PD: Imagino que muchos se reirán con este aporte pero es que esto es lo mas básico que hay de CSS y si no entendemos estos conceptos no podemos continuar diseñando.

PD2:Esta parte lo unico que he scado de internet ha sido la definición.


Ultima edición por cursopwg el Mie Feb 13, 2013 9:42 am; editado 6 veces
Mensaje29-11-2012, 21:38 (UTC)    
Título del mensaje:

Genial. Dar cursos de css+html a bastantes les hara falta, y a algunos de nosotros nos servira para refrecar lo que tenemos aprendido

esta frase esta mal
cursopwg escribió:
Un id (identificador)

El atributo id sirve para identificar de forma única a un elemento dentro de un documento HTML.
El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento.

en vez de El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento.

deveria ser El valor del atributo id de un elemento no deberia repetirse en ningún otro atributo id del mismo documento. ya que es un valor unico.

o algo asi...
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group