CSS: webs con estilo

@borjamulleras| www.md360.es | borja@md360.es

Redefiniendo el estilo de etiquetas HTML
HTML:
<h1><font color="red">texto del elemento</font></h1>
CSS:
<HTML>
<HEAD>
…
<style type="text/css">
h1 {color: red;}
</style>
…
</HEAD>
<BODY>
Este texto es de color negro.
<h1>texto del elemento</h1>
</BODY>
</HTML>

Redefiniendo el estilo de etiquetas HTML
<style type="text/css">
body {
font-family: Georgia, "Times New Roman”;
color: blue;
background-color: #d8da3d;
}
h1 {
color: red;
font-family: Helvetica, Geneva, Arial;
}
</style>

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">
…
</HEAD>
<BODY style=“font-family: Georgia;color: blue;background-color: #d8da3d; ”>
Este texto es de color ?.
<h1 style=“color: red;font-family: Helvetica, Geneva, Arial;”>texto del elemento</h1>
</BODY>
</HTML>
Usando atributo STYLE en las etiquetas
Index.htm

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">
…
</HEAD>
<BODY>
Este texto es de color ?.
<h1>texto del elemento</h1>
</BODY>
</HTML>
Hoja de estilo externa
body {
font-family: Georgia, "Times New Roman”;
color: blue;
}
h1 {
color: red;
font-family: Helvetica, Geneva, Arial;
}
Nombre-hoja-estilo.css
Index.htm

h1, h2, h3 {color: red;} es equivalente a h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
h1 {
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
}
Normas básicas

Retocar las etiquetas de HTML no siempre es solución.
Las clases:
.nombre { color: red; }
<p class="nombre"> ... ... </p>
y los identificadores (un sólo elemento):
#nombre {font-size: 16px;font-weight: bold;}
<p id="nombre"> ... ... </p>
Definimos clases o identificadores

Selecciona sólo párrafos que pertenecen a la clase oferta
p.ofertas { color: red;}
Selecciona todos los elementos que pertenecen a la clase oferta
.ofertas { color: red;}
Esto selecciona todo los elementos que tengan un id pieDePagina
#pieDePagina { color: red; }
Selecciona un elemento <p> si tiene el id pieDePagina
p#pieDePagina { color: red; }
Definimos clases o identificadores

El modelo caja
p {
margin: 100px;
margin-top: 5px;
border-color: red;
border-top-color: blue;
border-style: solid;
padding-left:20px;
padding-top: 10px;
padding-bottom: 100;
width: 400px;
height: 200px;
color: green;
font-size:40px;
}

El modelo caja
p {
margin: 100px;
margin-top: 5px;
border-color: red;
border-top-color: blue;
border-style: solid;
padding-left:20px;
padding-top: 10px;
padding-bottom: 100;
width: 400px;
height: 200px;
color: green;
font-size:40px;
}
http://www.w3schools.com/cssref/default.asp

Las capas

Las capas
#contenedor {
width: 900px;
height: 400px;
} <html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
</div>
</body>
</html>

Las capas
#contenedor {
width: 900px;
height: 400px;
}
#cabecera {
background-color: green;
height:50px;
padding:5px;
}
<html>
<head>
</head>
<body>
<div id="cabecera“>Cabecera</div>
</div>
</body>
</html>

Las capas#contenedor {
width: 900px;
height: 400px;
}
#cabecera {
height:50px;
padding:5px;
}
#barra-lateral {
background-color: orange;
float: left;
width:140px;
height:100%;
}
<html>
<head>
</head>
<body>
<div id="cabecera">Cabecera</div>
<div id="barra-lateral“>Barra lateral</div>
</div>
</body>
</html>

Las capas#contenedor {
width: 900px;
height: 400px;
}
#cabecera {
height:50px;
padding:5px;
}
#barra-lateral {
float: left;
width:140px;
height:100%;
}
#contenido {
background-color: gray;
float:left;
width:740px;
height:100%;
}
<html>
<head>
</head>
<body>
<div id="contenido">Contenido principal</div>
</div>
</body>
</html>

Las capas
…..
#barra-lateral {
float: left;
width:140px;
height:100%;
}
#contenido {
background-color: gray;
float:left;
width:740px;
height:100%;
}
#pie {
background-color: blue;
clear: both;
}
<html>
<head>
</head>
<body>
<div id="contenido">Contenido principal</div>
<div id=“pie">pie</div>
</div>
</body>
</html>

Firebug
https://addons.mozilla.org/es/firefox/addon/firebug/

Las capas
CLEAR: left | right | both
Se usa para evitar que otras capas floten alrededor.
FLOAT: none | left | right
Se usa para forzar que las capas floten alrededor.

Listas / enlaces / fondos / Textos / Fuentes
Listas:
http://www.w3schools.com/css/css_list.asp
Links:
http://www.w3schools.com/css/css_link.asp
Fondos:
http://www.w3schools.com/css/css_background.asp
Textos:
http://www.w3schools.com/css/css_text.asp
Fuentes:
http://www.w3schools.com/css/css_font.asp

Formularios
http://web.tursos.com/tutoriales/html-css/como-hacer-un-formulario-de-contacto-i-html-y-css

CSS: webs con estilo

Recomendados

Recomendados

Más contenido relacionado

Similar a CSS: webs con estilo

Similar a CSS: webs con estilo (20)

Último

Último (13)

CSS: webs con estilo