jueves, 3 de mayo de 2018

Bordes CSS

border-style


Las propiedades de estilo de borde especifican el estilo de línea del borde de un cuadro.

[Sintaxis]
border-style: none | hidden | dotted | dashed | solid | double | groove 
              | ridge | inset | outset



Ejemplo


[style.css]
p{
  width: 300px;
  height: 100px;
}
p#dot{ border-style: dotted; }
p#sol{ border-style: solid; }

[index.html]  
<p id="dot">This is a paragraph(dotted)</p>
<p id="sol">This is a paragraph(solid)</p>


border-color

Las propiedades de border-color especifican el color del borde de una caja.

[Sintaxis]
border-color: <color> | transparent

- color : Especifica un valor de color:

Ejemplo


[style.css]
p{
  width: 300px;
  height: 100px;
  border-style: solid;
  border-color: red;
}


[index.html] 
<p>This is a paragraph</p>


border-width

Las propiedades de border-width especifican el ancho del área de borde.

[Sintaxis]
border-width: thin | medium | thick | <length>

Ejemplo


[style.css]
p#thin{ border-width: thin; }
p#med{ border-width: medium; }
p#thick{ border-width: thick; }

[index.html] 
<p id="thin">This is a paragraph(thin)</p>
<p id="med">This is a paragraph(medium)</p>
<p id="thick">This is a paragraph(thick)</p>


Ver también  8.5 Border properties

Reto


1. Estilos de la navegación lateral por el borde.

[style.css]
nav ul li{
  font-size: 1.5em;
  padding-left: 10px;
  margin-bottom: 7px;
  border-left-width: 5px;
  border-left-color: #990066;
  border-left-style: solid;
}

2. Estilos los encabezados de noticias.

[style.css]
#main header{
  padding-left: 10px;
  margin-bottom: 10px;
  border-top-width: 1px;
  border-top-color: #A6A6A6;
  border-top-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: #A6A6A6;
  border-bottom-style: dashed;
}


3. Estilos de la tabla de la página de solicitud de reclutamiento (recruit.html).

[style.css]
#main2 table{
  border-top-width: 1px;
  border-top-color: #A6A6A6;
  border-top-style: solid;
  border-left-width: 1px;
  border-left-color: #A6A6A6;
  border-left-style: solid;
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
}
#main2 th, #main2 td{
  border-right-width: 1px;
  border-right-color: #A6A6A6;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #A6A6A6;
  border-bottom-style: solid;
  margin: 0px;
  padding: 5px 10px;
}
#main2 th{
  width: 150px;
}
#main2 td{
  width: 410px;
}



 Fuente: /www.w3.org/






No hay comentarios:

Publicar un comentario

Git. Trabajar con remotos

Para poder colaborar en cualquier proyecto Git, necesitas saber cómo gestionar repositorios remotos. Los repositorios remotos son versione...