PROPIEDADES CSS

<Por="LUIS CALDERA_LUIS ARTEAGA"/>

}
 01 CSS Borders
02 CSS margins
03 CSS padding
Contenidos 04 CSS height / width
05 CSS box model
06 CSS outline

Introducción {

CSS son las siglas de Cascading
Style SheetsCSS describe cómo se
mostrarán los elementos HTML en la
pantalla, el papel o en otros
medios
CSS se utiliza para definir estilos
para sus páginas web, incluido el
diseño, el diseño y las variaciones en
la visualización para diferentes
dispositivos y tamaños de pantalla.

CSS ahorra mucho trabajo.

Puede controlar el diseño de
varias páginas web a la vez.
Las hojas de estilo externas
se almacenan en archivos CSS.
}
borders{

Border with Rounded Borders

Border Color

borde de CSS le permiten

BORDERS especificar el estilo, el ancho y
Border Sides el color del borde de un elemento

Shorthand Border

}
 Border Width : propiedad especifica el ancho de los cuatro
bordes.

Demostración de los diferentes anchos de

borde:
p.one {
border-style: solid;
border-width: 5px; El ancho se puede establecer
} como un tamaño específico (en
px, pt, cm, em, etc.) o usando
p.two { uno de los tres valores
border-style: solid; predefinidos:thin, medium, or
border-width: medium; thick
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted; }
border-width: thick;
}
 Border Width : propiedad especifica el ancho de los cuatro
bordes.

Demostración de los diferentes anchos de

borde:

}
 Border Width : propiedad especifica el ancho de los cuatro
bordes.
Demostración de los diferentes anchos de
borde: Anchos laterales específicos
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and La border-width propiedad
bottom, 20px on the sides */ puede tener de uno a
} cuatro valores (para el
borde superior, el borde
p.two { derecho, el borde
border-style: solid; inferior y el borde
border-width: 20px 5px; /* 20px top and izquierdo)
bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px }
top, 10px right, 4px bottom and 35px left */
}
 Border Width : propiedad especifica el ancho de los cuatro
bordes.

Demostración de los diferentes anchos de

borde:

}
CSS Border Color : La border-colorpropiedad se utiliza para
establecer el color de los cuatro bordes.
Demostración de los diferentes colores de
borde:
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}
}
Colores laterales
específicos
p.one {
{
border-style: solid;
border-color: red green blue yellow;

La border-color propiedad puede tener

/* red top, green right, blue bottom
de uno a cuatro valores (para el borde and yellow left */
superior, el borde derecho, el borde
inferior y el borde izquierdo). }

}
 Border Sides: Lados individuales
Si la border-style propiedad tiene
cuatro valores:
border-style: dotted solid
Demostración de los lados individuales
double dashed;
p { el borde superior está
border-top-style: dotted; punteado
border-right-style: solid; el borde derecho es sólido
border-bottom-style: dotted; borde inferior es doble
border-left-style: solid; el borde izquierdo está
} discontinuo

}
Shorthand Border: La borderpropiedad es una propiedad abreviada
para las siguientes propiedades de borde individuales:

border-width
border-style(requerido)
border-color

p.one {
p {
border: 5px solid red;
}
}

}
 También puede especificar todas las propiedades de borde
individuales para un solo lado:
Borde izquierdo
p {
border-left: 6px solid red;
}

p {
border-: 6px solid red;
}

}
 Rounded Borders: La border-radius propiedad se usa para agregar
bordes redondeados a un elemento
Demostración de los diferentes Rounded
Borders:
p.normal {
border: 2px solid red;
padding: 5px;
}

p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}

p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}

p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px; }
}
 Margins:Las margin propiedades CSS se utilizan para crear espacio
alrededor de los elementos, fuera de los bordes definidos.
Con CSS, tienes control total
Margin - Lados individuales sobre los márgenes. Hay
propiedades para establecer el
p {
margen de cada lado de un
margin-top: 100px;
elemento (superior, derecho,
margin-bottom: 100px;
inferior e izquierdo).
margin-right: 150px;
margin-left: 80px;
}
Margin - Propiedad abreviada

p {
margin: 25px 50px 75px 100px;
}
margen superior es 25px
margen derecho es 50px
margen inferior es 75px
margen izquierdo es 100px

}
 Margins:Las margin propiedades CSS se utilizan para crear espacio
alrededor de los elementos, fuera de los bordes definidos.

El valor automático
div {
width: 300px;
margin: auto;
border: 1px solid red; Con CSS, tienes control total
} sobre los márgenes. Hay
propiedades para establecer el
El valor heredado margen de cada lado de un
elemento (superior, derecho,
div { inferior e izquierdo).
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}
}
 CSS Padding: Las paddingpropiedades CSS se utilizan para
generar espacio alrededor del contenido de un elemento, dentro
de los bordes definidos.

Demostración de los lados individualesCSS

tiene propiedades para especificar el Todas las propiedades de relleno
relleno para cada lado de un elemento: pueden tener los siguientes
padding-top valores:
padding-right longitud : especifica un
padding-bottom relleno en px, pt, cm, etc.
padding-left % - especifica un relleno en %
del ancho del elemento
div {
padding-top: 50px; contenedor
padding-right: 30px; heredar: especifica que el
padding-bottom: 50px; relleno se debe heredar del
padding-left: 80px; elemento principal
}

}
 CSS Padding: Propiedad abreviada

Si la paddingpropiedad tiene cuatro Si la paddingpropiedad tiene tres

valores: valores:
relleno: 25px 50px 75px 100px; relleno: 25px 50px 75px;
el relleno superior es 25px el relleno superior es 25px
el relleno derecho es 50px los rellenos derecho e izquierdo
el relleno inferior es 75px son 50px
el relleno izquierdo es 100px el relleno inferior es 75px

div { div {
padding: 25px 50px 75px padding: 25px 50px 75px;
100px; }
}

}
 CSS Padding: Propiedad abreviada

Si la paddingpropiedad tiene dos

valores: Si la paddingpropiedad tiene un valor:
relleno: 25px 50px; relleno: 25px;
los rellenos superior e inferior los cuatro rellenos son 25px
son 25px
los rellenos derecho e izquierdo
son 50px

div { div {
padding: 25px 50px; padding: 25px;
} }

}
 Height, Width and Max-width:El CSS heighty widthlas propiedades se utilizan para establecer la
altura y el ancho de un elemento.

La propiedad CSS max-widthse utiliza para establecer el ancho máximo de un elemento.

altura y el ancho de un elemento <div>: La max-width propiedad se utiliza para

establecer el ancho máximo de un elemento.
div {
height: 200px; div {
max-width: 500px;
width: 50%; height: 100px;
background-color: powderblue; background-color: powderblue;
} }

}
 CSS Box Model: Todos los elementos HTML se pueden
considerar como cajas.

El modelo de caja CSS es

esencialmente una caja
que envuelve cada
elemento HTML. Consiste
en: márgenes, bordes,
relleno y el contenido
real. La siguiente
imagen ilustra el modelo
de caja:

}
 CSS Box Model

Explicación de las diferentes partes:

Contenido : el contenido del cuadro,
donde aparecen el texto y las
imágenes.
Relleno : borra un área alrededor del div {
contenido. El relleno es transparente. width: 300px;
Borde : un borde que rodea el relleno border: 15px solid green;
y el contenido. padding: 50px;
Margen : borra un área fuera del
margin: 20px;
borde. El margen es transparente.
}
El modelo de caja nos permite agregar un
borde alrededor de los elementos y
definir el espacio entre los elementos.

}
 CSS Box Model: Width and Height of an Element

Para establecer correctamente el ancho y Para calcular el tamaño completo de un

el alto de un elemento en todos los elemento, también debe agregar relleno,
navegadores, debe saber cómo funciona el bordes y márgenes.
modelo de caja.
Este elemento <div> tendrá un ancho total
de 350px:
El ancho total de un elemento debe
calcularse así:
Ancho total del elemento = ancho +
relleno izquierdo + relleno derecho +
div {
borde izquierdo + borde derecho + margen
width: 320px;
izquierdo + margen derecho
padding: 10px;
La altura total de un elemento debe
border: 5px solid gray; calcularse así:
margin: 0; Altura total del elemento = altura +
} relleno superior + relleno inferior +
}
borde superior + borde inferior + margen
superior + margen inferior
 CSS Outline:Un contorno es una línea que se dibuja alrededor de los
elementos, FUERA de los bordes, para que el elemento "resalte".

CSS tiene las siguientes propiedades de

esquema:
outline-style
outline-color
outline-width
outline-offset
outline

}
 CSS Outline:Un contorno es una línea que se dibuja alrededor de los
elementos, FUERA de los bordes, para que el elemento "resalte".

outline style:
p {outline-color:red;}

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

}
outline-width: propiedad especifica el ancho del contorno y puede
tener uno de los siguientes valores
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}

p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}

p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}

p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}

}
CSS Outline Color: La outline-color propiedad se utiliza para establecer el
color del contorno.

p.ex1 { p.ex3 {
border: 2px solid black; border: 2px solid black;
outline-style: solid; outline-style: outset;
outline-color: red; outline-color: grey;
} }

p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}

}
CSS Outline - Shorthand property: La outline propiedad es una propiedad
abreviada para establecer las siguientes propiedades de contorno
individuales:.

outline-width
outline-style(requerido)
outline-color p.ex1 {outline: dashed;}
La outlinepropiedad se especifica como p.ex2 {outline: dotted red;}
uno, dos o tres valores de la lista p.ex3 {outline: 5px solid yellow;}
anterior. El orden de los valores no p.ex4 {outline: thick ridge pink;}
importa.
El siguiente ejemplo muestra algunos
contornos especificados con la outline
propiedad abreviada:

}
CSS Outline Offset: La outline-offsetpropiedad agrega espacio entre un
contorno y el borde/borde de un elemento. El espacio entre un elemento y su
contorno es transparente.

El siguiente ejemplo especifica un

contorno de 15 px fuera del borde del pp {
borde: margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

}
CSS Outline Offset: La outline-offsetpropiedad agrega espacio entre un
contorno y el borde/borde de un elemento. El espacio entre un elemento y su
contorno es transparente.

El siguiente ejemplo muestra que el

espacio entre un elemento y su contorno p {
es transparente: margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

}
Gracias {
<Por="Luis Caldera_Luis Arteaga"/>