Need help? Chat now!

Hostwinds Blog

Resultados de búsqueda para:


Chat CSS de Hostwinds Foto principal

Chat CSS de Hostwinds

por: Hostwinds Team  /  diciembre 27, 2018


¿Has oído hablar de todos los Hostwinds HTML Hyphe?¿Que es eso?Es evidente con ganas de que me haya pedido a propósito esa pregunta a Segway en un enchufe desvergonzado para la serie de blogs de hostwinds llamada "Hostwinds HTML Hyphe?"¡UPS!Aquí hay un enlace a la parte 1 y 2 de esa serie de blogs solo para usted:

Hostwinds HTML Hype

Hostwinds HTML Hype Parte 2: Charla sobre etiquetas

Mantengamos la conversación conversación al discutir varios componentes de HTML Complementary Computer Language, CSS.

Hablando de html y más tapones sinvergüenzas, Hostwinds también debutó recientemente nuestra serie de blogs para hacer un sitio web de blogs. Esto es aplicable en términos de HTML Hype porque usamos HTML para comenzar a construir nuestro sitio web. Aquí hay un enlace a las partes 1 y 2 de esa serie de blogs:

Tutoriales de Hostwinds: Cómo crear un sitio web básico de blogs sin una aplicación de creación de sitios Pt.1

Tutoriales de Hostwinds: Cómo construir un sitio web básico de blogs sin una aplicación de creación de sitios Pt. 2

Esta publicación de blog está dedicada a aprender las cosas CSS para continuar construyendo nuestro sitio web de blogs con CSS en la Parte 3 de esa serie de blogs.Antes de agregar nuestro CSS, asegurémonos de que entendamos muchas sintaxis / términos CSS.Usaremos esto como una hoja de trucos cuando agregamos CSS a nuestro sitio web de blogs.

CSS genial

CSS significa Hoja de estilo en cascada porque es el código que estiliza o diseña el sitio web de uno.Puede cambiar el tamaño, la alineación, el color, etc., de diferentes cosas que tiene en su sitio web utilizando CSS.

Aquí es cómo estableceremos el documento CSS que hacemos para nuestro sitio web de blogs:

cuerpo {} nav {} h4 {} h3 {} img {} p {} botón {} botón: hover {} footer {} div {} .ReadNext {} #thankyou {}

Selectores

Permítanme elaborar un poco.Los artículos en este documento, como el "H3", el "Cuerpo", se llama "P", etc. selectores.Los selectores ".ReadNext" y "#thankyou" se refieren a la clase "ReadNext" y la identificación de "Gracias", creamos en la Parte 2 de nuestra serie de blogs de construcción de sitios web.El período delante de "ReadNext" le dice al navegador que este selector es una clase.El hashtag (#) frente al selector "Gracias" le dice al navegador que este selector es una identificación.Entre los soportes rizados, va las instrucciones que explican cómo le gustaría modificar cada selector.Seguiremos adelante y llenaremos todos estos y lo haré, le explicaré lo que significan:

cuerpo {fondo - imagen: URL ('../ images / your_background_image.jpg'); Tamaño de fondo: cubierta;} NAV {FONT: 22PX 'CINZEL', Serif; Transformación de texto: mayúscula;} h4 {font: 33px 'cinz', serif; Transformación de texto: mayúscula; Text-alinec: Centro; Color: # 5A7E9E;} H3 {font: 27px 'cinz', serif; Transformación de texto: mayúscula; Text-alinec: Centro; Color: # 0B053F;} img {margen-izquierda: Auto; Margen-derecha: Auto; Ancho: 50; bloqueo de pantalla; Frontera: 3px negro sólido; Radio de borde: 25px;} p {font: 22px 'cinzel', serif; Text-alinec: Centro; Color: # 074b82;} Botón {font: 27px 'cinzel', serif; Transformación de texto: mayúscula; Text-alinec: Centro; Margen-Izquierda: Auto; Margen-derecha: Auto; bloqueo de pantalla; Color de fondo: # bee5eb; relleno: 20px 30px; Frontera: 3px negro sólido; Border-Radius: 25px;} Botón: Hover {Fondo-color: # 00A1F5; Opacidad: .5;} Footer {font: 27px 'cinzel', serif; Texto-alineado: izquierda; Color: # 074B82; Color de fondo: # bee5eb; margen-top: 10px;} DIV {FONDO-Imagen: degradado lineal (a la derecha, # 2e6bd4, # bee5eb, # 2e6bd4);} .ReadNext {Transformación de texto: mayúscula; Espacio de letras: 3px; flotador: izquierda;} #thankyou {Transformación de texto: mayúscula; Color: # 0B053F;}

Está bien, aquí va!Bueno, en primer lugar, es esencial tener en cuenta que los elementos de este documento, como "Imagen de fondo", "Fuente", "Transformada de texto", etc., se conocen como propiedades. ¡Bien, AHORA aquí va!

Propiedades

Background-image: ** Esta es la propiedad que usted escribiría dentro de los soportes Squiggly de su selector si desea que el fondo de su elemento sea una imagen.

Nota al margen:

El formato correcto mediante el cual le indica al navegador que tome una imagen es el siguiente (consulte la parte de la Parte 1 de esta serie de blogs para obtener más información sobre las rutas de archivo):

URL (./ foldername / filename.png)

En este ejemplo, "filename.png" es el nombre del archivo real.El "./foldername/" que precede al nombre del archivo le dice al navegador que ingrese a la misma carpeta en la que se encuentra nuestro índice.html. Luego, vaya a otra carpeta titulada "FOLDERNAME" para encontrar el archivo cuando esté allí.Esto se llama una ruta de archivo relativa.

Color de fondo: Esta es la propiedad que usted escribiría dentro de los soportes SCIGGLY de su selector si desea que el fondo de su elemento sea un color.Observe que en lugar de ver un nombre de color para el valor de esta propiedad, consulta una serie de números y letras siguiendo un hashtag.Puede fácilmente en Google la multitud de códigos que representan diferentes colores.

Observe la siguiente línea de código entre los soportes Squiggly de "DIV" Selector:

1 imagen de fondo: degradado lineal (a la derecha, # 2e6bd4, # bee5eb, # 2e6bd4);

Esto no se refiere a una imagen.Así es como le dices al navegador que le gustaría que el fondo fuera un gradiente de color de izquierda a derecha.Los colores que le gustaría usar para su gradiente vaya en orden dentro de los paréntesis.Puedes usar tantos colores como quieras dentro de tu gradiente de color.

Tamaño de fondo: Esta es la propiedad que usaría para denotar cómo desea que aparezca el fondo de su selector en la pantalla.Por ejemplo, si desea que la imagen cubra toda el área, use el valor de la propiedad "Cubierta".Además, si desea que se muestre toda la imagen dentro de la región, use el valor de la propiedad "contener".

Color: Esto denota el color de la fuente.Nuevamente, observe que en lugar de ver un nombre de color para el valor de esta propiedad, consulta una serie de números y letras siguiendo un hashtag.

Transformación de texto: Utilice esta propiedad si desea que todo el texto dentro de las etiquetas de apertura y cierre esté en mayúsculas, minúsculas, etc.

Fuente: La propiedad de fuente se maneja mucho.Por ejemplo, entre los soportes Squiggly de nuestros selector de H4, la propiedad de fuente tiene un valor de:

33px 'cinzel', serif;

La primera parte denota el tamaño del texto.La parte 'Cinzel' denota el nombre de Font-Family.La parte "Serif" indica la familia genérica de la que la familia Fontana es miembro de.

Texto alineado: Esto le dice al navegador si desea que el texto se alinee hacia la izquierda, la derecha o el centro. En nuestro caso, queremos que nuestro texto esté justo en el centro de las páginas web.

Margen-Izquierda: Esta propiedad le dice al navegador qué tan lejos del lado izquierdo de la página web o el elemento al selector lo dejó para querer que dicho selector resida.

Margen-derecha: Esta propiedad le dice al navegador qué tan lejos del lado derecho de la página web o del elemento a la derecha del selector desea que resida dicho selector.

Margin-Top: Esta propiedad le dice al navegador qué tan lejos está lejos de la parte superior de la página web o del elemento en la parte superior del selector que desea que dicho selector resida.

Margen-Fondo: esta propiedad le dice al navegador qué tan lejos de la parte inferior de la página web o el elemento debajo del selector desea que el selector resida.

Si desea que el selector esté centrado justo en el medio de la página, use las siguientes propiedades y valores de propiedad:

123 margen derecho: automático; margen izquierdo: automático; pantalla: bloque;

Ancho: Esta propiedad es bastante sencilla. Denota el ancho que desea que tenga su elemento.

Monitora: Este es un poco más complejo, pero esencialmente denota cómo se muestra su elemento en la página.En nuestro ejemplo, tenemos:

bloqueo de pantalla;

Esto significa que queremos que el elemento ocupe todo el ancho del área.

Frontera: Esta propiedad le dice al navegador que queremos un borde alrededor del elemento, si queremos que sea sólido, punteado, doble, etc., el tamaño del borde y el color del borde, respectivamente.

Radio de la frontera: Esta propiedad denota la ronda que queremos que las esquinas de la frontera estén.

Opacidad: Esta propiedad le dice al navegador si queremos que el elemento sea opaco, transparente o en algún lugar intermedio. Uno significa completamente opaco, y 0 significa completamente transparente.

Relleno: Esto denota la cantidad de espacio que desea entre su elemento y el área a su alrededor.Por ejemplo, en los botones que creamos en nuestra página de inicio, queremos un poco de espacio entre las palabras "Leer la publicación del blog" y la frontera de los botones.Por lo tanto, dimos los botones 20px de acolchado en la parte superior e inferior de las palabras y el relleno de 30px a la derecha e izquierda.

Espaciado de letras: Esto le dice al navegador cuánto espaciado le gustaría entre cada letra de las palabras que muestra en su sitio web.

Flotadora: Esta propiedad le dice al navegador que desea que su elemento vaya junto a otro elemento en lugar de por debajo de ella de forma predeterminada.

Comentar en CSS

Así es como agregamos comentarios a su código CSS:

La sintaxis para los comentarios de CSS es escribir los comentarios entre / * y * /.

Por ejemplo, en nuestro documento CSS, podría comentar lo siguiente para organizar mi código:

/ * Cuerpo de la página web * / Cuerpo {Background-image: URL ('../ images / your_background_image.jpg'); Tamaño de fondo: cubierta;} / * Barras de navegación para todas las páginas web, excepto la página de inicio y el blog Post 1 página web * / nav {font: 22px 'cinz', serif; Transformación de texto: mayúscula;} / * Blog Nombre en el encabezado * / H4 {font: 33px 'cinz', serif; Transformación de texto: mayúscula; Text-alinec: Centro; Color: # 5A7E9E;} / * Blog Post encabezados * / H3 {FONT: 27PX 'CINZEL', Serif; Transformación de texto: mayúscula; Text-alinec: Centro; Color: # 0B053F;} / * Imágenes * / img {margen-izquierda: Auto; Margen-derecha: Auto; Ancho: 50; bloqueo de pantalla; Frontera: 3px negro sólido; Radio de borde: 25px;} / * párrafos * / p {font: 22px 'cinz', serif; Text-alinec: Centro; Color: # 074b82;} / * Botones * / Botón {font: 27px 'cinzel', serif; Transformación de texto: mayúscula; Text-alinec: Centro; Margen-Izquierda: Auto; Margen-derecha: Auto; bloqueo de pantalla; Color de fondo: # bee5eb; relleno: 20px 30px; Frontera: 3px negro sólido; Frontera-radio: 25px;} / * Botones en Hover * / Botón: Hover {Fondo-Color: # 00A1F5; Opacidad: .5;} / * footer * / footer {font: 27px 'cinz', serif; Texto-alineado: izquierda; Color: # 074B82; Color de fondo: # bee5eb; Margin-Top: 10px;} / *

Etiqueta para todo el blog Post 1 Sección en index.html Página * / DIV {Background-image: Degradado lineal (a la derecha, # 2E6BD4, # Bee5eb, # 2e6bd4);} / * "listoSiguiente" Clase para el blog Post 2 & 3 Páginas web * /. ReadNext {Text-Transform: Mayorcase; Espacio de letras: 3px; Flotación: izquierda;} / * "gracias" Identificación de gracias párrafo en pie de página de la página de inicio solo * / # gracias {Transformación de texto: mayúsculas; Color: # 0B053F;}

Hay mucho más de dónde provienen esas propiedades CSS.Sin embargo, por ahora, ¡ya pasaremos a más codificación!Soy.Entonces.Emocionado.

CSS final

Sé que acabo de mencionar esto, pero eso es verdaderamente solo la punta del iceberg en cuanto a la CSS.Recomiendo encarecidamente el registro de ciertos sitios web rápidamente "Google-capaces" que contienen todos los componentes y piezas de CSS (y HTML, para el caso).El equipo de Hostwinds está encantado de comenzar a agregar una belleza personalizada a nuestro sitio web de blogs, y esperamos hablar con usted cuando debutamos la Parte 3 de los "Tutoriales de Hostwinds: Cómo construir un sitio web de blogs sin una aplicación de blog de la aplicación de construcción"..(Broma de papá para enviarnos fuera :) "C ... Ss" ¡Entonces !!!

Escrito por Hostwinds Team  /  diciembre 27, 2018