Академический Документы
Профессиональный Документы
Культура Документы
En estas pginas de CSS pretendemos dar a conocer la tecnologa con un enfoque prctico para que en pocos captulos podis usar las CSS de una manera depurada, reflejando toda nuestra experiencia en su uso.
CSS
Para definir estilos en secciones reducidas de una pgina se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en sintaxis CSS las caractersticas de estilos. Lo vemos con un ejemplo, pondremos un prrafo en el que determinadas palabras las vamos a visualizar en color verde. Ejemplo: <p> Esto es un prrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fcil. </p>
Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la pgina. Es una manera muy cmoda de darle forma al documento y muy potente, ya que estos estilos sern seguidos en toda la pgina y nos ahorraremos as muchas etiquetas HTML. Ejemplo: <STYLE type="text/css"> <!-- H1 {text-decoration: underline; textalign:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm}// --> </STYLE>
Atributo visibility
- visible sirve para indicar que la capa se podr ver. - hidden indicar que la capa est oculta.
Atributo position.
- relative indica que la posicin de la capa es relativa a el lugar donde se estaba escribiendo enla pgina en el momento de escribir la capa con su etiqueta - absolute indica que la posicin de la capa se calcula con respecto al punto superior izquierdo de la pgina.
- inherit es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde est metida la capa en cuestin. Si la capa no est metida dentro de ninguna otra se supone que est metida en la capa documento, que es toda la pgina y que siempre est visible.
Atributo width
Indica la anchura de la capa
Atributo z-index Sirve para indicar la posicin sobre el eje z que tendrn las distintas capas de la pgina. Dicho de otra forma, con z index podemos decir qu capas se vern encima o debajo de otras, en caso de que estn superpuestas. El atributo z-index toma valores numricos y a mayor zindex, ms arriba se ver la pgina.
Atributo top
Indica la distancia en vertical donde se colocar la capa. Si el atributo position es absolute, top indica la distancia del borde superior de la capa con respecto al borde superior de la pgina. Si el atributo position era relative, top indica la distancia desde donde se estaba escribiendo en ese momento en la pgina hasta el borde superior de la capa.
Atributo height Sirve para indicar el tamao de la capa en vertical, es decir, su altura.
Atributo left
Bsicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la distancia en horizontal a la que estar situada la capa.
Atributo clip
Es un atributo un poco difcil de explicar. En concreto sirve para recortar determinadas reas de la capa y que no se puedan ver. Una capa que est visible se puede recortar para que se vea, pero que no se vea algn trozo de esta. El cliping se indica por medio de 4 valores, con esta sintaxis.
rect (<top>, <right>, <bottom>, <left>)
Para aplicar estilos a estas etiquetas se utiliza el atributo de HTML style, de esta manera: <SPAN style="text decoration:underline;Font weight:bold">. </SPAN> <DIV style="color:red;Font size:10px"> </DIV>. Los atributos para que la divisin sea una capa son varios y se pueden ver a continuacin. <div id="c1" style="position:absolute; left: 200px; top: 100px;">. Hola! </div>
Definicin de clases
Podemos utilizar una clase si deseamos crear un estilo especfico, para luego aplicarlo a distintos elementos de la pgina. Las clases en la declaracin de estilos se declaran con un punto antes del nombre de la clase. miclase{ color: blue; } Para asignar el estilo definido por una clase en un elemento HTML, simplemente se aade el atributo class a la etiqueta que queremos aplicar dicha clase. El atributo class se asigna al nombre de la clase a aplicar. Por ejemplo: <p class="miclase">este prrafo tiene el estilo definido en la clase "miclase".</p> El prrafo anterior se presentara con color azul. La definicin de clases y su utilizacin es sencilla, pero veamos un ejemplo ms detallado: Para la siguiente declaracin de estilos: body, td, p{ background-color: #000000; color: #ffffff; } .inverso{ background-color: #ffffff; color: #000000;