Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 05 de Septiembre 2016, 09:41
-
Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right bottom left. Ejemplos (CU01026D)
Aquí esta mi código para el ejercicio CU01026D del tutorial de desarrollo web desde cero, esta vez lo hice en un solo archivo HTML usando etiquetas style:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bordes en CSS(CU01026D)</title>
<style type="text/css">
/*Parrafos*/
p{font-size: 1.5em;}
/*titulos*/
h1.titulo{border-style: double; border-color: #000; border-width: 3px;
background-color: rgba(255, 106, 0, 0.5);}
/*divisiones*/
div{border-width: 10px; border-color: #000000; width: 1000px}
div#divi1{border-style: none;}
div#divi2{border-style: hidden;}
div#divi3{border-style: solid;}
div#divi4{border-style: double;}
div#divi5{border-style: dotted;}
div#divi6{border-style: dashed;}
div#divi7{border-style: groove; border-color: darkgray;}
div#divi8{border-style: ridge; border-color: darkgray;}
div#divi9{border-style: outset; border-color: darkgray;}
div#divi10{border-style: inset; border-color: darkgray;}
/*FIN divisiones*/
</style>
</head>
<body>
<h1 class="titulo">TIPOS DE BORDES</h1>
<div id="divi1"><p>Borde none</p></div><br><br>
<div id="divi2"><p>Borde hidden</p></div><br><br>
<div id="divi3"><p>Borde solid</p></div><br><br>
<div id="divi4"><p>Borde double</p></div><br><br>
<div id="divi5"><p>Borde dotted</p></div><br><br>
<div id="divi6"><p>Borde dashed</p></div><br><br>
<div id="divi7"><p>Borde groove</p></div><br><br>
<div id="divi8"><p>Borde ridge</p></div><br><br>
<div id="divi9"><p>Borde outset</p></div><br><br>
<div id="divi10"><p>Borde inset</p></div><br><br>
</body>
</html>
-
Buenas.
El ejercicio está bien resuelto, hace a la perfección lo que pide el enunciado.
Solo comentarte algo sobre esta línea:
div#divi1{border-style: none;}
Los id deben de ser únicos en cada documento, por lo cuál no sería necesario que se especifique que el elemento tiene que ser div.
Esa línea podría quedar así y daría el mismo resultado.
#divi1{border-style: none;}
Si repitieses los id no te daría ningún error, pero si pruebas un código donde repitas id por https://validator.w3.org/ como viste en unas entregas anteriores, verás que da errores en la validación porque no cumple la especificación oficial.
Saludos. ;D