Inicio de sesión de cuenta de Adsense. ¿Qué es Google Adsense? Registrarse y crear una cuenta con Google AdSense

Hola, queridos lectores del blog. Hoy habrá otro artículo en la alcancía. Se hablará sobre diseño utilizando reglas de tabla. estilos en cascada. Aquí todo es muy sencillo, pero aún así decidí dedicar un post aparte a este tema.

Un poco antes ya logramos descubrir cómo, cómo y con qué se puede trabajar. Bueno, un poco antes analizamos en detalle todo tipo de cosas y sus varias combinaciones para indicar exactamente ese elemento código HTML, para lo cual deberás aplicar ciertas propiedades de peinado.

Estilo de lista: diseño de listas en código HTML

Entonces, en el lenguaje de marcado de estilo hay tres reglas separadas que comienzan con el estilo de lista, que sirven para personalizar la apariencia de las listas (numeradas o con viñetas) en el código de los documentos web. Además, existe una regla de estilo de lista CSS prefabricada, que le permite reducir ligeramente la cantidad de código. Pero primero lo primero.

Lo que consideraremos ahora se puede utilizar tanto para elementos Html LI como para elementos Ul y Ol (listas con viñetas y numeradas, respectivamente). ¿Cuál será la diferencia? aplicaciones estilo lista para estas etiquetas?

De hecho, puedes saber si una propiedad se hereda o no en el sitio web del validador (léelo en el enlace proporcionado) en la sección dedicada a la especificación de hojas de estilo en cascada. En la columna "Heredado", aparecerá "Sí" frente a las reglas heredadas:

Empecemos con tipo de estilo de lista, que le permite configurar el tipo de marcado para elementos individuales Lista HTML. Los siguientes valores son válidos para esta regla:

1. Ninguno: no se realizará ninguna marca (list-style-type:none; se aplica a este elemento y, por lo tanto, no tiene marcador)
2. El disco es un círculo relleno (list-style-type:disc; se usa para esta línea)
3. Círculo - círculo como marcador
4. Cuadrado: un cuadrado como marcador
5. Decimal: números arábigos (tipo de estilo de lista: decimal;)
6. alfa inferior— letras latinas minúscula
7. alfa superior: letras latinas mayúsculas
8. low-roman - números romanos en minúscula
9. Upper-roman: números romanos en mayúsculas.

¿Qué crees que se utilizó para crear la lista de arriba, Ul u Ol? Una pregunta rápida. Resulta que esto ya no es importante, aunque en este caso particular usé Ol, pero al cambiarlo a Ul, la apariencia seguirá siendo la misma, porque está configurada para cada elemento con su propio valor CSS reglas de tipo de estilo de lista.

De hecho, Ul y Ol difieren sólo en su comportamiento predeterminado (marcas Ul y números Ol). Pero si lo desea, puede convertir fácilmente un estilo de lista en otro usando el tipo de estilo de lista. La fuente utilizada para marcar números o letras es exactamente la misma que definió para el contenido de las etiquetas LI. Por ejemplo, al cambiar el color de fuente de la lista cambiaremos y color del marcador:

1. Cambió el color del texto (list-style-type:lower-roman;color:red) y cambió el color del marcador

Sigamos con la siguiente propiedad CSS: posición-estilo-lista. Utilizándolo, puede establecer la posición (ubicación) del área con el marcador. Sólo hay dos valores posibles para ello:

Aquellos. Básicamente, en list-style-position indicamos dónde se debe colocar el área con marcadores: fuera del elemento LI (afuera) o dentro (adentro). Por defecto, el área con el marcador está fuera de límites, es decir. se utiliza el valor exterior.

Veamos esto con un ejemplo. En el primer elemento de la lista, escribiré específicamente list-style-position:inside y veremos qué sucede:

1. Todo está por defecto aquí.
2. Así es como se verá colocar un área de marcador con el interior. Tenga en cuenta que la segunda línea de este elemento y el marcador están ubicados en el mismo nivel.
3. Todo está por defecto aquí.

Imagen de estilo de lista y regla CSS prefabricada

A continuación tenemos List-style-image: le permite especificar una imagen que se utilizará como marcador. Esta regla está configurada en Ninguno de forma predeterminada (es decir, no se utiliza ninguna imagen como marcador), pero puede escribir la funcionalidad Url() especificando la ruta a la imagen, que posteriormente actuará como marcador en esta lista:

Podría verse así:

Imagen-estilo-lista: url(https://site/images/list_star.png);

1. Todo está por defecto aquí.
2. Así es como se vería usar una imagen como marcador. Está claro que puedes elegir una imagen más adecuada para este propósito.
3. Por ejemplo, como aquí.

Como recordarás, en el artículo sobre dije que las imágenes se refieren a elementos en línea(En realidad, para el navegador es la misma letra, pero a veces muy grande).

Aquí la imagen ocupa el lugar del marcador (letras o números). En este caso, la altura de la línea con el elemento de la lista aumentará si lo inserta como marcador. panorama general(como sucedió en el segundo elemento del ejemplo anterior).

En la funcionalidad de imagen de estilo de lista, puede especificar ambas imágenes. Si la imagen no se carga, se utilizará el marcador o la numeración predeterminados, o lo que se especifica en el tipo de estilo de lista para este elemento de lista.

Para escribir las tres reglas CSS descritas anteriormente en una sola, puede usar el estilo Lista, que es prefabricado para diseñar listas. No importa el orden en que se especifican los valores. Aquellos valores que no especifiques en el estilo Lista, en explícitamente será interpretado por el navegador con valores predeterminados.

¿Dónde puedo ver los valores predeterminados? Sí, está todo ahí, en la especificación CSS del validador W3C en la columna "Valor inicial" frente a las propiedades que le interesan:

Valores para propiedades individuales en regla colectiva Los estilos de lista están separados por espacios. La ubicación, como ya hemos dicho, no es importante:

En la práctica podría verse así:

Estilo de lista: dentro de la URL superior romana (https://site/images/list_star.png);

Puede utilizar valores en cualquier orden y en cualquier número (empezando por uno). Por cierto, los menús se crean con mayor frecuencia en sitios web utilizando listas, y la propiedad Estilo de lista se utiliza para para eliminar marcadores de las listas de menú, que allí son completamente innecesarios:

Tipo de estilo de lista: ninguno;

Estilo de lista: ninguno;

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

Quizás te interese

Mostrar (bloque, ninguno, en línea) en CSS: establezca el tipo visualización HTML elementos en una pagina web Cómo configurar la rotación color de fondo filas de tablas, listas y otros elementos HTML en el sitio utilizando la pseudoclase nth-child
Flotar y borrar en CSS - herramientas diseño de bloque
¿Para qué sirve CSS y cómo conectar hojas de estilo en cascada? documento HTML y la sintaxis básica de este lenguaje.
Posicionamiento usando índice Z y regla CSS Cursor para cambiar el cursor del mouse.
Posición (absoluta, relativa y fija) - métodos posicionamiento HTML elementos en CSS (reglas izquierda, derecha, superior e inferior)
CSS propiedades de decoración de texto, alineación vertical, alineación de texto, sangría de texto para formatear texto en HTML

seguimos estudiando CSS propiedades varios elementos. Y en esta lección hablaremos del diseño de listas. Las listas se utilizan con bastante frecuencia en la práctica, por lo que es necesario recordar estas propiedades.

Tipo regular de marcador

Y, primero, configura la apariencia de los marcadores. Los marcadores de lista son diferentes. en lecciones sobre HTML Listas numeradas muestra cómo cambiar marcadores usando un atributo tipo . pero sabiendo CSS este atributo Ya no es necesario, ya que todo esto se hace mucho más cómodamente gracias a la hoja de estilo. CSS.

Para demostrarlo, creemos una lista usando CSS. Realmente no importa cuál lista numerada o lista sin numerar, desde que usa la propiedad tipo de estilo de lista Podemos agregar marcadores o quitarlos.

HTML

• lista desordenada
• lista desordenada
• lista desordenada
• lista desordenada

Entonces, lista regular creado y, de forma predeterminada, creó marcadores en forma de círculos rellenos. Y muy a menudo surge la pregunta, cómo eliminar marcadores de lista?

Elimina un marcador de una lista usando la propiedad tipo de estilo de lista y asignándole un valor ninguno . Esta es la opción más popular para eliminar marcadores de una lista. Y para la lista estableceremos la misma propiedad.

Ul(tipo-estilo-lista: ninguno;)

Ahora, si actualizas la página, verás que esta propiedad Se eliminaron marcadores de la lista.

• ninguno - Elimina marcadores de la lista.
• círculo - Marcador en forma de círculo.
• desct" - Rotulador en forma de círculo relleno. Valor predeterminado
• cuadrado - Marcador en forma de cuadrado.
• armenio - Numeración armenia
• decimal - Marcador en forma de número.
• cero decimal - Números con un "0" antes del principio (01, 02, 03, etc.)
• georgiano - Numeración georgiana
• alfa inferior - (a, b, c, d, e, etc.)
• griego inferior - (alfa, beta, gamma, etc.)
• latín bajo - (a, b, c, d, e, etc.)
• romance bajo - (i, ii, iii, iv, v, etc.)
• alfa superior - (A, B, C, D, E, etc.)
• latino superior - (A, B, C, D, E, etc.)
• romano superior - (I, II, III, IV, V, etc.)
• heredar - El valor debe ser heredado del elemento padre.

Todos estos son tipos de viñetas para listas. Los primeros cuatro tipos son los más comunes, los tipos restantes se utilizan con bastante poca frecuencia.

Bueno, como ejemplo, seleccionemos y establezcamos un marcador en forma de números romanos grandes. Esto se hace simplemente: en lugar del valor ninguno pon el nombre de nuestro marcador romano superior .

Ul (tipo de estilo de lista: romano superior;)

Si actualiza la página, las listas en forma de marcadores ahora tienen símbolos romanos. números grandes. Así es como puede cambiar la apariencia de los marcadores de lista especificando el tipo correcto a través de propiedad tipo de estilo de lista .

Marcador de imagen

Segundo, eso es suficiente. punto importante, y un marcador de uso frecuente es una imagen en forma de marcador. A menudo es necesario utilizar un marcador en forma. hermosa foto y las opciones de marcador habituales presentadas CSS no encaja. Para ello se utilizan imágenes. Y esto se hace usando una propiedad especial llamada imagen-estilo-lista . Esto le indicará al navegador que nuestro marcador será una imagen.

Tome cualquier fotografía en Internet en tamaño. (15px x 15px), que planea usar como marcador y colocarlo en la carpeta con imágenes creada previamente imágenes. Después de esto, la propiedad permanece imagen-estilo-lista especifique la ruta a la imagen y el navegador sustituirá la imagen en lugar del marcador.

EN CSS la ruta se especifica usando palabra clave URL() . Entre paréntesis indicamos la ruta a la imagen. ../images/Nombre de la imagen.jpg , relativo a la hoja de estilo.

Es decir, ¿qué significa respecto a la hoja de estilo? Nuestra hoja de estilo - archivo estilo.css , está en el catálogo CSS, y la foto está en el catálogo. imágenes. Esto significa que el navegador debe indicar que primero debe salir del directorio. CSS, esto se hace así: ../ y luego vaya al directorio con la imagen imágenes y solo entonces encuentre la imagen deseada.

Ul( lista-estilo-imagen: url(../images/Nombre de la imagen del marcador.jpg); )

Si especificaste la manera correcta a la imagen, entonces el navegador cargará su imagen en lugar de los marcadores habituales.

Al utilizar imágenes como marcador, necesitará conocer una propiedad más, que es responsable de la ubicación del marcador de imagen. Para ver cómo funciona esta propiedad hagamos un marco rojo para todos los elementos

Ejemplo:

• Cree en lo mejor, espera lo peor.
• La vida es una enfermedad con un desenlace fatal.
• Nunca digas nunca.

Resultado :

Adición al tema general.
Si por alguna razón necesita establecer la numeración de la lista de marcadores no desde cero, sino, digamos, desde 8, puede realizar este movimiento.

Ejemplo:

• Cree en lo mejor, espera lo peor. Punto 1.
• La vida es una enfermedad mortal. Punto 2.
• Nunca digas nunca. Punto 3
• Eso es todo lo que sabía. Punto 4

Resultado :

Este tema ha llegado a su fin.