PROPIEDADES DE FONDOS DE LA PAGINA
background: La background propiedad es una propiedad abreviada para:
color de fondo
imagen de fondo
background-position
fondo de tamaño
background-repeat
fondo-origen
fondo-clip
background-attachment
Background-color
La propiedad background-color establece el color de fondo de un elemento.
El fondo de un elemento es el tamaño total del elemento, incluido el relleno y el borde (pero no el margen)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #92a8d1;
}
</style>
</head>
<body>
<p>The background color can be specified with a hexadecimal value.</p>
</body>
</html>
background-image:
La propiedad background-image establece una o más imágenes de fondo de un elemento.
Por defecto, una imagen de fondo se coloca en la esquina superior izquierda de un elemento, y se repite tanto vertical como horizontalmente.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
</body>
</html>
background-repeat
Los background-repeat conjuntos de propiedades si / cómo se repetirá una imagen de fondo.
Por defecto, una imagen de fondo se repite tanto vertical como horizontalmente.
ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>The background-repeat Property</h1>
<p>Here, the background image is repeated both vertically and horizontally. This is default.</p>
</body>
</html>
background-position
La background-position propiedad establece la posición de partida una imagen de fondo.
Por defecto, una imagen de fondo se coloca en la esquina superior izquierda de un elemento, y se repite tanto vertical como horizontalmente.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
</style>
</head>
<body>
<h1>The
background-position Property</h1>
<p>Here, the background image will be positioned centered at top.</p>
</body>
</html>
Background-attachment
Los background-attachment conjuntos de propiedades si la imagen de fondo se desplaza con el resto de la página, o es fijo.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>The background-image scrolls with the page. Try to scroll down.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>
color:
La color propiedad especifica el color del texto. Utilice un color de fondo combinado con un color de texto que hace que el texto fácil de leer.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #92a8d1;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>The color of the text can be specified with a hexadecimal value.</p>
</body>
</html>
rgb------ ROJO VERDE AZUL
valores de color RGB son compatibles con todos los navegadores.
Un valor de color RGB se especifica con: RGB (rojo, verde, azul).
Cada parámetro (rojo, verde, y azul) define la intensidad del color como un número entero entre 0 y 255.
Por ejemplo, RGB (0, 0, 255) se representa como azul, porque el parámetro azul se establece en su valor más alto (255) y los otros se establece en 0.
ejemplo :
<!DOCTYPE html>
<html>
<style>
div {
background-color: rgb(0, 191, 255);
color: rgb(255, 245, 200);
padding: 20px;
}
</style>
<body>
<div>
<h1>London is the capital city of England.</h1>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
</body>
</html>
hex------VALOR EN HEXADECIMAL
valores de color hexadecimales también son compatibles con todos los navegadores.
Un color hexadecimal se especifica con: #RRGGBB.
ejemplo:
<!DOCTYPE html>
<html>
<style>
div {
background-color: #cccccc;
color: #ffffff;
padding: 100px;
}
</style>
<body>
<div>
<h1>London is the capital city of England.</h1>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
</body>
</html>
hsl-------BRILLO Y SATURACIÓN
valores de color HSL son compatibles con IE9 +, Firefox, Chrome, Safari y Opera en 10+.
HSL significa matiz, saturación y luminosidad.
Valores de color HSL se especifican con: .hsl(hue, saturation, lightness)
ejemplo:
<!DOCTYPE html>
<html>
<style>
div {
background-color: hsl(180, 50%, 50%);
color: hsl(50, 50%, 100%);
padding: 20px;
}
</style>
<body>
<div>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
</body>
</html>
rgba-------RGB CON DOMINIO DE TRANSPARENCIA
La función RGBA () definir colores utilizando el modelo de rojo-verde-azul-alfa (RGBA).
valores de color RGBA son una extensión de valores de color RGB con un canal alfa - que especifica la opacidad del color.
ejemplo:
<!DOCTYPE html>
<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);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<p>RGB colors with opacity:</p>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
<style>
</body>
</html>
hsla------HSL CON DOMINIO DE TRANSPARENCIA
La función HSLA () definir colores utilizando el modelo Hue-saturación-ligereza-alfa (HSLA).
valores de color HSLA son una extensión de los valores de color HSL con un canal alfa - que especifica la opacidad del color.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<p>HSL colors with opacity:</p>
<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>
</body>
</html>
border
La border propiedad es una propiedad abreviada para:
ancho del borde
border-style (requerido)
color del borde
Si se omite border-color, el color aplicado será el color del texto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 5px solid red;
}
h2 {
border: 4px dotted blue;
}
div {
border: double 10px yellow;
}
</style>
</head>
<body>
<h1>A heading with a solid red border</h1>
<h2>A heading with a dotted blue border</h2>
<div>A div element with a double border.</div>
</body>
</html>
border-bottom
La border-bottom propiedad es una propiedad abreviada para (en el siguiente orden):
border-bottom-ancho
-Inferior-estilo de borde
border-bottom-color de
Si se omite border-bottom-color, el color aplicado será el color del texto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-bottom: 5px solid red;
}
h2 {
border-bottom: 4px dotted blue;
}
div {
border-bottom: double;
}
</style>
</head>
<body>
<h1>A heading with a solid red bottom border</h1>
<h2>A heading with a dotted blue bottom border</h2>
<div>A div element with a double bottom border.</div>
</body>
</html>
border-bottom-color
La border-bottom-color propiedad establece el color del borde inferior de un elemento.
declarar siempre el border-style o el -fondo-estilo de borde propiedad antes de la border-bottom-color propiedad. Un elemento debe tener un borde para poder cambiar el color.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-bottom-style: solid;
border-bottom-color: coral;
}
div {
border-style: solid;
border-bottom-color: coral;
}
</style>
</head>
<body>
<h1>A heading with a colored bottom border</h1>
<div>The border color.</div>
<p><strong>Note:</strong> Always </p>
</body>
</html>
border-bottom-style
La border-bottom-style propiedad establece el estilo del borde inferior de un elemento.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-bottom-style: dotted;
}
div {
border-style: solid;
border-bottom-style: dotted;
}
</style>
</head>
<body>
<h1>A heading with a dotted bottom border</h1>
<div>A div element with a dotted bottom border.</div>
</body>
</html>
border-bottom-width
La border-bottom-width propiedad establece la anchura del borde inferior de un elemento.
declarar siempre el border-style o el -fondo-estilo de borde propiedad antes de la border-bottom-width propiedad. Un elemento debe tener fronteras antes de poder cambiar el ancho.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-bottom-style: solid;
border-bottom-width: thin;
}
div {
border-style: solid;
border-bottom-width: thin;
}
</style>
</head>
<body>
<h1>A heading with a thin bottom border</h1>
<div>A div element with a thin bottom border.</div>
<p><strong>Note:</strong> Always declare the border-bottom-style or the border-style property before the border-bottom-width property. An element must have a border before you can change the color.</p>
</body>
</html>border-style
La border-style propiedad establece el estilo de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Ejemplos:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: dashed;
}
div {
border-style: dashed;
}
</style>
</head>
<body>
<h1>A Heading with a dashed border</h1>
<div>A div element with a dashed border.</div>
</body>
</html>
border-top
Los border-top Abreviación de las propiedades conjuntos de todas las propiedades del borde superior en una declaración.
Las propiedades que se pueden establecer debe estar en el orden siguiente:
border-top-ancho
-estilo borde superior (requerido)
border-top-colores
Si se omite border-top-color, el color aplicado será el color del texto
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-top: 5px solid red;
}
h2 {
border-top: 4px dotted blue;
}
div {
border-top: double;
}
</style>
</head>
<body>
<h1>A heading with a solid red top border</h1>
<h2>A heading with a dotted blue top border</h2>
<div>A div element with a double top border.</div>
</body>
</html>
border-top-color
La border-top-color propiedad establece el color del borde superior de un elemento.
declarar siempre el border-style o el -estilo borde superior propiedad antes de la border-top-color propiedad. Un elemento debe tener un borde para poder cambiar el color.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-top-style: solid;
border-top-color: coral;
}
div {
border-style: solid;
border-top-color: coral;
}
</style>
</head>
<body>
<h1>A heading with a colored top border</h1>
<div>The border-top-color can be specified with a color name.</div>
<p><strong>Note:</strong> Always declare .</p>
</body>
</html>
border-top-style
La border-top-stylen propiedad establece el estilo del borde superior de un elemento.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-top-style: dotted;
}
div {
border-style: solid;
border-top-style: dotted;
}
</style>
</head>
<body>
<h1>A heading with a dotted top border</h1>
<div>A div element with a dotted top border.</div>
</body>
</html>
border-top-width
La border-top-width propiedad establece la anchura del borde superior de un elemento.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-top-style: solid;
border-top-width: thin;
}
div {
border-style: solid;
border-top-width: thin;
}
</style>
</head>
<body>
<h1>A heading with a thin top border</h1>
<div>A div element with a thin top border.</div>
<p><strong>Note:</strong> Always declare the border-top-style or the border-style property before the border-top-width property.</p>
</body>
</html>border width
La border-width propiedad establece la anchura de cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-width: thin;
}
div {
border-style: solid;
border-width: thin;
}
</style>
</head>
<body>
<h1>A heading with a thin border</h1>
<div>A div element with a thin border.</div>
<p><strong>Note:</strong> The border-width property does not work if it is used alone. Use the border-style property to set the border first.</p>
</body>
</html>
margin
La margin propiedad establece los márgenes de un elemento, y es una propiedad abreviada para las siguientes propiedades:
margin-top
margin-right
margin-bottom
margin-left
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
margin: 35px;
}
</style>
</head>
<body>
<h1>The margin Property</h1>
<p>A paragraph with no specified margins.</p>
<p class="ex1">This paragraph has a margin of 35 pixels on all four sides.</p>
<p>A paragraph with no specified margins.</p>
</body>
</html>margin left
La margin-left propiedad establece el margen izquierdo de un elemento.
Los valores negativos son permitidos.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
margin-left: 30px;
}
</style>
</head>
<body>
<h1>The margin-left Property</h1>
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 30pixels left margin.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>
margin-top
La margin-top propiedad establece el margen superior de un elemento.
Los valores negativos son permitidos.
ejemplo:
<html>
<head>
<style>
p.ex1 {
margin-top: 25px;
}
</style>
</head>
<body>
<h1>The margin-top Property</h1>
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 25 pixels top margin.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>margin right
La margin-right propiedad establece el margen derecho de un elemento.
Los valores negativos son permitidos.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
margin-right: 150px;
}
</style>
</head>
<body>
<h1>The margin-right Property</h1>
<p>A paragraph with no margins specified. A paragraph with no margins specified.</p>
<p class="ex1">
A paragraph with a 150 pixels right margin.</p>
</body>
</html>
margin-bottom
La margin-bottom propiedad establece el margen inferior de un elemento.
Los valores negativos son permitidos.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
margin-bottom: 25px;
}
</style>
</head>
<body>
<h1>The margin-bottom Property</h1>
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 25 pixels bottom margin.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>
padding
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding propiedad es una propiedad abreviada para:
acolchado superior
padding-right
fondo acolchado
padding-left
El relleno crea espacio adicional dentro de un elemento, mientras que el margen crea un espacio adicional alrededor de un elemento.
Esta propiedad puede tener de uno a cuatro valores.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding: 35px;
}
p.ex2 {
border: 1px solid red;
margin: 35px;
}
</style>
</head>
<body>
<h1>The padding Property</h1>
<p class="ex1">This paragraph has a padding of 35 pixels on all four sides.</p>
<p class="ex2">This paragraph has no specified padding, but a margin of 35 pixels on all four sides.</p>
<p><strong>Note:</strong> Padding creates extra space within an element, while margin creates extra space around an element!</p>
</body>
</html>
padding-bottom
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding-bottom propiedad establece el relleno inferior (espacio) de un elemento.
Negativo valores no están permitidos.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-bottom: 25px;
}
</style>
</head>
<body>
<h1>The padding-bottom Property</h1>
<p class="ex1">A paragraph with a 25 pixels bottom padding.</p>
</body>
</html>
padding-left
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding-left propiedad establece el relleno a la izquierda (espacio) de un elemento.
Negativo valores no están permitidos.
ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-left: 50px;
}
</style>
</head>
<body>
<h1>The padding-left Property</h1>
<p class="ex1">A paragraph with a 50 pixels left padding.</p>
</body>
</html>
padding-right
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding-right propiedad establece el relleno derecho (espacio) de un elemento.
Negativo valores no están permitidos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-right: 150px;
}
</style>
</head>
<body>
<h1>The padding-right Property</h1>
<p class="ex1">A paragraph with a 150 pixels right padding.</p>
</body>
</html>
padding-top
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding-top propiedad establece el relleno superior (espacio) de un elemento.
Negativo valores no están permitidos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-top: 25px;
}
</style>
</head>
<body>
<h1>The padding-top Property</h1>
<p class="ex1">A paragraph with a 25 pixels top padding.</p>
</body>
</html>
height
La height propiedad establece la altura de un elemento.
La altura de un elemento no incluye el relleno, bordes o márgenes.
ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
height: auto;
border: 1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The height Property</h1>
<h2>height: auto (default)</h2>
<div class="a"> que onda
</div>
<h2>height: 50px</h2>
<div class="b">Loremt.</div>
</body>
</html>
Max-height
La max-height propiedad define la altura máxima de un elemento.
Si el contenido es mayor que la altura máxima, se desborde. Como el contenedor manejará el contenido desborde está definido por el desbordamiento de la propiedad.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
max-height: 50px;
overflow: auto;
}
</style>
</head>
<body>
<h1>The max-height Property</h1>
<h2>max-height: none (default):</h2>
<p>Lorem.</p>
<h2>max-height: 50px:</h2>
<p class="ex1">Lorem </p>
</body>
</html>
max-width
La max-width propiedad define la anchura máxima de un elemento.
Si el contenido es mayor que la anchura máxima, que va a cambiar automáticamente la altura del elemento.
Si el contenido es menor que la anchura máxima, la max-width propiedad no tiene efecto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
max-width: 150px;
}
</style>
</head>
<body>
<h1>The max-width Property</h1>
<h2>max-width: none (default):</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<h2>max-width: 150px:</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</body>
</html>
min-height
La min-height propiedad define la altura mínima de un elemento.
Si el contenido es menor que la altura mínima, se aplicará la altura mínima.
Si el contenido es mayor que la altura mínima, la min-height propiedad no tiene efecto.
Esto evita que el valor de la altura de la propiedad de convertirse menor que min-height.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex1 {
min-height: 100px;
}
</style>
</head>
<body>
<h1>The min-height Property</h1>
<h2>min-height: none (default):</h2>
<p>Lorem .</p>
<h2>min-height: 200px:</h2>
<p class="ex1">Lorem.</p>
</body>
</html>
min-width
La min-width propiedad define la anchura mínima de un elemento.
Si el contenido es menor que el ancho mínimo, se aplicará la anchura mínima.
Si el contenido es mayor que el ancho mínimo, la min-width propiedad no tiene efecto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: yellow;
}
span.ex1 {
min-width: 500px;
display: inline-block;
}
</style>
</head>
<body>
<h1>The min-width Property</h1>
<h2>min-width: none (default):</h2>
<span>Lorem ipsum dolor sit amet...</span>
<h2>min-width: 500px:</h2>
<span class="ex1">Lorem ipsum dolor sit amet...</span>
</body>
</html>
width
La width propiedad establece el ancho de un elemento.
El ancho de un elemento no incluye el relleno, bordes o márgenes!
El min-width y max-anchura propiedades anulan la width propiedad.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
width: auto;
border: 1px solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width: 50%;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The width Property</h1>
<h2>width: auto (default)</h2>
<div class="a"></div>
<h2>width: 150px</h2>
<div class="b"></div>
<h2>width: 50%</h2>
<div class="c">.</div>
</body>
</html>
outline
Un esquema es una línea que se dibuja alrededor de los elementos, fuera de las fronteras, para hacer que el elemento "destaque".
La outline propiedad es una propiedad abreviada para:
contorno de ancho
esbozo de estilo (requerido)
contorno color
Si se omite el esquema de color, el color aplicado será el color del texto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border: 1px solid red;
outline: 5px dotted green;
}
div.a {
border: 1px solid red;
outline: 2px dashed blue;
}
</style>
</head>
<body>
<h1>The outline Property</h1>
<h2>A Heading with a 5 pixels green dotted outline</h2>
<div class="a">A div element with a 2 pixels blue dashed outline. Also notice that the outline is outside of any border.</div>
</body>
</html>
outline-width
Un esquema es una línea que se dibuja alrededor de los elementos (fuera de las fronteras) para hacer que el elemento de "sobresalir".
El outline-width especifica la anchura de un esquema.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-width: thick;
}
div.a {
outline-style: solid;
outline-width: thick;
}
div.b {
border: 1px solid red;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h1>The outline-width Property</h1>
<h2>A Heading with a thick outline</h2>
<div class="a">A div element with a thick outline.</div>
<br>
<div class="b">Notice that the outline is outside of any border.</div>
</body>
</html>
outline-color
La outline-color propiedad especifica el color de un esquema.
declarar siempre el estilo de contorno propiedad antes de la outline-color propiedad. Un elemento debe tener un esquema antes de cambiar el color de la misma.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-color: coral;
}
div.a {
outline-style: solid;
outline-color: coral;
}
div.b {
border: 1px solid black;
outline-style: solid;
outline-color: coral;
}
</style>
</head>
<body>
<h1>The outline-color Property</h1>
<h2>A heading with a colored outline</h2>
<div class="a">The outline-color can be specified with a color name.</div>
<br>
<div class="b">Notice that the outline is outside of any border.</div>
<p><strong>Note:</strong> The outline-color property does not work if it is used alone. Use the outline-style property to set the outline first.</p>
</body>
</html>
outline-offset
El outline-offset establecimiento tiene espacio entre un esquema y el borde o borde de un elemento.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
background-color: yellow;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
background-color: yellow;
outline: 5px dashed blue;
outline-offset: 5px;
}
</style>
</head>
<body>
<h1>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 px</div>
<div class="ex2">This div has a 5 pixels dashed blue.</div>
</body>
</html>
outline-style
La outline-style propiedad especifica el estilo de un esquema.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: dotted;
}
div.a {
outline-style: dotted;
}
div.b {
border: 1px solid red;
outline-style: dotted;
}
</style>
</head>
<body>
<h1>The outline-style Property</h1>
<h2>A Heading with a dotted outline</h2>
<div class="a">A div element with a dotted outline.</div>
<br>
<div class="b">Notice that the outline is outside of any border.</div>
</body>
</html>
outline-width
El outline-width especifica la anchura de un esquema.
declarar siempre el estilo de contorno propiedad antes de la outline-width propiedad. Un elemento debe tener un esquema antes de cambiar el ancho de la misma.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-width: medium;
}
div.a {
outline-style: solid;
outline-width: medium;
}
div.b {
border: 1px solid red;
outline-style: solid;
outline-width: medium;
}
</style>
</head>
<body>
<h1>The outline-width Property</h1>
<h2>A Heading with a medium outline</h2>
<div class="a">A div element with a medium outline.</div>
<br>
<div class="b">Notice that the outline is outside of any border.</div>
</body>
</html>
directión
La direction propiedad especifica la dirección del texto / dirección de escritura dentro de un elemento en bloque.
Utilice esta propiedad junto con el unicode-bidi propiedad para establecer o devolver si el texto debe ser anulado para soportar múltiples idiomas en el mismo documento.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.rtl {
direction: rtl;
}
</style>
</head>
<body>
<h1>The direction Property</h1>
<p>This text goes from left to right. This is default.</p>
<p class="rtl">This text goes from right to left.</p>
</body>
</html>
letter-spacing
Las letter-spacing propiedad aumenta o disminuye el espacio entre caracteres en un texto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 1px;
}
h2 {
letter-spacing: 2px;
}
h3 {
letter-spacing: 1px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
line-height
La line-height propiedad especifica la altura de una línea.
Los valores negativos no están permitidos.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
line-height: normal;
}
div.b {
line-height: 1.6;
}
div.c {
line-height: 80%;
}
div.d {
line-height: 200%;
}
</style>
</head>
<body>
<h1>The line-height Property</h1>
<h2>line-height: normal (default):</h2>
<div class="a">%.</div>
<h2>line-height: 1.6 (recommended):</h2>
<div class="b">.</div>
<h2>line-height: 80%:</h2>
<div class="c">.</div>
<h2>line-height: 200%:</h2>
<div class="d">.</div>
</body>
</html>
text-align
La text-align propiedad especifica la alineación horizontal del texto en un elemento.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.d {
text-align: justify;
}
</style>
</head>
<body>
<h1>The text-align Property</h1>
<div class="a">
<h2>text-align: center:</h2>
<p></p>
</div>
<div class="b">
<h2>text-align: left:</h2>
<p>.</p>
</div>
<div class="c">
<h2>text-align: right:</h2>
<p>.</p>
</div>
<div class="d">
<h2></p>
</div>
</body>
</html>
text-decoration
La text-decoration propiedad especifica la decoración añadida al texto, y es una propiedad abreviada para:
text-decoration-line (requerido)
text-decoration color
-Decoración de estilo de texto
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: underline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
</body>
</html>
text-indent
La text-indent propiedad especifica la sangría de la primera línea en un bloque de texto.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-indent: 50px;
}
div.b {
text-indent: -2em;
}
div.c {
text-indent: 30%;
}
</style>
</head>
<body>
<h1>The text-indent Property</h1>
<h2>text-indent: 50px:</h2>
<div class="a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<h2>text-indent: -2em:</h2>
<div class="b">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>text-indent: 30%:</h2>
<div class="c">
<p>gravida libero rhoncus ut.</p>
</div>
</body>
</html>
text-shadow
El text-shadow establecimiento tiene sombra al texto.
Esta propiedad acepta una lista separada por comas de sombras que se aplicará al texto.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style
h1 {
text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>
<h1>The text-shadow Property</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>
</body>
</html>
text-transform
La text-transform propiedad controla la capitalización de texto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-transform: uppercase;
}
div.b {
text-transform: lowercase;
}
div.c {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>The text-transform Property</h1>
<h2>text-transform: uppercase:</h2>
<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<h2>text-transform: lowercase:</h2>
<div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<h2>text-transform: capitalize:</h2>
<div class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</body>
</html>
text-overflow
Las text-overflow especifica cómo el contenido de propiedad desbordado que no se muestra deben señalizarse al usuario. Se puede sujetar, muestra unos puntos suspensivos (...), o mostrar una cadena personalizada.
Ambas de las siguientes propiedades son necesarias para el texto desbordamiento:
white-space: nowrap;
overflow: hidden;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
div.b {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
div.c {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: "----";
border: 1px solid #000000;
}
</style>
</head>
<body>
<h1>The text-overflow Property</h1>
<p>The following two divs contains a text that will not fit in the box.</p>
<h2>text-overflow: clip (default):</h2>
<div class="a">Hello world!</div>
<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>
<h2>text-overflow: "----" (user defined string):</h2>
<div class="c">Hello world!</div>
<p><strong>Note:</strong> The text-overflow: "<em>string</em>" only works in
Firefox.</p>
</body>
</html>
unicode-bidi
La unicode-bidi propiedad se utiliza junto con la dirección de la propiedad para establecer o devolver si el texto debe ser anulado para soportar múltiples idiomas en el mismo documento.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h1>The unicode-bidi Property</h1>
<div>Some text. Default writing direction.</div>
<div class="ex1">Some text. Right-to-left direction.</div>
</body>
</html>
vertical-align
La vertical-align propiedad establece la alineación vertical de un elemento.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<h1>The vertical Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>
</body>
</html>
white-space
La white-space propiedad especifica cómo se maneja un espacio en blanco dentro de un elemento.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
white-space: nowrap;
}
p.b {
white-space: normal;
}
p.c {
white-space: pre;
}
</style>
</head>
<body>
<h1>The white-space Property</h1>
<h2>white-space: nowrap:</h2>
<p class="a">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<h2>white-space: normal:</h2>
<p class="b">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<h2>white-space: pre:</h2>
<p class="c">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
word-spacing
Los word-spacing propiedad aumenta o disminuye el espacio en blanco entre las palabras.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
word-spacing: normal;
}
p.b {
word-spacing: 30px;
}
p.c {
word-spacing: 1cm;
}
</style>
</head>
<body>
<h1>The word-spacing Property</h1>
<h2>word-spacing: normal:</h2>
<p class="a">This is some text. This is some text.</p>
<h2>word-spacing: 30px:</h2>
<p class="b">This is some text. This is some text.</p>
<h2>word-spacing: 1cm:</h2>
<p class="c">This is some text. This is some text.</p>
</body>
</html>
font
La font propiedad es una propiedad abreviada para:
Estilo de fuente
font-variant
font-weight
tamaño de fuente / line-height
Familia tipográfica
Se requieren los valores de tamaño de fuente y la fuente-familia. Si uno de los otros valores no se encuentra, se utilizan los valores predeterminados.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 15px arial, sans-serif;
}
p.b {
font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">This is a paragraph. The font size is set to 15 pixels, and the font family is Arial.</p>
<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>
</body>
</html>
font-family
La font-family propiedad puede contener varios nombres de fuentes como un sistema de "retroceso". Si el navegador no es compatible con la primera fuente, se trata la próxima fuente.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font-family: "Times New Roman", Times, serif;
}
p.b {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>
<p class="a">This is a paragraph, shown in the Times New Roman font.</p>
<p class="b">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
font-size
La font-size propiedad establece el tamaño de la fuente.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
font-size: 15px;
}
div.b {
font-size: large;
}
div.c {
font-size: 150%;
}
</style>
</head>
<body>
<h1>The font-size Property</h1>
<div class="a">This is some text.</div>
<div class="b">This is some text.</div>
<div class="c">This is some text.</div>
</body>
</html>
font-style
La font-style propiedad especifica el estilo de fuente para un texto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font-style: normal;
}
p.b {
font-style: italic;
}
p.c {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style Property</h1>
<p class="a">This is a paragraph, normal.</p>
<p class="b">This is a paragraph, italic.</p>
<p class="c">This is a paragraph, oblique.</p>
</body>
</html>
font-variant
En un pequeño-casquillos de fuente, todas las letras minúsculas se convierten en letras mayúsculas. Sin embargo, las letras mayúsculas convertidos aparece en un tamaño de letra más pequeño que las letras mayúsculas originales en el texto.
Los font-variant especifica de propiedad si o no un texto debe ser representada en un pequeño-casquillos de fuente.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant Property</h1>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>
font-weight
La font-weight propiedad establece cómo se deben mostrar caracteres gruesas o delgadas en el texto.
ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h1>The font-weight Property</h1>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
a:link
un enlace normal no visitado.
ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>hello men</h2>
<p><a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
a:visited:
un enlace que el usuario ha visitado.
ejemplo:
a {
/* Especifique los valores predeterminados no transparentes a ciertas propiedades,
lo que les permite ser diseñado con el estado :visited */
background-color: white;
border: 1px solid white;
}
a:visited {
background-color: yellow;
border-color: hotpink;
color: hotpink;
}
a:hover:
un enlace cuando el usuario pasa el mouse sobre él.
ejemplo
a:active:
un enlace en el momento en que se hace clic.
ejemplo:
list-style-type:
Especifica el tipo de marcador de elemento de lista.
ejemplo:
list-style-position:
Especifica la posición de los marcadores de elementos de lista (viñetas).
ejemplo:
list-style-image:
Especifica una imagen como marcador de elemento de lista.
ejemplo:
border-collapse:
Establece si los bordes de la tabla deben contraerse en un solo borde o estar separados.
border-spacing:
Establece la distancia entre los bordes de las celdas adyacentes.
caption-side:
Especifica la ubicación de un título de tabla.
empty-cells:
Especifica si se muestran o no los bordes y el fondo en las celdas vacías de una tabla.
table-layout:
Define el algoritmo utilizado para diseñar celdas, filas y columnas de la tabla.
nth-child(even):
Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.
nth-child(ODD):
Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc.
DISPLAY:
Especifica cómo se debe mostrar un determinado elemento HTML.
position:
Especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto o fijo).
position:static:
Valor por defecto. Los elementos se procesan en orden, tal como aparecen en el flujo de documentos.
position:relative:
El elemento se coloca en relación con su posición normal, por lo que "left: 20px" agrega 20 píxeles a la posición IZQUIERDA del elemento.
position:fixed:
El elemento se coloca en relación con la ventana del navegador.
position:absolute:
El elemento se coloca en relación con su primer elemento ancestro (no estático) posicionado.
position:sticky:
Un elemento adhesivo alterna entre relativo y fijo, dependiendo de la posición de desplazamiento. Se posiciona en forma relativa hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica, luego se "pega" en su lugar (como posición: fija).
No es compatible con IE / Edge 15 o versiones anteriores. Compatible con Safari desde la versión 6.1 con un prefijo -webkit-.
bottom:
Establece la posición de los elementos, desde la parte inferior de su elemento padre.
left:
Especifica la posición izquierda de un elemento posicionado.
right:
Especifica la posición correcta de un elemento posicionado.
top:
Especifica la posición superior de un elemento posicionado.
z-index:
Establece el orden de apilamiento de un elemento posicionado.
overflow:
Especifica qué sucede si el contenido desborda el cuadro de un elemento.
overflow-x:
Especifica si se recortan o no los bordes izquierdo / derecho del contenido, si desborda el área de contenido del elemento.
overflow-y:
Especifica si se deben recortar o no los bordes superior / inferior del contenido, si desborda el área de contenido del elemento.
overflow:VISIBLE:
El desbordamiento no está recortado. Se procesa fuera del cuadro del elemento.
overflow:HIDDEN:
El desbordamiento se recorta y el resto del contenido será invisible.
overflow: SCROLL:
El desbordamiento se recorta, pero se agrega una barra de desplazamiento para ver el resto del contenido.
overflow: AUTO:
Si se recorta el desbordamiento, se debe agregar una barra de desplazamiento para ver el resto del contenido.
box-sizing:
Define cómo se calculan el ancho y el alto de un elemento: si deben incluir relleno y bordes, o no.
clear:
Especifica en qué lados de un elemento los elementos flotantes no pueden flotar.
float:
Especifica si una caja debe flotar o no.
FLOAT:LEFT:
El elemento flota a la izquierda de su contenedor.
FLOAT:RIGHT:
El elemento flota a la derecha de su contenedor.
FLOAT: NONE:
El elemento no flota, (se mostrará justo donde aparece en el texto).
FLOAT: INHERIT:
Hereda esta propiedad de su elemento padre.
PROPIEDAD FOCUS:
Se utiliza para seleccionar el elemento que tiene el foco.
El selector de enfoque está permitido en los elementos que aceptan eventos de teclado u otras entradas del usuario.
focus {
css declarations;
}
Comentarios
Publicar un comentario