CSS (Hojas de estilo en cascada)
Un estilo define como se muestran los elementos HTML, permite definir el formato de presentación de un sitio web (colores, imágenes, margenes, tipos de fuentes, etc...).
ATRIBUTOS DEL 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 etiqetas de HTML. No todos los nombres de colores son admitidos en el estandar, es aconsejable entonces utilizar el valor RGB.
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 CSS font-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.
Unidades de CSS font-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 habituales font-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.
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 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-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.
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.
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-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-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-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.
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-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
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-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-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-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
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-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-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-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.
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-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í
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.
Para ver una página que utiliza float y clear pulsar aquí
No hay comentarios:
Publicar un comentario