#Modelo de caja CSS | Explore Tumblr posts and blogs

msrlunatj · 6 months ago

Text

Introducción a CSS: Estilizando la Web

Introducción

CSS (Cascading Style Sheets) es el lenguaje que se utiliza para describir la presentación de un documento escrito en HTML o XML. Mientras que HTML estructura el contenido de la web, CSS se encarga de darle estilo, desde la disposición de los elementos hasta los colores y las fuentes. Si estás empezando en el mundo del desarrollo web, aprender CSS es esencial para crear sitios atractivos y funcionales. En este blog, te proporcionaré una introducción a CSS, cubriendo sus conceptos básicos y algunas prácticas recomendadas para que puedas comenzar a diseñar páginas web impresionantes.

1. ¿Qué es CSS?

CSS es un lenguaje de hojas de estilo que permite definir cómo se muestran los elementos de un documento HTML en la pantalla, en papel o en otros medios. Gracias a CSS, puedes separar la estructura de un sitio web de su presentación, lo que facilita el mantenimiento y la escalabilidad del diseño.

a) Características Principales de CSS:

Selección de Elementos: CSS te permite seleccionar y aplicar estilos a elementos HTML específicos o a grupos de elementos.

Diseño Responsivo: CSS facilita la creación de diseños que se adaptan a diferentes tamaños de pantalla, desde dispositivos móviles hasta monitores de escritorio.

Control de Estilos Visuales: Con CSS, puedes controlar el color, el tamaño, la fuente, el espacio entre elementos, y mucho más.

2. Cómo Empezar con CSS

Para comenzar a usar CSS, puedes incluir las reglas de estilo directamente en un archivo HTML o en un archivo CSS separado. A continuación te muestro cómo hacerlo:

a) CSS en Línea:

Puedes aplicar estilos directamente en los elementos HTML utilizando el atributo style.

b) CSS Interno:

Puedes definir un bloque de CSS dentro de la etiqueta <style> en el <head> de tu documento HTML.

c) CSS Externo:

La mejor práctica es usar un archivo CSS separado para mantener el estilo y el contenido por separado.

Contenido de styles.css:

3. Conceptos Básicos de CSS

CSS se basa en reglas que constan de selectores y declaraciones. A continuación te explico los conceptos más importantes:

a) Selectores:

Los selectores indican qué elementos HTML deben ser estilizados.

Selector de Elemento:

Selector de Clase:

Selector de ID:

b) Propiedades y Valores:

Las propiedades son aspectos específicos del estilo que se aplican a los elementos, como color, fuente, y margen.

Propiedad color: Cambia el color del texto.

Propiedad font-size: Cambia el tamaño de la fuente.

Propiedad margin: Define el espacio exterior alrededor de un elemento.

c) Especificidad y Herencia:

La especificidad determina qué reglas CSS se aplican cuando hay conflictos, y la herencia permite que ciertos estilos se transmitan a los elementos hijos.

Especificidad:

Herencia:

4. Diseño de Páginas Web con CSS

CSS permite controlar el diseño y la disposición de los elementos en una página web, facilitando la creación de sitios visualmente atractivos y organizados.

a) Modelos de Caja (Box Model):

Cada elemento en CSS se representa como una caja que comprende márgenes, bordes, rellenos y el contenido.

b) Layouts (Diseños):

CSS proporciona varias técnicas para organizar elementos en una página, incluyendo Flexbox y Grid.

Flexbox:

Grid Layout:

c) Media Queries y Diseño Responsivo:

Las media queries permiten que los diseños se adapten a diferentes tamaños de pantalla, lo que es fundamental para crear sitios web responsivos.

5. Recursos para Aprender Más CSS

Documentación Oficial:

MDN Web Docs: Una guía completa que cubre todo lo que necesitas saber sobre CSS.

Tutoriales en Línea:

CSS-Tricks: Un sitio repleto de tutoriales, ejemplos y trucos para mejorar tu uso de CSS.

W3Schools: Un recurso fácil de seguir para aprender los fundamentos de CSS con ejemplos prácticos.

Libros Recomendados:

“CSS: The Definitive Guide” de Eric A. Meyer: Un recurso profundo para desarrolladores que quieren dominar CSS.

“CSS Secrets” de Lea Verou: Este libro revela técnicas avanzadas para crear efectos y diseños sorprendentes con CSS.

Conclusión

CSS es una herramienta poderosa para cualquier desarrollador web. Desde controlar la apariencia básica de los elementos hasta diseñar sitios complejos y responsivos, el dominio de CSS te permitirá crear experiencias web atractivas y profesionales. Comienza practicando con los conceptos básicos, y poco a poco, profundiza en las técnicas más avanzadas para llevar tus diseños al siguiente nivel.

0 notes

diariojuanpablovargas · 3 years ago

Text

Html, Css, Javascript

Estos son los 3 lenguajes que estan en el centro de la creacion de aplicaciones web, existen variados tipos de lenguajes para diferentes cosas. Javascript es el programa que funciona en los navegadores para poder crear sitios web interactivos, ademas de que sirve para programar realmente cualquier cosa, en el caso de los navegadores hay que tener en cuenta tambien a los otros dos lenguajes, esos son Css y Html, los cuales no son de programacion.

HTML es un lenguaje de marcado que describe cómo debe mostrarse el contenido en la web asignando etiquetas al contenido. Tambien es el archivo en el cual vamos a trabajar, a traves de el podemos crear otros lenguajes, ahi es donde entran el CSS y el Javascript. Primero definimos la informacion en html, todo lo que tiene que ver respecto al contenido dentro del sitio debe ser puesto aqui. El diseño del documento viene de la mano de CSS, si los colores, los encabezados, las imagenes y los medios interactivos son puestos aqui, y al fnal, quien hace que todo funcione, ese es Javascript. Esa es la parte de programacion, todo lo que tenga que ver con interactividad es detallado y porgramado aqui.

Todo lo que pasa en el ordenador, las secciones que se abren cuando pulsas un boton o un enlace. El funcionamiento de todos los elementos puestos en los anteriores lenguajes debe funcionar bajo javascript.

La estructura

HTML nos provee etiquetas para describir los diferentes tipos de contenidos (elementos) de nuestra web. Gracias a ello, el navegador podrá comprender el contenido enviado por el servidor y representarlo en pantalla. Dentro de estos elementos contamos se encuentran. los párrafos de texto <p>, los textos jerárquicos de apartados <h1> <h2>, las imágenes <img>, enlaces a recursos u otros apartados de la web <a>,formularios <form> con cajas de texto, desplegables, opciones, botones de envío…

Juntos con estos elementos, tendremos también la opción de añadir etiquetas semánticas que indican qué es el contenido que contienen, en lugar de cómo se debe formatear. Algunas de ellas son <header>, <section>, <nav> o <footer>.

Apariencia y estilo

Con CSS asignamos fuentes y color a textos o cajas, modificamos tamaños, añadimos imágenes de fondo, definimos márgenes o incluso podemos cambiar completamente la apariencia de un elemento HTML como una lista para convertirla en una barra o menú de navegación.

Para lograr el diseño se dispone de varias propiedades, como el font-family para la familia tipografica, font-size para el tamaño de la fuente y el color con Color. Para el tamaño de los elementos estan width, height, padding, max-height, min-height, margin, broder y para los fondos de los objetos esta el background.

Funcionalidad y dinamismo

Hasta aqui todo como ya lo hemos dicho es contenido estatico, para que el sitio empiece a andar pues podemos hacer algunas cosas como mostrar actualizaciones de contenido, vincular eventos dinámicos a elementos HTML, almacenar datos en variables, usar funciones complementarias como gráficos o mapas mediante APIS de terceros o acceder a conjuntos de datos públicos o privados.

Pero todavia existen muchas mas librerias que podrian permitir ver la informacion en modelos 3D o añadir cuadros con graficos dinamicos, las posibilidades solo crecen.

Claramente estos son las posibilidades basicas que permiten una personalizacion estandar, pero claramente existen muchas mas posibilidades que se van desarrollando con el tiempo, las experiencias digitales estan a la vuelta de la esquina, los necesitamos mas que nunca.

#css #javascript #htmlcoding #web

0 notes

free-udemy-coupons-daily · 3 years ago

Text

[COUPON] Aprende CSS Completo 2021

#freecourses #udemycoupons #freeudemycourses #machinelearning #offers #ethicalhacking Description Curso de CSS completo en el que veremos muchos temas: Enlazar archivos, clases,selectores,modelo de caja,bordes,fuentes, unidades de medida,colores ,fondos,degradados,pseudoclases,pseudoelementos,menus…

View On WordPress

0 notes

freeudemycourses · 3 years ago

Text

Aprende CSS Completo 2021

Curso de CSS completo en el que veremos muchos temas: Enlazar archivos, clases,selectores,modelo de caja,bordes,fuentes, unidades de medida,colores ,fondos,degradados,pseudoclases,pseudoelementos,menus desplegables,imagenes,posicionamiento,responsive,flotados,flexbox,grid,variables,importaciones,filtros,BEM,clippath, transiciones y animaciones. ¿Que es CSS?: CSS (siglas en inglés de Cascading…

View On WordPress

0 notes

mibloginformatica2019 · 6 years ago

Text

25/02/2019-clase 4-Posicionamiento y visualización

Cuando los navegadores descargan el contenido HTML y CSS de las páginas web, aplican un procesamiento muy complejo antes de mostrar las páginas en la pantalla del usuario.

Para cumplir con el modelo de cajas presentado en el capítulo anterior, los navegadores crean una caja para representar a cada elemento de la página HTML. Los factores que se tienen en cuenta para generar cada caja son:

Las propiedades width y height de la caja (si están establecidas).

El tipo de cada elemento HTML (elemento de bloque o elemento en línea).

Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante).

Las relaciones entre elementos (dónde se encuentra cada elemento, elementos descendientes, etc.)

Otro tipo de información, como por ejemplo el tamaño de las imágenes y el tamaño de la ventana del navegador.

En este capítulo se muestran los cinco tipos de posicionamientos definidos para las cajas y se presentan otras propiedades que afectan a la forma en la que se visualizan las cajas.

0 notes

nikkiflorezz-blog · 6 years ago

Text

FEBRERO 25 DEL 2019

TEMA: posicionamiento y visualización

Posicionamiento

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja.

Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles.

El estándar de CSS define cinco modelos diferentes para posicionar una caja:

Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario.

Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original.

Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.

Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.

El significado de cada uno de los posibles valores de la propiedad position es el siguiente: static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación. relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left. absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor. fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla. La propiedad position no permite controlar el posicionamiento flotante, que se establece con otra propiedad llamada float y que se explica más adelante. Además, la propiedad position sólo indica cómo se posiciona una caja, pero no la desplaza.Normalmente, cuando se posiciona una caja también es necesario desplazarla respecto de su posición original o respecto de otro origen de coordenadas. CSS define cuatro propiedades llamadas top, right, bottom y left para controlar el desplazamiento de las cajas posicionadas:

Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.

El posicionamiento de una caja se establece mediante la propiedad position

En el caso del posicionamiento relativo, cada una de estas propiedades indica el desplazamiento del elemento desde la posición original de su borde superior/derecho/inferior/izquierdo. Si el posicionamiento es absoluto, las propiedades indican el desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su primer elemento padre posicionado.

En cualquiera de los dos casos, si el desplazamiento se indica en forma de porcentaje, se refiere al porcentaje sobre la anchura (propiedades right y left) o altura (propiedades top y bottom) del elemento.

Posicionamiento normal

El posicionamiento normal o estático es el modelo que utilizan por defecto los navegadores para mostrar los elementos de las páginas. En este modelo, ninguna caja se desplaza respecto de su posición original, por lo que sólo se tiene en cuenta si el elemento es de bloque o en línea.

Los elementos de bloque forman lo que CSS denomina "contextos de formato de bloque". En este tipo de contextos, las cajas se muestran una debajo de otra comenzando desde el principio del elemento contenedor. La distancia entre las cajas se controla mediante los márgenes verticales.

Si un elemento no se encuentra dentro de un elemento contenedor, entonces su elemento contenedor es el elemento <body> de la página. Normalmente, la anchura de los elementos de bloque está limitada a la anchura de su elemento contenedor, aunque en algunos casos sus contenidos pueden desbordar el espacio disponible.

Los elementos en línea forman los "contextos de formato en línea". En este tipo de contextos, las cajas se muestran una detrás de otra de forma horizontal comenzando desde la posición más a la izquierda de su elemento contenedor. La distancia entre las cajas se controla mediante los márgenes laterales.

Figura 5.3. Posicionamiento normal de los elementos en línea

Si las cajas en línea ocupan más espacio del disponible en su propia línea, el resto de cajas se muestran en las líneas inferiores. Si las cajas en línea ocupan un espacio menor que su propia línea, se puede controlar la distribución de las cajas mediante la propiedad text-align para centrarlas, alinearlas a la derecha o justificarlas.

Visualización

Además de las propiedades que controlan el posicionamiento de los elementos, CSS define otras cuatro propiedades para controlar su visualización: display, visibility, overflow y z-index.

Utilizando algunas de estas propiedades es posible ocultar y/o hacer invisibles las cajas de los elementos, por lo que son imprescindibles para realizar efectos avanzados y animaciones.

5.8.1. Propiedades display y visibility

Las propiedades display y visibility controlan la visualización de los elementos. Las dos propiedades permiten ocultar cualquier elemento de la página. Habitualmente se utilizan junto con JavaScript para crear efectos dinámicos como mostrar y ocultar determinados textos o imágenes cuando el usuario pincha sobre ellos.

La propiedad display permite ocultar completamente un elemento haciendo que desaparezca de la página. Como el elemento oculto no se muestra, el resto de elementos de la página se mueven para ocupar su lugar.

Por otra parte, la propiedad visibility permite hacer invisible un elemento, lo que significa que el navegador crea la caja del elemento pero no la muestra. En este caso, el resto de elementos de la página no modifican su posición, ya que aunque la caja no se ve, sigue ocupando sitio.

EJEMPLO:

El siguiente ejemplo muestra el uso de la propiedad display para mostrar un elemento de bloque como si fuera un elemento en línea y para mostrar un elemento en línea como si fuera un elemento de bloque:

0 notes

donispot · 5 years ago

Video

youtube

Curso de CSS para principiantes desde cero 2020 - #22 Modelo de caja (Bo...

#css #boxmodel #donispot #modelocajacss

0 notes

josegremarquez · 6 months ago

Text

El Modelo de Caja en CSS: La Base de Todos los Elementos Web

¿Qué es el modelo de caja? Imagina cada elemento de tu página web como una caja. Esta caja tiene un contenido (el texto o imagen), un borde, un relleno y un margen. El modelo de caja es la forma en que CSS describe y posiciona estas cajas en la página. Comprender este concepto es fundamental para crear diseños web precisos y personalizados. Como ya hemos visto, el modelo de caja es la…

0 notes

tqvcancun · 5 years ago

Text

Algunos frameworks CSS más que puedes usar en tus sitios web

En nuestro artículo anterior habíamos comenzado una lista de frameworks útiles a la hora de definir el aspecto de un sitio web utilizando hojas de estilo. Las hojas de estilo nos permiten controlar aspectos como los diferentes elementos de un sitio web se tienen que representar en diferentes dispositivos.

Térmínos a tener en cuenta

Flexbox: Es un modelo de caja flexible. unidimensional de diseño y un método para ayudar a distribuir el espacio entre los ítems de una interfaz mejorando las capacidades de alineación.

(adsbygoogle = window.adsbygoogle || []).push({});

La palabra unidimensional se usa para destacar el hecho de que flexbox maneja el diseño en una sola dimensión a la vez — ya sea como fila o como columna.

CSS Grid Layout (CGL): Es un sistema de diseño bidimensional basado en una cuadrícula desarrollado para crear mejores interfaces de usuarios.

(adsbygoogle = window.adsbygoogle || []).push({});

CGL permite dividir una página en áreas o regiones principales, y facilita definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

De la misma forma que con las tablas (el método utilizado en los primeros tiempos del diseño web) el grid layout permite a alinear elementos en columnas y filas. Pero, a diferencia de lo que sucede con las tablas, con CSS grid son posibles muchos más diseños y de forma más sencilla.

(adsbygoogle = window.adsbygoogle || []).push({});

Algunos frameworks CSS más

Pure CSS

Pure CSS es un framework CSS ligero y responsivo creado por Yahoo en 2014. Está construido usando Normalize.css y es útiil para la creación de diseños responsivos usando grillas y menús. Pure es responsivo por defecto, y a diferencia de Bootstrap, no permite crear diseños fijos.

UI Kit

Se propone como un framework ligero y modular para crear interfaces web rápidas y potentes. A pesar de su tamaño reducido se las arregla para ofrecer casi todas las características de otros frameworks.

Puede crear interfaces web sencillas, limpias y modulares con su conjunto de iconos SVG, muchos componentes, capacidad de responsivos, estilos unificados y opciones de personalización. Además, también puede diseñar diseños complejos basados en flexbox con el kit de interfaz de usuario usando HTML simple.

Mustard UI

Es ideal para principiantes. Sus componentes están divididos en módulos; cuadrículas base de Flexbox, botones, tablas, formularios y tarjetas.

Materialize CSS

En este caso se trata de un framework para crear interfaces Material Design desarrollado por Google

Es la alternativa adecuada para cualquiera que quiera diseñar sitios web o aplicaciones web para Android porque viene con clases y componentes listos para usar. Puedes empezar rápidamente a utilizar sus plantillas de inicio.

Materialize CSS utiliza el formato de cuadrícula de 12 columnas de Bootstrap para que puedas crear rápidamente diseños de páginas responsivas.

Tailwind CSS

Ahora hablamos de un framework CSS altamente personalizable. A diferencia de Bootstrap, que crea una interfaz de usuario de aspecto genérico, Tailwind permite a los desarrolladores personalizar los diseños y darles un aspecto único.

Milligram

En este caso también tenemos un framework minimalista.

Con solo 2kb (comprimido), Milligram se las arregla para proporcionar un completo conjunto de herramientas de desarrollo web. Los usuarios también pueden usar todas las características ofrecidas por la especificación CSS3.

Skeleton

Parece que los frameworks responsivos y minimalistas están de moda. Skeleton tiene solo 400 líneas de código.

De todas formas, se las arregla para ofrecernos muchas opciones de cuadrículas, tipografía, botones, formularios, listas, tablas y código que pueden utilizrse para la creación de sitios web complejos.

Spectre

Spectre es un framework que puede contribuir a la creación de sitios de forma más rápida y flexible con elementos elegantemente diseñados, hermosa tipografía, y componentes pre-construidos.

Picnic CSS

Esta biblioteca que también puede usarse online, no llega a los 10 kb estando comprimida. Proporciona al desarrollador componentes puros de CSS e interactivos, incluyendo cuadrículas, formularios, pestañas, consejos de herramientas y alertas. La biblioteca te ayuda a crear un sitio web receptivo y hermosas aplicaciones web.

Base

Framework desarrollado usando un código ligero y mínimo. A pesar de su diseño simple es muy potente. Los desarrolladores y diseñadores pueden utilizarlo crear sitios web y aplicaciones web que respondan a los estándares web y las exigencias de los buscadores.

Fuente: Linux Adictos https://www.linuxadictos.com/algunos-frameworks-css-mas-que-puedes-usar-en-tus-sitios-web.html

#IFTTT #Linux Adictos

0 notes