El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su proposito es identificar el elemento al vincularlo (usando un identificador de fragmento), en hojas de estilo (con CSS).
El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo class, el cual permite valores separados por espacios, los elementos pueden tener solo un ID definido mediante el atributo ID.
A lo largo de una página web seguramente repetiremos en varias ocasiones las mismas etiquetas, por ejemplo emplearemos varias veces las etiquetas de encabezados <h1>...<h6> o los párrafos <p>. También introduciremos muchas veces los elementos de cajas como los <div>. ¿Podrías necesitar en algún momento que una sola etiqueta de esas tenga unas propiedades específicas? Algo así como hacerlo único, justo con esa finalidad se utiliza el atributo ID.
Recuerda es un aributo no una etiqueta.
Te pondré un ejemplo, este es un fragmento de la página guiada que estas elaborando en este pequeño tutorial, mira si reconocer los ID.
<body>
<div id="content">
<h1>LibreCad. Diseño asistido por ordenador</h1>
<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="enlaces.html">Enlaces de referencia</a></li>
</ul>
<div class="post">
<div class="details">
<h2><a href="#">Nunca antes dibujar ha sido tan sencillo.</a></h2>
<p class="info"><a href="#">Anímate tú puedes conseguirlo.</a></p>
</div>
<div class="body">
<p>Hasta hoy, hemos dibujado con lápiz y usando como soporte el papel en diferentes grosores y tamaños. Muchos han sido los quebraderos de cabeza y el tiempo invertido en hacer bien un dibujo. Si además, nos han pedido varias copias o se han realizado modificaciones en el mismo lo normal, es que termine ensuciado o poco agraciado en su presentación. </p>
<p>Las grandes ventajas de usar un medio digital en la realziación es:</p>
<p>Su precisión.</p>
<p>La rapidez en la copia.</p>
<p>La limpieza.</p>
<p>El cambio de tamaño (Escala).</p>
</div>
<div class="x"></div>
</div>
El primero que vemos identifica el contenedor principal de nuestra página web
<div id="content">
El segundo identifica al menú. Como has podido ver, hemos identificado un etiqueta <div> y una etiqueta de lista desordenada <ul>.
Ahora ya podemos personalizar mucho más nuestro CSS. Pero antes deberemos recordar algunas de las posibilidades de los selecctores.
Los selectores los utilizamos para elegir a qué elementos se aplican las propiedades que escribimos. Hay diferentes tipos de selectores, los más importantes son los que veremos ahora.
Si queremos elegir una etiqueta, simplemente escribimos su nombre. Por ejemplo, si queremos establecer las propiedades para los enlaces:
a {
..
}
Así hemos identificado las etiquetas en el CSS para nuestra página guiada.
*{
margin:0;
padding:0;
}
body {
font: .8em Georgia, "Times New Roman", Serif;
background: #fff;
color: #777;
}
a {
color: #D40000;
text-decoration: none;
}
a:hover {
color: #8F0000;
}
p {
line-height: 1.7em;
margin: 0 0 15px;
}
h1 {
float: left;
font-size: 2em;
font-weight: normal;
font-style: italic;
padding: 0 0 25px 10px;
margin: 0 0 10px;
}
h2 {
font-weight: normal;
font-size: 2.6em;
padding: 0 0 10px;
margin: 0 0 15px;
}
h3 {
font-size: 1.7em;
font-weight: normal;
margin: 0 0 20px;
}
h3 a {
color: #222;
}
Como puedes ver hemos actuado contra las etiquetas de Body, a, a:hover, p, h1, h2 y h3.
También podemos elegir un elemento único utilizando su atributo id. Para ello, empleamos la almohadilla:
#menu {
...
}
Así hemos identificado los ID en el CSS para nuestra página guiada.
#content {
width: 960px;
margin: 40px auto;
}
#menu {
float: right;
margin: 10px 10px 0 0;
}
#menu li {
display: inline;
list-style: none;
}
#menu li a {
float: left;
margin: 0 0 0 20px;
color: #888;
}
#menu li a:hover {
color: #555;
}
#footer {
clear: both;
border-top: 1px solid #ddd;
padding: 20px 0;
font-size: .9em;
color: #999;
}
Si has observado, hemos identificado varios contenedores y el menú y por último el contenedor del final o footer.
Además en el menú, hemos indicado que si dentro del menú hay etiquetas li estas deberán de estar configuradas de forma diferente y si dentro de las ul hay li y dentro de la li hay a estos deberán de estar también configurados a unos parámetros específicos. Recuerda que se heredan las características del Padre. En este caso si Li esta dentro de Ul, LI heredará las características de UL.
Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos la utilicen, escribiendo un punto antes del nombre. Por ejemplo, si queremos destacar algo:
.destacado {
..
}
Así hemos identificado las clases en el CSS para nuestra página guiada.
.x {
clear: both;
}
.post {
clear: both;
padding: 30px 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 0 0 40px;
}
.post .details {
float: left;
width: 250px;
}
.post .details .info {
font-size: .9em;
color: #999;
}
.post .details .info a {
color: #777;
border-bottom: 1px dotted #999;
padding: 3px 1px;
}
.post .body {
float: right;
width: 618px;
padding: 0 0 0 30px;
border-left: 1px solid #ddd;
}
.col {
width: 290px;
margin: 0 40px 30px 0;
float: left;
font-size: .9em;
}
.col.last {
margin-right: 0;
}
Luego podríamos emplear esa clase en los párrafos que queramos (o cualquier otro elemento), usando el atributo class de este modo:
<p class="destacado">bla bla bla</p>
Existen más selectores, pero los más habituales y básicos son los mencionados en esta unidad. En el caso que quieres más, podrías buscar por internet y pronto los encontrarás.
La propiedad color hace referencia al foreground color, es decir, al color que está por encima del fondo. Hablando en plata, viene a ser el color del texto. Si queremos que nuestra página tenga las letras de gris oscuro, lo conseguimos con esto:
Body {color:#fff}
Hasta aquí nada nuevo, sigamos.
En HTML5, si hay un salto cualitativo en el Background, permitiendo además, colocar varias imágenes al mismo tiempo y componer con ellas una imagen más compleja. No entra dentro de nuestro unidad llegar tan lejos pero es un mundo lleno de posibilidades. Puedes indagar por tu cuenta si lo crees conveniente.
Sin embargo, si hablaremos de los parámetros más habituales.
Body {
color:#fff
background: color (imagen repeat attachment posición)
}
El primer parámetro corresponde al color de fondo, los siguientes son relativos a la imagen de fondo:
Podemos omitir alguna propiedad si queremos. Además, podemos establecer los valores de forma individual, usando las propiedades background-color, background-repeat, etc.
Veamos algunos ejemplos para poner fondo a nuestra página:
/* sólo color de fondo */ body { background : #fff; } /* color de fondo e imagen en mosaico */ body { background : #fff url(fondo.gif); } /* imagen fija , centrada y sin repetir */ /* a modo de marca de agua */ body { background-color: #fff; background-image: url(fondo.gif); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%; }
Hay varias propiedades que nos permiten jugar con el aspecto del texto. Podemos englobar todas bajo font, pero primero veremos algunas subpropiedades.
Antes de nada, debemos considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Es decir, que mi wonderfulosa fuente llamada chachi.ttf no tiene por qué tenerla mi vecino. Es más, lo normal es que no la tenga. ¿Entonces qué hacemos? Usar sólo fuentes "estándar", que tengan la mayoría de ordenadores. Además, podemos especificar varias, de forma que si no se tiene la primera, se muestre la segunda, si no se tiene la segunda, pues la tercera, etc.
A lo que íbamos. La propiedad que sirve para cambiar la fuente es font-family. Como acabamos de ver, podemos indicar varias fuentes, por orden de preferencia. Si el nombre de una fuente tiene espacios en blanco, hay que ponerla entre comillas. Por ejemplo:
Body {
font-family: "Comic Sans MS", Arial, sans-serif;
}
El tamaño de la fuente lo controlamos con font-size. Podemos indicar medidas en píxeles (px) o en puntos (pt).
Para alinear el texto tenemos a text-align, que puede tomar los valores right (derecha), left (izquierda), center (centrado) o justify (justificado).
Si queremos que nuestros links no tengan subrayado, pondremos:
a { text-decoration : none; }
Podemos transformar las mayúsculas y minúsculas con la propiedad text-transform. Si ponemos lowercase, todo se mostrará en minúsculas; con uppercase, en mayúsculas; y con capitalize pondremos una letra capital al principio de cada palabra.
En cuanto al espaciado, para la distancia entre palabras usamos word-spacing; para el de las letras, letter-spacing; y para el interlineado, line-height.
Un ejemplo con todo esto, para la etiqueta <strong>:
strong {
color: #000;
letter-spacing: 0.25 em;
text-trasform: uppercase;
}
Son muchos los nombres de selectores, propiedades, clases, marcadores, etc... No te agobies, no es cuestión de aprendérselos, para eso esta internet, lo que si tienes que saber es buscar.
Ya estamos al final de nuestra práctica guiada.
Deberás copiar el siguiente código CSS y pegarlo en tu archivo de CSS.
*{
margin:0;
padding:0;
}
body {
font: .8em Georgia, "Times New Roman", Serif;
background: #fff;
color: #777;
}
a {
color: #D40000;
text-decoration: none;
}
a:hover {
color: #8F0000;
}
p {
line-height: 1.7em;
margin: 0 0 15px;
}
.x {
clear: both;
}
h1 {
float: left;
font-size: 2em;
font-weight: normal;
font-style: italic;
padding: 0 0 25px 10px;
margin: 0 0 10px;
}
h2 {
font-weight: normal;
font-size: 2.6em;
padding: 0 0 10px;
margin: 0 0 15px;
}
h3 {
font-size: 1.7em;
font-weight: normal;
margin: 0 0 20px;
}
h3 a {
color: #222;
}
#content {
width: 960px;
margin: 40px auto;
}
#menu {
float: right;
margin: 10px 10px 0 0;
}
#menu li {
display: inline;
list-style: none;
}
#menu li a {
float: left;
margin: 0 0 0 20px;
color: #888;
}
#menu li a:hover {
color: #555;
}
.post {
clear: both;
padding: 30px 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 0 0 40px;
}
.post .details {
float: left;
width: 250px;
}
.post .details .info {
font-size: .9em;
color: #999;
}
.post .details .info a {
color: #777;
border-bottom: 1px dotted #999;
padding: 3px 1px;
}
.post .body {
float: right;
width: 618px;
padding: 0 0 0 30px;
border-left: 1px solid #ddd;
}
.col {
width: 290px;
margin: 0 40px 30px 0;
float: left;
font-size: .9em;
}
.col.last {
margin-right: 0;
}
#footer {
clear: both;
border-top: 1px solid #ddd;
padding: 20px 0; ç
font-size: .9em;
color: #999;
}
Una vez pegado, guárdalo y sube todo el SITE a tu espacio de Neocitie
Te planteo un reto, podrías crear un menú con los siguientes ITEMs.
INICIO, VIDEOS, EJERCICIOS, ENLACES DE REFERENCIAS
Esta tarea será muy fácil, solo debes de buscar una página en internet con información sobre CSS, ejemplos, o para generar código CSS online que nos ayude a todos.
Una vez localizada la página deberás de colocar un mensaje en el foro "recursos internet"del aula con una breve descripción sobre ella. Tendrás que valorar al menos dos comentarios de tus compañeros.
A modo de ejemplo os he colocado un mensaje en el foro.