[2017-19-04]
CLASE 11:
Evaluación teórica:
1. ¿Qué diferencia hay entre CSS y HTML?
HTML se utiliza para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado, le aporta diseño al contenido.
Tomado de: http://es.html.net/tutorials/css/lesson1.php
2. ¿Qué se necesita para hacer uso de las aplicaciones de Google Docs?(elemento principal).
Tener una cuenta de Gmail o en google.
Tomado de: https://tmduces.files.wordpress.com/2013/02/u4-manual-de-google-docs.pdf
3. Describa que hace esta regla de CSS:
h1{
color: #ff0000;
background-color: #00ff00;
}
Esta regla definida en CSS lo que realiza es que brinda color a letra y color de fondo al elemento de la página con la etiqueta html <h1>. Color de letra: Rojo y color de fondo: Verde.
4. Se realiza la siguiente regla:
body {
background-color: #ffff00;
}
Para dar color de Fondo a la página completa ( color: amarillo)
- Se realiza Meta Volante pero con un valor de puntos extras:
Se empieza con el tema de CSS (enlaces, uso de class y id):
Para colocar un comentario en html se coloca lo siguiente:
<!-- comentario.. -->
ENLACES:
la etiqueta <link> tiene el mismo uso que el <a> ya que se refieren a enlaces.
Es importante que cuando definamos el nombre de un class, este sea en minúsculas,sin tildes ni caracteres especiales como la ñ.
Se puede utilizar el class para distinguir los input, si el class se utiliza la regla de CSS quedaría:
input.nombredelclass {
background-color: #00f;
}
EJERCICIO DE CLASE:
Documento HTML:
Es importante que cuando definamos el nombre de un class, este sea en minúsculas,sin tildes ni caracteres especiales como la ñ.
Para tener el pseudo-clase: a:hover se necesita primero crear la regla de el enlace definiendo el elemento a.
IMPORTANTE:
Al momento de definir una regla en una hoja de estilo (CSS), se necesita especificar el tipo de input al que se le quiere atribuir las propiedades, sino todo el diseño lo captará todos los elementos input. (en general).
MODO DE USO DE LOS INPUT EN CSS:
Esta regla se utiliza para dar un estilo especifico a un determinado tipo de input:
input [type="password"] {
background-color: #00f;
}
Este color de fondo solo se dará a los tipos de input que sean de contraseña.
El input de clase:
MODO DE USO DE LOS INPUT EN CSS:
Esta regla se utiliza para dar un estilo especifico a un determinado tipo de input:
input [type="password"] {
background-color: #00f;
}
Este color de fondo solo se dará a los tipos de input que sean de contraseña.
El input de clase:
Se puede utilizar el class para distinguir los input, si el class se utiliza la regla de CSS quedaría:
input.nombredelclass {
background-color: #00f;
}
EJERCICIO DE CLASE:
Documento HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body bgcolor="#ff7f00" text="#d9d919">
<h1> hola esto es un texto</h1>
<h1 class="a"> hola 2 esto es un texto</h1>
<h1 ><p><span>hola 3 esto es un texto </p></h1>
<a href="http://google.com" class="amarillo" target="_blank"> Ir a la pagina de google </a>
<br>
<a href="http://google.com" class="azul" target="_blank"> Ir a la pagina de google </a>
<br>
<a href="http://google.com" class="rojo" target="_blank"> Ir a la pagina de google </a>
<br>
<h1>Bucaramanga</h1><span class="teclado"> Ciudad </span>
<span class="h1">Bonita</span>
<br>
<br>
<input type="text" id="a"><br>
<input type="text" id="b"><br>
<input type="text" id="c"><br>
<input type="text" id="d"><br>
<input type="checkbox" id="check_a"><br>
<input type="password" id="contra"><br>
</body>
</html>
Documento CSS:
body {
background-color:white;
}
h1{
color: #d9d9f3;
font-size: 20px;
text-transform: uppercase;
}
h1.a{
color: #db70db;
font-size: 20px;
text-transform: lowercase;
}
h1 p span{
color:#7fff00 ;
font-size: 30px;
text-transform: lowercase;
}
a{
color:blue;
text-decoration: none;
}
a.amarillo{
color:yellow;
}
a.azul{
color:blue;
}
a.rojo {
color:red;
}
a:hover {
color:green;
background-color: pink;
font-size: 12px;
font-style: italic;
}
a.rojo:hover {
color:grey;
background-color: purple;
}
.teclado{
color:#00ff00;
}
.h1{
color:#871f78;
}
input{
color:blue;
background-color: red;
font-size: 20px
}
input[type="password"]{
background-color: #7093db;
}
APUNTES
No hay comentarios:
Publicar un comentario