CSS?

No entiendo muy bien este tema, pero abe si lo pillo
CSS se utiliza para crear un estilo de una pagina web, para evirtar el estar modificndo toas continuamente. El documento html se vincula al css y asi obtendremos el html con el el estilo diseoado en el css.

Creo q eso lo comprendo. Pero como creo yo un CSSo? No se si esto esta bien:
Creo un documento html, con sus dibujtos, fondo, menu, etc. Ahora tendria q exportarlo a archivo csso? Creo q es asi como se ace noo?
Y si quiero modificar un csso? como lo ago, lo abro con dreamweaver y solo me aparecen codigos del diseoo.
Esto de los css, no da problemas a lo ora de utilizar un navegador diferenteo?

Saludos

Cita de: Z0N3_0FF en Marzo 21, 2007, 11:56:43

Yo lo que e hecho es guardar un documento html como css y se me creo un codigo

Para que haces eso??, el ejemplo que te puse lo hice con el dreamweaver
solo dale al menu de nuevo y eljies nuevo CSS y le vas agregando lo que necesites
no tienes que hacer un html y luego renombrarlo a css lol xD

Saludos

Claro que no es mas dificil, mmm mira el ejemplo que te voy a poner, coloreando
las tablas y unas cosas mas, pero toma en cuenta que esto ya no va a estar en el
html, va a ser un fichero aparte , mira

Código:

table{
background-color: #000000;
}

y ahi todo lo que este entre <table></table> va a tener color negro de fondo a
menos que haya otra tabla dentro de esa tabla o un div, aver para que me
entiendas otro ejemplo(espero que entiendas Wink

)

las etiquetas <h1></h1> sirven para poner como el encabezado de la pagina no?
entonces imagina que a ti te gusta poner el encabezado de color azul y de estilo
negrita, entonces para no tener que hacer esto:

Código:

<font color="#0000FF"><b><h1>Mi encabezado</h1></b></font>

en un css pones esto:

Código:

h1{
color: #0000FF;
font-weight : bold;
}

y asi le puedes hacer para muchas cosas mira otros ejemplos xD
(estos son los que tengo en mi pagina)

Código:

body{
background-color: #000000;
}

input[type=submit],
input[type=reset],
input[type=button] {
border-color: #000000;
border-style: solid;
border-width: 1px;
background-color: #1D1D1D;
color: #7D7D7D;
font-size: 11px;
padding-bottom: 1px;
padding-top: 1px;
width: 90px;
font-weight : bold;
}

input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover {
border-color: #000000;
border-style: solid;
border-width: 1px;
background-color: #141414;
color: #808080;
font-size: 11px;
padding-bottom: 1px;
padding-top: 1px;
width: 90px;
font-weight : bold;
}
textarea {
color: #C0C0C0;
background-color: #000000;
border-color: #800000;
border-style: solid;
border-width: 1px;
font-weight : bold;
}

input[type=file], input[type=text], input[type=password] {
color: #C0C0C0;
background-color: #000000;
border-color: #800000;
border-style: solid;
border-width: 1px;
font-weight : bold;
}
h1 {
color: #666666;
font-family: "Courier New", Courier, monospace;
}

Espero que hayas entendido Wink

Saludos, y ya trata de no citar todo lo que te contesto porque se dificulta la lectura Wink

Seria asi:

/* default styles */
*{ margin: 0; padding: 0; }
body { font: .7em Arial, Verdana, Sans-Serif; line-height: 1.7em; background: #fff url(images/menu.gif) repeat-x; color: #454545; }
a { color: #3F2C57; background: inherit; text-decoration: none; }
#left a, #right a { border-bottom: 1px dotted #3F2C57; }
a:hover { color: #808080; background: inherit; }
p {   margin: 0 0 5px 0; }
h1 { font: normal 2.8em Georgia, "Trebuchet MS", Arial, Sans-Serif; padding: 0 0 0 0; margin: 0; }
h2 { margin: 0; padding: 0; font: normal 1.8em Georgia, "Trebuchet MS", Arial, Sans-Serif; }
h1 a, h2 a { color: #000; background: inherit; text-decoration: none; }
img { border: 0; }

/* layout */
#content { margin: 0 auto; width: 980px; }
#header {
   padding: 10px 0;
   color: #fff;
   margin: 0 0 20px 0;
   height: 94px;
}

/* main horizontal menu */
#tablist{ margin: 25px 0 0 0; }
   #tablist li{ list-style: none; display: inline; }
   #tablist li a{
      text-decoration: none;
      margin: 0 3px 0 0;
      padding: 4px 15px;
      border: 1px solid #3B3B3B;
      font-weight: bold;
      color: #ccc;
   }
   #tablist li a:hover{
      border: 1px solid #55684A;
      color: #fff;
   }
   #tablist li a.current{
      background: #ADD597;
      color: #fff;
   }
   #tablist .key { text-decoration: underline; }

/* left side */
#left {
   float: left;
   width: 670px;
   margin: 0 0 10px 0;
}
   .border { border: 1px solid #AED898; margin: 0 0 10px 0;}
   .subheader {
      padding: 15px;
      background: #F1F8ED;
      color: #444;
      border: 2px solid #D1EAC3;
   }
   .highlight { background: #C5E7F6; color: #000; }
   .left_articles {
      margin: 0 0 10px 0;
      border: 2px solid #eee;
      color: #454545;
      padding: 15px 15px 5px 10px;
   }
      .date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; }
      .bigimage {
         float: left;
         clear: left;
         margin: 0 15px 10px 0;
      }
   .left_box {
      background: #F4F1F8;
      color: #808080;
      border-left: 3px solid #E8E2F2;
      padding: 15px;
      margin: 0 0 15px 0;
   }
   .thirds {
      float: left;
      width: 186px;
      padding: 0 10px 0 15px;
   }

/* right side */
#right {
   float: right;
   width: 280px;
   margin: 0 0 10px 0;
   padding: 55px 0 0 0;
   background: url(images/right.gif) no-repeat top right;

}
   .button {
      font: normal 1.6em "Georgia", "Times New Roman", Arial;
      color: #679A4E;
      text-align: center;
      margin: 0 0 110px 0;
   }
   .big { color: #2e2e2e; font: normal 2em "Georgia", "Times New Roman", Arial; }

   #side_menu { margin: 0 0 20px 0; }
   #side_menu li { list-style: none; }
   #side_menu li a { color: #3F6C24; border: 0; margin: 0 0 1px 0; display: block; background: #fff url(images/side_menu.gif) repeat-x; padding: 8px 10px; }
   #side_menu li a:hover { color: #fff; background: #fff url(images/side_menu_hover.gif) repeat-x; }

   .image { float: left; margin: 0 9px 3px 0; }

/* footer */
#footer {
   clear: both;
   color: #808080;
   background: #FFF;
   padding: 10px 15px;
   border-top: 1px solid #ccc;
}
   #footer .right { float: right; }

Ok, creo que ya voy comprendiendo.

Saludos y gracias

	Bienvenido(a), Visitante. Favor de ingresar o registrarse. ¿Perdiste tu email de activación? - Julio 24, 2008, 08:17:23 Boton Buscar