Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Css Basico

    Hochgeladen von

    Débora Cortés Moya
    30 Ansichten6 Seiten

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    30 Ansichten6 Seiten

    Css Basico

    Hochgeladen von

    Débora Cortés Moya

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 6

    Manual Bsico de Lenguaje CSS

    DECLARACIONES DE ESTILOS
    Para aplicar un estilo a una etiqueta concreta <etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ... </etiqueta> <p style="background: url(yellow_rock.gif);">Hola Mundo</p> Aplicando el estilo en la propia pgina <STYLE TYPE="text/css"> <!-Etiqueta1, Etiqueta2 : {propiedad1:valor} Etiqueta3 : {propiedad1:valor;...;propiedadS:valor} Etiqueta4 : {propiedad1:valor;...;propiedadT:valor} .Clase1 : {propiedad1:valor;...;propiedadT:valor} //--> </STYLE> Es recomendable que definamos estos estilos globales dentro de la cabecera del documento (entre <HEAD> ... </HEAD>) para asegurarnos de que se aplicarn a todas las etiquetas para las que se haya definido un estilo. Separando el HTML de la CSS <LINK REL="stylesheet" TYPE="text/css" HREF="URL_Hoja.css">

    UNIDADES ABSOLUTAS Y RELATIVAS


    MAGNITUDES Las magnitudes relativas son em (el alto de la M mayscula), ex (la mitad de la altura de la M mayscula, que viene a ser aproximadamente la altura de la x minscula). Las magnitudes absolutas son pt (puntos), pc(picas), in (inches, es decir, pulgadas), mm (milmetros), cm (centmetros), px (pxel). Absolutas Pixeles: px Milmetros: mm Centmetros: cm Pulgadas: in Picas: pc Puntos: pt Relativas Porcentaje: % [Porcentaje referido a un tamao declarado anteriormente o heredado] Ems: em [ 1em sera un tamao declarado anteriormente, 0.5em la mitad, 1.5em...] xx-small x-small medium large x-large xx-large

    APLICAR ESTILOS
    Redefinicin de etiquetas Etiqueta1, Etiqueta2 : {propiedad1:valor} Etiqueta3 : {propiedad1:valor;...;propiedadS:valor} Etiqueta4 : {propiedad1:valor;...;propiedadT:valor} /* Estilo para el documento */ BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in} /* Estilo para la cabecera de nivel 2 */ H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red} Podemos aplicar el mismo estilo a varias etiquetas, escribindolas separadas por comas y, a continuacin, la especificacin del estilo segn pares propiedad:valor separados por punto y coma y encerrados entre llaves {}. Clases .Nombre_de_la_Clase {propiedad1:valor;...;propiedadN:valor} <etiqueta CLASS="Nombre_de_la_Clase"> ... </etiqueta> ID #Nombre_del_ID {propiedad1:valor;...;propiedadN:valor} <etiqueta ID="NombreReferencia"> ... </etiqueta> Pseudoclases Hay ocasiones en las que HTML da a algunas etiquetas un estilo propio: por ejemplo, los enlaces aparecen por defecto de otro color y subrayados. Estos elementos son las pseudoclases. Por ahora, slo estn definidas para la etiqueta <A>. etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor} link Nos dice el estilo de un enlace que no ha sido visitado. visited Nos dice el estilo de un enlace que ha sido visitado. active Nos dice el estilo de un enlace que est siendo pulsado. hover Nos dice el estilo de un enlace sobre el que est pasando el ratn. A:link,A:visited,A:active {text-decoration:none} Las pseudoclases pueden usarse de forma conjunta con las clases, para aplicar ese estilo slo en casos concretos, siguiendo la notacin: A.NombreClase:pseudoclase Para que la pseudo clase de la etiqueta <A> funcione correctamente el orden de las declaraciones debe ser el siguiente: a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} Herencia de estilos En el conjunto de las etiquetas HTML podemos establecer una jerarqua de etiquetas que contienen a otras, para darnos una relacin de herencia. En primer lugar, tendramos la etiqueta <BODY> ... </BODY>, que hace referencia a todo el documento, y podemos considerarla como la etiqueta "padre" de todas las dems etiquetas de formato, puesto que todas ellas se encuentran contenidas en el cuerpo (body) del documento. Despus, tenemos las etiquetas de prrafo (<P>...</P>, <DIV>...</DIV>, cabeceras, ...) y etiquetas de elementos insertados en lnea (<B>...</B>, <I>...</I>, <SPAN>...</SPAN>, ...). Las etiquetas de prrafo sern contenedoras de las etiquetas de elementos insertados en lnea (en el sentido que les estamos dando), establecindose as una nueva relacin "padrehijo".

    Esto es interesante porque la mayora de los estilos que se definen se heredan, es decir, si definimos un cierto estilo para una etiqueta, este estilo ser heredado por las etiquetas "hijas", con lo que no tendremos que volver a definirlo para ellas. Por ejemplo, si definimos un tipo de letra y un color para la fuente para la etiqueta <BODY> ... </BODY>,este estilo ser heredado por todas las etiquetas del documento y no Estilo en funcin del contexto es posible que slamente queramos que el texto en negrita sea de color verde cuando se encuentre en una celda de una tabla, o que sea de color prpura cuando forme parte de una lista. <STYLE TYPE="text/css"> <!-TD B {color:green} UL B {color:purple} //--> </STYLE> /* Estilo para el documento */ BODY {font-family:Verdana,sans-serif;font-size:x-small; margin-left:0.25in; margin-right:0.25in} /* Estilo para la cabecera de nivel 2 */ H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red} /* Estilos para otras etiquetas */ B, TD {font-family:Verdana,sans-serif;font-size:x-small; color:olive} TH {font-family:Verdana,sans-serif;font-size:x-small; color:white;background-color:#0080C0} PRE, TT, CODE {font-family:Courier New,Courier; font-size:9pt;color:maroon}

    Un mismo estilo para varias etiquetas

    Podemos aplicar el mismo estilo a varias etiquetas, escribindolas separadas por comas y, a continuacin, la especificacin del estilo segn pares propiedad:valor separados por punto y coma y encerrados entre llaves {}. B, TD {font-family:Verdana,sans-serif;font-size:x-small; color:olive}

    BLOQUE, INLINE Desde el punto de vista de las hojas de estilo, existen tres tipos de elementos HTML: de bloque (que son los que hacen empezar lnea nueva, como <P>, las cabeceras, ...), incrustados en lnea (que no alteran la lnea en la que se encuentran, como <B>, <I>, ...) y de lista (que son los elementos de una lista delimitados por <LI>). Todo elemento de bloque se considera rodeado por una caja, con propiedades de mrgenes, borde, padding y fondo. Adems, la caja que lo rodea tiene un cierto ancho, y una cierta alineacin con respecto al documento.

    PROPIEDADES CSS
    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 etiquetas 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 y Unidades de CSS font-size:12pt; font-size: x-large; Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud. font-family serif | sans-serif | cursive | fantasy | monospace y Todas las fuentes habituales font-family:arial,helvetica; font-family: fantasy; Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema. Tambin se pueden definir con tipografas normales, como ocurra 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, itlica u oblcua. El estilo oblique es similar al italic. PRRAFOS - TEXT line-height normal y unidades CSS line-height: 12px; line-height: normal; El alto de una lnea,y por tanto, el espaciado entre lneas. Es una de esas caractersticas que no se podian mofificar utilizando HTML. text-decoration none | [ underline || overline || line-through ] text-decoration: none; text-decoration: underline; Para establecer la decoracin 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 alineacin 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 mrgenes en las pginas. 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 maysculas de todas las palabras, todo en maysculas o minsculas. 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 pgina. Background-image El nombre de la imagen con su camino relativo o absoluto backgroundimage: url(mrmol.gif) ; background-image: url(http://www.x.com/fondo.gif) Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina,. BOX - CAJA Margin-left Unidades CSS margin-left: 1cm; margin-left: 0,5in; Indicamos con este atributo el tamao del margen a la izquierda Margin-right Unidades CSS margin-right: 5%; margin-right: 1in; Se utiliza para definir el tamao del margen a la derecha Margin-top Unidades CSS margin-top: 0px; margin-top: 10px; Indicamos con este atributo el tamao del margen arriba de la pgina Margin-bottom Unidades CSS margin-bottom: 0pt; margin-top: 1px; Con el se indica el tamao del margen en la parte de abajo de la pgina 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. Paddingright Unidades CSS padding-right: 0.5cm; padding-right: 1pt; Indica el espacio insertado, en este caso por la derecha, entre el borde del elementocontinente 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 pgina al que se lo aplicamos. Se puede poner colores por separado con los atributos border-top-color, border-right-color, borderbottom-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 tamao del borde del elemento al que lo aplicamos. 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; Si este elemento tiene a su altura imagenes u otros elementos alineados a la derecha o la izquierda, con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos a el lado que indiquemos. LISTAS -LIST list-style-type disc | square | circle | decimal | decimal-leading-zero | lower-roman | upper-roman | loweralpha | upper-alpha list-style-type:square; list-style-type:upper-roman; Permite cambiar el tipo de bulletpoint en las <UL> y el tipo de numeracin en las <OL>. list-style-image list-style-image:url(imagenes/icono.gif); Nos permite cambiar el bulletpoint por un grfico. list-style-position outside | inside list-style-position:outside; Outside es el valor por defecto, inside alinea el bulletpoint con el parrafo.

    Das könnte Ihnen auch gefallen