Scribd
Cargar
79 vistas6 páginas

Lineas de Codigo HTML

El documento presenta el código HTML y CSS para crear una tabla. El código HTML define una tabla con varias filas y columnas utilizando las etiquetas <table>, <tr>, y <td>. El código CSS establece los estilos de la tabla, incluyendo bordes, relleno y colores de fondo para filas y celdas individuales en diferentes estados como el paso del cursor.

Cargado por

Hernan Dario
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
79 vistas6 páginas

Lineas de Codigo HTML

El documento presenta el código HTML y CSS para crear una tabla. El código HTML define una tabla con varias filas y columnas utilizando las etiquetas <table>, <tr>, y <td>. El código CSS establece los estilos de la tabla, incluyendo bordes, relleno y colores de fondo para filas y celdas individuales en diferentes estados como el paso del cursor.

Cargado por

Hernan Dario
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

<!

doctype html>
<html lang="en">
<head>
<meta charset="imagenes-ADSI">
<title>Css con Imagenes</title>
<link rel="stylesheet" type="text/css" href="css/archibo.css">
</head>
<body>
<div>
<img src ="imagenes/descarga.jpg">
</div>
</body>
</html>

div {
background: rgb(206, 25, 25);
width: 800px;
}
img {
width: 400px;
height: auto;
margin: auto;
display: block;
border-radius: 20px;
box-shadow: 5px 5px 0px #ccc;
padding: 15px;
border: 1px solid #000;

<meta charset="imagenes-ADSI">
Sirve para identificar las características específicas de cada archivo: Por ejemplo si hay
nombres repetidos, se diferenciaran con este código.
<link rel="stylesheet" type="text/css" href="css/archibo.css">
sirve para enlazar el archivo css con el html.
<div>
Sirve para establecer cajas
<img src ="imagenes/descarga.jpg">
Sirve para llamar una imagen pre-seleccionada.
div {
background: rgb(206, 25, 25);
width: 800px;
}
En css se selecciona el “div” para que las configuraciones de esa casilla (caja) se elaboren
en el css
background: rgb(230, 18, 18);
Se utiliza para darle un color en la presentación del código en el navegador
width: 800px;
Se utiliza para determinar la longitud que se empleara al mostrar la pagina
height: auto;
margin: auto;
display: block;
Sirve para establecer el posicionamiento en el que se encuentra el dato seleccionado
border-radius: 20px;
box-shadow: 5px 5px 0px #ccc;
padding: 15px;
border: 1px solid #000;
Sirve para establecer un borde y sus determinadas características
border-radius: 1cm;
Sirve para redondear el borde del marco
box-shadow: 5px 5px 0px #ccc;
Sirve para establecerle una sombra a la caja
padding: 15px;
Sirve para establecer un espacio entre el marco y el dato
border: 10px solid #000;
Sirve para establecer el borde y un color para que sea visible

_________________________________________________________________________

<!doctype html>
<html lang="en">
<head>
<meta charset="imagenes-ADSI">
<title>Css con Listas</title>
<link rel="stylesheet" type="text/css" href="css/listaxx.css">
</head>
<body>
<ul class="menu">
<li> <a href = "#" > Inicio </a></li>
<li> <a href = "#" > contactos</a></li>
<li> <a href = "#" > productos</a></li>
</ul>
</body>
</html>

.menu {
width: 50%;
background: #ccc;
list-style: none;
margin: 10;
padding: 10;
}
.menu li {
display: inline-block;
}
.menu li a {
padding: 20px 20px;
display: inline-block;
color:#fff;
}
.menu li a:hover {
background: red;
color: yellow;}
Estas líneas de código sirven para plantear la estructura de un menú
<ul>
Sirve para crear listas desordenadas
<li>
Sirve para crear los ítems de la lista
.menu {
width: 50%;
background: #ccc;
list-style: none;
margin: 10;
padding: 10;
}
Estas líneas código son lo básico para la creación del menú
.menu li {
display: inline-block;
}
Esta sección sirve para que el menú aparezca de manera horizontal
.menu li a {
padding: 20px 20px;
display: inline-block;
color:#fff;
}
Sirve para poner nuevas características al menú en la parte de las letras tales como el color
y el espacio entre las letras del borde, como también de ellas mismas
.menu li a:hover {
background: red;
color: yellow;}
Sirve para que en el momento de llevar al cursor por encima de los elementos de la lista,
esta cambie su presentación de manera momentánea

_________________________________________________________________________

<!doctype html>
<html lang="en">
<head>
<meta charset="Crear tablas-ADSI">
<title>Css con xxxxxx</title>
<link rel="stylesheet" type="text/css" href="css/xxx.css">
</head>
<body>
<table>
<tr>
<td>opcion 1</td>
<td>opcion 2</td>
<td>opcion 3</td>
<td>opcion 4</td>
</tr>
<tr>
<td>opcion 1</td>
<td>opcion 2</td>
<td>opcion 3</td>
<td>opcion 4</td>
</tr>
<tr>
<td>opcion 1</td>
<td>opcion 2</td>
<td>opcion 3</td>
<td>opcion 4</td>
</tr>
</table>
</body>
</html>

<tr>
Sirve para definir cada fila de una tabla
<td>
Sirve para definir cada columna de una tabla
table {
border: 2px solid #000;
border-collapse: collapse;
width: 500px
}
table td {
border: 2px solid #000;
padding: 20px;
}
table tr:hover {
background: #ccc;
}
table td:hover {
background: red;
color: #fff;
}
Estas líneas de código sirven para plantear las tablas y sus características
table {
border: 2px solid #000;
border-collapse: collapse;
width: 500px
}
Sirve para poner características a una tabla, en este caso se le cuadra un tamaño y un borde
a las casillas de la tabla
table td {
border: 2px solid #000;
padding: 20px;
}
Sirve para poner un borde a cada elemento de la tabla y su debido espacio entre ellos
table tr:hover {
background: #ccc;
}
Sirve para que en el momento en el que se pase el cursor por una sección de la fila, esta
misma adquiera un color distinto al de las demás
table td:hover {
background: red;
color: #fff;
}
Sirve para que en el momento en el que se seleccione una casilla especifica de la columna
es se ilumine de un color resaltante y el color de las letras cambien también, en este caso la
casilla se iluminara de color rojo y las letras serán de color blanco.

También podría gustarte