Cualquier persona con un sitio de WordPress en algún momento se encontrará con una situación en la que tendrá que cambiar algún código. Esto no significa que se espera que sea un desarrollador web, escribiendo JavaScript y PHP como un profesional. Lo más probable es que tengas que jugar con HTML y CSS básico, los conceptos básicos de cada sitio web, WordPress o no.
Tenemos un excelente tutorial sobre los códigos HTML más populares y amigables para principiantes que necesitará. Échale un vistazo y lee también. Esta vez queremos presentarle algunos de los fragmentos de código CSS más básicos e ideas para ayudarlo a personalizar su sitio para que se vea y funcione exactamente como lo desea.
Suscríbete a nuestro canal de Youtube
1. Selectores, clases e identificadores
En CSS, es la base de todo. selector. En pocas palabras, es un hash que le dice al código a qué apuntar. Puede orientar todos los párrafos individuales de su sitio con pags {}. (Cualquier código que se refiera al selector está encerrado entre llaves). En muchos casos estos selectores de elementos coincidirá con las etiquetas HTML que utiliza para crear su sitio web (como pags {} direccion
o hora 2 {} y
).
Entonces usted tiene clases. Estos son los tipos específicos de selectores que define (o el tema / WP en sí). Si solo desea orientar los encabezados H1, puede tener título de la entrada {}. Un selector de clase CSS está marcado con un punto/punto delante del propio selector. Se utilizan para apuntar a elementos de todo el sitio, pero no a elementos básicos como un simple H1. Tenga en cuenta que los selectores base no tienen un punto u otro indicador, lo que significa que son HTML base.
identificadores en CSS funciona exactamente como una clase. Excepto por dos diferencias menores. Están marcados con el símbolo # antes de un selector, y se nombran para una ocurrencia única y específica (o un número limitado de ocurrencias) de un elemento que requiere un estilo especializado. Como # email-subscribe-about-page {} o # email-subscribe-after-post {}. Estos identificadores indican que, en lugar de apuntar al usuario especificado escribe elemento, ellos mismos eligen los elementos individuales.
p {
color: red;
}
.class {
color: white;
}
#id {
color: blue;
}
Otros selectores
Dado que cubrimos los conceptos básicos de CSS, no entraremos en selectores más complejos, pero existen. También puede orientar lo que se llama pseudo-clases este solo puede ser el caso cuando se desplaza el enlace. o un selector de atributos que solo apuntará a los elementos a los que se adjunta el parámetro especificado. También puede habilitar CSS para que sea relativo a la posición del elemento usando p :: pa y img :: antes.
Pueden ser increíblemente avanzados y complejos para hacerlos correctamente, así que cuando se trata de aprender los conceptos básicos, no debes preocuparte por ellos. Sin embargo, queríamos que supieras que hay una forma mucho más detallada de interactuar con el documento.
2. Dos puntos y punto y coma
Mencionamos anteriormente que todo el código CSS está entre llaves. Sin embargo, dentro de estos paréntesis, cada línea de personalización tiene que terminar con un punto y coma (;). Esto le indica al navegador que el estilo está listo. El espacio en blanco es irrelevante en CSS, excepto por la legibilidad, pero el punto y coma en sí mismo no es negociable.
Además, coloca dos puntos simples entre el estilo CSS real y el valor (:). Otra vez, los espacios aquí no importan. Puede tener espacios en un lado, en ambos o en ninguno, y el CSS aún se representará.
Tenga en cuenta que mientras usted Energía salir de estos lugares, generalmente se acepta que no debe hacerlo. Sin embargo, para la mayoría de los sitios y temas que ofrecen minificación de CSS, todos los espacios se eliminan de forma independiente.
3. Comentarios CSS
Si necesita adjuntar documentación a su código CSS, puede hacerlo con comentarios. Los comentarios CSS se abren y cierran con / * y * / simbolos Los comentarios de código son importantes no solo para una reversión posterior a CSS, sino también para los desarrolladores posteriores. En general, los comentarios CSS se utilizan para indicar qué está haciendo un fragmento en particular.
Como puede ver arriba, el código simplemente le dice qué hace el siguiente fragmento. Es muy importante hacer esto ya que el archivo CSS puede volverse muy complicado con el tiempo.
/* This is what a CSS Comment Looks Like */
img {
display:none;
}
4. importante
La importancia de esto no puede ser sobreestimada. !importante la etiqueta puede ser para CSS. Juego de palabras intencionado. Es uno de los elementos CSS más utilizados, pero también es uno de los elementos más abusados y sobreutilizados.
Ya verás, !importante declara que cada línea en la que continúa anula cualquier otro estilo para ese selector. En cualquier parte de la hoja de estilo. Entonces, si quiere estar seguro de que un artículo siempre tiene un color determinado, usará !importante para hacer esto. Recuerda que todo !importante la etiqueta está entre el valor y el punto y coma, no después.
#author-name {
color:red!important;
}
#author-name {
color:blue;
}
5. pantalla: ninguna;
Esta pieza particular de código CSS es una de las piezas más importantes para aprender para los novatos. Todo lo que hace es hacer que cualquier elemento al que te dirijas simplemente desaparezca. Por ejemplo, si desea que una página no tenga un menú de encabezado, simplemente ingrese este código:
Hacer esto con una clase que aparece en casi todas las páginas puede eliminarla por completo de su sitio. Así que hay que tener cuidado con lo que se aplica.
Puede usar esto en publicaciones específicas o páginas de WordPress para eliminar elementos individuales, como metadatos, de la publicación en sí. En Divi, puedes personalizar un módulo de blog individual para excluir el fragmento de publicación usando este código:
.home-page-blog .post-content {
display:none;
}
6. visibilidad: oculta;
En resumen, también puedes usar visibilidad: oculto; CSS para eliminar un elemento de la pantalla. Recuerde que hay una diferencia entre esto y No aparece; en tu código.
los No aparece; el código eliminará completamente el elemento de la página. El navegador no mostrará el elemento en absoluto, ya que se eliminó por completo. DE visibilidad: oculto; el elemento aún se procesa y se carga en la página, pero es invisible. Para todas las intenciones funcionales, todavía está allí. El usuario simplemente no lo ve.
Por lo general, solo usaría esto cuando necesita una función para algo, pero no quiere que se muestre. Como un píxel de seguimiento u otros elementos que interactúan con otros elementos en la pantalla.
#code-module {
visibility:hidden;
}
7. Margen y relleno
Los novatos en CSS malinterpretan los márgenes y el relleno. Parecen iguales al principio, pero cuando profundices verás que son completamente diferentes.
Margen es el espacio alrededor del elemento. Es invisible y transparente, e incluso puede ser negativo. Un margen izquierdo más grande moverá el elemento a la derecha. Un margen superior más grande mueve el elemento hacia abajo. Un margen negativo hace lo contrario. Por ejemplo, un margen superior negativo hará subir el elemento.
Rellenoy luego almacena en caché el tamaño del elemento. El relleno de la izquierda extenderá el fondo del elemento a la izquierda. Básicamente aumenta su masa física. Como agregar un segundo suéter en un día frío. Obtienes más relleno en tu cuerpo. Estás más gordo que antes. Así es también como funciona el relleno CSS, por lo que no puede tener complemento negativo.
Al usarlo como código, puede usar el valor predeterminado margen: 15px; o forro: 1vw; para una distribución uniforme alrededor del selector. O puedes usar margen superior, margen izquierdo, margen derecho, o margen inferior solo afectan a ese lado y tienen diferentes niveles para cada uno de ellos. Acolchado también con forro izquierdo, y así.
h2 {
margin-bottom:25px;
padding-left:15vh;
}
8. Elementos para colorear
Cambiar el color de los diferentes elementos es una de esas cosas que puede comenzar a modificar desde el primer día que lanza su sitio. En CSS, puede definir el color de dos maneras.
La forma principal es usar un código hexadecimal de 6 dígitos: #ffffff para blanco o #000000 para negro como ejemplos. Puedes definir cualquier color RGB con código hexadecimal, y si no los conoces, no te preocupes. Muchos sitios web y herramientas existen para ayudar con esto.
La segunda forma es usar una palabra de color predefinida. colores básicos como azul y negro y rojo están predefinidos y puedes usarlos sin tener que memorizar códigos hexadecimales. Pero si los tonos básicos no son lo que necesita, los códigos hexadecimales son su mejor opción.
Uso de códigos de colores
Cuando se trata de usar códigos de color, hay muchas maneras. Para cualquier texto que necesite ser cambiado, simplemente use color: #ffffff; y cualquier texto en ese selector cambiará. Puede hacer lo mismo para encabezados de título como H1 y H2 usando color.
p {
color:white;
background-color:#000;
}
h3 {
background:green;
border: #110011;
}
Cambiando cosas como color de fondo: rojo; o fondo: verde; los artículos son igual de fáciles. Agregue un valor de color. También puedes usar color: # 000; valores para selectores, como un: flotar que cambiará el color del enlace cuando pases el cursor sobre él. O incluso borde: azul; para colocar un borde de color alrededor de cualquier elemento.
Envolviendo los conceptos básicos de CSS
CSS puede ser abrumador. Puede hacer mucho más que intercambiar colores y mostrar/ocultar elementos. Sin embargo, si solo está aprendiendo CSS y cómo manipular un sitio web con código, internalizar estos conceptos básicos específicos lo mantendrá cómodo leyendo y revisando su código, incluso si nunca antes ha abierto un editor de código.
¿Qué códigos CSS básicos utiliza con frecuencia en sus sitios?
Artículo destacado con una imagen de darkwark / shutterstock.com
