CSS BASIC que cada usuario de WordPress necesita saber

Cualquiera que tenga un sitio de WordPress llegará, en un momento, en una situación en la que tenga que modificar parte del código. Esto no significa que espere ser un desarrollador web, escribiendo JavaScript y PHP como profesional. Lo más probable es que necesite mezclar con el HTML y CSS básico, los elementos fundamentales de cualquier página web, WordPress o no. Tenemos un excelente tutorial sobre los códigos HTML más comunes y amigables que necesitará. Eche un vistazo y lea sobre eso también. Esta vez, queremos presentarle algunas de las ideas más básicas de fragmentos y CSS que lo ayudarán a mejorar su sitio para mostrar y actuar exactamente como desee.
Suscríbase a nuestro canal de YouTube 1. Selectores, clases e IDS

En CSS, la base de todos es un selector. Es simplemente una abreviatura que indica que el código se dirige. Puede apuntar a todos los párrafos individuales en el sitio con una P {}. (Cualquier código que se aplique al selector se coloque entre aparatos ortopédicos). En muchos casos, estos elementos se alinearán con las etiquetas HTML con las que crea la página web (como la dirección p {}
o H2 {} y

). Después de eso, tienes clases. Estos son tipos específicos de selectores que usted (o tema / WP) define. Si desea apuntar solo títulos H1 para publicaciones, puede tener .post-Tits {}. El punto / punto observa un selector de clase CSS frente al selector mismo. Se utilizan para atacar elementos a nivel del sitio, pero no los elementos fundamentales, como un H1 simple. Tenga en cuenta que los selectores básicos no tienen un punto u otro indicador, lo que significa que son el HTML básico.
Los ID de CSS funcionan exactamente lo mismo que una clase. Excepto por dos diferencias menores. Estos están indicados por un # delante del selector y se dan el nombre de una sola instancia específica (o un número limitado de tribunales) de un elemento que requiere un estilo especializado. Tales como # # # correos electrónicos-subscribe-about-page {} o # # correos electrónicos-subscribe-after-pos {}. Estas ID indican que, en lugar de apuntar a un cierto tipo de elemento, seleccionan elementos individuales. P {color: rojo;
}
.clase {
Color blanco;
}
#identificación {
Color azul;
}
Otros selectores A medida que discutimos los elementos básicos de CSS, no nos sumergiremos en selectores más complejos, sino que existen. También puede apuntar a lo que se llama pseudo-clases a los que solo se puede aplicar cuando se coloca un enlace. O un selector de atributos que se dirigirá solo a elementos que han adjuntado un cierto parámetro. También puede permitir que CSS sea relativo a la posición de un elemento usando P :: After e img :: antes.
Pueden ser increíblemente avanzados y complejos para ser correctos, por lo que para aprender lo básico, no soy algo de lo que deba preocuparte. Sin embargo, quería saber que hay formas mucho más específicas en las que puede interactuar con el documento. 2. Puntos y comas mencionados anteriormente que todo el código CSS está entre los aparatos ortopédicos. Sin embargo, en esos soportes, cada línea de personalización debe terminar con un punto de coma (;). Esto indica al navegador que se completa un determinado estilo. El espacio no importa con CSS, excepto por la legibilidad, pero el punto y la coma en sí no es negociable.
Además, entre el estilo y el valor CSS reales, coloque un punto normal (:). De nuevo, el espacio aquí no importa en absoluto. Puede tener espacios en un lado, ambos o ninguno, y CSS continuará funcionando. Recuerde que, aunque puede dejar estos espacios, generalmente se acepta que no debería hacerlo. Sin embargo, con la mayoría de los sitios y temas que proporcionan miniificación CSS, todos los espacios son eliminados, indiferentes. 3. Comentarios de CSS Si necesita incluir documentación en el código CSS, puede hacerlo con comentarios. Los comentarios de CSS están abiertos y cerrados con símbolos / * y * /. El comentario de su código es importante no solo de regresar a CSS más tarde, sino también a los desarrolladores posteriores. En general, los comentarios de CSS se utilizan para indicar qué está haciendo cierto fragmento.
Puede ver anteriormente que el código solo dice lo que hace el próximo fragmento. Es muy importante continuar haciendo esto porque su archivo CSS puede volverse muy complicado con el tiempo. / * Así es como se ve un comentario de CSS */

Soy G {

Pantalla: ninguno;
}
4.! Importante
¡Es difícil exagerar lo importante que puede ser la etiqueta! Importante para CSS. Juego de palabras intencionalmente. Es uno de los elementos CSS más utilizados, pero también es uno de los elementos más utilizados y maltratados. Ver,! Importante establece que, independientemente de la línea, es reemplazar cualquier otro estilo para ese selector. En cualquier lugar de la hoja de estilo. Entonces, si desea asegurarse de que un elemento en particular siempre tenga un cierto color, ¡lo usaría! Importante hacer esto. Asegúrese de tener en cuenta que toda la etiqueta importante es entre el valor y el punto y una coma, no después.
#nombre del autor {

Color: rojo! Importante;}

#nombre del autor {
Color azul;
}
5. Pantalla: ninguno; Este fragmento CSS especial es uno de los más importantes para aprender a los recién llegados. Todo lo que hace es hacer que cualquier elemento desaparezca. Por ejemplo, si necesita una página para que no tenga un menú de encabezado, por ejemplo, simplemente ingresaría este código en:
Si hace esto con una clase que aparece en casi todas las páginas, puede eliminarlo por completo del sitio. Por lo tanto, debe tener cuidado con lo que aplica. Puede usar esto en ciertas publicaciones o páginas de WordPress para eliminar elementos individuales, como los meta datos de la publicación en sí. En DIV, puede personalizar el módulo de blog individual para que no tenga la publicación de la publicación usando este código:
.Home-Page-Blog .Post-Account {
Pantalla: ninguno;

}

6. Visibilidad: oculto; Muy breve, también puede usar la visibilidad: oculto; CSS para eliminar un elemento en la pantalla. Tenga en cuenta que hay una diferencia entre esto y la pantalla: ninguno; En tu código. La pantalla; nadie; El código eliminará completamente el elemento de la página. El navegador no reproducirá el artículo en absoluto, porque ha sido completamente eliminado. Con visibilidad: oculto; El artículo todavía se reproduce y se carga en la página, pero es invisible. Para todas las intenciones funcionales, todavía está allí. El usuario simplemente no puede verlo. Entonces, en general, solo usaría esto si necesita la función para algo, pero no quería aparecer. Como píxel de seguimiento u otras piezas que interactúan con los otros elementos en la pantalla.
#Code-Module {
Visibilidad: oculto;
}
7. Margen y forro
Los bordes y el forro son malentendidos por los recién llegados a los CSS. Aparecen igual al principio, pero una vez que cavas, verás que son completamente diferentes. El margen es el espacio alrededor de un artículo. Es invisible y transparente y puede ser incluso negativo. Si tiene un margen izquierdo más grande, presionará el artículo hacia la derecha. Un margen superior más grande empuja el elemento hacia el fondo. Un margen negativo hace lo contrario. Un margen superior negativo tirará del elemento, por ejemplo. La finalización, entonces, amortigua el tamaño del artículo. El revestimiento izquierdo extenderá el fondo del elemento a la izquierda. Esencialmente, aumenta su masa física. Como si estuviera agregando un segundo suéter en un día frío. Tienes más revestimiento en tu cuerpo. Eres más grueso que antes. Así es como el relleno de CSS y, debido a esto, no puede tener el relleno negativo. Cuando lo usa como código, puede usar el margen predeterminado: 15 PX; o revestimiento: 1VW; para la distancia uniforme alrededor del selector. O puede usar el borde de borde, el borde de borde, el borde derecho o el borde para afectar esa parte y tener diferentes niveles para cada uno. El forro también con el revestimiento de stânga, etc. H2 {
margen de fondo: 25px;
RODING-LAFE: 15 VH;

}
8. Elementos de coloración
Cambiar el color de diferentes elementos es una de esas cosas que podría cambiar desde el primer día en que inicia un sitio. En CSS, puede definir un color de dos maneras.
La modalidad principal es usar el código hexagonal de 6 dígitos: #FFFFF para blanco o # 000000 para negros, como ejemplos. Puede definir cualquier color RGB con un código hexagonal y, si no los conoce, no se preocupe. Hay muchos sitios web y herramientas para ayudarlo. La segunda forma es el uso de una palabra de color predefinida. Los colores básicos, como el azul y el rojo y el rojo, están predefinidos y puedes usarlos sin tener que recordar los códigos hexadecimales. Pero si los tonos primarios no son lo que necesitas, los códigos hexadecimales son la mejor opción. El uso de códigos de color en términos de uso efectivo de códigos de color, hay una serie de modos. Para que se modifique cualquier texto, simplemente use el color: #fffff; Y cualquier texto en ese selector cambiará. Puede hacer lo mismo para valores como H1 y H2 con color. P {color: blanco;
Color de fondo:#000;
}

H3 {
Antecedentes: verde;
Borde: #110011;
}