duda sobre el estilo.css y estilo general.css

hola tengo una duda por aqui, me encuentro muy entusiasmado con la creacion de la pagina y he notado que tal vez me he equivocado en algo o que yo no entiendo lo que pasa: el tema es que coloque en le razi la pagina de ejemplo y al abrir internet para ver como sale lo poco que logrado hasta ahora ( segun el curso paso a paso) me sale solamente lo del estilo.css. mi duda consiste en eso solamente sale lo de estilo.css?? porque lo que he preparado en estilo general.css esta bien se ve bien en el html kit pero no sale en el razi ( y lo cargue de acuerdo al curso junto con estilo.css el index y la carpeta objetos como dicta el curso) he revisdado varias veces y todo lo del estilo general .css sale bien como lo muestra el curso pero reitero solo en el programa y no asi en internet cuando cargo la direccion que puse en razi, esto deberia ser asi? o tal vez me falto vincular bien algo??

alexuy38 escribió:hola tengo una duda por aqui, me encuentro muy entusiasmado con la creacion de la pagina y he notado que tal vez me he equivocado en algo o que yo no entiendo lo que pasa: el tema es que coloque en le razi la pagina de ejemplo y al abrir internet para ver como sale lo poco que logrado hasta ahora ( segun el curso paso a paso) me sale solamente lo del estilo.css. mi duda consiste en eso solamente sale lo de estilo.css?? porque lo que he preparado en estilo general.css esta bien se ve bien en el html kit pero no sale en el razi ( y lo cargue de acuerdo al curso junto con estilo.css el index y la carpeta objetos como dicta el curso) he revisdado varias veces y todo lo del estilo general .css sale bien como lo muestra el curso pero reitero solo en el programa y no asi en internet cuando cargo la direccion que puse en razi, esto deberia ser asi? o tal vez me falto vincular bien algo??

Hola:
Recuerde que usted tiene una carpeta en su escritorio que se supone que se llama "mis-web", dentro de esa carpeta tiene otra que sería la carpeta raíz en donde debe guardar allí todos los archivos que vaya creando para su web, esa carpeta que estará dentro de la que se llama "mis-web" debe llamarse "web-ejemplo-cctw".
Allí en esa carpeta usted pone la página index.html, dicha página está relacionada con una hoja de estilo que tiene por nombre estilo.css.
Eso es la primera parte.
Luego usted crea la plantilla, pues esa página plantilla.html debe de estar relacionada con una hoja de estilo llamada estilo-general.css.
resumiéndo:
Todo lo que usted haga enla página index.html está relacionado con la hoja de estilo con la cual esa página está relacionada que sería esa hoja llamada estilo.css.
Por tanto, entonces ahora, todo lo que haga en su página plantilla.html está relacionada con su propia hoja de estilo llamada estilo-general.css.
Eso significa que usted dentro de la carpeta "web-ejemplo-cctw" que tiene en su escritorio, tiene un archivo llamado index.html que está recibiéndo las órdenes de una hoja de estilo llamada estilo.css, dicha hoja de estilo está relacionada con , y solo con esa página llamada index.html.
Y en lo que concierne a la pagina o archivo llamado plantilla.html, éste está relacionado solo y solo con esa otra hoja de estilo llamada estilo-general.css.
Lógicamente usted debe subir esos cuatro archivos al hosting
.
Recuerde que también debe hacer un enlace desde la página index.html hacia la página plantilla.html para que cuando se le abra su index en internet pueda desde allí ir también a su página plantilla.
Saludos

bien eso lo tengo claro cada estilo con su plantilla e index, todo esta en la carpeta correspondiente y subido al razi. lo que entonces me falta es vincular la de estilos. css solo que ; o no lei bien el curso paso a paso o aun no llegue a ese punto donde y como crear tal enlace. revisare hacia atras a ver si me pase esa parte. gracias :wink:

alexuy38 escribió:bien eso lo tengo claro cada estilo con su plantilla e index, todo esta en la carpeta correspondiente y subido al razi. lo que entonces me falta es vincular la de estilos. css solo que ; o no lei bien el curso paso a paso o aun no llegue a ese punto donde y como crear tal enlace. revisare hacia atras a ver si me pase esa parte. gracias :wink:

Hola:
Para vincular (relacionar) cada pagina html con su correspondiente hoja de estilo se pone dicho código entre la etiqueta <head> y </head> de la pagina que va a relacionar
Por ejemplo si la pagina se llama plantilla.html y la hoja de estilo que le da órdenes a esa página es la que se llama estilo-genera.css
entonces debe abrir su pagina plantilla en modo código y escribir entre el <ead> y el <7head> lo siguiente

<link rel="stylesheet" href="estilo-general.css"type="text/css"
media="all">
De tal manera que le quede así:
<html>
<head>
<title>Mi primera pagina</title>
<link rel="stylesheet" href="estilo-general.css"type="text/css"
media="all">
</head>
<body>
</body>
</html>


Con eso, la pagina plantilla queda relacionada con su hoja de estilo llamada estilo-general.css

ahora para relacionar la pagina html llamada index.html con la hoja de estilo llamada estilo.css, debe

abrir su pagina index.html en modo código y escribir entre el <head> y el </head> lo siguiente:

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

De tal manera que le quede así:
<html>
<head>
<title>Mi pagina index</title>
<link rel="stylesheet" href="estilo.css"type="text/css"
media="all">
</head>
<body>
</body>
</html>

Ahora para crear un vínculo o enlace desde la pagina index.html hacia la página plantilla.html debe escribir en la pagina index.

Por ejemplo entre la etiqueta <body> y </body> lo siguiente.



Plantilla</p>
en este ejemplo la tengo encerrada en un párrafo

La puede encerrar o no entre la etiqueta párrafo si lo desea
Saludos

bien otra vez gracias tus explicaciones son muy claras, ya mejoro la cosa. si no te molesta estoy el la parte del curso paso a paso en la que tengo que colocar la (menu- curva- superior y menu-parte-inferior) y llegue al titulo de leccion : retocando los codigos. yo he seguido con detalle el curso y en mis dificultades llegue hasta aqui para continuar de acuerdo al mismo, y me encuentro que el estilo.general.css deberia ( segun la leccion) asi:

...........................................................................................
Debe tener ese orden para no liarnos lecciones sucesivas:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px }
#menu h1 {}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

bien asi se ve en la hoja de la leccion.

sin embargo yo en mi estilo.general.css tengo ( y lo fui haciendo segun el curso)

*{margin:0px ; padding:0px ; border:0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto}
#cabecera {background-color: white ; border-left:black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left}
#publicidad {width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: grey ; border: black 1px solid ; height: 20px }
#navegacion li{float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul {margin-left:180px }
#contenido {background-color: orange ; border-left:black 1px solid;border-right:black 1px solid}
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px }
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px}
#menu h1 {text-decoration:none ; front-size:15px }
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
#menu li { list-style:none ; margin: 4px 0px 4px 6px}
a {color: brown ; text-decoration:none ;display:block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:silver }
a:active {}
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align:justify}
#contenido p{padding:5px 10px 5px 10px}
h1 {font.size:1.2em;color:blue ; font-weight:bold ; text-decoration:underline;text-align: center}
h2 {font.size:1.1em;color:blue ; font-weight:bold ; text-decoration:none;text-align: center}
#curva-superior {background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow : hidden}
#curva-inferior {background-image:url(objetos/curva-inferior.gif) ; width:800px ; height:12px ; overflow : hidden}


y la plantilla esta asi:

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

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css"
media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>

Seccion 1

Seccion 2

Seccion 3

Seccion 4

</div>
<div id="contenido">
<div id="menu">
<ul><h1>Titulo de Seccion 1</h1>

Enlace 1

Enlace 2

Enlace 3
</div>
<h1>Esta sera la zona principal de la web</h1>


Pagina de prueba</p>


y este es el segundo parrafo</p>
<h2>y este es el tercer parrafo</h2>
</div>
<div id="pie">Este es el pie de pagina</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>


bueno si tu encuentras que esta bien mejor asi, de lo contrario dime si salte algo del curso. gracias

alexuy38 escribió:bien otra vez gracias tus explicaciones son muy claras, ya mejoro la cosa. si no te molesta estoy el la parte del curso paso a paso en la que tengo que colocar la (menu- curva- superior y menu-parte-inferior) y llegue al titulo de leccion : retocando los codigos. yo he seguido con detalle el curso y en mis dificultades llegue hasta aqui para continuar de acuerdo al mismo, y me encuentro que el estilo.general.css deberia ( segun la leccion) asi:

...........................................................................................
Debe tener ese orden para no liarnos lecciones sucesivas:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px }
#menu h1 {}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

bien asi se ve en la hoja de la leccion.

sin embargo yo en mi estilo.general.css tengo ( y lo fui haciendo segun el curso)

*{margin:0px ; padding:0px ; border:0px}
body {text-align: center}
#global {width:800px ; margin: 4px auto}
#cabecera {background-color: white ; border-left:black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left}
#publicidad {width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: grey ; border: black 1px solid ; height: 20px }
#navegacion li{float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul {margin-left:180px }
#contenido {background-color: orange ; border-left:black 1px solid;border-right:black 1px solid}
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px }
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px}
#menu h1 {text-decoration:none ; front-size:15px }
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
#menu li { list-style:none ; margin: 4px 0px 4px 6px}
a {color: brown ; text-decoration:none ;display:block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:silver }
a:active {}
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align:justify}
#contenido p{padding:5px 10px 5px 10px}
h1 {font.size:1.2em;color:blue ; font-weight:bold ; text-decoration:underline;text-align: center}
h2 {font.size:1.1em;color:blue ; font-weight:bold ; text-decoration:none;text-align: center}
#curva-superior {background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow : hidden}
#curva-inferior {background-image:url(objetos/curva-inferior.gif) ; width:800px ; height:12px ; overflow : hidden}


y la plantilla esta asi:

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

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css"
media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>

Seccion 1

Seccion 2

Seccion 3

Seccion 4

</div>
<div id="contenido">
<div id="menu">
<ul><h1>Titulo de Seccion 1</h1>

Enlace 1

Enlace 2

Enlace 3
</div>
<h1>Esta sera la zona principal de la web</h1>


Pagina de prueba</p>


y este es el segundo parrafo</p>
<h2>y este es el tercer parrafo</h2>
</div>
<div id="pie">Este es el pie de pagina</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>


bueno si tu encuentras que esta bien mejor asi, de lo contrario dime si salte algo del curso. gracias

Hola:
En realidad no se habrá saltado nada por ahora,
Si se da cuenta, a medida que se van explicando cosas en el curso de lo que hay que poner en la página y en la hoja de estilo,, éstas van quedando con los códigos un poco desordenados, por ello después se recomienda ordenarlos.
Como por ejemplo ese código universal (en la hoja de estilo general) que sirve para todo (*), como es universal, es el que manda.
Por ello después se explica que si hay que ponerle margen a algo, (mediante ese código universal, sería que por defecto no hay márgenes), se le ponga especialmente a la capa que le corresponda.

Fuera de eso, si usted se fija, la página web (la plantilla.html) tiene una capa global que contiene a todas las demás capas (que irán dentro de esa capa global), por tanto es lógico que esa capa global sea de las primeras que se pongan en la página, así también la imagen curva superior, ya que esa imagen va justo dentro de la capa global pero arriba, luego ya viene la capa cabecera, y dentro de la capa cabecera van las otras dos capas (logotipo y publicidad) y así continúa hacia abajo.

En la hoja de estilo es parecido, ya que también debe llevar un orden, primero ese código universal, luego las etiquetas de títulos (h1 y h2) y continúa hacia abajo con el resto.

Por tanto lo que hay que hacer es ordenar los códigos en la hoja de estilo general, para que los navegadores tengan menos trabajo ya que estos leen la hoja de estilo de arriba hacia abajo y de derecha a izquierda, por ello, eso es lo que se le sugiere en el curso.
Así que como sugerencia usted pónga los códigos como salen en donde dice:
"Debe tener ese orden para no liarnos lecciones sucesivas"

Saludos

muy bien gracias entiendo el punto. entonces vamos a reordenar todo. hasta pronto :D

Hola, yo he reelaborado mi página con Dreamweaver, sin embargo tengo un detallito que no logro solucionar y no quiero meter la pata. Resulta que los links en algunas páginas se ven subrayados y con otro color cuando se coloca el cursor sobre ellos, eso está bien; pero en la página principal NO sucede lo mismo, incluso sucede en algunos links y en otros no, supongo que tengo alguna duplicidad en lo que se refiere a la creación de estilos pero estoy trabado y quisiera lograr esa uniformidad en todo el sitio web. Pueden ayudarme?