Enero 19, 2018, 11:57:16 am

Autor Tema: Tutorial Basico de Hojas de Estilo en Cascada / CSS  (Leído 8210 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado carlmycol

  • Yo vivo en CPH
  • ***
  • Mensajes: 1357
  • Sexo: Masculino
    • Ver Perfil
Tutorial Basico de Hojas de Estilo en Cascada / CSS
« en: Marzo 21, 2009, 03:34:17 pm »
Curso de Hojas de Estilo en Cascada / CSS

You are not allowed to view links. Register or Login

1.- Introduccion

¿Que es CSS?

Cita de Wikipedia
Citar
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

En otras palabras....

El CSS (Cascading Style Sheets) es un lenguaje simple creado para separar la Estructura (HTML o XHTML) del estilo (Presentación)

¿Por que usarlo?

Cita de Wikipedia
Citar
Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

        * Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
        * Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
        * Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador de voz.
        * El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño (siempre y cuando no se utilice estilo en línea).

En general, las Hojas de Estilo sirven para, mantener un código mas organizado a la hora de revisarlo, permite a los desarrolladores web dar estilo a multiples paginas HTML con un solo documento CSS, al efectuar cambios en una hoja de estilos es posible cambiar el estilo de múltiples paginas al mismo tiempo, permite optimizar un estilo propio para imprimir documentos HTML.

Conceptos Basicos

Propiedades: es la propiedad del estilo a usar, por ejemplo, la propiedad para cuambiar tamaño de letra, la propiedad para cambiar color de fondo, etc.., para definir esta propiedad necesitamos darle un atributo asi le decimos al navegador que interpreta nuestro CSS.

Atributo: es el valor que le damos a la propiedad, por ejemplo, si queremos el color de letra azul, entonces tendríamos queescribir que la propiedad el color de letra debe ser azul, cada propiedad tiene sus atributos, esto si ya lo verémos mas adelante

Si no comprendes estos dos ultimos conceptos poco a poco irás entendiendo un poco mas sobre las propiedades y sus atributos

Capa: es un elemento definido en el documento Logico (HTML) y que se utiliza en el documento de la presentacion (CSS), su funcion principal es separar cada cosa en una capa así ubicarla en el lugar deseado sin sin tener que invetarse un procedimiendo arcaico e intrincado para poner cada cosa en su lugar.

Clase: es normal que generalmente queramos darle estilo en general a una pagina sin embargo aveces vamos a querer darle un estilo mas personalizado o unico a algunas cosas, para esto existen las clases, estas sirven para darle algun "efecto" a algo en especifico.

Sintaxis de CSS

La sintaxis de CSS viene siendo muy sencilla, como explique antes se trata depropiedades y atributos, la sintaxis basica es:

Código: You are not allowed to view links. Register or Login
etiqueta {
propiedad:atributo;
}

Se escribe la etiqueta, se habren llaves, se escriben las propiedades y atributos de la manera mostrada y se separan por punto y coma, luego se cierran las llaves.

Otro ejemplo de sintaxis:

Código: You are not allowed to view links. Register or Login
etiqueta {
propiedad1:atributo1;
propiedad2:atributo2;
}
etiqueta2 {
propiedad1:atributo1;
propiedad2:atributo2;
}


¿Como se aplica?

Hay tres formas de aplicar CSS:

* Externo: se aplica fuera del documento HTML, se coloca un link en la cabecera (HEAD) con la dirección de nuestra hoja de estilos, de esta forma obtenemos un HTML separado completamente del estilo, el codigo queda muy optimizado y mas ligero

Forma de utilizar:
Código: You are not allowed to view links. Register or Login
<head>
...
<LINK REL="stylesheet" TYPE="text/css" HREF="url de la hoja">
...
</head>

* Interno: se colocan los estilos igualmente dentro de la cabecera (HEAD) sin embargo los estilos quedan dentro del HTML, se obtiene el beneficio de separar el HTML del CSS sin embargo el HTML se hace mas pesado en su almacenamiento.

Forma de utilizar:
Código: You are not allowed to view links. Register or Login
<head>
...
<style type="text/CSS">
Tus estilos
</style>
...
</head>

* En Etiqueta: consiste en dar el estilo directamente en una etiqueta especifica, suele ser beneficioso solo en algunos casos, mas sin embargo si se trata de poner todo el estilo en cada etiqueta seria muy tedioso además de ser difícil de entender a la hora de revisar errores.

Forma de utilizar:
Código: You are not allowed to view links. Register or Login
<etiqueta style="estilos de etiqueta">Contenido de etiqueta</etiqueta>
Ó en su version corta

Código: You are not allowed to view links. Register or Login
<etiqueta style="estilo de etiqueta" />
Comencemos

Antes de empezar para entrar en calor tenemos que elegir una herramienta, esta nos servirá para editar y crear nuestros códigos CSS y HTML, puedes usar notepad o gdit (depende de tu S.O.), en fin, puede ser cualquier editor de texto, nos servirá tanto el mas sencillo como el editor de paginas web mas sofisticado, En mi caso usaré Geany un IDE de linux que permite la edición de todo tipo de códigos, puedo recomendarte Dreamweaver mas sin embargo puedes usar cualquier editor con exepcion de los editores como Word o Wordpad estos suelen modificar el escrito con su propio codigo

Durante este curso usaremos la implementación directa de CSS para entrar en calor luego empezaremos a usar la implementación externa.

Primer Ejemplo! aqui es donde empezamos a entrar en calor.

Abramos nuestro editor y escribamos lo siguiente, el indispensable y siempre util.. "Hola Mundo", este nunca falta en ningun lenguaje
Código: You are not allowed to view links. Register or Login
<html>

<head>
<title>Nuestro Hola Mundo!!</title>
    <style type="text/CSS">
    p {
    font-weight:bold;
    font-family:arial;
    color:red;
}
    </style>
</head>

<body>
<p>Hola mundo!!!</p>
</body>
</html>



Este sería el resultado:



Eplicacion de Codigo

Etiquetas <style type="text/CSS"> y </style>
Definimos las etiquetas para escribir nuestro CSS, dentro de estas se escriben los estilos, muy importantes sin estas no nos funcionará el CSS

Segmento p { ... }
Definimos la etiqueta a dar estilo y abrimos los { ... } y ponemos nuestro codigo adentro, esto quiere decir que el codigo de estilos que esté adentro se e asignará a la etiqueta <p> ... </p>

Linea font-weight:bold;
Font Weight en español "Ancho de Fuente", damos estilo bold (negrita), como esta dentro de p { ... } le da estilo a la etiqueta p (<p> ... </p>)

Linea font-family:arial;
Font Family en español "Familia de Fuente", le damos valor arial asi nuestro texto será con el estilo de letras "arial"

Linea color:red;
Color del texto, red/rojo, puedes escribir el nombre del color en ingles aunque de esta manera no podras utilizar todos los colores asi que puedes poner el valor del color en hexadecimal

Linea <p>Hola mundo!!!</p>
Etiqueta p, de parrafo, "Hola mundo!!!" es un texto de parrafo y es la etiqueta que trabajamos

NOTA: no vallas aconfundirte, coloque la traduccion de las propiedades para que sea mas facil de entender sin embargo las propiedades tienen su propio nombre, al igual que sus valores

NOTA 2: de igual manera en el ejemplo se trabajó una sola etiqueta pero se pueden trabajar múltiples o mas bien infinitas.

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

Bueno aqui empieza el curso. verán que por ahora esta sencillo pero esto es solo para empezar, iré poniendo cosas cada vez mas complicadas, para explicar las diferentes propiedades del CSS.

Saludos. Carlmycol
« Última modificación: Mayo 03, 2013, 09:12:09 pm por M4inFox »
Pregúntate: ¿Qué estás dispuesto a sacrificar por alcanzar tus objetivos?

Desconectado carlmycol

  • Yo vivo en CPH
  • ***
  • Mensajes: 1357
  • Sexo: Masculino
    • Ver Perfil
Re: Curso de Hojas de Estilo en Cascada / CSS
« Respuesta #1 en: Marzo 26, 2009, 05:28:03 pm »
Agrupar varias Eitquetas HTML para un solo estilo

Un poco mas de teoría en este caso un poco mas corta, en esta parte verémos como ahorrar codigo si vamos a darle el mismo estilo a una etiqueta, tambien de cierta manera hace que el codigo sea un poco mas facil de entender.

La forma de hacer esto es la misma forma de dar estilo como si fuera una sola etiqueta, la unica diferencia es que hay que poner las etiquetas a las que queremos dar el mismo estilo separadas por como
Por Ejemplo: a, p, h1

Ejemplo, si queremos tener el mismo color de letra y familia de fuentes en h1 y p podríamos escribir:

Código: You are not allowed to view links. Register or Login
<html>
<head>
<style type="text/CSS">
h1, p {
color:Blue;
font-family:arial;
}
</style>
</head>
<body>
<h1>Este titulo</h1>
<p>Tiene el mismo color que este parrafo</p>

</body>
</html>

Si lo guardamos y abrimos con el navegador obtenemos esto:



Nos hemos ahorrado unas 4 lineas de codigo, intentalo sin ahorrar etiquetas, haras lo mismo por mas codigo, en ocaciones en proyextos grandes esto suele ser muy util.

Claro puedes dar estilo varias veces.

Ejemplo: Supongamos que queremos que h1 y p tenga el mismo estilo de letra (font-family) pero que h1 sea roja y p sea verde

Código: You are not allowed to view links. Register or Login
<html>
<head>
<style type="text/CSS">
h1, p {
font-family:arial;
}
h1 {
color:red;
}
p {
color:green;
}
</style>
</head>
<body>
<h1>Este titulo</h1>
<p>Tiene el mismo estilo de letra (arial) y son de diferente color</p>

</body>
</html>



Solo hay que recordar separar las etiquetas por "," cuando se decea hacer esto


Videotutorial: You are not allowed to view links. Register or Login

-----------

Saludos. Carlmycol

Desconectado BlackSwan[Xzp]

  • Yo vivo en CPH
  • ***
  • Mensajes: 478
  • Sexo: Masculino
  • The Power of One
    • Ver Perfil
Re: Curso de Hojas de Estilo en Cascada / CSS
« Respuesta #2 en: Marzo 26, 2009, 07:20:09 pm »
Esta bueno :P

Segui postiando mas :! =D

You are not allowed to view links. Register or Login
-> Estudiante de Ing. en Sistemas <-

Desconectado carlmycol

  • Yo vivo en CPH
  • ***
  • Mensajes: 1357
  • Sexo: Masculino
    • Ver Perfil
Re: Curso de Hojas de Estilo en Cascada / CSS
« Respuesta #3 en: Marzo 29, 2009, 05:52:30 am »
Propiedades de Fuentes

Introduccion

La propiedades de fuente son aquellas que nos permiten modificar el estilo de la fuente, lo delgado de las letras, el tamaño, la familia, etc... Tomemos un ejemplo, estamos haciendo un trabajo en Word pero te gusta esa letra y quisieras cambiarla entonces le cambas la familia de fuente, mas o menos asi haremos en CSS.


Propiedades a usar

Las propiedades a usar para cambiar el estilo de las fuentes son:

font-family -- Especifica una fuente o familia de fuentes a usar
font-style -- Especifica el estilo si italic, oblicua o normal
font-variant -- Especifica una variante de las letras minusculas o no
font-weight -- Indica grosor
font-size -- Indica tamaño

Font-family

Esta es una de las mas importantes, de esta propiedad puede depender la calidad de tu trabajo final, esta propiedad consiste en darle una o varias fuentes separadas por coma para indicar las fuentes que va a tener la letra (lo que muchos llaman "font")

Esta propiedad es dificil darle un atributo, pues, si el visitante no tiene instalada la fuente usará la fuente por defecto (que es Tines new roman seun las normas APA), aunque en firefox es posible cambiarla)

Personalmente recomiendo herramientas online que permiten ver el acabado de familias de fuentes ya testeadas, la idea es que todo usuario que entre a la web pueda ver el contenido como tu lo diseñaste.

Los atributos de esta propiedad son las mismas familias de fuente.

Ejemplos de la Propiedad

Código: You are not allowed to view links. Register or Login
h1 {
font-family:arial;
}

Código: You are not allowed to view links. Register or Login
h1 {
font-family:san serif;
}

Código: You are not allowed to view links. Register or Login
h1 {
font-family:arial, san serif;
}

Código: You are not allowed to view links. Register or Login
h1 {
font-family:verdana, arial, san serif;
}



Font-Style

Esta propiedad puede dar un acabado profesional depende de donde se use

Los atributos posibles de la propiedad son: normal, italic u oblique

normal: deja la fuente con estilo tradicional
italic: cursiva
oblique: letra estilo "palmer"

Ejemplo de propiedad
Código: You are not allowed to view links. Register or Login
h1 {font-style:italic}
p {font-style:oblique}
a {font-style:normal}



font-variant

Esta puede hacer que tus letras sean normales o hacer que las minusculas sea mayusculas pero mas pequeñas.

Atributos de propiedad: normal, small-caps

normal: deja la fuente con la variante tradicional, minusculas son minusculas y mayusculas son mayusculas

small-caps: deja las minusculas como mayusculas pero de menor tamaño, las mayusculas siguen siendo mayusculas del mismo tamaño

Ejemplo de propiedad:
Código: You are not allowed to view links. Register or Login
h1 {font-variant:normal}
p {font-variant:small-caps}



font-weight

Esta propiedad indica grosor de la fuente, y se refiere el cuadro imaginario que hay alrededor de cada letra.

Atributos de la propiedad:
1.- Normal --grosor normal
2.- Lighter --grosor delgado
3.- Bold --negrilla
4.- Bolder --grueso
5.- Numero de 100 a 900 (siendo 400 equivalente a normal y 700 equivalente a blod)

Ejemplo de propiedad
Código: You are not allowed to view links. Register or Login
<p style="font-weight:normal">Esta es normal</p>
<p style="font-weight:lighter">Esta es lighter</p>
<p style="font-weight:bold">Esta es bold</p>
<p style="font-weight:bolder">Esta es bolder</p>



Font-size

Especifica tamaño de fuente.

Puede ser especificada a travez de medidas (relativas, recomendado) o con las palabreas reservadas: smaller | xx-small | x-small | medium | large | x-large | xx-large

Personalmente recomiendo usar porcentajes y pixeles para facilitar el uso en cascada pues esta propiedad es heredable

Código: You are not allowed to view links. Register or Login
<p style="font-size:12px">Esta es 12px</p>
<p style="font-size:150%">Esta es 150%</p>
<p style="font-size:xx-large">Esta es xx-large</p>
<p style="font-size:x-small">Esta es x-small</p>



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

Coloque un poco mas de teoría en el primer capitulo sobre la sintaxis

Saludos. Carlmycol
« Última modificación: Marzo 29, 2009, 05:55:52 am por carlmycol »

Desconectado carlmycol

  • Yo vivo en CPH
  • ***
  • Mensajes: 1357
  • Sexo: Masculino
    • Ver Perfil
Re: Curso de Hojas de Estilo en Cascada / CSS
« Respuesta #4 en: Abril 05, 2009, 09:12:58 am »
Propiedades de Texto

Introduccion

Las propiedades de texto son aquellas que mas que cambiar el estilo de la fuente, van un poco mas alla cambiando el estilo del texto final, estas son muy importantes pues con ellas se define la legibilidad del texto, recomiendo que estas propiedades la vallas probando con tu editor preferido.

Propiedades a Usar

color
text-align
text-decoration
letter-spacing
word-spacing
text-indent
text-transform

Color

Esta propiedad nos permite cambiar el color del texto, puede ser usada dadole un atributo de la forma #rrggbb (hexadecimal), de la forma rgb(0,0,0) (RGB 3 numeros de 0 a 255), tanto como un atributo con el nombre del color en ingles como "blue", "red", "green", "orange", etc.. estos faciles de reconocer pero no permiten el alcance de todos los colores. Un buen truco para no estar adivinando es tomar un editor de images y con la paleta de colores tomar un valor que te guste.

Ejemplos de propiedad

Código: You are not allowed to view links. Register or Login
p {
color:#333333; /* Color Hexagesimal que representa gris oscuro */
}
h1 {
color:green; /* Nombre en ingles: verde */
}
a {
color:rgb(0,200,50) /* Color rgb que si no me equivoco representa un color ver medio turquesa */
}

Text-align

Esta propiedad cambiar el alineamiento del texto, para esta propiedad hay cuatro atributos posibles

left           // Alineacion a la izquierda
right         // Alineacion a la derecha
center     // Alineacion al centro
justify    // Alineacion justificada

Ejemplos de propiedad

Código: You are not allowed to view links. Register or Login
p {
text-align:justify;
}
h1 {
text-align:center;
}
a {
text-align:right;
}
h3 {
text-align:left;
}

Text-decoration:

Con este se puede dar o quitar alguna decoracion del texto, como son el subrrallado o el strike.

Los atributos para esta propiedad son:

none    //ninguna decoracion, sirve para quitar la decoracion
underline  //Subrrallado
overline   //Un rallado pero encima del texto
line-through   //strike

Ejemplos de Propiedad

Código: You are not allowed to view links. Register or Login
p {
text-decoration:none;
}
h1 {
text-decoration:underline;
}
h2 {
text-decoration:line-through;
}
h3 {
text-decoration:overline;
}

letter-spacing y word-spacing

Estas nos permiten cambiar el espacio en las letras y las palabras respectivamente (word - palabra y letter - letra)

Los atributos para esta propiedad son tanto las unidades de longitud de CSS como tambien el atributo normal (que provee el espacio predeterminado del navegador)

Ejemplos

Código: You are not allowed to view links. Register or Login
h1 {
  letter-spacing:10px;
  word-spacing:30px;
}

text-indent

Nos permite cambiar la sangria de un texto, es decir, en la primera linea de un texto se agrega un espacio antes de la linea, pero a partir de la segunda linea el texto aparece sin espacio

Los atributos que podemos dar a esta propiedad son de unidades de longitud.

Código: You are not allowed to view links. Register or Login
p {
  text-indent:20px;
}

text-transform

Con este podemos "transformar el texto" en mayusculas, en minusculas, normal o la primera letra mayuscula

Los atributos posibles son:

none                   //ninguno
uppercase         // mayuscula
lowercase            //minuscula
capitalize        //primera letra en mayuscula

Ejemplo de propiedad

Código: You are not allowed to view links. Register or Login
p {
text-transform:uppercase;
}
h1 {
text-transform:lowercase;
}
h2 {
text-transform:capitalize;
}
h3 {
text-transform:normal;
}

Saludos
« Última modificación: Abril 25, 2009, 05:28:59 am por carlmycol »

Desconectado carlmycol

  • Yo vivo en CPH
  • ***
  • Mensajes: 1357
  • Sexo: Masculino
    • Ver Perfil
Re: Curso de Hojas de Estilo en Cascada / CSS
« Respuesta #5 en: Abril 25, 2009, 05:41:00 am »
Ejemplos y Ejercicios de Recapitulacion

Ejemplo 1
Código: You are not allowed to view links. Register or Login
<html>
<head>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
}
h1 {
color:#0099CC;
letter-spacing:5px;
text-align:center;
word-spacing:10px;
font-weight:normal;
}
p {
text-align:justify;
font-size:12px;
word-spacing:3px;
color:#666666;
}
</style>
<title>Ejemplo practico Nº1</title>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, varius nec, egestas a, bibendum in, arcu.
Pellentesque mattis erat sed risus. Curabitur elementum. Donec velit turpis, blandit eu, vehicula porta, blandit in,
dolor. Sed sodales, dolor sed luctus auctor, erat enim sagittis tortor, a vehicula elit mauris et velit. Etiam aliquam
sollicitudin justo. Sed tristique, purus non elementum egestas, elit dolor facilisis mauris, vitae placerat orci
tortor id purus. Cras vulputate lacus id nisl. Vivamus quam est, lacinia ac, luctus vel, tincidunt quis, risus. Aliquam
consectetur varius dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Donec sodales, tortor vitae malesuada dictum, est leo convallis elit, in faucibus nibh justo a massa. Aliquam
 fermentum vestibulum neque. Nam sem dolor, tempor id, mollis id, adipiscing eget, ligula. Donec pharetra volutpat est.
Curabitur augue. Nulla dui eros, volutpat in, consectetur sit amet, viverra quis, enim. Pellentesque aliquam, ante nec
convallis semper, lacus augue pellentesque est, ut egestas quam enim ac sapien.</p>
<p>Praesent blandit varius libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis, sem
sed euismod fermentum, enim magna sollicitudin ante, sed porttitor ante dui eget magna. Vivamus volutpat lor
em vitae augue. Donec fermentum. Nam auctor neque nec velit. Morbi aliquet sapien ut nunc. In magna lorem,
 laoreet quis, tincidunt eu, gravida nec, nisi. Vivamus ut nulla. Donec risus. Nulla condimentum. Donec eget massa.
Quisque mollis. Donec vitae nibh. Nam nec augue. Nulla non felis. Nullam dignissim, magna eget sodales interdum,
tellus libero dapibus odio, et ultricies magna tellus tincidunt dolor.</p>
</body>
</html>


Ejemplo 2
Código: You are not allowed to view links. Register or Login
<html>
<head>
<title>Curso de CSS By Carlmycol - Propiedades de texto</title>
<style type="text/CSS">
body {
font-family:heveltica, san serif, arial;
/* eso es todi por ahora xD */ /* si, si escribi todi */
font-size:80%;
}
h1 {
color:#ba1111; /*color rojo oscuro */
text-decoration:underline; /*  subrrallado */
letter-spacing:3px; /*espacio entre las letras: 3px */
word-spacing:6px; /* espacio entre las palabras 6px */
/* recapitulemos propiedades de fuente */
font-variant:small-caps;
}
h2 {
color:#666666; /* color gris medio oscuro */
text-transform:uppercase; /* transformacion mayuscula xd */
word-spacing:4px; /* espacio entre palabras 4px; */
}
h3 {
color:#0099FF; /* color azul claro */
text-transform:lowercase; /* transformacion minusculas */
text-decoration:line-through; /*decoracion linea strike*/
}
p {
text-indent:20px; /* sangria 20px*/
word-spacing:3px; /* espacio entre letras 3px*/
color:#333333; /*gris oscuro */
text-transform:capitalize; /* primera letra de palabras en mayuscula */
}
</style>
</head>
<h1>Titulo nivel 1</h1>
<h2>Titulo nivel 2</h2>
<h3>Titulo nivel 3</h3>

<p>este es un parrafo de ejemplo</p>

</html>


Ejercicios

1.- Hacer una pagina web en la que se exponga algun texto de wikipedia, en la cual el tituto salga centrado con propiedades que lo hangan resaltante y el texto con propiedades que lo hagan legible.

2.- Hacer una pagina web en donde se definan las marcas HTML, H1, H2, H3, H4 y H5 en donde el espacio entre las letras, el espacio entre las palabras y el tamaño vallan cambiando.


Saludos

Desconectado carlmycol

  • Yo vivo en CPH
  • ***
  • Mensajes: 1357
  • Sexo: Masculino
    • Ver Perfil
Re: Curso de Hojas de Estilo en Cascada / CSS
« Respuesta #6 en: Abril 25, 2009, 06:09:27 am »
Estilos para Etiquetas segun su Contexto

Introduccion

En la creacion de estilos CSS muchas veces suele pasar que necesitamos darle estilos a una etiqueta especifica solo si esta dentro de otra etiqueta especifica, si esto sucede entonces se activará el estilo o en su defecto no se activará.

Sintaxis

La sintaxis consiste en poner en orden creciente las etiqetas que van una dentro de otro, dejando un espacio entre cada. Por ejemplo

Citar
Etiqueta1 Etiqueta2
{

}

En este caso se le daría estilo a "Etiqueta2" siempre y cuando este dentro de "Etiqueta1".

Tambien podemos utilizar esto para varias etiquetas esten una dentro de la otra. Por ejemplo:

Citar
Etiqueta1 Etiqueta2 Etiqueta3
{

}

Podemos ver que se le daría estilos a la "Etiqueta3" siempre y cuando este dentro de "Etiqueta2" siempre que esta este dentro de "Etiqueta1"

Ejemplos

Código: You are not allowed to view links. Register or Login
<html>
<head>
<style type="text/CSS">
h1 b {
color:BLUE;
}
p b {
color:GREEN;
}
</style>
</head>
<body>
<h1>Hola<b> mundo</b></h1>
<p>Este es un <b>ejemplo</b> jeje xD</p>
</body>
</html>

El resultado sería este:



Aqui otro ejemplo, en este caso hay 3 etiquetas html que tienen que esta una dentro de la otra.

Código: You are not allowed to view links. Register or Login
<html>
<head>
<title>Problema</title>
<style type="text/css">
div h1 em {
  color:#ff0000;
}
</style>
</head>
<body>
<div>
<h1>este h1 esta dentro del <em>div</em></h1>
</div>
<h1>este h1 esta fuera de un <em>div</em></h1>
</body>
</html>

Vemos que se la da estilo a em solo si esta dentro de h1 y este a su vez si esta dentro de <div>

Este sería el resultado:




Saludos. Carlmycol

Desconectado carlmycol

  • Yo vivo en CPH
  • ***
  • Mensajes: 1357
  • Sexo: Masculino
    • Ver Perfil
Re: Curso de Hojas de Estilo en Cascada / CSS
« Respuesta #7 en: Abril 25, 2009, 07:05:25 am »
Las Clases en CSS

Introduccion

En innumerables ocaciones es necesario dar un estilo a un conjunto de marcas HTML pero que sin embargo no afecten a otras con la misma marca por esto es necesario dar un nombre a ese estilo y usarlo las veces que se necesite.

Comencemos

Para poder las cosas de una manera mas clara vallamos a un ejemplo.

Código: You are not allowed to view links. Register or Login
<html>
<head>
<style type="text/CSS">
 p{ color: #666666; font-size:8px; }
 .importante{ color: blue; font-weight:bold; ) 
</style>
</head>
<body>
<p> Este es un párrafo normal. </ p>
<p class="importante">Este es un parrafo importante!!!</p>
</body>
<html>

El resultado es este:



Se puede ver en el ejemplo que la clase llamada "importante" es color azul y esta en negrilla este codigo es reutilizable puede usarse cuantas veces se quiera solo con llamar a la clase, tambien es posible llamar esta clase desde otra marca HTML, Por ejemplo si llamamos a la clase desde H1 verémos que nuestro texto saldría como un encabezado H1 con color azul y en negrilla.

Analisis de Sintaxis

La sintaxis de las clases en css es:

Citar
.identificador {
...
}

Donde identificador es el nombre de la clase. Tambien es posible dejar la clase para que solo se use con una etiqueta en especifico, la sintaxis sería.

Citar
etiqueta.identificador {
...
}

Otro ejemplo que considero didactico:

Código: You are not allowed to view links. Register or Login
<html>
<head>
<title>Titulo</title>
  <style type="text/css">
  h1.miclase { color:blue; }
  .miotraclase {color:green;}
  </style>
</head>

<body>

<h1 class="miclase">esto aparecería en azul</h1>
<h1>esto aparecería como cabecera H1 normal</h1>
<h1 class="miotraclase">esto aparecería en verde</h1>
<p class="miotraclase">y este párrafo, tambien en verde</p>

</body>
</html>

Resultado:


Saludos

Desconectado leovijil20

  • Me das tu IP?
  • *
  • Mensajes: 137
  • Sexo: Masculino
  • Mente Corazon y Fuerza
    • Ver Perfil
Re:Tutorial Basico de Hojas de Estilo en Cascada / CSS
« Respuesta #8 en: Enero 05, 2012, 01:23:52 am »
Jamas crei que fuera tan facil el css puff increible lo que se puede hacer siento hasta ganas de llorar de la emocion jeje bueno directo al grano

Gracias man mil gracias sin esto creo que jamas habria entendido el css hize los mismos ejemplos separado del html y todo me funciono al principio me costo diferenciar como se sacaba una clase y una etiqueta hasta que entre a este post
.clase
#etiqueta

estoy muy agradecido man lo terminare de leer para aprender mas pero por donde voy muchas gracias
xXDarkLeoXx


xx
Hojas de estilo externas

Iniciado por shevchenko

0 Respuestas
1546 Vistas
Último mensaje Abril 07, 2009, 07:33:41 pm
por shevchenko
xx
hojas de estilo css...duda, pq no funciona?

Iniciado por Fhaker

2 Respuestas
1468 Vistas
Último mensaje ſeptiembre 13, 2007, 12:03:49 am
por Big-Peru_
xx
Como crear cuadros con Hojas de Estilo

Iniciado por shevchenko

0 Respuestas
1839 Vistas
Último mensaje ſeptiembre 03, 2008, 11:13:16 am
por shevchenko
resuelto
Curso Hojas de Estilo Css | Javascript <Aprendè desde 0>

Iniciado por proton6

12 Respuestas
9038 Vistas
Último mensaje Junio 09, 2013, 08:04:52 pm
por M4inFox
exclamation
[Tutorial] Letras estilo Neon.

Iniciado por proton6

0 Respuestas
2354 Vistas
Último mensaje Julio 09, 2008, 11:06:52 am
por proton6
resuelto
ayuda eliminacion en cascada 1:M please!!

Iniciado por b4dm4st3r

2 Respuestas
807 Vistas
Último mensaje Junio 09, 2013, 09:00:48 pm
por b4dm4st3r
question
Tutorial basico que sea bueno de .NET

Iniciado por mDrinky

0 Respuestas
1303 Vistas
Último mensaje Noviembre 02, 2009, 02:34:17 am
por mDrinky
xxx
Tutorial HTML - Basico

Iniciado por JaAViEr

0 Respuestas
1736 Vistas
Último mensaje ſeptiembre 21, 2009, 06:29:25 pm
por JaAViEr
thumbup
Tutorial de nivel basico de batch

Iniciado por NetPirate

4 Respuestas
1686 Vistas
Último mensaje Agosto 06, 2008, 04:40:39 pm
por PyXOLo
exclamation
[Tutorial][Muy Básico] Efecto Vintage

Iniciado por White Roses

5 Respuestas
5586 Vistas
Último mensaje Junio 13, 2010, 10:55:18 am
por ((-G0rD!-))