Una introducci\u00f3n r\u00e1pida a CSS<\/h2>\n
Si ya est\u00e1 familiarizado con CSS, no quiero molestarlo con una descripci\u00f3n general extensa. Si nunca ha trabajado con CSS o si ni siquiera est\u00e1 seguro de qu\u00e9 es CSS, consulte primero nuestro art\u00edculo sobre el tema:<\/p>\n
\u00bfQu\u00e9 es CSS y c\u00f3mo afecta a WordPress?<\/a><\/p>\n Eso cubrir\u00e1 los conceptos b\u00e1sicos de por qu\u00e9 se usa CSS para dise\u00f1ar sitios y c\u00f3mo se aplica.<\/p>\n Hay un gran error que cometen los usuarios de WordPress que son nuevos en CSS:<\/p>\n Personalizan los archivos de temas.<\/p>\n Por ejemplo, alguien que usa el tema Challenger puede colocar sus ediciones CSS directamente en el archivo style.css al que se accede desde el men\u00fa Apariencia> Editor.<\/p>\n WordPress ahora incluye un aviso que le advierte que no debe editar aqu\u00ed.<\/p>\n El problema con la edici\u00f3n del archivo style.css es que perder\u00e1 todos los cambios si actualiza a una nueva versi\u00f3n de Challenger. Cr\u00e9ame, perder los cambios de c\u00f3digo que tardaron mucho tiempo en realizarse puede ser incre\u00edblemente desalentador.<\/p>\n Existe una mejor manera de agregar CSS a su sitio donde nunca se sobrescribir\u00e1. Adem\u00e1s, este c\u00f3digo se agrega a su sitio de una manera que facilita la anulaci\u00f3n de los estilos del tema.<\/p>\n Para agregar CSS a su sitio, desea abrir el Personalizador (Apariencia> Personalizar) y hacer clic en la secci\u00f3n CSS adicional.<\/p>\n Suele ser la \u00faltima secci\u00f3n del Personalizador.<\/p>\n Si abre esta secci\u00f3n, ver\u00e1 un \u00e1rea de texto donde puede agregar su c\u00f3digo. WordPress incluir\u00e1 algunos consejos aqu\u00ed, pero puede hacer clic en el enlace Cerrar para eliminarlo y solo mostr\u00f3 la entrada del c\u00f3digo.<\/p>\n Puede ingresar y guardar cualquier CSS que desee agregar aqu\u00ed.<\/p>\n El c\u00f3digo que agregue aqu\u00ed actualizar\u00e1 la apariencia del sitio de inmediato en la vista previa. Una vez que est\u00e9 satisfecho con sus cambios, puede guardar sus ediciones.<\/p>\n La ventaja adicional de colocar CSS aqu\u00ed es que puedes ver las actualizaciones en vivo, por lo que puedes probar diferentes c\u00f3digos r\u00e1pidamente para descubrir lo que te gusta.<\/p>\n Ahora que ha visto c\u00f3mo agregar CSS de forma segura a su sitio, \u00a1cubramos los conceptos b\u00e1sicos de la escritura de CSS!<\/p>\n Consejo profesional:<\/strong> no se preocupe por romper su sitio. Si realiza una edici\u00f3n incorrecta, simplemente puede eliminar el CSS que agreg\u00f3. Es imposible romper completamente su sitio o perder el acceso al men\u00fa de administraci\u00f3n agregando CSS de esta manera.<\/p>\n Si alguna vez ha escrito CSS, sabe que el primer paso es elegir un selector para indicarle al navegador a qu\u00e9 elemento del sitio se dirige. En la captura de pantalla anterior, estoy apuntando a todos los elementos que tienen la clase "t\u00edtulo del sitio".<\/p>\n Si no est\u00e1 seguro de c\u00f3mo usar los selectores de CSS, consulte esta excelente introducci\u00f3n a los selectores de CSS de SitePoint<\/a>.<\/p>\n Ahora aqu\u00ed est\u00e1 la cosa …<\/p>\n Incluso muchos usuarios experimentados de WordPress encuentran mal los selectores. Verifican el archivo style.css para encontrar un selector ya utilizado por el tema. Esto es tedioso y es posible que ni siquiera encuentre un selector adecuado para realizar su personalizaci\u00f3n.<\/p>\n D\u00e9jame ofrecerte un proceso mucho m\u00e1s productivo.<\/p>\n Al escribir CSS, primero necesita un selector para indicarle al navegador qu\u00e9 elemento desea editar. Si bien puede verificar la hoja de estilo en su tema, es mucho m\u00e1s f\u00e1cil simplemente usar las herramientas de desarrollo web de su navegador para encontrarlos.<\/p>\n He aqu\u00ed un ejemplo de lo que quiero decir:<\/p>\n Esta es una captura de pantalla de Chrome con sus herramientas de desarrollo abiertas<\/p>\n Puede ver las clases y los ID de cada elemento en las herramientas de desarrollo abiertas. A continuaci\u00f3n, puede utilizar cualquier combinaci\u00f3n de clases e ID disponibles para escribir sus propios selectores personalizados.<\/p>\n Entro en detalles mucho m\u00e1s profundos de este proceso en este tutorial:<\/p>\n C\u00f3mo encontrar selectores de CSS en sitios de WordPress<\/a><\/p>\n Aprender\u00e1 c\u00f3mo acceder a las herramientas de desarrollo de su navegador, c\u00f3mo navegar por el HTML y c\u00f3mo encontrar los selectores de CSS que necesita.<\/p>\n Ahora que tiene una forma mucho m\u00e1s r\u00e1pida de obtener cualquier selector que desee y sabe c\u00f3mo agregar c\u00f3digo en la secci\u00f3n CSS adicional en el Personalizador, lo \u00fanico que queda es elegir las propiedades que desea cambiar.<\/p>\n Por ejemplo, si desea orientar el t\u00edtulo del sitio en Challenger<\/a> y agrandar la fuente, puede hacerlo con la Si no est\u00e1 muy familiarizado con CSS, esta lista de propiedades CSS<\/a> le resultar\u00e1 especialmente \u00fatil. Puede buscar en esa lista la calidad que desee editar (color de fondo, tama\u00f1o de fuente, bordes, etc.).<\/p>\n Maestro o novato en CSS, tengo algo que creo que te gustar\u00e1 …<\/p>\n Si utiliza alguno de nuestros temas, le encantar\u00e1n las bibliotecas de fragmentos de CSS preescritas que hemos creado. Por ejemplo, la colecci\u00f3n<\/a> de fragmentos de CSS de Tracks<\/a> tiene docenas de fragmentos que puede copiar y pegar en la secci\u00f3n CSS adicional para personalizar su sitio:<\/p>\n Esto hace que sea muy f\u00e1cil personalizar su sitio con CSS incluso si nunca antes ha escrito CSS. Simplemente puede copiar y pegar cualquier fragmento que desee y luego cambiar el valor a lo que desee.<\/p>\n Para encontrar los fragmentos de CSS para su tema, visite el Centro de soporte<\/a> y seleccione el tema que est\u00e1 usando. Luego haga clic en el bot\u00f3n Ver fragmentos de CSS en la parte inferior de la barra lateral:<\/p>\nC\u00f3mo agregar CSS a su sitio de WordPress<\/h2>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\")
<\/a><\/p>\nUna mejor manera<\/h3>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\")
<\/a><\/p>\nC\u00f3mo encontrar selectores de CSS<\/h2>\n
C\u00f3mo los profesionales de WP encuentran selectores de CSS<\/h3>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\")
<\/a><\/p>\nPropiedades y valores de CSS<\/h2>\n
font-size<\/code>propiedad. Esa declaraci\u00f3n CSS podr\u00eda verse as\u00ed:<\/p>\n.site-title {\n font-size: 32px;\n}<\/code><\/pre>\nCSS preescrito GRATIS para nuestros usuarios<\/h2>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\")
<\/a><\/p>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\")
<\/a><\/p>\n