vimos en la primera clase que podemos fechar los lenguajes Css sin rodeos en el head de la página html. Lo hacemos, utilizando la inscripción style, de esta forma:
<style>
etiqueta {regla_css;}
</style>
también es opcional adjudicar un modo bruscamente en la inscripción que queremos editar:
<p style=”font-weight:bold; Color:red;”>este tomo está en negrita y es de color rojo.</p>
esta no es la apariencia mas indicada de dedicar los procedimientos pues siempre es mas cabal apartar al máximo la parte visual del contenido, aportando viejo benevolencia y escalabilidad al giro. Por ejemplo, en un futuro quizá se desee modificarse la estampa de la página si tener que meterse a transmitir el html. Esto será mucho mas sencillo si tenemos separados los garbos del html.
para ello, editaremos los portes en un patente externo al diploma html y lo llamaremos utilizando la etiqueta link ubicada asimismo en el head del antecedente html.
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
en el ejemplo que os incluyo al final de este artículo os encontraréis que en la documentación css hay cuatro ficheros .css. En el html solamente hacemos llamada a uno de ellos (style.css) que contiene estas tres lineas:
@import url(body.css);
@import url(estructura.css);
@import url(menu_principal.css);
¿que estamos haciendo aquí?. Estamos importando menstruaciones desde las capas de estilo body, realización, menu_principal y footer. Es un modo de demostrar como formular de una forma lógica los modos de las distintas partes que pueden conformar un salvoconducto html. En el prototipo que estamos utilzando tal vez no tenga mucho sentido debido a su confianza, luego cuando nos encontramos con datos mas engorrosos puede salir enormemente útil elegir los gustos de las distintas partes del pagaré en sus equivalentes puñales de estilo.
en el ejemplo, hemos exprimido estructura.css para constreñir las menstruaciones de gusto de charpa del registro. En ella hemos delimitado la ocupación de las distintas laminillas del diploma (header, líneas, footer …). Las menstruaciones de estilo para el menú principal las hemos aclarado en menu_principal.css.
prestad cautela al potencial del Css para pertrechar de “dinamismo” a los ingredientes. En el menú hemos eliminado los submenus y hemos realizado que aparezcan cuando hacemos un hover sobre el aspecto creador. Echadle un ojo a menu_principal.css.
el ejemplo de arquetas Css
en estructura.css es adonde hacemos aprovechamiento del prototipo de ataudes (box model) de Css.
Ésta es una característica vital del lenguaje Css, dado que condiciona el croquis o layout de todas las páginas web.
el arquetipo de valijas es el talante de Css que hace que todos los principios de las páginas se representen por medio de cajitas rectangulares.
cada ocasión que se inserta una formalidad Html, se crea una comunicación valija rectangular que encierra los aforos de ese elemento. Las pajareras no muestran ningún color de fondo tampoco ningún borde por defecto. Esto son haciendas que podrán ser transformadas por Css.
las partes que componen cada bujeta y su orden de visualización desde el punto de vista del sucesor son las siguientes:
- contenido (content): se negociación del contenido Html del dato (las hablas de un acápite, una película, el manual de una relación de utensilios, etc.)
- relleno (padding): éter libre opcional actual entre el contenido y el borde.
- borde (border): línea que encierra absolutamente el contenido y su relleno.
- imagen de pie (background image): estampa que se sala por atrás del contenido y el globo de relleno.
- color de fondo (background color): color que se banderilla por a espaldas del contenido y el clima de relleno.
- margen (margin): marcha opcional actual entre la cajita y el sobrante de pajareras adyacentes.
el padding y el margin son transparentes, por lo que en el lugar ocupado por el algodón se notificación el color o escena de fondo (si están limitados) y en el intervalo ocupado por el reborde se notificación el color o película de fondo de su tipo artífice (si están definidos). Si ningún integrante artista tiene definido un color o película de pie, se demostración el color o estampa de alma de la propia página (si están definidos).
si una timbal define tanto un color como una estampa de quid, la película tiene más antelación y es la que se visualiza. No obstante, si la figura de fondo no cubre absolutamente la atabal del punto o si la escena tiene listas transparentes, incluso se visualiza el color de fondo.
echadle un examen al estante Boxmodel.html que os incluyo en el himeneo con los estantes de prototipo al final del artículo.
posicionamiento
los navegadores crean y posicionan de suerte automática todas las cajas que forman cada página Html. No obstante, Css permite al diseñador corregir la plaza en la que se local cada caja.
utilizando las fincas que proporciona Css para irritar la postura de las arcas es factible efectuar géneros bastante renovadores y esquematizar vías de páginas que de otra guisa no serían posibles.
el estándar de Css define cinco estereotipos desiguales para posicionar una caja:
- posicionamiento frecuente o estático: posicionamiento por defecto.
- posicionamiento relativo: Posiciona una arqueta según el posicionamiento general y posteriormente desplazarla respecto de su situación original.
- posicionamiento absoluto: la plaza de una bolsa se establece de manera absoluta respecto de su punto cajón y el excedente de pájaros de la página ignoran la información ubicación del elemento.
- posicionamiento fijo: variante del posicionamiento absoluto que convierte una canariera en un pájaro inamovible, de manera que su plaza en la visera siempre es la misma autónomamente del sobrante de integrantes e autónomamente de si el agraciado sube o baja la página en la abertura del navegador.
- posicionamiento flotante: desplaza las cajas hacia la costada o hacia la derecha de la línea en la que se encuentran. La ranura deja de entrar al riesgo común de la página, lo que significa que el excedente de ataúdes ocupan el punto dejado por la atabal flotante. Desarrollaremos este tipo de posicionamiento en el subsiguiente grado por ser de los mas usados a la hora de maquetar una página html.
el posicionamiento de una bolsa se establece a través de la finca position:
| propiedad | position |
|---|---|
| valores | static | relative | absolute | fixed | inherit |
| se aplica a | todos los elementos |
| valor inicial | static |
| descripción | selecciona el posicionamiento con el que se mostrará el elemento |
0 comentarios:
Publicar un comentario