CSS - Guía rápida
Superior styles to HTML - CSS tiene una gama de atributos mucho más amplia que HTML, por lo que puede darle un aspecto mucho mejor a su página HTML en comparación con los atributos HTML.
Multiple Device Compatibility- Las hojas de estilo permiten optimizar el contenido para más de un tipo de dispositivo. Al utilizar el mismo documento HTML, se pueden presentar diferentes versiones de un sitio web para dispositivos portátiles como PDA y teléfonos móviles o para imprimir.
Global web standards- Ahora los atributos HTML están siendo obsoletos y se recomienda utilizar CSS. Por lo tanto, es una buena idea comenzar a usar CSS en todas las páginas HTML para hacerlas compatibles con futuros navegadores.
¿Quién crea y mantiene CSS?
CSS se crea y mantiene a través de un grupo de personas dentro del W3C llamado Grupo de Trabajo de CSS. El Grupo de Trabajo CSS crea documentos llamados especificaciones. Cuando una especificación ha sido discutida y ratificada oficialmente por los miembros del W3C, se convierte en una recomendación.
Estas especificaciones ratificadas se denominan recomendaciones porque el W3C no tiene control sobre la implementación real del lenguaje. Empresas y organizaciones independientes crean ese software.
NOTE - El Consorcio World Wide Web, o W3C, es un grupo que hace recomendaciones sobre cómo funciona Internet y cómo debería evolucionar.
Versiones CSS
El nivel 1 de hojas de estilo en cascada (CSS1) salió de W3C como recomendación en diciembre de 1996. Esta versión describe el lenguaje CSS así como un modelo de formato visual simple para todas las etiquetas HTML.
CSS2 se convirtió en una recomendación del W3C en mayo de 1998 y se basa en CSS1. Esta versión agrega soporte para hojas de estilo específicas de medios, por ejemplo, impresoras y dispositivos auditivos, fuentes descargables, posicionamiento de elementos y tablas.
selector { property: value }
Example - Puede definir un borde de tabla de la siguiente manera -
table{ border :1px solid #C00; }Aquí la tabla es un selector y el borde es una propiedad y el valor dado 1px sólido # C00 es el valor de esa propiedad.
Puede definir selectores de varias formas sencillas según su comodidad. Permítanme poner estos selectores uno por uno.
Los selectores de tipo
Este es el mismo selector que hemos visto anteriormente. Una vez más, un ejemplo más para dar color a todos los encabezados de nivel 1:
h1 {
color: #36CFFF;
}Los selectores universales
En lugar de seleccionar elementos de un tipo específico, el selector universal simplemente coincide con el nombre de cualquier tipo de elemento:
* {
color: #000000;
}Esta regla muestra el contenido de cada elemento de nuestro documento en negro.
Los selectores descendientes
Suponga que desea aplicar una regla de estilo a un elemento en particular solo cuando se encuentra dentro de un elemento en particular. Como se muestra en el siguiente ejemplo, la regla de estilo se aplicará al elemento <em> solo cuando se encuentre dentro de la etiqueta <ul>.
ul em {
color: #000000;
}Los selectores de clases
Puede definir reglas de estilo según el atributo de clase de los elementos. Todos los elementos que tengan esa clase serán formateados de acuerdo con la regla definida.
.black {
color: #000000;
}Esta regla muestra el contenido en negro para cada elemento con el atributo de clase establecido en negro en nuestro documento. Puedes hacerlo un poco más particular. Por ejemplo
h1.black {
color: #000000;
}Esta regla muestra el contenido en negro solo para los elementos <h1> con el atributo de clase establecido en negro .
Puede aplicar más de un selector de clase a un elemento dado. Considere el siguiente ejemplo:
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>Los selectores de ID
Puede definir reglas de estilo basadas en el atributo id de los elementos. Todos los elementos que tengan ese id serán formateados de acuerdo con la regla definida.
#black {
color: #000000;
}Esta regla muestra el contenido en negro para cada elemento con el atributo id establecido en negro en nuestro documento. Puedes hacerlo un poco más particular. Por ejemplo
h1#black {
color: #000000;
}Esta regla muestra el contenido en negro solo para los elementos <h1> con el atributo id establecido en negro .
El verdadero poder de los selectores de id es cuando se utilizan como base para los selectores descendientes, por ejemplo:
#black h2 {
color: #000000;
}En este ejemplo, todos los encabezados de nivel 2 se mostrarán en color negro cuando esos encabezados se encuentren en etiquetas que tengan el atributo id establecido en negro .
Los selectores de niños
Has visto los selectores descendientes. Hay un tipo más de selector, que es muy similar a los descendientes pero tiene una funcionalidad diferente. Considere el siguiente ejemplo:
body > p {
color: #000000;
}Esta regla representará todos los párrafos en negro si son hijos directos del elemento <body>. Otros párrafos colocados dentro de otros elementos como <div> o <td> no tendrían ningún efecto en esta regla.
Los selectores de atributos
También puede aplicar estilos a elementos HTML con atributos particulares. La regla de estilo a continuación coincidirá con todos los elementos de entrada que tengan un atributo de tipo con un valor de texto :
input[type = "text"] {
color: #000000;
}La ventaja de este método es que el elemento <input type = "submit" /> no se ve afectado y el color se aplica solo a los campos de texto deseados.
Existen las siguientes reglas que se aplican al selector de atributos.
p[lang]- Selecciona todos los elementos de párrafo con un atributo lang .
p[lang="fr"]- Selecciona todos los elementos de párrafo cuyo atributo lang tiene un valor de exactamente "fr".
p[lang~="fr"]- Selecciona todos los elementos de párrafo cuyo atributo lang contiene la palabra "fr".
p[lang|="en"]- Selecciona todos los elementos de párrafo cuyo atributo lang contiene valores que son exactamente "en" o comienzan con "en-".
Reglas de estilo múltiple
Es posible que deba definir varias reglas de estilo para un solo elemento. Puede definir estas reglas para combinar varias propiedades y los valores correspondientes en un solo bloque como se define en el siguiente ejemplo:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Aquí todos los pares de propiedades y valores están separados por un semicolon (;). Puede mantenerlos en una sola línea o en varias líneas. Para una mejor legibilidad, los mantenemos en líneas separadas.
Por un tiempo, no se preocupe por las propiedades mencionadas en el bloque anterior. Estas propiedades se explicarán en los próximos capítulos y puede encontrar detalles completos sobre las propiedades en Referencias CSS
Selectores de agrupación
Puede aplicar un estilo a muchos selectores si lo desea. Simplemente separe los selectores con una coma, como se muestra en el siguiente ejemplo:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Esta regla de definición de estilo se aplicará también a los elementos h1, h2 y h3. El orden de la lista es irrelevante. Todos los elementos del selector tendrán aplicadas las declaraciones correspondientes.
Puede combinar los distintos selectores de identificación juntos como se muestra a continuación:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}Producirá el siguiente resultado:
Atributos
Los atributos asociados con los elementos <style> son:
| Atributo | Valor | Descripción |
|---|---|---|
| tipo | texto / css | Especifica el lenguaje de la hoja de estilo como tipo de contenido (tipo MIME). Este es un atributo obligatorio. |
| medios de comunicación | pantalla tty televisión proyección Mano impresión braille auditivo todas |
Especifica el dispositivo en el que se mostrará el documento. El valor predeterminado es todo . Este es un atributo opcional. |
CSS en línea: el atributo de estilo
Puede utilizar el atributo de estilo de cualquier elemento HTML para definir reglas de estilo. Estas reglas se aplicarán únicamente a ese elemento. Aquí está la sintaxis genérica:
<element style = "...style rules....">Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| estilo | reglas de estilo | El valor del atributo de estilo es una combinación de declaraciones de estilo separadas por punto y coma (;). |
Ejemplo
A continuación se muestra el ejemplo de CSS en línea basado en la sintaxis anterior:
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>Producirá el siguiente resultado:
CSS externo: el elemento <link>
El elemento <link> puede usarse para incluir un archivo de hoja de estilo externo en su documento HTML.
Una hoja de estilo externa es un archivo de texto separado con .cssextensión. Usted define todas las reglas de estilo dentro de este archivo de texto y luego puede incluir este archivo en cualquier documento HTML usando el elemento <link>.
Aquí está la sintaxis genérica de incluir un archivo CSS externo:
<head>
<link type = "text/css" href = "..." media = "..." />
</head>Atributos
Los atributos asociados con los elementos <style> son:
| Atributo | Valor | Descripción |
|---|---|---|
| tipo | texto css | Especifica el lenguaje de la hoja de estilo como tipo de contenido (tipo MIME). Este atributo es obligatorio. |
| href | URL | Especifica el archivo de hoja de estilo con reglas de estilo. Este atributo es obligatorio. |
| medios de comunicación | pantalla tty televisión proyección Mano impresión braille auditivo todas |
Especifica el dispositivo en el que se mostrará el documento. El valor predeterminado es todo . Este es un atributo opcional. |
Ejemplo
Considere un archivo de hoja de estilo simple con un nombre mystyle.css que tenga las siguientes reglas:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Ahora puede incluir este archivo mystyle.css en cualquier documento HTML de la siguiente manera:
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>CSS importado - Regla @import
@import se usa para importar una hoja de estilo externa de una manera similar al elemento <link>. Aquí está la sintaxis genérica de la regla @import.
<head>
@import "URL";
</head>Aquí URL es la URL del archivo de hoja de estilo que tiene reglas de estilo. También puede usar otra sintaxis:
<head>
@import url("URL");
</head>Ejemplo
A continuación se muestra el ejemplo que muestra cómo importar un archivo de hoja de estilo en un documento HTML:
<head>
@import "mystyle.css";
</head>Anulación de reglas CSS
Hemos analizado cuatro formas de incluir reglas de hojas de estilo en un documento HTML. Esta es la regla para anular cualquier regla de hoja de estilo.
Cualquier hoja de estilo en línea tiene la máxima prioridad. Por lo tanto, anulará cualquier regla definida en etiquetas <style> ... </style> o reglas definidas en cualquier archivo de hoja de estilo externo.
Cualquier regla definida en las etiquetas <style> ... </style> anulará las reglas definidas en cualquier archivo de hoja de estilo externo.
Cualquier regla definida en un archivo de hoja de estilo externo tiene la prioridad más baja, y las reglas definidas en este archivo se aplicarán solo cuando las dos reglas anteriores no sean aplicables.
Manejo de navegadores antiguos
Todavía hay muchos navegadores antiguos que no admiten CSS. Por lo tanto, debemos tener cuidado al escribir nuestro CSS incrustado en un documento HTML. El siguiente fragmento muestra cómo puede usar etiquetas de comentarios para ocultar CSS de los navegadores más antiguos:
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>Comentarios CSS
Muchas veces, es posible que deba incluir comentarios adicionales en los bloques de la hoja de estilo. Por lo tanto, es muy fácil comentar cualquier parte de la hoja de estilo. Puede simplemente poner sus comentarios dentro de /*..... este es un comentario en la hoja de estilo ..... * /.
Puede utilizar / * .... * / para comentar bloques de varias líneas de forma similar a como lo hace en los lenguajes de programación C y C ++.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Producirá el siguiente resultado:
| % | Define una medida como un porcentaje relativo a otro valor, normalmente un elemento envolvente. | p {tamaño de fuente: 16pt; altura de línea: 125%;} |
| cm | Define una medida en centímetros. | div {margen inferior: 2 cm;} |
| em | Una medida relativa para la altura de una fuente en espacios em. Debido a que una unidad em es equivalente al tamaño de una fuente determinada, si asigna una fuente a 12 puntos, cada unidad "em" sería 12 puntos; por lo tanto, 2em serían 24 puntos. | p {espacio entre letras: 7em;} |
| ex | Este valor define una medida relativa a la altura x de una fuente. La altura x está determinada por la altura de la letra x minúscula de la fuente. | p {tamaño de fuente: 24pt; altura de línea: 3ex;} |
| en | Define una medida en pulgadas. | p {espaciado entre palabras: .15in;} |
| mm | Define una medida en milímetros. | p {espaciado entre palabras: 15 mm;} |
| ordenador personal | Define una medida en picas. Una pica equivale a 12 puntos; por lo tanto, hay 6 picas por pulgada. | p {tamaño de fuente: 20pc;} |
| pt | Define una medida en puntos. Un punto se define como 1/72 de pulgada. | cuerpo {tamaño de fuente: 18pt;} |
| px | Define una medida en píxeles de la pantalla. | p {relleno: 25px;} |
| Código hexadecimal | #RRGGBB | p {color: # FF0000;} |
| Código hexadecimal corto | #RGB | p {color: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {color: rgb (50%, 50%, 50%);} |
| Absoluto RGB | rgb (rrr, ggg, bbb) | p {color: rgb (0,0,255);} |
| palabra clave | aguamarina, negro, etc. | p {color: verde azulado;} |
Estos formatos se explican con más detalle en las siguientes secciones:
Colores CSS - Códigos hexadecimales
Un hexadecimal es una representación de 6 dígitos de un color. Los dos primeros dígitos (RR) representan un valor rojo, los dos siguientes son un valor verde (GG) y los últimos son el valor azul (BB).
Un hexadecimal es una representación de 6 dígitos de un color. Los dos primeros dígitos (RR) representan un valor rojo, los dos siguientes son un valor verde (GG) y los últimos son el valor azul (BB).
Se puede tomar un valor hexadecimal de cualquier software de gráficos como Adobe Photoshop, Jasc Paintshop Pro o incluso usando Advanced Paint Brush.
Cada código hexadecimal estará precedido por una almohadilla o un signo de almohadilla '#'. A continuación se muestran los ejemplos para usar la notación hexadecimal.
| Color | Color HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Colores CSS: códigos hexadecimales cortos
Esta es una forma más corta de la notación de seis dígitos. En este formato, cada dígito se replica para llegar a un valor equivalente de seis dígitos. Por ejemplo: # 6A7 se convierte en # 66AA77.
Se puede tomar un valor hexadecimal de cualquier software de gráficos como Adobe Photoshop, Jasc Paintshop Pro o incluso usando Advanced Paint Brush.
Cada código hexadecimal estará precedido por una almohadilla o un signo de almohadilla '#'. A continuación se muestran los ejemplos para usar la notación hexadecimal.
| Color | Color HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #FFF |
Colores CSS - Valores RGB
Este valor de color se especifica mediante el rgb( )propiedad. Esta propiedad toma tres valores, uno para el rojo, el verde y el azul. El valor puede ser un número entero entre 0 y 255 o un porcentaje.
NOTE - Todos los navegadores no admiten la propiedad de color rgb () por lo que se recomienda no utilizarlo.
A continuación se muestra el ejemplo para mostrar algunos colores utilizando valores RGB.
| Color | Color RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Códigos de colores de construcción
Puede crear millones de códigos de colores con nuestro Creador de códigos de colores. Consulte nuestroHTML Color Code Builder. Para utilizar esta herramienta, necesitaría un navegador habilitado para Java.
Colores seguros del navegador
Aquí está la lista de 216 colores que se supone que son los colores más seguros e independientes de la computadora. Estos colores varían desde el código hexadecimal 000000 hasta FFFFFF. Estos colores son seguros de usar porque aseguran que todas las computadoras mostrarán los colores correctamente al ejecutar una paleta de 256 colores.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | Literalmente | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Establecer el color de fondo
A continuación se muestra el ejemplo que demuestra cómo establecer el color de fondo de un elemento.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>Esto producirá el siguiente resultado:
Establecer la imagen de fondo
Podemos configurar la imagen de fondo llamando a imágenes almacenadas locales como se muestra a continuación:
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>Producirá el siguiente resultado:
Repite la imagen de fondo
El siguiente ejemplo demuestra cómo repetir la imagen de fondo si una imagen es pequeña. Puede usar el valor de no repetición para la propiedad de repetición de fondo si no desea repetir una imagen; en este caso, la imagen se mostrará solo una vez.
Por defecto , la propiedad background-repeat tendrá un valor de repetición .
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Producirá el siguiente resultado:
El siguiente ejemplo que demuestra cómo repetir la imagen de fondo verticalmente.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Producirá el siguiente resultado:
El siguiente ejemplo demuestra cómo repetir la imagen de fondo horizontalmente.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Producirá el siguiente resultado:
Establecer la posición de la imagen de fondo
El siguiente ejemplo demuestra cómo establecer la posición de la imagen de fondo a 100 píxeles del lado izquierdo.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Producirá el siguiente resultado:
El siguiente ejemplo demuestra cómo establecer la posición de la imagen de fondo a 100 píxeles del lado izquierdo y 200 píxeles hacia abajo desde la parte superior.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Producirá el siguiente resultado:
Establecer el archivo adjunto de fondo
El archivo adjunto de fondo determina si una imagen de fondo es fija o se desplaza con el resto de la página.
El siguiente ejemplo demuestra cómo configurar la imagen de fondo fija.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Producirá el siguiente resultado:
El siguiente ejemplo demuestra cómo configurar la imagen de fondo de desplazamiento.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Producirá el siguiente resultado:
Propiedad de taquigrafía
Puede utilizar la propiedad de fondo para establecer todas las propiedades de fondo a la vez. Por ejemplo
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>Establecer la familia de fuentes
A continuación se muestra el ejemplo, que demuestra cómo configurar la familia de fuentes de un elemento. El valor posible podría ser cualquier nombre de familia de fuentes.
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>Esto producirá el siguiente resultado:
Establecer el estilo de fuente
A continuación se muestra el ejemplo, que demuestra cómo establecer el estilo de fuente de un elemento. Los valores posibles son normal, cursiva y oblicua .
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>Esto producirá el siguiente resultado:
Establecer la variante de fuente
El siguiente ejemplo demuestra cómo establecer la variante de fuente de un elemento. Los valores posibles son normal y de pequeña capitalización .
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>Esto producirá el siguiente resultado:
Establecer el grosor de la fuente
El siguiente ejemplo demuestra cómo establecer el peso de la fuente de un elemento. La propiedad font-weight proporciona la funcionalidad para especificar qué tan negrita es una fuente. Los valores posibles pueden ser normal, negrita, más audaz, más claro, 100, 200, 300, 400, 500, 600, 700, 800, 900 .
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>Esto producirá el siguiente resultado:
Establecer el tamaño de fuente
El siguiente ejemplo demuestra cómo establecer el tamaño de fuente de un elemento. La propiedad font-size se utiliza para controlar el tamaño de las fuentes. Los valores posibles pueden ser xx-pequeño, x-pequeño, pequeño, mediano, grande, x-grande, xx-grande, más pequeño, más grande, tamaño en píxeles o en% .
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>Esto producirá el siguiente resultado:
Establecer el ajuste de tamaño de fuente
El siguiente ejemplo demuestra cómo establecer el ajuste de tamaño de fuente de un elemento. Esta propiedad le permite ajustar la altura x para que las fuentes sean más legibles. El valor posible puede ser cualquier número.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>Esto producirá el siguiente resultado:
Establecer el estiramiento de fuente
El siguiente ejemplo demuestra cómo establecer la extensión de fuente de un elemento. Esta propiedad depende de que la computadora del usuario tenga una versión expandida o condensada de la fuente que se está utilizando.
Los valores posibles pueden ser normal, más ancho, más estrecho, ultracondensado, extracondensado, condensado, semicondensado, semiexpandido, expandido, extra expandido, ultra expandido .
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>Esto producirá el siguiente resultado:
Propiedad de taquigrafía
Puede utilizar la propiedad de fuente para establecer todas las propiedades de fuente a la vez. Por ejemplo
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>Esto producirá el siguiente resultado:
los text-decoration La propiedad se utiliza para subrayar, sobremarcar y tachar texto.
los text-transform La propiedad se utiliza para poner texto en mayúsculas o convertir texto en letras mayúsculas o minúsculas.
los white-space La propiedad se utiliza para controlar el flujo y el formato del texto.
los text-shadow La propiedad se utiliza para establecer la sombra del texto alrededor de un texto.
Establecer el color del texto
El siguiente ejemplo demuestra cómo establecer el color del texto. El valor posible podría ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>Producirá el siguiente resultado:
Establecer la dirección del texto
El siguiente ejemplo demuestra cómo establecer la dirección de un texto. Los valores posibles son ltr o rtl .
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>Producirá el siguiente resultado:
Establecer el espacio entre personajes
El siguiente ejemplo demuestra cómo establecer el espacio entre caracteres. Los valores posibles son normal o un número que especifica un espacio. .
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>Producirá el siguiente resultado:
Establecer el espacio entre palabras
El siguiente ejemplo demuestra cómo establecer el espacio entre palabras. Los valores posibles son normal o un número que especifica un espacio .
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>Esto producirá el siguiente resultado:
Establecer la sangría del texto
El siguiente ejemplo muestra cómo sangrar la primera línea de un párrafo. Los valores posibles son % o un número que especifica el espacio de sangría .
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>Producirá el siguiente resultado:
Establecer la alineación del texto
El siguiente ejemplo demuestra cómo alinear un texto. Los valores posibles son left, right, center, justify .
<html>
<head>
</head>
<body>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>
</body>
</html>Esto producirá el siguiente resultado:
Decorando el texto
El siguiente ejemplo demuestra cómo decorar un texto. Los valores posibles son none, underline, overline, line-through, blink .
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>Esto producirá el siguiente resultado:
Set the Text Cases
The following example demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>This will produce following result −
Set the White Space between Text
The following example demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>This will produce following result −
Set the Text Shadow
The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>It will produce the following result −
The Image Border Property
The border property of an image is used to set the width of an image border. This property can have a value in length or in %.
A width of zero pixels means no border.
Here is the example −
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The Image Height Property
The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The Image Width Property
The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
The -moz-opacity Property
The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images.
In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.
Here is an example −
<html>
<head>
</head>
<body>
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>
</html>It will produce the following result −
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>Now, we will see how to use these properties to give different effects to hyperlinks.
Set the Color of Links
The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following black link −
Set the Color of Visited Links
The following example demonstrates how to set the color of visited links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>It will produce the following link. Once you will click this link, it will change its color to green.
Change the Color of Links when Mouse is Over
The following example demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. Now, you bring your mouse over this link and you will see that it changes its color to yellow.
Change the Color of Active Links
The following example demonstrates how to change the color of active links. Possible values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>It will produce the following link. It will change its color to pink when the user clicks it.
Now, we will see how to use these properties with examples.
The border-collapse Property
This property can have two values collapse and separate. The following example uses both the values −
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>It will produce the following result −
The border-spacing Property
The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>Ahora modifiquemos el ejemplo anterior y veamos el efecto:
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>Producirá el siguiente resultado:
La propiedad del lado del título
La propiedad caption-side le permite especificar dónde debe colocarse el contenido de un elemento <caption> en relación con la tabla. La siguiente tabla enumera los posibles valores.
Esta propiedad puede tener uno de los cuatro valores superior, inferior, izquierdo o derecho . El siguiente ejemplo usa cada valor.
NOTE - Es posible que estas propiedades no funcionen con su navegador IE.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>Producirá el siguiente resultado:
La propiedad de celdas vacías
La propiedad de celdas vacías indica si una celda sin contenido debe tener un borde mostrado.
Esta propiedad puede tener uno de los tres valores: mostrar, ocultar o heredar .
Aquí está la propiedad de celdas vacías que se usa para ocultar los bordes de las celdas vacías en el elemento <table>.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>Producirá el siguiente resultado:
La propiedad table-layout
Se supone que la propiedad table-layout le ayuda a controlar cómo un navegador debe representar o diseñar una tabla.
Esta propiedad puede tener uno de los tres valores: fijo, automático o heredado .
El siguiente ejemplo muestra la diferencia entre estas propiedades.
NOTE - Esta propiedad no es compatible con muchos navegadores, por lo que no confíe en esta propiedad.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>Producirá el siguiente resultado:
La propiedad border-color le permite cambiar el color del borde que rodea un elemento. Puede cambiar individualmente el color de los lados inferior, izquierdo, superior y derecho del borde de un elemento utilizando las propiedades:
border-bottom-color cambia el color del borde inferior.
border-top-color cambia el color del borde superior.
border-left-color cambia el color del borde izquierdo.
border-right-color cambia el color del borde derecho.
El siguiente ejemplo muestra el efecto de todas estas propiedades:
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad de estilo de borde
La propiedad de estilo de borde le permite seleccionar uno de los siguientes estilos de borde:
none- Sin borde. (Equivalente de ancho de borde: 0;)
solid - El borde es una sola línea sólida.
dotted - El borde es una serie de puntos.
dashed - El borde es una serie de líneas cortas.
double - El borde son dos líneas continuas.
groove - El borde parece tallado en la página.
ridge - El borde se ve lo opuesto al surco.
inset - El borde hace que parezca que el cuadro está incrustado en la página.
outset - El borde hace que parezca que la caja está saliendo del lienzo.
hidden - Igual que ninguno, excepto en términos de resolución de conflictos fronterizos para elementos de tabla.
Puede cambiar individualmente el estilo de los bordes inferior, izquierdo, superior y derecho de un elemento utilizando las siguientes propiedades:
border-bottom-style cambia el estilo del borde inferior.
border-top-style cambia el estilo del borde superior.
border-left-style cambia el estilo del borde izquierdo.
border-right-style cambia el estilo del borde derecho.
El siguiente ejemplo muestra todos estos estilos de borde:
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad del ancho del borde
La propiedad border-width le permite establecer el ancho de los bordes de un elemento. El valor de esta propiedad puede ser una longitud en px, pt o cm o debe establecerse en delgado, medio o grueso.
Puede cambiar individualmente el ancho de los bordes inferior, superior, izquierdo y derecho de un elemento utilizando las siguientes propiedades:
border-bottom-width cambia el ancho del borde inferior.
border-top-width cambia el ancho del borde superior.
border-left-width cambia el ancho del borde izquierdo.
border-right-width cambia el ancho del borde derecho.
El siguiente ejemplo muestra todos estos anchos de borde:
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>Producirá el siguiente resultado:
Propiedades de borde usando taquigrafía
La propiedad del borde le permite especificar el color, el estilo y el ancho de las líneas en una propiedad:
El siguiente ejemplo muestra cómo utilizar las tres propiedades en una sola propiedad. Esta es la propiedad más utilizada para establecer un borde alrededor de cualquier elemento.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>Producirá el siguiente resultado:
los margin-right especifica el margen derecho de un elemento.
Ahora, veremos cómo usar estas propiedades con ejemplos.
La propiedad de margen
La propiedad de margen le permite establecer todas las propiedades de los cuatro márgenes en una declaración. Aquí está la sintaxis para establecer un margen alrededor de un párrafo:
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad margin-bottom
La propiedad margin-bottom le permite establecer el margen inferior de un elemento. Puede tener un valor en longitud,% o automático.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad margin-top
La propiedad margin-top le permite establecer el margen superior de un elemento. Puede tener un valor en longitud,% o automático.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad margin-left
La propiedad margin-left le permite establecer el margen izquierdo de un elemento. Puede tener un valor en longitud,% o automático.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad margin-right
La propiedad margin-right le permite establecer el margen derecho de un elemento. Puede tener un valor en longitud,% o automático.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>Producirá el siguiente resultado:
Ahora, veremos cómo usar estas propiedades con ejemplos.
La propiedad de tipo de estilo de lista
La propiedad list-style-type le permite controlar la forma o el estilo del punto de viñeta (también conocido como marcador) en el caso de listas desordenadas y el estilo de numeración de caracteres en listas ordenadas.
Estos son los valores que se pueden usar para una lista desordenada:
| No Señor. | Valor y descripción |
|---|---|
| 1 | none N / A |
| 2 | disc (default) Un círculo relleno |
| 3 | circle Un círculo vacío |
| 4 | square Un cuadrado relleno |
Estos son los valores, que se pueden usar para una lista ordenada:
| Valor | Descripción | Ejemplo |
|---|---|---|
| decimal | Número | 1,2,3,4,5 |
| cero inicial decimal | 0 antes del número | 01, 02, 03, 04, 05 |
| alfa inferior | Caracteres alfanuméricos en minúscula | a B C D e |
| alfa superior | Caracteres alfanuméricos en mayúscula | A B C D E |
| romano inferior | Números romanos en minúscula | yo, ii, iii, iv, v |
| romano superior | Números romanos en mayúsculas | I, II, III, IV, V |
| griego inferior | El marcador es griego inferior | alfa, beta, gamma |
| latín inferior | El marcador es latín inferior | a B C D e |
| latín alto | El marcador es latino superior | A B C D E |
| hebreo | El marcador es la numeración hebrea tradicional | |
| armenio | El marcador es la numeración armenia tradicional | |
| georgiano | El marcador es la numeración tradicional georgiana. | |
| cjk-ideográfico | El marcador son números ideográficos simples | |
| hiragana | El marcador es hiragana | a, yo, u, e, o, ka, ki |
| katakana | El marcador es katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | El marcador es hiragana-iroha | yo, ro, ja, ni, ho, él, a |
| katakana-iroha | El marcador es katakana-iroha | YO, RO, HA, NI, HO, HE, TO |
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
La propiedad list-style-position
La propiedad list-style-position indica si el marcador debe aparecer dentro o fuera del cuadro que contiene las viñetas. Puede tener uno de los dos valores:
| No Señor. | Valor y descripción |
|---|---|
| 1 | none N / A |
| 2 | inside Si el texto pasa a una segunda línea, el texto se ajustará debajo del marcador. También aparecerá con sangría donde el texto habría comenzado si la lista tuviera un valor de outside. |
| 3 | outside Si el texto pasa a una segunda línea, el texto se alineará con el inicio de la primera línea (a la derecha de la viñeta). |
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
La propiedad list-style-image
La imagen de estilo de lista le permite especificar una imagen para que pueda usar su propio estilo de viñeta. La sintaxis es similar a la propiedad background-image con las letras url comenzando con el valor de la propiedad seguido de la URL entre paréntesis. Si no encuentra la imagen dada, se utilizan viñetas predeterminadas.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
La propiedad de estilo de lista
El estilo de lista le permite especificar todas las propiedades de la lista en una sola expresión. Estas propiedades pueden aparecer en cualquier orden.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
La propiedad de desplazamiento del marcador
La propiedad de desplazamiento del marcador le permite especificar la distancia entre el marcador y el texto relacionado con ese marcador. Su valor debe ser una longitud como se muestra en el siguiente ejemplo:
Desafortunadamente, esta propiedad no es compatible con IE 6 o Netscape 7.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
los padding sirve como abreviatura de las propiedades anteriores.
Ahora, veremos cómo usar estas propiedades con ejemplos.
La propiedad padding-bottom
La propiedad padding-bottom establece el relleno (espacio) inferior de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad padding-top
La propiedad padding-top establece el relleno superior (espacio) de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad padding-left
La propiedad padding-left establece el relleno izquierdo (espacio) de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad padding-right
La propiedad padding-right establece el relleno derecho (espacio) de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad de relleno
La propiedad de relleno establece el relleno (espacio) izquierdo, derecho, superior e inferior de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Producirá el siguiente resultado:
| 1 | auto La forma del cursor depende del área de contexto sobre la que se encuentra. Por ejemplo, un mensaje de texto, una entrega de un enlace, etc. |
| 2 | crosshair Una cruz o un signo más |
| 3 | default Una flecha |
| 4 | pointer Una mano apuntando (en IE 4 este valor es mano) |
| 5 | move El bar |
| 6 | e-resize El cursor indica que un borde de un cuadro se debe mover hacia la derecha (este) |
| 7 | ne-resize El cursor indica que un borde de un cuadro se debe mover hacia arriba y hacia la derecha (norte / este) |
| 8 | nw-resize El cursor indica que el borde de un cuadro se debe mover hacia arriba y hacia la izquierda (norte / oeste) |
| 9 | n-resize El cursor indica que un borde de un cuadro se moverá hacia arriba (norte) |
| 10 | se-resize El cursor indica que un borde de un cuadro se debe mover hacia abajo y hacia la derecha (sur / este) |
| 11 | sw-resize El cursor indica que un borde de un cuadro se debe mover hacia abajo y hacia la izquierda (sur / oeste) |
| 12 | s-resize El cursor indica que un borde de un cuadro se moverá hacia abajo (sur) |
| 13 | w-resize El cursor indica que un borde de un cuadro se debe mover hacia la izquierda (oeste) |
| 14 | text El bar |
| 15 | wait Un reloj de arena |
| dieciséis | help Un signo de interrogación o un globo, ideal para usar sobre los botones de ayuda |
| 17 | <url> La fuente de un archivo de imagen de cursor |
NOTE- Debe intentar usar solo estos valores para agregar información útil para los usuarios y, en algunos lugares, esperarían ver ese cursor. Por ejemplo, usar la cruz cuando alguien pasa el cursor sobre un enlace puede confundir a los visitantes.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>Producirá el siguiente resultado:
los outline-width La propiedad se utiliza para establecer el ancho del contorno.
los outline-style La propiedad se utiliza para establecer el estilo de línea del contorno.
los outline-color La propiedad se utiliza para establecer el color del contorno.
los outline La propiedad se utiliza para establecer las tres propiedades anteriores en una sola declaración.
La propiedad de ancho de contorno
La propiedad outline-width especifica el ancho del contorno que se agregará al cuadro. Su valor debe ser una longitud o uno de los valores delgado, medio o grueso, al igual que el atributo border-width.
Un ancho de cero píxeles significa que no hay contorno.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad de estilo de contorno
La propiedad de estilo de contorno especifica el estilo de la línea (sólida, punteada o discontinua) que rodea un elemento. Puede tomar uno de los siguientes valores:
none- Sin borde. (Equivalente de contorno-ancho: 0;)
solid - El contorno es una sola línea sólida.
dotted - El contorno es una serie de puntos.
dashed - El esquema es una serie de líneas cortas.
double - El contorno es de dos líneas continuas.
groove - El contorno parece tallado en la página.
ridge - El contorno parece lo opuesto al surco.
inset - El contorno hace que parezca que el cuadro está incrustado en la página.
outset - El contorno hace que parezca que la caja sale del lienzo.
hidden - Igual que ninguno.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad de color de contorno
La propiedad de color de contorno le permite especificar el color del contorno. Su valor debe ser un nombre de color, un color hexadecimal o un valor RGB, como ocurre con las propiedades de color y color de borde.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad del esquema
La propiedad de esquema es una propiedad abreviada que le permite especificar valores para cualquiera de las tres propiedades discutidas anteriormente en cualquier orden pero en una sola declaración.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style = "outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style = "outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>
</body>
</html>Producirá el siguiente resultado:
los max-width La propiedad se utiliza para establecer el ancho máximo que puede tener una caja.
los min-width La propiedad se utiliza para establecer el ancho mínimo que puede tener una caja.
Las propiedades de altura y anchura
Las propiedades de alto y ancho le permiten establecer el alto y el ancho de las cajas. Pueden tomar valores de longitud, porcentaje o la palabra clave auto.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad de altura de línea
La propiedad de altura de línea le permite aumentar el espacio entre líneas de texto. El valor de la propiedad line-height puede ser un número, una longitud o un porcentaje.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad de altura máxima
La propiedad max-height le permite especificar la altura máxima de una caja. El valor de la propiedad max-height puede ser un número, una longitud o un porcentaje.
NOTE - Esta propiedad no funciona ni en Netscape 7 ni en IE 6.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>Producirá el siguiente resultado:
La propiedad min-height
La propiedad min-height le permite especificar la altura mínima de una caja. El valor de la propiedad min-height puede ser un número, una longitud o un porcentaje.
NOTE - Esta propiedad no funciona ni en Netscape 7 ni en IE 6.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>Producirá el siguiente resultado:
La propiedad de ancho máximo
La propiedad max-width le permite especificar el ancho máximo de una caja. El valor de la propiedad de ancho máximo puede ser un número, una longitud o un porcentaje.
NOTE - Esta propiedad no funciona ni en Netscape 7 ni en IE 6.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>Esto producirá el siguiente resultado:
La propiedad de ancho mínimo
La propiedad min-width le permite especificar el ancho mínimo de una caja. El valor de la propiedad min-width puede ser un número, una longitud o un porcentaje.
NOTE - Esta propiedad no funciona ni en Netscape 7 ni en IE 6.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>Producirá el siguiente resultado:
| 1 | visible Permite que el contenido desborde los bordes de su elemento contenedor. |
| 2 | hidden El contenido del elemento anidado simplemente se corta en el borde del elemento contenedor y no se ven barras de desplazamiento. |
| 3 | scroll El tamaño del elemento contenedor no cambia, pero las barras de desplazamiento se agregan para permitir al usuario desplazarse para ver el contenido. |
| 4 | auto El propósito es el mismo que el de desplazamiento, pero la barra de desplazamiento se mostrará solo si el contenido se desborda. |
Aquí hay un ejemplo:
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>Producirá el siguiente resultado:
| 1 | visible La caja y su contenido se muestran al usuario. |
| 2 | hidden El cuadro y su contenido se hacen invisibles, aunque aún afectan el diseño de la página. |
| 3 | collapse Esto es para usar solo con columnas de tabla dinámica y efectos de fila. |
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style = "visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>Producirá el siguiente resultado:
- Subir: utilice un valor negativo para la parte superior .
- Mover hacia abajo: use un valor positivo para la parte superior .
NOTE- Puede utilizar los valores de abajo o de la derecha así como de arriba y de izquierda .
Aquí está el ejemplo:
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>Producirá el siguiente resultado:
Posicionamiento absoluto
Un elemento con position: absolute se coloca en las coordenadas especificadas en relación con la esquina superior izquierda de la pantalla.
Puede usar dos valores arriba y a la izquierda junto con la propiedad de posición para mover un elemento HTML a cualquier parte del documento HTML.
- Mover a la izquierda: use un valor negativo para la izquierda .
- Mover a la derecha: use un valor positivo para la izquierda .
- Subir: utilice un valor negativo para la parte superior .
- Mover hacia abajo: use un valor positivo para la parte superior .
NOTE- Puede utilizar los valores de abajo o de la derecha así como de arriba y de izquierda.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>Posicionamiento fijo
El posicionamiento fijo le permite fijar la posición de un elemento en un lugar particular de la página, independientemente del desplazamiento. Las coordenadas especificadas serán relativas a la ventana del navegador.
Puede usar dos valores arriba y a la izquierda junto con la propiedad de posición para mover un elemento HTML a cualquier parte del documento HTML.
- Mover a la izquierda: use un valor negativo para la izquierda .
- Mover a la derecha: use un valor positivo para la izquierda .
- Subir: utilice un valor negativo para la parte superior .
- Mover hacia abajo: use un valor positivo para la parte superior .
NOTE- Puede utilizar los valores de abajo o de la derecha así como de arriba y de izquierda .
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html><body>
<div style = "background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style = "background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>Producirá el siguiente resultado:
Las pseudoclases más utilizadas son las siguientes:
| No Señor. | Valor y descripción |
|---|---|
| 1 | :link Utilice esta clase para agregar un estilo especial a un enlace no visitado. |
| 2 | :visited Utilice esta clase para agregar un estilo especial a un enlace visitado. |
| 3 | :hover Use esta clase para agregar un estilo especial a un elemento cuando pase el mouse sobre él. |
| 4 | :active Utilice esta clase para agregar un estilo especial a un elemento activo. |
| 5 | :focus Utilice esta clase para agregar un estilo especial a un elemento mientras el elemento tiene el foco. |
| 6 | :first-child Utilice esta clase para agregar un estilo especial a un elemento que es el primer hijo de algún otro elemento. |
| 7 | :lang Use esta clase para especificar un idioma para usar en un elemento específico. |
Al definir pseudoclases en un bloque <style> ... </style>, se deben tener en cuenta los siguientes puntos:
a: hover DEBE ir después de un: enlace y un: visitado en la definición de CSS para que sea efectivo.
a: active DEBE ir después de a: hover en la definición de CSS para que sea efectivo.
Los nombres de pseudo-clases no distinguen entre mayúsculas y minúsculas.
La pseudoclase es diferente de las clases CSS pero se pueden combinar.
La pseudoclase: link
El siguiente ejemplo demuestra cómo utilizar la clase : link para establecer el color del enlace. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>Producirá el siguiente enlace negro:
La: pseudoclase visitada
El siguiente es el ejemplo que demuestra cómo usar la clase : visitado para establecer el color de los enlaces visitados. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>Esto producirá el siguiente enlace. Una vez que haga clic en este enlace, cambiará su color a verde.
La pseudoclase: hover
El siguiente ejemplo demuestra cómo usar la clase : hover para cambiar el color de los enlaces cuando colocamos el puntero del mouse sobre ese enlace. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>Producirá el siguiente enlace. Ahora coloca el mouse sobre este enlace y verá que cambia su color a amarillo.
La pseudoclase activa
El siguiente ejemplo demuestra cómo utilizar la clase : active para cambiar el color de los enlaces activos. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>Producirá el siguiente enlace. Cuando un usuario hace clic en él, el color cambia a rosa.
La pseudoclase: focus
El siguiente ejemplo demuestra cómo usar la clase : focus para cambiar el color de los enlaces enfocados. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>Producirá el siguiente enlace. Cuando este enlace se enfoca, su color cambia a naranja. El color vuelve a cambiar cuando pierde el enfoque.
La pseudoclase del primer hijo
La pseudoclase: first-child coincide con un elemento especificado que es el primer hijo de otro elemento y agrega un estilo especial a ese elemento que es el primer hijo de algún otro elemento.
Para que: el primer hijo trabaje en IE, <! DOCTYPE> debe declararse en la parte superior del documento.
Por ejemplo, para sangrar el primer párrafo de todos los elementos <div>, puede usar esta definición:
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>Producirá el siguiente resultado:
La pseudoclase: lang
La pseudoclase de idioma : lang , permite construir selectores basados en la configuración de idioma para etiquetas específicas.
Esta clase es útil en documentos que deben apelar a varios lenguajes que tienen diferentes convenciones para determinadas construcciones de lenguaje. Por ejemplo, el idioma francés generalmente usa corchetes angulares (<y>) para citar, mientras que el idioma inglés usa comillas ('y').
En un documento que necesita abordar esta diferencia, puede usar la pseudoclase: lang para cambiar las comillas de manera apropiada. El siguiente código cambia la etiqueta <blockquote> de forma adecuada para el idioma que se está utilizando:
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>Los selectores: lang se aplicarán a todos los elementos del documento. Sin embargo, no todos los elementos hacen uso de la propiedad quotes, por lo que el efecto será transparente para la mayoría de los elementos.
Producirá el siguiente resultado:
Los pseudoelementos más utilizados son los siguientes:
| No Señor. | Valor y descripción |
|---|---|
| 1 | :first-line Utilice este elemento para agregar estilos especiales a la primera línea del texto en un selector. |
| 2 | :first-letter Utilice este elemento para agregar un estilo especial a la primera letra del texto en un selector. |
| 3 | :before Utilice este elemento para insertar contenido antes de un elemento. |
| 4 | :after Utilice este elemento para insertar contenido después de un elemento. |
El: pseudo-elemento de primera línea
El siguiente ejemplo demuestra cómo utilizar el elemento : first-line para agregar efectos especiales a la primera línea de elementos del documento.
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>Producirá el siguiente enlace:
El pseudo-elemento: primera letra
El siguiente ejemplo demuestra cómo utilizar el elemento : first-letter para agregar efectos especiales a la primera letra de los elementos del documento.
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>Producirá el siguiente enlace negro:
El: antes del pseudo-elemento
El siguiente ejemplo demuestra cómo usar el elemento : before para agregar contenido antes de cualquier elemento.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>Producirá el siguiente enlace negro:
El: después del pseudo-elemento
El siguiente ejemplo demuestra cómo usar el elemento : after para agregar contenido después de cualquier elemento.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>Producirá el siguiente enlace negro:
La regla @import
La regla @import le permite importar estilos desde otra hoja de estilo. Debería aparecer justo al principio de la hoja de estilo antes de cualquiera de las reglas, y su valor es una URL.
Puede escribirse de una de las dos formas siguientes:
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>La importancia de la regla @import es que le permite desarrollar sus hojas de estilo con un enfoque modular. Puede crear varias hojas de estilo y luego incluirlas donde las necesite.
La regla @charset
Si está escribiendo su documento con un conjunto de caracteres que no sea ASCII o ISO-8859-1, es posible que desee establecer la regla @charset en la parte superior de su hoja de estilo para indicar en qué conjunto de caracteres está escrita la hoja de estilo.
La regla @charset debe escribirse justo al principio de la hoja de estilo sin ni siquiera un espacio antes. El valor se mantiene entre comillas y debe ser uno de los conjuntos de caracteres estándar. Por ejemplo
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>La regla @ font-face
La regla @ font-face se usa para describir exhaustivamente una fuente para usar en un documento. @ font-face también se puede usar para definir la ubicación de una fuente para descargar, aunque esto puede encontrarse con límites específicos de implementación.
En general, @ font-face es extremadamente complicado y su uso no se recomienda para nadie excepto para aquellos que son expertos en métricas de fuentes.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>La! Importante regla
Cascada de hojas de estilo en cascada. Significa que los estilos se aplican en el mismo orden en que los lee el navegador. Se aplica el primer estilo y luego el segundo y así sucesivamente.
La regla! Important proporciona una forma de hacer que su CSS funcione en cascada. También incluye las reglas que se deben aplicar siempre. Siempre se aplicará una regla que tenga una propiedad! Important, sin importar dónde aparezca esa regla en el documento CSS.
Por ejemplo, en la siguiente hoja de estilo, el texto del párrafo será negro, aunque la primera propiedad de estilo aplicada sea roja:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>Por lo tanto, si desea asegurarse de que una propiedad siempre se aplique, debe agregar la propiedad! Important a la etiqueta. Entonces, para que el texto del párrafo siempre sea rojo, debe escribirlo de la siguiente manera:
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>Aquí ha hecho que p {color: # ff0000! Importante; } obligatorio, ahora esta regla siempre se aplicará incluso si ha definido otra regla p {color: # 000000; }
Producirá el siguiente resultado:
| 1 | opacity Nivel de opacidad. 0 es completamente transparente, 100 es completamente opaco. |
| 2 | finishopacity Nivel de opacidad en el otro extremo del objeto. |
| 3 | style La forma del degradado de opacidad. 0 = uniforme 1 = lineal 2 = radial 3 = rectangular |
| 4 | startX Coordenada X para que comience el degradado de opacidad. |
| 5 | startY Coordenada Y para que comience el degradado de opacidad. |
| 6 | finishX Coordenada X para finalizar el degradado de opacidad. |
| 7 | finishY Coordenada Y para que termine el degradado de opacidad. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>Producirá el siguiente resultado:
Desenfoque de movimiento
Motion Blur se utiliza para crear imágenes o texto borrosos con la dirección y la fuerza. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | add Verdadero o falso. Si es verdadero, la imagen se agrega a la imagen borrosa; y si es falso, la imagen no se agrega a la imagen borrosa. |
| 2 | direction La dirección del desenfoque, en sentido horario, redondeada a incrementos de 45 grados. El valor predeterminado es 270 (izquierda). 0 = Arriba 45 = arriba a la derecha 90 = Derecha 135 = Abajo a la derecha 180 = Abajo 225 = Abajo a la izquierda 270 = Izquierda 315 = Arriba a la izquierda |
| 3 | strength El número de píxeles que se extenderá el desenfoque. El valor predeterminado es 5 píxeles. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>Producirá el siguiente resultado:
Filtro de croma
El filtro de croma se usa para hacer transparente cualquier color en particular y generalmente se usa con imágenes. También puede usarlo con barras de desplazamiento. El siguiente parámetro se puede utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color que te gustaría que fuera transparente. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>Producirá el siguiente resultado:
Efecto de sombra paralela
Sombra paralela se utiliza para crear una sombra de su objeto en el desplazamiento y color X (horizontal) e Y (vertical) especificados.
Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color, en formato #RRGGBB, de la sombra. |
| 2 | offX Número de píxeles que la sombra paralela está desplazada del objeto visual, a lo largo del eje x. Los enteros positivos mueven la sombra paralela hacia la derecha, los enteros negativos mueven la sombra paralela hacia la izquierda. |
| 3 | offY Número de píxeles que la sombra paralela está desplazada del objeto visual, a lo largo del eje y. Los enteros positivos mueven la sombra paralela hacia abajo, los enteros negativos mueven la sombra paralela hacia arriba. |
| 4 | positive Si es verdadero, todos los píxeles opacos del objeto tienen una sombra. Si es falso, todos los píxeles transparentes tienen una sombra. El defecto es cierto. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>Producirá el siguiente resultado:
Efecto Flip
El efecto de volteo se utiliza para crear una imagen reflejada del objeto. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | FlipH Crea una imagen de espejo horizontal |
| 2 | FlipV Crea una imagen de espejo vertical |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>Producirá el siguiente resultado:
Efecto de brillo
El efecto de resplandor se utiliza para crear un resplandor alrededor del objeto. Si es una imagen transparente, entonces se crea un brillo alrededor de los píxeles opacos de la misma. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color que quieres que tenga el brillo. |
| 2 | strength La intensidad del brillo (de 1 a 255). |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>Producirá el siguiente resultado:
Efecto de escala de grises
El efecto de escala de grises se utiliza para convertir los colores del objeto a 256 tonos de gris. El siguiente parámetro se utiliza en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | grayscale Convierte los colores del objeto en 256 tonos de gris. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>Producirá el siguiente resultado:
Efecto invertido
El efecto de inversión se utiliza para asignar los colores del objeto a sus valores opuestos en el espectro de colores, es decir, para crear una imagen negativa. El siguiente parámetro se utiliza en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | Invert Asigna los colores del objeto a su valor opuesto en el espectro de colores. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>Producirá el siguiente resultado:
Efecto máscara
El efecto de máscara se utiliza para convertir píxeles transparentes en un color específico y hace que los píxeles opacos sean transparentes. El siguiente parámetro se utiliza en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color en el que se volverán las áreas transparentes. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>Producirá el siguiente resultado:
Filtro de sombra
El filtro de sombras se utiliza para crear una sombra atenuada en la dirección y el color especificados. Este es un filtro que se encuentra entre Dropshadow y Glow. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | color El color que quieres que tenga la sombra. |
| 2 | direction La dirección del desenfoque, en sentido horario, redondeada a incrementos de 45 grados. El valor predeterminado es 270 (izquierda). 0 = Arriba 45 = arriba a la derecha 90 = Derecha 135 = Abajo a la derecha 180 = Abajo 225 = Abajo a la izquierda 270 = Izquierda 315 = Arriba a la izquierda |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>Producirá el siguiente resultado:
Efecto de onda
El efecto de onda se utiliza para darle al objeto una distorsión de onda sinusoidal para que parezca ondulado. Los siguientes parámetros se pueden utilizar en este filtro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | add Un valor de 1 agrega la imagen original a la imagen ondulada, 0 no lo hace. |
| 2 | freq El número de ondas. |
| 3 | light La fuerza de la luz en la onda (de 0 a 100). |
| 4 | phase En qué grado debe comenzar la onda sinusoidal (de 0 a 100). |
| 5 | strength La intensidad del efecto de onda. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>Producirá el siguiente resultado:
Efecto de rayos X
El efecto de rayos X escala de grises y aplana la profundidad del color. En este filtro se utiliza el siguiente parámetro:
| No Señor. | Descripción de parámetros |
|---|---|
| 1 | xray Escala de grises y aplana la profundidad del color. |
Ejemplo
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>Producirá el siguiente resultado:
A continuación se muestra un ejemplo:
<style tyle = "text/css">
<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>El idioma del documento
En HTML 4.0, el atributo media en el elemento LINK especifica el medio de destino de una hoja de estilo externa -
A continuación se muestra un ejemplo:
<style tyle = "text/css">
<!--
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<head>
<title>link to a target medium</title>
<link rel = "stylesheet" type = "text/css" media = "print,
handheld" href = "foo.css">
</head>
<body>
<p>the body...
</body>
</html>
-->
</style>Tipos de medios reconocidos
Los nombres elegidos para los tipos de medios CSS reflejan los dispositivos de destino para los que las propiedades relevantes tienen sentido. Dan una idea de a qué dispositivo se refiere el tipo de medio. A continuación se muestra una lista de varios tipos de medios:
| No Señor. | Valor y descripción |
|---|---|
| 1 | all Apto para todos los dispositivos. |
| 2 | aural Destinado a sintetizadores de voz. |
| 3 | braille Diseñado para dispositivos de retroalimentación táctil braille. |
| 4 | embossed Destinado a impresoras braille paginado. |
| 5 | handheld Destinado a dispositivos portátiles (normalmente pantalla pequeña, monocromo, ancho de banda limitado). |
| 6 | Diseñado para material opaco y paginado y para documentos visualizados en pantalla en modo de vista previa de impresión. Consulte la sección sobre medios paginados. |
| 7 | projection Destinado a presentaciones proyectadas, por ejemplo, proyectores o impresión en transparencias. Consulte la sección sobre medios paginados. |
| 8 | screen Destinado principalmente a pantallas de computadora en color. |
| 9 | tty Destinado a los medios que utilizan una cuadrícula de caracteres de paso fijo, como teletipos, terminales o dispositivos portátiles con capacidades de visualización limitadas. |
| 10 | tv Destinado a dispositivos de tipo televisión. |
NOTE - Los nombres de los tipos de medios no distinguen entre mayúsculas y minúsculas.
El CSS2 define un "cuadro de página", un cuadro de dimensiones finitas en el que se representa el contenido. El cuadro de página es una región rectangular que contiene dos áreas:
The page area- El área de la página incluye los cuadros dispuestos en esa página. Los bordes del área de la página actúan como el bloque contenedor inicial para el diseño que se produce entre los saltos de página.
The margin area - Rodea el área de la página.
Puede especificar las dimensiones, orientación, márgenes, etc., de un cuadro de página dentro de una regla @page. Las dimensiones del cuadro de página se establecen con la propiedad 'tamaño'. Las dimensiones del área de la página son las dimensiones del cuadro de página menos el área del margen.
Por ejemplo, la siguiente regla @page establece el tamaño del cuadro de página en 8.5 × 11 pulgadas y crea un margen de '2 cm' en todos los lados entre el borde del cuadro de página y el área de la página:
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>Puede usar las propiedades margin, margin-top, margin-bottom, margin-left y margin-right dentro de la regla @page para establecer márgenes para su página.
Finalmente, la propiedad de las marcas se usa dentro de la regla @page para crear marcas de registro y recorte fuera del cuadro de página en la hoja de destino. De forma predeterminada, no se imprimen marcas. Puede utilizar una o ambas palabras clave de recorte y cruz para crear marcas de recorte y marcas de registro, respectivamente, en la página de impresión de destino.
Configuración del tamaño de página
La propiedad de tamaño especifica el tamaño y la orientación de un cuadro de página. Hay cuatro valores que se pueden utilizar para el tamaño de la página:
auto - El cuadro de página se establecerá con el tamaño y la orientación de la hoja de destino.
landscape- Anula la orientación del objetivo. El cuadro de página tiene el mismo tamaño que el objetivo y los lados más largos son horizontales.
portrait- Anula la orientación del objetivo. El cuadro de la página tiene el mismo tamaño que el objetivo y los lados más cortos son horizontales.
length- Los valores de longitud para la propiedad 'tamaño' crean un cuadro de página absoluto. Si solo se especifica un valor de longitud, establece tanto el ancho como el alto del cuadro de página. No se permiten valores de porcentaje para la propiedad 'tamaño'.
En el siguiente ejemplo, los bordes exteriores del cuadro de página se alinearán con el destino. El valor porcentual de la propiedad 'margen' es relativo al tamaño objetivo, por lo que si las dimensiones de la hoja objetivo son 21,0 cm × 29,7 cm (es decir, A4), los márgenes son 2,10 cm y 2,97 cm.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>El siguiente ejemplo establece el ancho del cuadro de página en 8.5 pulgadas y el alto en 11 pulgadas. El cuadro de página en este ejemplo requiere un tamaño de hoja de destino de 8.5 "× 11" o más.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>Una vez que crea un diseño de página con nombre, puede usarlo en su documento agregando la propiedad de la página a un estilo que luego se aplica a un elemento en su documento. Por ejemplo, este estilo representa todas las tablas de su documento en páginas horizontales:
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>Debido a la regla anterior, mientras imprime, si el navegador encuentra un elemento <table> en su documento y el diseño de página actual es el diseño vertical predeterminado, inicia una nueva página e imprime la tabla en una página horizontal.
Páginas izquierda, derecha y primera
Al imprimir documentos a doble cara, los cuadros de página en las páginas izquierda y derecha deben ser diferentes. Se puede expresar a través de dos pseudoclases CSS de la siguiente manera:
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>Puede especificar el estilo de la primera página de un documento con: primera pseudoclase -
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>Controlar la paginación
A menos que especifique lo contrario, los saltos de página se producen solo cuando cambia el formato de página o cuando el contenido desborda el cuadro de página actual. Para forzar o suprimir los saltos de página, utilice las propiedades page-break-before, page-break-after y page-break-inside .
Tanto el salto de página antes como el salto de página después aceptan las palabras clave automática, siempre, evitar, izquierda y derecha .
La palabra clave auto es la predeterminada, permite que el navegador genere saltos de página según sea necesario. La palabra clave siempre fuerza un salto de página antes o después del elemento, mientras que evitar suprime un salto de página inmediatamente antes o después del elemento. Las palabras clave izquierda y derecha fuerzan uno o dos saltos de página, de modo que el elemento se representa en una página de la izquierda o de la derecha.
Usar las propiedades de paginación es bastante sencillo. Suponga que su documento tiene encabezados de nivel 1 y comience nuevos capítulos con encabezados de nivel 2 para indicar secciones. Le gustaría que cada capítulo comience en una nueva página de la derecha, pero no desea que los encabezados de las secciones se dividan en un salto de página del contenido posterior. Puede lograr esto usando la siguiente regla:
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>Utilice solo los valores auto y evite con la propiedad page-break-inside . Si prefiere que sus tablas no se dividan en páginas si es posible, escribiría la regla:
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>Control de viudas y huérfanos
En la jerga tipográfica, los huérfanos son aquellas líneas de un párrafo que quedan varadas en la parte inferior de una página debido a un salto de página, mientras que las viudas son aquellas líneas que quedan en la parte superior de una página después de un salto de página. Generalmente, las páginas impresas no se ven atractivas con líneas sueltas de texto en la parte superior o inferior. La mayoría de las impresoras intentan dejar al menos dos o más líneas de texto en la parte superior o inferior de cada página.
los orphans propiedad especifica el número mínimo de líneas de un párrafo que deben dejarse en la parte inferior de una página.
los widows propiedad especifica el número mínimo de líneas de un párrafo que debe dejarse en la parte superior de una página.
Aquí está el ejemplo para crear 4 líneas en la parte inferior y 3 líneas en la parte superior de cada página:
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>- Documentación médica
Cuando se utilizan propiedades auditivas, el lienzo consta de un espacio físico tridimensional (sonido envolvente) y un espacio temporal (se pueden especificar sonidos antes, durante y después de otros sonidos).
Las propiedades de CSS también le permiten variar la calidad del habla sintetizada (tipo de voz, frecuencia, inflexión, etc.).
Aquí hay un ejemplo:
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>Producirá el siguiente resultado:
Dirigirá al sintetizador de voz para que diga los encabezados en una voz (una especie de fuente de audio) llamada "paul", en un tono plano, pero con una voz muy rica. Antes de pronunciar los encabezados, se reproducirá una muestra de sonido desde la URL proporcionada.
Los párrafos con la clase 'heidi' parecerán provenir del frente izquierdo (si el sistema de sonido es capaz de audio espacial) y los párrafos de la clase 'peter' del derecho.
Ahora veremos las diversas propiedades relacionadas con los medios auditivos.
los azimuth conjuntos de propiedades, de donde el sonido debe provenir horizontalmente.
los elevation conjuntos de propiedades, de donde el sonido debe provenir verticalmente.
los cue-after especifica un sonido que se reproducirá después de hablar el contenido de un elemento para delimitarlo de otro.
los cue-before especifica un sonido que se reproducirá antes de pronunciar el contenido de un elemento para delimitarlo de otro.
los cue es una forma abreviada de configurar cue-before y cue-after.
los pause-after especifica una pausa que se observará después de hablar el contenido de un elemento.
los pause-before especifica una pausa que se observará antes de pronunciar el contenido de un elemento.
los pause es una forma abreviada de configurar pausa-antes y pausa-después.
los pitch especifica el tono medio (una frecuencia) de la voz hablante.
los pitch-range especifica la variación en el tono medio.
los play-during especifica un sonido que se reproducirá como fondo mientras se habla el contenido de un elemento.
los richness especifica la riqueza o el brillo de la voz hablante.
los speak especifica si el texto se representará de forma auditiva y, de ser así, de qué manera.
los speak-numeral controla cómo se dicen los números.
los speak-punctuation especifica cómo se pronuncia la puntuación.
los speech-rate especifica la velocidad de habla.
los stress especifica la altura de los "picos locales" en el contorno de entonación de una voz.
los voice-family especifica la lista priorizada de nombres de familias de voces.
los volume se refiere al volumen medio de la voz.
La propiedad azimut
La propiedad azimut establece de dónde debe provenir el sonido horizontalmente. Los valores posibles se enumeran a continuación:
angle- La posición se describe en términos de un ángulo dentro del rango -360deg a 360deg . El valor 0deg significa directamente adelante en el centro del escenario de sonido. 90deg está a la derecha, 180 grados atrás, y 270deg (o, equivalentemente, y más convenientemente, -90deg ) a la izquierda.
left-side- Igual que '270deg'. Con 'detrás', '270deg'.
far-left- Igual que '300deg'. Con 'detrás', '240deg'.
left- Igual que '320deg'. Con 'detrás', '220deg'.
center-left- Igual que '340deg'. Con 'detrás', '200deg'.
center- Igual que '0deg'. Con 'detrás', '180deg'.
center-right- Igual que '20deg'. Con 'detrás', '160deg'.
right- Igual que '40deg'. Con 'detrás', '140deg'.
far-right- Igual que '60deg'. Con 'detrás', '120deg'.
right-side- Igual que '90deg'. Con 'detrás', '90deg'.
leftwards- Mueve el sonido hacia la izquierda y en relación con el ángulo actual. Más precisamente, resta 20 grados.
rightwards- Mueve el sonido hacia la derecha, en relación con el ángulo actual. Más precisamente, agrega 20 grados.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>La propiedad de elevación
La propiedad de elevación establece de dónde debe provenir el sonido verticalmente. Los valores posibles son los siguientes:
angle- Especifica la elevación como un ángulo, entre -90 grados y 90 grados . 0deg significa en el horizonte delantero, que vagamente significa nivel con el oyente. 90 grados significa directamente arriba y -90 grados significa directamente debajo.
below - Igual que '-90deg'.
level - Igual que '0deg'.
above - Igual que '90deg'.
higher - Agrega 10 grados a la elevación actual.
lower - Resta 10 grados de la elevación actual.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>La propiedad cue-after
La propiedad cue-after especifica un sonido que se reproducirá después de pronunciar el contenido de un elemento para delimitarlo de otro. Los posibles valores incluyen:
url - La URL de un archivo de sonido que se reproducirá.
none - No hay que jugar nada.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>La propiedad cue-before
Esta propiedad especifica un sonido que se reproducirá antes de pronunciar el contenido de un elemento para delimitarlo de otro. Los valores posibles son:
url - La URL de un archivo de sonido que se reproducirá.
none - No hay que jugar nada.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>La propiedad cue
La propiedad cue es una forma abreviada de configurar cue-before y cue-after . Si se dan dos valores, el primer valor es cue-before y el segundo es cue-after . Si solo se proporciona un valor, se aplica a ambas propiedades.
Por ejemplo, las siguientes dos reglas son equivalentes:
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>La propiedad de pausa después
Esta propiedad especifica una pausa que se observará después de hablar el contenido de un elemento. Los valores posibles son:
time - Expresa la pausa en unidades de tiempo absolutas (segundos y milisegundos).
percentage- Se refiere a la inversa del valor de la propiedad de velocidad de voz . Por ejemplo, si la velocidad del habla es de 120 palabras por minuto (es decir, una palabra tarda medio segundo o 500 ms), una pausa posterior del 100% significa una pausa de 500 ms y una pausa posterior del 20% significa 100 ms. .
La propiedad de pausa antes
Esta propiedad especifica una pausa que se observará antes de pronunciar el contenido de un elemento. Los valores posibles son:
time - Expresa la pausa en unidades de tiempo absolutas (segundos y milisegundos).
percentage- Se refiere a la inversa del valor de la propiedad de velocidad de voz . Por ejemplo, si la velocidad del habla es de 120 palabras por minuto (es decir, una palabra tarda medio segundo o 500 ms), una pausa antes del 100% significa una pausa de 500 ms y una pausa antes del 20% significa 100 ms. .
La propiedad de pausa
Esta propiedad es una forma abreviada de configurar pause-before y pause-after . Si se dan dos valores, el primer valor es pausa antes y el segundo es pausa después.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>La propiedad de la cancha
Esta propiedad especifica el tono medio (una frecuencia) de la voz hablante. El tono medio de una voz depende de la familia de voces. Por ejemplo, el tono promedio de una voz masculina estándar es de alrededor de 120 Hz, pero para una voz femenina, es de alrededor de 210 Hz. Los valores posibles son:
frequency - Especifica el tono medio de la voz hablada en hercios (Hz).
x-low, low, medium, high, x-high - Estos valores no se asignan a frecuencias absolutas ya que estos valores dependen de la familia de voces.
La propiedad de rango de tono
Esta propiedad especifica la variación en el tono medio. Los valores posibles son:
number- Un valor entre '0' y '100'. Un rango de tono de '0' produce una voz plana y monótona. Un rango de tono de 50 produce una inflexión normal. Los rangos de tono superiores a 50 producen voces animadas.
La propiedad de juego
Esta propiedad especifica un sonido que se reproducirá como fondo mientras se habla el contenido de un elemento. Los valores posibles podrían ser cualquiera de los siguientes:
URI - El sonido designado por este <uri> se reproduce como fondo mientras se habla el contenido del elemento.
mix- Cuando está presente, esta palabra clave significa que el sonido heredado de la propiedad play-during del elemento padre continúa reproduciéndose y el sonido designado por el uri se mezcla con él. Si no se especifica la mezcla , el sonido de fondo del elemento reemplaza al del padre.
repeat- Cuando está presente, esta palabra clave significa que el sonido se repetirá si es demasiado corto para llenar toda la duración del elemento. De lo contrario, el sonido se reproduce una vez y luego se detiene.
auto - El sonido del elemento principal continúa reproduciéndose.
none - Esta palabra clave significa que hay silencio.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>La propiedad de la riqueza
Esta propiedad especifica la riqueza o el brillo de la voz hablada. Los valores posibles son:
number- Un valor entre '0' y '100'. Cuanto mayor sea el valor, más se transmitirá la voz. Un valor más bajo producirá una voz suave y meliflua.
La propiedad speak
Esta propiedad especifica si el texto se representará de forma auditiva y, de ser así, de qué manera. Los valores posibles son:
none - Suprime el renderizado auditivo para que el elemento no requiera tiempo para renderizarse.
normal - Utiliza reglas de pronunciación dependientes del idioma para representar un elemento y sus elementos secundarios.
spell-out - Deletrea el texto una letra a la vez.
Tenga en cuenta la diferencia entre un elemento cuya propiedad 'volumen' tiene un valor de 'silencio' y un elemento cuya propiedad 'hablar' tiene el valor 'ninguno'. El primero ocupa el mismo tiempo que si se hubiera hablado, incluida cualquier pausa antes y después del elemento, pero no se genera ningún sonido. Este último no requiere tiempo y no se procesa.
La propiedad speak-numeral
Esta propiedad controla cómo se pronuncian los números. Los valores posibles son:
digits- Diga el número como dígitos individuales. Por tanto, "237" se dice "Dos Tres Siete".
continuous- Diga el número como un número completo. Así, "237" se dice "Doscientos treinta y siete". Las representaciones de palabras dependen del idioma.
La propiedad hablar-puntuación
Esta propiedad especifica cómo se pronuncia la puntuación. Los valores posibles son:
code - Los signos de puntuación, como punto y coma, llaves, etc., deben expresarse literalmente.
none - La puntuación no se debe pronunciar, sino que se presenta de forma natural como varias pausas.
La propiedad de velocidad de voz
Esta propiedad especifica la velocidad del habla. Tenga en cuenta que se permiten valores de palabras clave tanto absolutos como relativos. Los valores posibles son:
number - Especifica la velocidad de habla en palabras por minuto.
x-slow - Igual que 80 palabras por minuto.
slow - Igual que 120 palabras por minuto.
medium - Igual que 180 - 200 palabras por minuto.
fast - Igual que 300 palabras por minuto.
x-fast - Igual que 500 palabras por minuto.
faster - Agrega 40 palabras por minuto a la velocidad de habla actual.
slower - Resta 40 palabras por minuto de la velocidad de habla actual.
La propiedad del estrés
Esta propiedad especifica la altura de los "picos locales" en el contorno de entonación de una voz. El inglés es un idioma acentuado y a las diferentes partes de una oración se les asigna un acento primario, secundario o terciario. Los valores posibles son:
number- Un valor entre '0' y '100'. El significado de los valores depende del idioma que se hable. Por ejemplo, un nivel de '50' para una voz masculina de habla inglesa estándar (tono medio = 122Hz), hablar con entonación y énfasis normales tendría un significado diferente al de '50' para una voz italiana.
La propiedad de la familia de la voz
El valor es una lista priorizada y separada por comas de nombres de familias de voces. Puede tener los siguientes valores:
generic-voice- Los valores son familias de voces. Los valores posibles son 'masculino', 'femenino' y 'niño'.
specific-voice - Los valores son instancias específicas (por ejemplo, comediante, trinoides, carlos, lani).
Aquí hay un ejemplo:
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>La propiedad del volumen
El volumen se refiere al volumen medio de la voz. Puede tener los siguientes valores:
numbers- Cualquier número entre '0' y '100'. '0' representa el nivel mínimo de volumen audible y 100 corresponde al nivel máximo de comodidad.
percentage - Estos valores se calculan en relación con el valor heredado y luego se recortan al rango de '0' a '100'.
silent- Ningún sonido en absoluto. El valor '0' no significa lo mismo que 'silencioso'.
x-soft - Igual que '0'.
soft - Igual que '25'.
medium - Igual que '50'.
loud - Igual que '75'.
x-loud - Igual que '100'.
Aquí hay un ejemplo:
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>Párrafos con clase goat será muy suave.
@media print {
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
p.bodyText {font-size:10pt}
}Si está definiendo su hoja de estilo en un archivo separado, también puede usar el atributo de medios cuando se vincule a una hoja de estilo externa:
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">CSS es fundamental para el futuro de los documentos web y será compatible con la mayoría de los navegadores.
CSS es más exacto que las tablas, lo que permite que su documento se vea como lo desea, independientemente de la ventana del navegador.
Hacer un seguimiento de las tablas anidadas puede ser un verdadero dolor de cabeza. Las reglas de CSS tienden a estar bien organizadas, leerse y cambiarse fácilmente.
Por último, le sugerimos que utilice la tecnología que tenga sentido para usted y utilice lo que sabe o lo que presenta sus documentos de la mejor manera.
CSS también proporciona la propiedad de diseño de tabla para que sus tablas se carguen mucho más rápido. A continuación se muestra un ejemplo:
<table style = "table-layout:fixed;width:600px;">
<tr height = "30">
<td width = "150">CSS table layout cell 1</td>
<td width = "200">CSS table layout cell 2</td>
<td width = "250">CSS table layout cell 3</td>
</tr>
</table>Notarás los beneficios más en tablas grandes. Con HTML tradicional, el navegador tenía que calcular cada celda antes de representar finalmente la tabla. Sin embargo, cuando establece el algoritmo de diseño de tabla en fijo , solo necesita mirar la primera fila antes de representar la tabla completa. Significa que su tabla deberá tener anchos de columna y alturas de fila fijas.
Diseño de columna de muestra
Estos son los pasos para crear un diseño de columna simple usando CSS:
Establezca el margen y el relleno del documento completo de la siguiente manera:
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>Ahora, definiremos una columna con color amarillo y luego adjuntaremos esta regla a un <div> -
<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>Hasta este punto, tendremos un documento con cuerpo amarillo, así que definamos ahora otra división dentro del nivel0 -
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>Ahora, anidaremos una división más dentro del nivel1, y cambiaremos solo el color de fondo:
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>Finalmente, usaremos la misma técnica, anidaremos una división de nivel3 dentro de nivel2 para obtener el diseño visual de la columna de la derecha:
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>Complete el código fuente de la siguiente manera:
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>Del mismo modo, puede agregar una barra de navegación superior o una barra de anuncios en la parte superior de la página.
Producirá el siguiente resultado:
Validador de CSS del W3C (Consorcio de la World Wide Web), este validador verifica su CSS mediante la carga de archivos, la entrada directa o el uso de URI, una página a la vez. Este validador le ayuda a localizar todos los errores en su CSS. El validador de verificación WDG CSS le permite validar su css mediante la entrada directa, la carga de archivos y el uso de URI. Los errores se enumerarán por números de línea y columna, si tiene alguno. Los errores generalmente vienen con enlaces para explicar el motivo del error.Un validador de CSS verifica sus hojas de estilo en cascada para asegurarse de que cumplan con los estándares CSS establecidos por W3 Consortium. Hay algunos validadores que también le dirán qué características de CSS son compatibles con qué navegadores (ya que no todos los navegadores son iguales en su implementación de CSS).
¿Por qué validar su código HTML?
Hay varias razones por las que debería validar su código. Pero los principales son ...
Ayuda a la compatibilidad entre navegadores, plataformas y el futuro.
Un sitio web de buena calidad aumenta la visibilidad del motor de búsqueda.
Profesionalismo: como desarrollador web, su código no debería generar errores mientras lo vean los visitantes.
CSS3 es una colaboración de especificaciones CSS2 y nuevas especificaciones, podemos llamar a esta colaboración module. Algunos de los módulos se muestran a continuación:
- Selectors
- Modelo de caja
- Backgrounds
- Valores de imagen y contenido reemplazado
- Efectos de texto
- Transformaciones 2D
- Transformaciones 3D
- Animations
- Diseño de múltiples columnas
- Interfaz de usuario
La siguiente tabla muestra los valores posibles para las esquinas redondeadas de la siguiente manera:
| No Señor. | Valor y descripción |
|---|---|
| 1 | border-radius Utilice este elemento para establecer la propiedad de radio de cuatro límites |
| 2 | border-top-left-radius Utilice este elemento para establecer el límite de la esquina superior izquierda |
| 3 | border-top-right-radius Utilice este elemento para establecer el límite de la esquina superior derecha |
| 4 | border-bottom-right-radius Utilice este elemento para establecer el límite de la esquina inferior derecha |
| 5 | border-bottom-left-radius Utilice este elemento para establecer el límite de la esquina inferior izquierda |
Ejemplo
Esta propiedad puede tener tres valores. El siguiente ejemplo usa ambos valores:
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>Producirá el siguiente resultado:
Cada propiedad de la esquina
Podemos especificar la propiedad de cada esquina como se muestra a continuación:
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>Producirá el siguiente resultado:
| No Señor. | Valor y descripción |
|---|---|
| 1 | border-image-source Se usa para establecer la ruta de la imagen |
| 2 | border-image-slice Se usa para cortar la imagen del borde |
| 3 | border-image-width Se utiliza para establecer el ancho de la imagen del borde |
| 4 | border-image-repeat Se utiliza para establecer la imagen del borde como redondeada, repetida y estirada |
Ejemplo
A continuación se muestra el ejemplo que demuestra cómo establecer una imagen como borde para elementos.
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>Producirá el siguiente resultado:
Los valores más utilizados se muestran a continuación:
| No Señor. | Valor y descripción |
|---|---|
| 1 | background Se usa para configurar todas las propiedades de la imagen de fondo en una sección |
| 2 | background-clip Se utiliza para declarar el área de pintura del fondo. |
| 3 | background-image Se usa para especificar la imagen de fondo |
| 4 | background-origin Se utiliza para especificar la posición de las imágenes de fondo. |
| 5 | background-size Se utiliza para especificar el tamaño de las imágenes de fondo. |
Ejemplo
A continuación se muestra el ejemplo que demuestra las imágenes de fondo múltiple.
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.tutorialspoint.com</h1>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing
to academics and much more..
</p>
</div>
</body>
</html>Producirá el siguiente resultado:
Tamaño de fondo múltiple
Se acepta la propiedad de fondo múltiple para agregar diferentes tamaños para diferentes imágenes.Una sintaxis de muestra es la que se muestra a continuación:
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}Como se muestra arriba en un ejemplo, cada imagen tiene tamaños específicos como 50px, 130px y tamaño automático.
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}HSL representa hue, saturation, lightnessAquí, enorme es un grado en la rueda de colores, la saturación y la luminosidad son valores porcentuales entre 0 y 100%. Una sintaxis de muestra de HSL como se muestra a continuación:
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}HSLA representa hue, saturation, lightness and alpha. El valor alfa especifica la opacidad como se muestra en RGBA. Una sintaxis de muestra de HSLA como se muestra a continuación:
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}opacityes una pintura más fina que necesita negro para aumentar la opacidad. A continuación se muestra una sintaxis de muestra de opacidad:
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}El siguiente ejemplo muestra la propiedad de color rgba.
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>Producirá el siguiente resultado:
El siguiente ejemplo muestra la propiedad de color HSL.
<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>Producirá el siguiente resultado:
El siguiente ejemplo muestra la propiedad de color HSLA.
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "d1">Less opacity green</p>
<p id = "d2">Green</p>
<p id = "d3">Green</p>
</body>
</html>Producirá el siguiente resultado:
El siguiente ejemplo muestra la propiedad Opacity.
<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id = "m1">Red</p>
<p id = "m2">Green</p>
<p id = "m3">Blue</p>
</body>
</html>Producirá el siguiente resultado:
Degradados lineales
Los degradados lineales se utilizan para organizar dos o más colores en formatos lineales como de arriba a abajo.
De arriba hacia abajo
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Producirá el siguiente resultado:
De izquierda a derecha
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Producirá el siguiente resultado:
Diagonal
Diagonal comienza en el botón superior izquierdo y derecho.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Producirá el siguiente resultado:
Multicolor
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id = "grad2"></div>
</body>
</html>Producirá el siguiente resultado:
Degradados radiales CSS3
Los degradados radiales aparecen en el centro.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Producirá el siguiente resultado:
Degradados radiales repetidos CSS3
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>Producirá el siguiente resultado:
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>Producirá el siguiente resultado:
sombra de la caja
Se utiliza para agregar efectos de sombra a los elementos. A continuación, se muestra el ejemplo para agregar efectos de sombra al elemento.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>Producirá el siguiente resultado:
| No Señor. | Valor y descripción |
|---|---|
| 1 | text-align-last Se usa para alinear la última línea del texto. |
| 2 | text-emphasis Se usa para enfatizar el texto y el color. |
| 3 | text-overflow utilizado para determinar cómo el contenido desbordado que no se muestra se indica a los usuarios |
| 4 | word-break Se usa para romper la línea según la palabra |
| 5 | word-wrap Se usa para romper la línea y pasar a la siguiente línea |
Desbordamiento de texto
La propiedad de desbordamiento de texto determina cómo se indica a los usuarios el contenido desbordado que no se muestra. el ejemplo de muestra de desbordamiento de texto se muestra a continuación:
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
</p>
<b>Text overflow:clip:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
</p>
<b>Text overflow:ellipsis</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists
a class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Producirá el siguiente resultado:
Rompiendo palabras CSS3
Usado para romper la línea, el siguiente código muestra el código de muestra de la división de palabras.
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of
their drawing rooms.
</p>
<b>line break at any character</b>
<p class = "text2">
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and
prefer to learn new skills at their own pace from the comforts
of their drawing rooms.
</p>
</body>
</html>Producirá el siguiente resultado:
Ajuste de palabras CSS
El ajuste de palabras se usa para romper la línea y pasar a la siguiente línea. El siguiente código tendrá una sintaxis de muestra:
p {
word-wrap: break-word;
}| 1 | TrueType Fonts (TTF) TrueType es un estándar de fuentes de contorno desarrollado por Apple y Microsoft a fines de la década de 1980. Se convirtió en las fuentes más comunes para los sistemas operativos Windows y MAC. |
| 2 | OpenType Fonts (OTF) OpenType es un formato para fuentes de computadora escalables y desarrollado por Microsoft |
| 3 | The Web Open Font Format (WOFF) WOFF se utiliza para desarrollar una página web y se desarrolló en el año 2009. Ahora se utiliza por recomendación del W3C. |
| 4 | SVG Fonts/Shapes SVG permite fuentes SVG dentro de la documentación SVG. También podemos aplicar CSS a SVG con la propiedad de tipo de letra. |
| 5 | Embedded OpenType Fonts (EOT) EOT se utiliza para desarrollar las páginas web y se ha integrado en las páginas web, por lo que no es necesario permitir fuentes de terceros. |
El siguiente código muestra el código de muestra de la fuente:
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>Producirá el siguiente resultado:
Descripción de las fuentes
La siguiente lista contiene todas las descripciones de las fuentes que se colocan en la regla @ font-face:
| No Señor. | Valor y descripción |
|---|---|
| 1 | font-family Se utiliza para definir el nombre de la fuente. |
| 2 | src Se usa para definir la URL |
| 3 | font-stretch Se usa para encontrar cómo se debe estirar la fuente |
| 4 | font-style Se utiliza para definir el estilo de las fuentes. |
| 5 | font-weight Se usa para definir el peso de la fuente (negrita) |
| 1 | matrix(n,n,n,n,n,n) Se utiliza para definir transformaciones matriciales con seis valores. |
| 2 | translate(x,y) Se utiliza para transformar el elemento junto con el eje xy el eje y |
| 3 | translateX(n) Se usa para transformar el elemento junto con el eje x |
| 4 | translateY(n) Se usa para transformar el elemento junto con el eje y |
| 5 | scale(x,y) Se usa para cambiar el ancho y la altura del elemento. |
| 6 | scaleX(n) Se usa para cambiar el ancho del elemento |
| 7 | scaleY(n) Se usa para cambiar la altura del elemento. |
| 8 | rotate(angle) Se utiliza para rotar el elemento según un ángulo. |
| 9 | skewX(angle) Se utiliza para definir transformaciones sesgadas junto con el eje x |
| 10 | skewY(angle) Se utiliza para definir transformaciones sesgadas junto con el eje y |
Los siguientes ejemplos son el ejemplo de todas las propiedades anteriores.
Girar 20 grados
Rotación de la caja con un ángulo de 20 grados como se muestra a continuación:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Girar -20 grados
Rotación de caja con un ángulo de -20 grados como se muestra a continuación -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Inclinar el eje X
Rotación de caja con eje x sesgado como se muestra a continuación:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Inclinar el eje Y
Rotación de caja con eje y sesgado como se muestra a continuación:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Transformación de matriz
La rotación de la caja con Matrix se transforma como se muestra a continuación:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
Matrix se transforma con otra dirección.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>Producirá el siguiente resultado:
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Se usa para transformar el elemento usando 16 valores de matriz. |
| 2 | translate3d(x,y,z) Se utiliza para transformar el elemento utilizando el eje x, el eje y y el eje z |
| 3 | translateX(x) Se usa para transformar el elemento usando el eje x |
| 4 | translateY(y) Se usa para transformar el elemento usando el eje y |
| 5 | translateZ(z) Se usa para transformar el elemento usando el eje y |
| 6 | scaleX(x) Usado para escalar transforma el elemento usando el eje x |
| 7 | scaleY(y) Se usa para escalar transforma el elemento usando el eje y |
| 8 | scaleY(y) Se usa para transformar el elemento usando el eje z |
| 9 | rotateX(angle) Usado para rotar transforma el elemento usando el eje x |
| 10 | rotateY(angle) Usado para rotar transforma el elemento usando el eje y |
| 11 | rotateZ(angle) Usado para rotar transforma el elemento usando el eje z |
Transformaciones 3D del eje X
El siguiente ejemplo muestra las transformaciones 3D del eje x.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>Producirá el siguiente resultado:
Transformaciones 3D del eje Y
El siguiente ejemplo muestra las transformaciones 3D del eje y:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>Producirá el siguiente resultado:
Transformaciones 3D del eje Z
El siguiente ejemplo muestra las transformaciones 3D del eje Z:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>Producirá el siguiente resultado:
El ejemplo anterior muestra la altura, el ancho, el color, el nombre y la duración de la animación con sintaxis de fotogramas clave.
Mover la animación a la izquierda
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>this is an example of moving left animation .</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Producirá el siguiente resultado:
Mover la animación a la izquierda con fotogramas clave
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe
to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>Producirá el siguiente resultado:
| 1 | column-count Se utiliza para contar el número de columnas que debe dividirse ese elemento. |
| 2 | column-fill Solía decidir cómo llenar las columnas. |
| 3 | column-gap Se usa para decidir el espacio entre las columnas. |
| 4 | column-rule Usado para especifica el número de reglas. |
| 5 | rule-color Se utiliza para especificar el color de la regla de columna. |
| 6 | rule-style Se usa para especificar la regla de estilo para la columna. |
| 7 | rule-width Se usa para especificar el ancho. |
| 8 | column-span Se utiliza para especificar el intervalo entre columnas. |
Ejemplo
El siguiente ejemplo muestra la disposición del texto como una nueva estructura de papel.
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>Producirá el siguiente resultado:
Supongamos que, si el usuario quiere hacer el texto como papel nuevo sin línea, podemos hacerlo eliminando la sintaxis de estilo como se muestra a continuación:
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}Producirá el siguiente resultado:
| 1 | appearance Se utiliza para permitir que el usuario cree elementos como elementos de la interfaz de usuario. |
| 2 | box-sizing Permite a los usuarios fijar elementos en el área de forma clara. |
| 3 | icon Se utiliza para proporcionar el icono en el área. |
| 4 | resize Se utiliza para cambiar el tamaño de los elementos que se encuentran en el área. |
| 5 | outline-offset Se usa para dibujar detrás del contorno. |
| 6 | nav-down Se usa para moverse hacia abajo cuando ha presionado el botón de flecha hacia abajo en el teclado. |
| 7 | nav-left Se usa para moverse hacia la izquierda cuando ha presionado el botón de flecha hacia la izquierda en el teclado. |
| 8 | nav-right Se usa para moverse hacia la derecha cuando ha presionado el botón de flecha hacia la derecha en el teclado. |
| 9 | nav-up Se usa para moverse hacia arriba cuando ha presionado el botón de flecha hacia arriba en el teclado. |
Ejemplo de propiedad de cambio de tamaño
La propiedad de cambio de tamaño tiene tres valores comunes, como se muestra a continuación:
- horizontal
- vertical
- both
Usando de both valor en la propiedad de cambio de tamaño en la interfaz de usuario css3 -
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>TutorialsPoint.com</div>
</body>
</html>Producirá el siguiente resultado:
Desplazamiento de esquema CSS3
Fuera de línea significa dibujar una línea alrededor del elemento en el exterior del borde.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>Producirá el siguiente resultado:
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Producirá el siguiente resultado:
La imagen de arriba tiene el mismo ancho y alto de dos elementos, pero el resultado es diferente, porque el segundo está incluido en la propiedad de relleno.
Propiedad de tamaño de caja CSS3
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>La muestra anterior tiene la misma altura y ancho con box-sizing:border-box. aquí el resultado se muestra a continuación.
Producirá el siguiente resultado:
Los elementos anteriores tienen la misma altura y ancho con el tamaño del cuadro: cuadro de borde, por lo que el resultado es siempre el mismo para ambos elementos, como se muestra arriba.
<html>
<head>
<style>
body {
font: 600 14px/24px "Open Sans",
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
</head>
<body>
<h1>100% Wide Container</h1>
<div class = "container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% Wide Container</h1>
<div class = "container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% Wide Container</h1>
<div class = "container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>Producirá el siguiente resultado:
Preguntas de los medios
Las consultas de medios son para diferentes reglas de estilo para dispositivos de diferentes tamaños, como móviles, computadoras de escritorio, etc.
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>
If screen size is less than 420px, then it will show lightblue
color, or else it will show light pink color
</p>
</body>
</html>Producirá el siguiente resultado:
Diseño web sensible a Bootstrap
Bootstrap es el marco de trabajo de diseño web más popular basado en HTML, CSS y script Java y le ayuda a diseñar páginas web de forma receptiva para todos los dispositivos.
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
color:green;
}
</style>
</head>
<body>
<div class = "container">
<div class = "jumbotron">
<h1>Tutorials point</h1>
<p>
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
</p>
</div>
<div class = "row">
<div class = "col-md-4">
<h2>Android</h2>
<p>
Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed
by the Open Handset Alliance, led by Google, and other companies.
</p>
</div>
<div class = "col-md-4">
<h2>CSS</h2>
<p>
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages presentable.
</p>
</div>
<div class = "col-md-4">
<h2>Java</h2>
<p>
Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms,
such as Windows, Mac OS, and the various versions of UNIX. This tutorial
gives a complete understanding of Java.
</p>
</div>
</div>
</body>
</html>Producirá el siguiente resultado: