Entrar

Como ver la hoja de estilos

vgombau · · Solicitar retirada
Hola. Son muy muy novata en esto y me asalta una duda que a lo mejor es una estupidez...En alguna leccion del curso pasao a paso se indica como ver el codigo fuente de cualquier web, pero..es posible cotillear tambien la hoja de estilos y como?
kimapa · · Solicitar retirada
Pues en algunas si que se puede ver, lo unico que tienes que hacer es abrir el codigo fuente de la pagina y fijarte en a linea donde se dicta el estilo. Si la hoja de estilo es estilo.css por ejemplo, te vas a la barra de dirección de la pagina y al final de la dirección pones la hoja de estilo ejem. http://...../...../estilo.css o como le haya llamado a ese fichero que tendrá siempre eso si extension .css.
Si no se hace así que me corrija alguien.
---.Saludos.---
Ana Luisa · · Solicitar retirada
Hola Kimapa,

Yo tambien soy nueva en todo esto y traté de hacer lo que dijiste con la web de COMOCREARTUWEB.com porque es la tenemos en común. Y en la barra de dirección añadí:

www.comocreartuweb.com/html...aplicando-bordes.html/comunes/estilosvista.css

Lo que está en verde lo añadí sacándolo del código fuente en la línea que relaciona a html con estilos (link rel="stylesheet...) pero no me salió. Seguro que en algo me he equivocado. Puedes ser, por favor, un poquito más específico y darnos un ejemplo. Muchas gracias de antemano.
kimapa · · Solicitar retirada
Pues mira, en la de cctw esta es su pagina principal: http://www.comocreartuweb.com/. Si ves el codigo fuente de esa pagina, una de las rutas de estilo es esta:
<LINK rel="stylesheet" href="comun/estilo-index-view-2008.css" type="text/css" media="all">
De aqui extraes la ruta "comun/estilo-index-view-2008.css"
Copias esto y lo pegas al finas de la direccion de la pagina quedandote asi: http://www.comocreartuweb.com/comun/estilo-index-view-2008.css y veras que este es el codigo de la hoja de estilos:

------------------------------------------------------------------------------------
A, DIV, P, H1, H2, br, img {margin:0px ; padding:0px ; BORDER: #000 0px solid }
BODY {FONT: 16px "trebuchet ms", tahoma, Geneva, Arial, Helvetica, sans-serif; BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url(objetos/fondo.png); PADDING: 0px; MARGIN: 0px ;BORDER: #000 0em solid ; BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #c8e7ff; TEXT-ALIGN: center ;line-height:100%}
P {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; MARGIN: 0px; PADDING-TOP: 0px; PADDING-BOTTOM: 10px ; text-align:justify ; text-indent:15px; FONT-SIZE: 1em}
h1 {FONT-SIZE: 1em; color:blue}
h2 {FONT-SIZE: 1em; color:blue ; margin-bottom:10px}
A {TEXT-DECORATION: none; COLOR: #000000}
A IMG {BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none}
BR {FONT-SIZE: 1em;}
#contenido {BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url(objetos/index-fondo-total.png) ; PADDING: 8px 0px 0px 0px ; MARGIN: 0px auto ; WIDTH: 769px ; position:relative}
#banners {WIDTH: auto; HEIGHT: 65px; TEXT-ALIGN:center}
#banner1 {WIDTH: 274px; FLOAT: left}
#banner2 {WIDTH: 490px; FLOAT: right; text-align: left}

#lenguetas {WIDTH: auto; HEIGHT: auto; TEXT-ALIGN:center ; FONT-SIZE: .74em}
.paso {CLEAR: both; OVERFLOW: hidden; HEIGHT: 0.1em}

#cuerpo {WIDTH: auto; PADDING-TOP: 20px; PADDING-LEFT: 3px ; FONT-SIZE: 1em ; }
#cuerpo-izq {FLOAT: left; MARGIN-LEFT: 2px; MARGIN-RIGHT: 2px; MARGIN-TOP: 0px; WIDTH: 141px ; FONT-SIZE: .66em ; }
#cuerpo-izq A {margin: .07em .2em .5em .3em}
#cuerpo-cent {FLOAT: left; MARGIN-LEFT: 2px; MARGIN-RIGHT: 2px; MARGIN-TOP: 0px; WIDTH: 465px ; FONT-SIZE: 1em ; }
#cuerpo-der {FLOAT: left; MARGIN-LEFT: 2px; MARGIN-RIGHT: 0px; MARGIN-TOP: 0px; MARGIN-BOTTOM: 6px ; WIDTH: 141px ; FONT-SIZE: .66em ; }
#cuerpo-der A {margin: .07em .2em .5em .3em}
.columna-central A {TEXT-DECORATION: none ; color:#6666FF}
.columna-central {MARGIN: 0px 5px 0px 5px ;}
#cuerpo-izq A {DISPLAY: block; text-align:justify}
#cuerpo-izq A:link {}
#cuerpo-izq A:visited {}
#cuerpo-izq A:hover {BACKGROUND: #E4E4E4}
#cuerpo-izq A:active {BACKGROUND: #FEF9CF}
#cuerpo-der A {DISPLAY: block; text-align:justify}
#cuerpo-der A:link {}
#cuerpo-der A:visited {}
#cuerpo-der A:hover {BACKGROUND: #E4E4E4}
#cuerpo-der A:active {BACKGROUND: #FEF9CF}


#opciones-inferior {position: absolute; top: 904px; left: 0px ; margin: 0px ; padding: 0px ; WIDTH: auto; TEXT-ALIGN: center ; FONT-SIZE: .8em ; BORDER: #000 0px solid }
#opciones-inferior A {FONT-SIZE: .7em }
#opciones-inferior A:LINK {}
#opciones-inferior A:VISITED {}
#opciones-inferior A:HOVER {FONT-WEIGHT: bold}
#opciones-inferior A:ACTIVE {COLOR: blue}

.espacio { margin: 0px; padding: 0px 0px 95px 0px }

#flotante {background-color: white ; display:block ; width:240px ; float: right ; height: 200px}
#flotante2 {background-color: white ; display:block ; width:302px ; float: right ; height: 252px}
#topsites {position:absolute; top:827px ; left:150px ; margin-left: 15px; font-size: .8em ; width:200px ; float: left ; height: 50px}
#directorio {position:absolute; top:827px ; left:398px ; margin-right: 15px; font-size: .8em ; width:200px ; float: right ; height: 50px}
.tiraecol {position:absolute; top:627px ; left:153px ; margin-right: 0px; font-size: 1em ; width:200px ; float: left }

#uno {FLOAT: left; WIDTH: 160px; margin-left: 5px ; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
#dos {FLOAT: left; WIDTH: 469px; MARGIN-BOTTOM: 2px; TEXT-ALIGN: center}
#tres {FLOAT: left; WIDTH: 120px; MARGIN-LEFT: 4px; TEXT-ALIGN: center}
#tres p {margin: 0px; padding: 0px; FONT-SIZE: .7em}
#tres a {margin: 0px; padding: 0px; }

#pie {WIDTH: auto; TEXT-ALIGN: center}
#copyright {margin-top: 2px ; padding-bottom: 10px ; FLOAT: left; WIDTH: 192px ;FONT-SIZE: .7em ;}
-----------------------------------------------------------------------------------
Espero que ahora lo tengas un poco mas claro.
---.Saludos.---