CSS

Mucha gente usa CSS para ajustar el texto, cambiando la fuente, el color, el tamaño y más. Pero una cosa que mucha gente olvida a menudo es que también se puede usar CSS con imágenes.

Cambiar la imagen por sí misma

CSS le permite ajustar la forma en que la imagen se muestra en la página. Esto puede ser muy útil para mantener la coherencia de sus páginas. Al establecer estilos en todas las imágenes, usted crea un aspecto estándar para sus imágenes. Algunas de las cosas que puedes hacer:

• Agregar un borde o contorno alrededor de las imágenes
• Eliminar el borde coloreado alrededor de las imágenes vinculadas
• Ajuste de la anchura y/o altura de las imágenes
• Agregar una sombra
• Girar la imagen
• Cambiar los estilos cuando se pasa el ratón por encima de la imagen

Darle un borde a tu imagen es un buen punto de partida. Pero debe tener en cuenta algo más que el borde: piense en todo el borde de la imagen y ajuste también los márgenes y el relleno. Una imagen con un borde negro delgado se ve bien, pero si se agrega un poco de relleno entre el borde y la imagen, se puede ver aún mejor.

img {
de la frontera: 1px negro sólido;
acolchado: 5px;

Es una buena idea vincular siempre las imágenes no decorativas, cuando sea posible. Pero cuando lo haga, recuerde que la mayoría de los navegadores agregan un borde de color alrededor de la imagen. Incluso si utiliza el código anterior para cambiar el borde, el enlace lo anulará a menos que elimine o cambie el borde en el enlace también. Para ello, debe utilizar una regla hija CSS para eliminar o cambiar el borde alrededor de las imágenes enlazadas:

img> a {
frontera: ninguna;

También puede utilizar CSS para cambiar o establecer la altura y el ancho de sus imágenes. Aunque no es una buena idea usar el navegador para ajustar el tamaño de las imágenes debido a la velocidad de descarga, están mejorando mucho el tamaño de las imágenes para que se vean bien. Y con CSS puede configurar sus imágenes para que sean de un ancho o alto estándar o incluso establecer las dimensiones para que sean relativas al contenedor.

Recuerde, cuando cambie el tamaño de las imágenes, para obtener mejores resultados, sólo debe cambiar el tamaño de una dimensión: la altura o el ancho. Esto hará que la imagen mantenga su relación de aspecto, por lo que no parece extraña. Configure el otro valor en automático o déjelo fuera para indicar al navegador que mantenga la relación de aspecto constante.

img {
ancho: 50%;
Altura: auto;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>)

CSS3 ofrece una solución a este problema con las nuevas propiedades object-fit y object-position. Con estas propiedades podrá definir la altura y el ancho exactos de la imagen y cómo debe manejarse la relación de aspecto. Esto puede crear efectos de buzón alrededor de las imágenes o recortar para que la imagen se ajuste al tamaño requerido.

Aunque las propiedades de ajuste de objeto y posición de objeto de CSS3 aún no son ampliamente soportadas, hay otras propiedades de CSS3 que son bien soportadas en la mayoría de los navegadores modernos que puede usar para modificar sus imágenes. Cosas como sombras, esquinas redondeadas y transformaciones para rotar, inclinar o mover las imágenes, todo funciona ahora mismo en la mayoría de los navegadores modernos. A continuación, puede utilizar transiciones CSS para hacer que las imágenes cambien al pasar el puntero del ratón sobre ellas, al hacer clic sobre ellas o justo después de un período de tiempo.

Uso de imágenes como fondos

CSS facilita la creación de fondos elegantes con sus imágenes. Puede añadir fondos a toda la página o sólo a un elemento específico. Es fácil crear una imagen de fondo en la página con la propiedad background-image:

cuerpo {
> imagen de fondo: url(background.jpg);

Cambie el selector de cuerpo a un elemento específico en la página para poner el fondo en un solo elemento.

Otra cosa divertida que puedes hacer con las imágenes es crear una imagen de fondo que no se desplace con el resto de la página, como una marca de agua. Sólo tienes que usar el estilo de archivo adjunto de fondo: fijo, junto con tu imagen de fondo. Otras opciones para sus fondos incluyen hacerlos azulejar sólo horizontal o verticalmente usando la propiedad background-repeat. Write background-repeat: repeat-x; to tile the image horizontally and background-repeat: repeat-y; to tile verticaltically. Y puede posicionar su imagen de fondo con la propiedad background-position.

Y CSS3 añade más estilos para sus fondos también. Puede estirar las imágenes para que se ajusten a cualquier tamaño de fondo o establecer la imagen de fondo a escala con el tamaño de la ventana. Puede cambiar la posición y luego recortar la imagen de fondo. Pero una de las mejores cosas de CSS3 es que ahora se pueden crear múltiples capas de imágenes de fondo para crear efectos aún más intrincados.

HTML5 Ayuda a Estilizar Imágenes

El elemento FIGURA en HTML5 debe colocarse alrededor de cualquier imagen que pueda estar sola dentro del documento. Una forma de pensar es si la imagen podría aparecer en un apéndice, entonces debería estar dentro del elemento FIGURA. A continuación, puede utilizar ese elemento y el elemento FIGCAPTION para añadir estilos a sus imágenes.

La propiedad CSS es una propiedad muy importante para el diseño. Le permite posicionar los diseños de su página web exactamente como usted desea que se muestren – pero para poder usarla, usted tiene que entender cómo funciona.

En una hoja de estilo, la propiedad float de CSS tiene el siguiente aspecto:

.right { float: right; } 

>

Esto le indica al navegador que todo lo que tenga la clase «right» debe flotar a la derecha.

La asignarías así:

 /> 

¿Qué puede flotar con la propiedad CSS Float?

No se puede flotar cada elemento en una página web. Sólo se pueden flotar elementos de nivel de bloque. Estos son los elementos que ocupan un bloque de espacio en la página, como imágenes, párrafos, divisiones y listas.

Otros elementos que afectan al texto, pero que no crean un cuadro en la página se denominan elementos en línea y no pueden flotar. Estos son elementos como el span, los saltos de línea, el énfasis fuerte o las cursivas.

¿Dónde flotan?

Puede hacer flotar elementos a la derecha o a la izquierda. Cualquier elemento que siga al elemento flotado fluirá alrededor del elemento flotado en el otro lado.

Por ejemplo, si hace flotar una imagen a la izquierda, cualquier texto u otros elementos que la sigan fluirán alrededor de ella hacia la derecha. Y si haces flotar una imagen a la derecha, cualquier texto u otros elementos que la sigan fluirán alrededor de ella hacia la izquierda. Una imagen que se coloca en un bloque de texto sin ningún estilo de flotación aplicado a ella se mostrará, sin embargo, el navegador está configurado para mostrar imágenes. Esto es usualmente con la primera línea del texto siguiente que se muestra en la parte inferior de la imagen.

¿Hasta dónde flotarán?

Un elemento que se ha flotado se moverá tan a la izquierda o a la derecha del elemento de contenedor como pueda. Esto resulta en varias situaciones diferentes dependiendo de cómo se escriba su código. Para estos ejemplos, usted estará flotando un pequeño

DIV elemento a la izquierda:

• Si el elemento flotado no tiene un ancho predefinido, ocupará tanto espacio horizontal como sea necesario y disponible, independientemente de la holgura.

Nota

Algunos navegadores intentan colocar elementos junto a elementos flotantes cuando el ancho no está definido – normalmente dando al elemento no flotante sólo una pequeña cantidad de espacio. Así que debería definir siempre un ancho en elementos flotantes.

• Si el elemento contenedor es el elemento HTML, el

  DIV

  flotará en el margen izquierdo de la página.

• Si el propio elemento del contenedor está contenido por otra cosa, el

  DIV

  flotará en el margen izquierdo del contenedor.

• Puede anidar elementos flotantes, y eso puede dar lugar a que el flotador acabe en un lugar sorprendente. Por ejemplo, este flotador es un flotador izquierdo flotado

  DIV

  dentro de un flotador derecho

  DIV

  .

• Los elementos flotantes se sentarán uno al lado del otro si hay espacio en el contenedor. Por ejemplo, este contenedor tiene tres elementos de 100px de ancho

  DIV

  flotados en un contenedor de 400px de ancho.

Incluso puede utilizar flotadores para crear un diseño de galería de fotos. Usted pone cada miniatura (funciona mejor cuando todas son del mismo tamaño) en un

DIV con el título y el flotador, los elementos

DIV

en el contenedor. No importa cuán amplia sea la ventana del navegador, las miniaturas se alinearán uniformemente.

Desactivar el flotador

Una vez que se sabe cómo conseguir que un elemento flote, es importante saber cómo desactivar el flotador. Desactivar el flotador con la propiedad CSS clear. Puede despejar flotadores izquierdos, flotadores derechos o ambos:

clear: left;
claro: derecha;
claro: ambos;

Cualquier elemento para el que establezca la propiedad clear aparecerá debajo de un elemento que esté flotando en esa dirección.

Juegue con el valor claro de los diferentes elementos de sus documentos para obtener diferentes efectos de diseño. Uno de los diseños flotantes más interesantes es una serie de imágenes en la columna derecha o izquierda junto a los párrafos del texto. Incluso si el texto no es lo suficientemente largo como para desplazarse más allá de la imagen, puede utilizar el clear en todas las imágenes para asegurarse de que aparecen en la columna en lugar de al lado de la imagen anterior.

El HTML (repita este párrafo):

Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.

El CSS (para hacer flotar las imágenes a la izquierda):

img.float { float:left;
claro:izquierda;
margen:5px;
} > } } } } } } } } } } } } }

Y a la derecha:

img.float { float:right;
clear:derecha;
margen:5px;
} > } } } } } } } } } } } } }

Uso de flotadores para el diseño

Una vez que entienda cómo

float funciona, puede empezar a utilizarla para diseñar sus páginas web. Estos son los pasos que doy para crear una página web flotante:

• Diseñar el diseño (en papel o en una herramienta gráfica o en mi cabeza).
• Determine dónde van a estar las divisiones de página.
• Determine los anchos de los distintos contenedores y los elementos que los componen.
• Flotar todo. Incluso el elemento más exterior del contenedor flota a la izquierda, de modo que sé dónde estará en relación con la ventana de visualización del navegador.

Siempre que conozca los anchos (los porcentajes son correctos) de sus secciones de maquetación, puede utilizar el comando

float para ponerlos en el lugar que les corresponde en la página. Y lo bueno es que no tienes que preocuparte tanto de que el modelo de la caja sea diferente para Internet Explorer o Firefox.

Cuando incrusta un elemento en su HTML, tiene dos oportunidades para agregarle estilos CSS:

• Puede cambiar el estilo del

  IFRAME

  mismo.

• Puede cambiar el estilo de la página dentro de

  IFRAME

  (bajo ciertas condiciones).

Uso de CSS para modelar el elemento IFRAME

Lo primero que debe considerar al diseñar sus iframes es el

IFRAME
en sí mismo. Aunque la mayoría de los navegadores incluyen iframes sin muchos estilos adicionales, sigue siendo una buena idea añadir algunos estilos para mantenerlos consistentes. Algunos estilos de CSS que siempre incluyo en mis iframes:
margin: 0;


border: none;

anchura: valor;

altura: valor;

Con el
ancho

y
 altura
ajustado al tamaño que cabe en mi documento. Aquí hay ejemplos de un marco sin estilos y uno con el estilo básico. Como puede ver, estos estilos en su mayoría sólo eliminan el borde alrededor del iframe, pero también aseguran que todos los navegadores muestren ese iframe con los mismos márgenes, relleno y dimensiones.HTML5 recomienda que utilice el comando
desbordamiento

para quitar las barras de desplazamiento, pero eso no es fiable. Por lo tanto, si desea eliminar o cambiar las barras de desplazamiento, debe utilizar el comando
desplazamiento

en su iframe también. Para usar el
desplazamiento

añádalo como cualquier otro atributo y luego elija uno de los tres valores:
 sí No
o
 automático
.
 sí
le dice al navegador que siempre incluya barras de desplazamiento aunque no sean necesarias.
 No
dice que se quiten todas las barras de desplazamiento tanto si es necesario como si no.
 automático
es el valor predeterminado e incluye las barras de desplazamiento cuando son necesarias y las elimina cuando no lo son. 
scrolling
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>iattribute:scrolling="no"br/>This is an iframe.

Para desactivar el scrolling en HTML5 se debe utilizar el comando
desbordamiento

de la propiedad. Pero como puede ver en estos ejemplos, aún no funciona de forma fiable en todos los navegadores. Así es como activarías el desplazamiento todo el tiempo con el botón
desbordamiento
Esto es un iframe;

No hay manera de desactivar completamente el desplazamiento con la tecla
desbordamiento

de la propiedad. Muchos diseñadores quieren que sus iframes se mezclen con el fondo de la página en la que se encuentran para que los lectores no sepan que los iframes están ahí. Pero también puede añadir estilos para que destaquen. Es fácil ajustar los bordes para que el iframe aparezca más fácilmente. Sólo tienes que usar el
 Frontera
style (o está relacionado
 border-top 
borde-derecha Frontera izquierda

y
border-bottom
) para modelar los bordes: iframe {
>.en la cima de la frontera: #c00 1px punteado;
de la frontera derecha: #c00 2px punteado;
frontera izquierda: #c00 2px punteado;
en el fondo de la frontera: #c00 4px punteado;
}

Pero no debería detenerse con el desplazamiento y los bordes para sus estilos. Puede aplicar muchos otros estilos de CSS a su iframe. Este ejemplo utiliza estilos CSS3 para dar al iframe una sombra, esquinas redondeadas y giradas 20 grados.
iframe {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>imargen-tapón: 20px;
margen-inferior: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
radio de la frontera: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
sombra de la caja: 4px 4px 4px 14px #000;
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-otransform:rotate(20deg);
-ms-transform:rotate(20deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
}

  Cómo cambiar el estilo del contenido del marco
Estilizar el contenido de un iframe es como estilizar cualquier otra página web. Pero, usted debe tener acceso para editar la página . Si no puede editar la página (por ejemplo, está en otro sitio).
Si puede editar la página, entonces puede agregar una hoja de estilo externa o estilos directamente en el documento, tal como lo haría con cualquier otra página web de su sitio.
			

¿Qué son los selectores CSS? El CSS se basa en reglas de concordancia de patrones para determinar qué estilo se aplica a cada elemento del documento. Estos patrones se denominan selectores y van desde nombres de etiquetas (por ejemplo,

<b.highlight

coincidiría con cualquier etiqueta

b

con una clase de etiqueta

highlight

que sea hija del párrafo con el id

highlight=">código">myid">/p

Un selector CSS es la parte de una llamada de estilo CSS que identifica qué parte de la página web debe ser estilizada. El selector contiene una o más propiedades que definen el estilo del HTML seleccionado.

Los selectores CSS

Existen varios tipos diferentes de selectores:

• selectores de tipo – que coinciden con un elemento específico
• selectores de clase – haciendo coincidir elementos con una clase específica
• Selectores de ID – haciendo coincidir el elemento con un ID específico
• selectores de descendientes – elementos coincidentes que son descendientes de un elemento específico
• selectores de hijos – elementos coincidentes que son hijos del elemento específico
• selectores universales – a juego con cualquier elemento
• selectores de hermanos adyacentes – elementos coincidentes inmediatamente precedidos por un elemento específico
• selectores de atributos – elementos que coinciden con un atributo específico o valor de atributo
• selectores de pseudo-clase – que emparejan elementos con una pseudo-clase específica
• selectores de pseudoelementos – elementos de correspondencia con propiedades pseudo-elementales específicas

Formatear estilos CSS y selectores CSS

El formato de un estilo CSS se ve así:

Pre data-type=»code»>selector {propiedad style

selector { style : style ; }

>

Separe los selectores múltiples que tienen el mismo estilo con comas. Esto se denomina agrupación de selectores. Por ejemplo:

selector1 , selector2 { style property : style ; }

>

Los selectores de agrupación son un mecanismo abreviado para mantener sus estilos CSS compactos. La agrupación anterior tendría el mismo efecto que:

selector1 { propiedad style : style ; }
selector2 {propiedad de estilo : estilo ; } } } } } } } } } } } } })))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))amiento con la tabla tabla tabla en relación con la tabla en relación con el programa en relación con la tabla

>

Pruebe siempre sus selectores CSS

No todos los navegadores soportan todos los selectores CSS. Así que asegúrese de probar sus selectores en tantos navegadores en tantos sistemas operativos como pueda. Pero si está usando selectores CSS1 o CSS2 debería estar bien.

Si ha echado un vistazo a la Web y ha visto el código de varias páginas web, una cosa que puede haber notado es que diferentes sitios incluyen sus archivos CSS externos de diferentes maneras – ya sea usando el enfoque @import o enlazando a ese archivo CSS. ¿Cuál es la diferencia entre @import y link para CSS y cómo decidir cuál es el mejor para ti? Echemos un vistazo!

La diferencia entre @import y

Antes de decidir qué método utilizar para incluir sus hojas de estilo, debe entender para qué se utilizarán los dos métodos.

– Vincular es el primer método para incluir una hoja de estilo externa en sus páginas Web. Tiene la intención de enlazar su página Web con su hoja de estilo. Se agrega a la de su documento HTML de esta manera:

 @import - Importar le permite importar una hoja de estilo a otra. Esto es ligeramente diferente al escenario de enlace porque puede importar hojas de estilo dentro de una hoja de estilo enlazada. Si incluye un @import en la cabecera de su documento HTML, está escrito de la siguiente manera:
  
@import url("styles.css");
>.
Desde el punto de vista de los estándares, no hay diferencia entre enlazar con una hoja de estilo externa o importarla. Cualquiera de las dos formas es correcta y funcionará igual de bien (en la mayoría de los casos). Sin embargo, hay algunas razones por las que usted podría querer usar una sobre la otra.
  ¿Por qué usar @import?  
Hace muchos años, la razón más común que se dio para usar @import en su lugar (o junto con)  es porque los navegadores antiguos no reconocían @import, por lo que se podían ocultar los estilos de ellos. Al importar sus hojas de estilo, usted las pondría a disposición de los navegadores más modernos y compatibles con los estándares, mientras que las "ocultaba" de las versiones más antiguas de los navegadores.
Otro uso para el método @import es utilizar múltiples hojas de estilo en una página, mientras que sólo se incluye un único enlace en la página de su documento. Por ejemplo, una corporación puede tener una hoja de estilo global para cada página del sitio, con subsecciones con estilos adicionales que sólo se aplican a esa subsección. Al enlazar a la hoja de estilo de la subsección e importar los estilos globales en la parte superior de esa hoja de estilo, no tiene que mantener una hoja de estilo gigantesca con todos los estilos para el sitio y cada subsección. El único requisito es que cualquier regla @import debe estar antes que el resto de sus reglas de estilo. Además, asegúrese de recordar que la herencia puede seguir siendo un problema.
  ¿Por qué usar ?  
La razón número uno para usar hojas de estilo enlazadas es proporcionar hojas de estilo alternativas para sus clientes. Los navegadores como Firefox, Safari y Opera soportan este atributo y, cuando hay uno disponible, permiten a los espectadores cambiar entre ellos. También puede utilizar un conmutador JavaScript para cambiar entre hojas de estilo en IE. Esto se utiliza más a menudo con Zoom Layouts con fines de accesibilidad.
Una de las desventajas de usar @import es que si tienes una muy simple  con sólo la regla @import en ella, tus páginas pueden mostrar un "flash de contenido sin estilo" (FOUC) mientras se están cargando. Esto puede ser irritante para sus espectadores. Una solución sencilla para esto es asegurarse de que tiene al menos un elemento adicional en su cabeza.
  ¿Qué pasa con el tipo de medio?  
Muchos escritores afirman que puede utilizar el tipo de medio para ocultar hojas de estilo de los navegadores más antiguos. A menudo, mencionan esto como una ventaja de usar @import o , pero la verdad es que puedes configurar el tipo de medio con cualquiera de los dos métodos, y los navegadores más antiguos que no soportan los tipos de medio no los verán en ninguno de los dos casos. 
  Entonces, ¿qué método debe utilizar?  
Preferimos usar  y luego importar hojas de estilo en hojas de estilo externas, como hacen la mayoría de los diseñadores web hoy en día. De esta manera, usted sólo tiene una o dos líneas de código para ajustar en sus documentos HTML. Pero la conclusión es que depende de ti. Si te sientes más cómodo con @import, ¡entonces hazlo! Ambos métodos son compatibles con los estándares y, a menos que esté pensando en admitir navegadores realmente antiguos, no hay una razón de peso para usar ninguno de los dos.
 Editado por Jeremy Girard el 2/7/17