HTML formatua dokumentu bati forma ematerakoan mugatuta dago. Arazo honek “tranpa” batzuetara jotzea ekarri du, baina “tranpa” hauek ere hainbat arazo sortu dute batez ere plataformen egituretan.
Web bat, HTML testu zati bat, izenburu bat edo etiketa baten forma deskriba dezake CSS batek sintaxiaren bitartez.
CSS-ri esker:
-dokumentu barneko linien arteko distantzia defini dezakegu.
-elementuak, akatasik gabe, sar ditzakegu webean.
-hutsuneak, azpimarraketak, etab. definigarriak dira ere bai.
Nabigatzaile guztiek ez dute CSS soportatzen. CSSaren sintaxia ulertzeko bakarrik Netscaperen 4. bertsioaren ondorengoak eta Microsoften 3. bertsiotik aurrerakoak dira gai. Honek, kontu handiz ibili behar dugula esan nahi du, erabiltzaile guztiek ez baitute gure orria uste bezala ikusiko.
CSS-k darabiltzan etiketak:
<SPAN>: zati txikietako forma definitzeko erabilia.
<p>
Esto es un párrafo en varias palabras <SPAN style=”color:green”>en color verde</SPAN>. resulta muy fácil.
</p>
Paragrafo bat ere defini genezake:
<p style=”color:#990000″>
Esto es un párrafo de color rojo.
</p>
<p style=”color:#000099″>
Esto es un párrafo de color azul.
</p>
<DIV>: web baten zatiak denifi ditzakegu.
<div style=”color:#000099; font-weight:bold”>
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>
<STYLE>web osoa eraikitzeko erabilia. Parrafo barruan aldaketarik egin nahi izanez gero {} erabiliko dugu.
<html>
<head>
<title>Ejemplo de estilos para toda una página</title>
<STYLE type=”text/css”>
<!–
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// –>
</STYLE>
</head>
<body>
<h1>Página con estilos</h1>
Bienvenidos…
<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p>
</body>
</html>
Kanpoko fitxategi baten estilo diseinua:
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
<LINK>: web orria estilo orriarekin lotzeko erabilia.
rel=”STYLESHEET” esteka estilo orri bati lotuta dagoela esan nahi du
type=”text/css” artxiboa testua delako, CSS sintaxia jarraituz
href=”estilos.css” estiloen iturri den fitxategiaren izena
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<link rel=”STYLESHEET” type=”text/css” href=”estilos.css”>
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
<br>
<br>
<table width=”300″ cellspacing=”2″ cellpadding=”2″ border=”0″>
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>
@import url: CSS estiloen kanpo-deklarazioa inportatzeko egina–> (“archivo_a_importar.css”)
<style type=”text/css”>
@import url (“estilo.css”);
body{
background-color:#ffffcc;
}
</style>
-Estilo bat definitzeko font-size,text-decoration… moduko atributoak erabiltzen dira bi puntuz eta eman nahi diegun balorea emanez. Estilo bat defini dezakegu, atributo asko punto eta komaz bereiztuta definituz gero:
font-size: 10pt; text-decoration: underline; color: black;
-Etiketa baten estiloa definitzeko etiketaren ondoren atributoak giltzen artean eman behar dira:
H1{text-align: center; color:black}
ATRIBUTOAK:
Nombre del atributo Posibles valores Ejemplos FUENTES – FONT color valor RGB o nombre de color color: #009900;
color: red;Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No todos los nombres de colores son admitidos en el estandar, es aconsejable entonces utilizar el valor RGB. font-size xx-small | x-small | small | medium | large | x-large | xx-large
Unidades de CSSfont-size:12pt;
font-size: x-large;Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud. font-family serif | sans-serif | cursive | fantasy | monospace
Todas las fuentes habitualesfont-family:arial,helvetica;
font-family: fantasy;Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genéricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.
También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien.font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 font-weight:bold;
font-weight: 200;Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad.
Normal y 400 son el mismo valor, así como bold y 700.font-style normal | italic | oblique font-style:normal;
font-style: italic;Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El estilo oblique es similar al italic. PÁRRAFOS – TEXT line-height normal y unidades CSS line-height: 12px;
line-height: normal;El alto de una línea,y por tanto, el espaciado entre líneas. Es una de esas características que no se podian mofificar utilizando HTML. text-decoration none | [ underline || overline || line-through ] text-decoration: none;
text-decoration: underline;Para establecer la decoración de un texto, es decir, si está subrayado, sobrerayado o tachado. text-align left | right | center | justify text-align: right;
text-align: center;Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por que funcionar en todos los sistemas. text-indent Unidades CSS text-indent: 10px;
text-indent: 2in;Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa. text-transform capitalize | uppercase | lowercase | none text-transform: none;
text-transform: capitalize;Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabrs, todo en mayúsculas o minúsculas. FONDO – BACKGROUND Background-color Un color, con su nombre o su valor RGB background-color: green;
background-color: #000055;Sirve para indicar el color de fondo de un elemento de la página. Background-image El nombre de la imagen con su camino relativo o absoluto background-image: url(mármol.gif) ;
background-image: url(http://www.x.com/fondo.gif)Colocamos con este atributo una imagen de fondo en cualquier elemento de la página, se puede ver una página de ejemplo BOX – CAJA Margin-left Unidades CSS margin-left: 1cm;
margin-left: 0,5in;Indicamos con este atributo el tamaño del margen a la izquierda Margin-right Unidades CSS margin-right: 5%;
margin-right: 1in;Se utiliza para definir el tamaño del margen a la derecha Margin-top Unidades CSS margin-top: 0px;
margin-top: 10px;Indicamos con este atributo el tamaño del margen arriba de la página Margin-bottom Unidades CSS margin-bottom: 0pt;
margin-top: 1px;Con el se indica el tamaño del margen en la parte de abajo de la página Padding-left Unidades CSS padding-left: 0.5in;
padding-left: 1px;Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.Padding-right Unidades CSS padding-right: 0.5cm;
padding-right: 1pt;Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.Padding-top Unidades CSS padding-top: 10pt;
padding-top: 5px;Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este. Padding-bottom Unidades CSS padding-right: 0.5cm;
padding-right: 1pt;Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de este. Border-color color RGB y nombre de color border-color: red;
border-color: #ffccff;Para indicar el color del borde del elemento de la página al que se lo aplicamos. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color. Border-style none | dotted | solid | double | groove | ridge | inset | outset border-style: solid;
border-style: double;El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece funcionar), solid=solido, double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D. border-width Unidades CSS border-width: 10px;
border-width: 0.5in;El tamaño del borde del elemento al que lo aplicamos.
Para ver otros ejemlos de Box pulsar aquífloat none | left | right float: right; Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento. Igual que el atributo align en imagenes en sus valores right y left. clear none | right | left clear: right;
http://www.desarrolloweb.com/articulos/186.php -etik hartutako taula.
CSS eskola (bideoa): http://www.desarrolloweb.com/articulos/manual-css-video-I.html
