TALLER 2
Selector: El selector es el elemento HTML que vamos a
seleccionar del documento para aplicarle un estilo concreto. Por ejemplo, el
elemento p. Realmente, esto es mucho más complejo, pero ya dedicaremos una
serie de capítulos exclusivamente a este tema.
El selector de ID permite seleccionar un elemento de la
página a través del valor de su atributo id. Este tipo de selectores sólo
seleccionan un elemento de la página porque el valor del atributo id no se
puede repetir en dos elementos diferentes de una misma página.
La sintaxis de los selectores de ID es muy parecida a la de
los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#)
en vez del punto (.) como prefijo del nombre de la regla CSS.
CSS permite la combinación de uno o más tipos de
selectores para restringir el alcance de las reglas CSS. El anterior selector hace referencia al enlace con un
atributo id igual a inicio que se encuentra dentro de un elemento de tipo
<li> con un atributo class igual a destacado, que forma parte de una
lista <ul> con un atributo id igual a menuPrincipal.
- ¿Que es CSS?
CSS es el acrónicmo de
CascadingStyle Sheets (es decir, hojas de estilo en cascada).
CSS es un lenguaje de estilo que
define la presentación de los documentos HTML. Por ejemplo, CSS abarca
cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura,
imágenes de fondo, posicionamiento avanzado y muchos otros temas. ¡Espera unos
segundos y ya verás!
Es posible usar HTML, o incluso
abusar del mismo, para añadir formato a los sitios web. Sin embargo, CSS ofrece
más opciones y es más preciso y sofisticado. CSS está soportado por todos los
navegadores hoy día.
- ¿Para qué sirve CSS?
- ¿Cómo se incrusta el CSS en un tag html, en el header de un html y desde un archivo externo?
- Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
Ejemplo:
2.En este caso, todos los estilos
CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante
la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo
simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS
que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como
necesite.
Si se quieren incluir los estilos
del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes
pasos:
1) Se crea un archivo de texto y
se le añade solamente el siguiente contenido:
p { color: black; font-family:
Verdana; }
2) Se guarda el archivo de texto
con el nombre estilos.css Se debe poner especial atención a que el archivo
tenga extensión .css y no .txt
3) En la página HTML se enlaza el
archivo CSS externo mediante la etiqueta <link>:
3.El último método para incluir
estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene
los mismos problemas que la utilización de las etiquetas <font>.
Ejemplo:
- ¿Cuál es la estructura de un estilo CSS? Explica a traves de un ejemplo donde describas todos los elementos que utilices
Propiedad: La propiedad es una de las diferentes
características que brinda el lenguaje CSS e iremos aprendiendo.
Valor: Cada propiedad CSS tiene una serie de valores
concretos, con los que tendrá uno u otro comportamiento.
- ¿Consulta y describe los diferentes electores que se utilizan para aplicar un estilo CSS?
-Selector universal
Se utiliza para seleccionar todos los elementos de la
página.
El selector universal se indica mediante un asterisco (*). A
pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un
mismo estilo se pueda aplicar a todos los elementos de una página.
No obstante, sí que se suele combinar con otros selectores y
además, forma parte de algunos hacks muy utilizados, como se verá más adelante.
-Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta
HTML coincide con el valor del selector.
-Selector descendente
Selecciona los elementos que se encuentran dentro de otros
elementos. Un elemento es descendiente de otro cuando se encuentra entre las
etiquetas de apertura y de cierre del otro elemento.
-Selectores de ID
En ocasiones, es necesario aplicar estilos CSS a un único
elemento de la página. Aunque puede utilizarse un selector de clase para
aplicar estilos a un único elemento, existe otro selector más eficiente en este
caso.
-Combinación de selectores básicos
- ¿Cuales son las propiedades mas empleadas en CSS y como deben ser utilizadas?
Font-family:
Define la familia tipográfica. Es conveniente poner
una lista de dos o tres tipografías separadas por coma, porque si el usuario no
tiene instalada la tipografía que nosostros elegimos, el navegador opta por
mostrar la siguiente que debería ser una similar, si tampoco la tiene
instalada, mostrará la tipografía por defecto.
Tenemos 3 opciones para definir la elección de la
familia tipográfica:1) usar una de las fuentes más comunes (web safe fonts)
que muy probablemente tenga instalada el usuario (Arial, Verdana, Trebuchet,
Georgia, san serif, Times), 2) subir nuestra propia fuente con una propiedad
nueva que se llama @font-face, o 3) usar una fuente de Google
Font, que en este momento es lo más recomendable. El sitio es: http://www.google.com/fonts/.
Font-size:
Define el tamaño de la fuente y el valor se puede
escribir en pixels o en ems. En este momento se
recomienda usar ems. Los dos son valores relativos, el pixel es un valor
relativo a la resolución de la pantalla, pero el em es relativo al tamaño de la
fuente definida por el usuario. Si el usuario no cambió la configuración, el
valor por defecto de los textos en todos los navegadores es de 16px.
Entonces 1em = 16px.
Color:
Define el color de la tipografía. Los colores se
pueden escribir de 3 formas distinas: con sistema hexadecimal, por
ejemplo: #FF0000 (es rojo). Con los nombres de los colores
(más limitado) por ejemplo: black, red, green. O usando RGB, esta
paleta permite agregar el canal alfa para hacer transparencias.
Width:
Define el ancho de un elemento, el
valor se puede escribir en pixels, ems o porcentaje.
Max-width o
min-width:
Definen el ancho máximo o mínimo de un
elemento. Muy importante en sitios adaptables
Height:
Define el alto de un elemento, el
valor se puede escribir en pixels, ems o porcentaje.
Max-height o
min-height:
Definen el alto máximo o mínimo de un
elemento. Muy importante en sitios adaptables
Padding:
Es la distancia desde el borde de un elemento hasta
su contenido.
Margin:
Es la distancia entre un elemento y otro (desde el
borde de un elemento hacia afuera)
Border:
Define el borde de un elemento, su color, su estilo
y grosor.
Background:
Define los fondos de un
objeto. El fondo puede ser una imagen o un color.
El color puede ser pleno o degradado. La imagen se puede repetir formando una
trama (es lo que ocurre por defecto) o se puede especificar que no repita y que
se coloque en determinada posición.
- Consulta como hacer una pagina HTML tipo responsive usando estilos CSS
1.Planificar. Antes de nada debemos pensar bien en las
proporciones de la pantalla. No es lo mismo un ordenador que una tableta o un
teléfono. Hay que pensar en la verticalidad y horizontalidad. Como siempre
recomiendo, coger papel y lápiz y empezar a dibujar las ideas es el método más
fácil (y barato) para plasmar lo que tenemos en mente.
2.Usar una herramienta de prototipado. Esta clase de
programas nos pueden ser muy útiles para ver de manera clara los tamaños de los
objetos que queremos mostrar. A nivel personal recomiendo Pencil, una
herramienta sencilla e intuitiva que cumple con su cometido, no sólo para web,
también para todo tipo de actividades relacionadas con poner sobre la mesa las
ideas conceptuales que tengamos.
3.Controlar los tamaños de imagen, una vez tengamos un buen
diseño conceptual. Para ello se recomienda usar algún programa de diseño de
imagen, como GIMP, un programa gratuito muy útil y completo. Como hemos
mencionado anteriormente, es importante que planteéis (y dibujéis) el diseño
tanto para pantallas de escritorio como móviles. Esto se consigue haciendo las
imágenes para ambas plataformas.
4.Hacer distintas imágenes para cada plataforma. Una vez
tengamos las imágenes pensadas y con sus distintos tamaños, hay que
optimizarlas para las distintas distribuciones a las que queremos apuntar.
5.La plataforma móvil como primer objetivo. Normalmente
cuando se quiere hacer una actualización del diseño a responsive, ya contamos
con una base, y nos interesa este cambio por las tabletas y los smartphones,
por lo que usaremos estas plataformas como objetivos iniciales.
PRESENTADO POR:
Nuri Michelle Narvaez Jung
Christian Ospina Castaño
Laura Parra Jaramillo
11-02
