Lista de herramientas útiles para desarrolladores de CSS. CodePen: editor de código en línea gratuito (HTML, CSS, JS)
Para realizar cambios en la apariencia de los sitios de WordPress, a menudo es necesario editar el código CSS. En este artículo, veremos varias formas de cambiar el código CSS en temas de WordPress.
Editar el archivo style.css de tu tema
La forma más común de editar el código CSS de su sitio de WordPress es cambiarlo en el archivo style.css de su tema activo. Todos los temas en WordPress están ubicados en el directorio wp-content/themes y por el nombre de su tema activo, puede determinar fácilmente en qué directorio se encuentra.
Para editar el archivo style.css de su tema, necesitará tener acceso al sitio a través de FTP o soporte para editar archivos de temas directamente desde el panel de administración de WordPress. Si su equipo admite la edición de archivos desde el panel de administración, encontrará esta opción en la sección Apariencia → Editor.
Asegúrese de que el archivo style.css (hoja de estilos) esté seleccionado en la lista de la derecha. Se desaconseja editar archivos .php de esta manera, ya que el más mínimo error puede dañar su sitio. Un método más fiable es la edición mediante FTP.
La desventaja de este enfoque es que cuando actualice el tema, se perderán todos los cambios. Para evitar esto, recomendamos utilizar un tema secundario o un complemento de terceros para editar el código CSS.
Temas secundarios de WordPress
WordPress te permite realizar cambios en otros temas sin cambiar el código fuente del tema original. Además de la hoja de estilo, los temas secundarios pueden modificar otros archivos de plantilla en WordPress, pero eso está fuera del alcance de este artículo.
Para crear un nuevo tema secundario, asígnele una nueva carpeta en el directorio wp-content/themes y coloque un archivo vacío llamado style.css en ella. La ruta a su archivo de estilo se verá así: wp-content/themes/my-child-theme/style.css donde my-child-theme es el nombre de nuestro nuevo tema hijo.
Abra el archivo style.css del tema secundario en su editor de texto favorito y pegue el siguiente código en él:
/** * Nombre del tema: Tema Mi hijo * Plantilla: veintetwelve */ @import url("../twentytwelve/style.css"); cuerpo (fondo: rojo;)
Con la directiva Theme Name indicamos el nombre de nuestro tema hijo, y en la siguiente línea con la directiva Template indicamos el tema padre que queremos usar. En nuestro caso, este es el tema Twenty Twelve, que se encuentra en el directorio veinte doce.
Después del encabezado del tema, incluimos los estilos del tema Twenty Twelve con el comando @import, y todo lo que sigue es nuestro propio código CSS. En nuestro caso, cambiamos el color de fondo a rojo.
Guarde los cambios en el archivo style.css de su tema hijo y cargue todo el directorio my-child-theme al servidor a través de FTP. Verá su nuevo tema secundario disponible cuando seleccione temas en Apariencia → Temas.
De esta manera, cuando edites el archivo style.css de tu tema hijo, todos los cambios se reflejarán en tu sitio y cuando actualices el tema principal, tu trabajo no se verá afectado.
Editar CSS con un complemento
Otro método para editar código CSS en WordPress es utilizar un complemento. Existe una cantidad considerable de complementos que le permiten cambiar la hoja de estilo. Recomendamos el complemento Jetpack gratuito, que incluye un módulo CSS personalizado.
El módulo CSS personalizado le permite editar estilos directamente desde el panel de administración de WordPress y no requiere acceso FTP ni configuraciones especiales del sitio de alojamiento. El CSS personalizado tiene resaltado y verificación de sintaxis, admite revisiones y varios preprocesadores de CSS (LESS y Sass).
Si tiene alguna pregunta mientras trabaja con cualquiera de los métodos anteriores, deje un comentario e intentaremos ayudarlo.
De hecho, los editores de CSS a menudo se consideran innecesarios y excesivos; después de todo, puedes hacer lo mismo en tu editor de texto favorito. A veces esto es cierto, aunque hay algunos editores HTML muy malos que son incluso peores que los editores CSS.
Pero los editores CSS también pueden ser útiles y pueden ser utilizados eficazmente por desarrolladores con diferentes habilidades. Los profesionales web pueden utilizar el editor CSS para mejorar su flujo de trabajo y obtener todas las herramientas CSS útiles en un solo paquete. Los principiantes pueden aprender CSS fácilmente analizando estilos y usando la edición en vivo para comprender cómo se construye un diseño y qué sucede realmente detrás de escena. De cualquier manera, debes asegurarte de saber lo que estás haciendo para no terminar produciendo código sucio.
¿Por qué necesito un editor CSS?
Bueno, en realidad no necesitas uno. Pero puedes usarlo para hacer que tu flujo de trabajo sea más eficiente. La principal ventaja de los editores CSS es el entorno de desarrollo integral que ofrecen a los desarrolladores web. La tarea principal del editor CSS es combinar efectivamente las funciones de edición de estilos CSS, fuentes HTML y diseño de sitios dentro de una interfaz compacta. Sin embargo, los editores de CSS suelen ir incluso más allá.
Además de una buena funcionalidad de codificación, los editores de CSS ofrecen herramientas de depuración y prueba, así como funciones útiles como edición en vivo, vista previa en varios navegadores, formato de código, validación, ayuda CSS integrada y herramientas de gestión de proyectos. La combinación de estas características le brinda un arsenal de herramientas útiles.
Algunos editores también le permiten separar partes del código en carpetas separadas y estilos de filtro, lo que simplifica su trabajo y hace que el código fuente sea más simple y claro. Otra característica útil es la visualización instantánea de hojas de estilo en Internet Explorer o Firefox, que es difícil de encontrar en cualquier editor HTML estándar. Además, con la ayuda de los editores CSS, puede analizar fácilmente los errores en el código utilizando el inspector de código y analizar estilos utilizando la función llamada "Rayos X".
En resumen, la principal ventaja de un editor CSS es que proporciona un entorno completo y compacto para trabajar con diseño CSS y le permite codificar de forma rápida y eficiente.
Entonces, ¿qué editores CSS tenemos disponibles?
xilo
Xile (Mac)Este editor avanzado permite a los desarrolladores editar sitios web sobre la marcha utilizando estilos integrados. Puede cambiar el código CSS y los cambios aparecerán directamente en la ventana del navegador. En comparación con la barra de herramientas de Web Developer, con Xyle tiene funciones útiles como vista de árbol de selectores, resaltado de sintaxis y administración avanzada de archivos.
En el modo navegador puede ver sitios web utilizando el motor Safari. En el modo Selección, al hacer clic en cualquier parte de la página web se muestra el código fuente HTML y CSS del fragmento seleccionado.
En el modo Cascada, Xylescope muestra no sólo los estilos que se aplican actualmente al elemento seleccionado, sino también todas las reglas que se aplican a los antecesores del elemento seleccionado. Al depurar con
Usando Xylescope, puede simplemente seleccionar el elemento problemático en modo Cascada para ver qué estilos se aplican realmente y cuáles se anulan, incluidos los aplicados a los ancestros del elemento. Xylescope muestra selectores específicos e indica qué estilos tienen prioridad. Xylescope también ofrece integración con editores de texto como BBEdit.
Precio: $19,95. Versión de prueba disponible. Una excelente solución sin funciones adicionales, como validación, optimización, a un precio óptimo.
Algunas de las características de Xyle
* Formato automático
* Coincidencia de selectores
* Filtrar archivos CSS grandes usando grupos inteligentes
* Visor DTD incorporado
estilizador
Estilizador (Windows)
Dos cosas hacen que Stylizer sea un poco diferente: utiliza una interfaz de cuadrícula en lugar de un editor de texto y está integrado en Firefox e IE, por lo que cuando el usuario cambia el CSS, se aplica inmediatamente en el navegador. El sistema de cuadrícula hace que CSS se sienta como "CSS sobre rieles" porque hace imposible que CSS cometa errores. Permite a Stylizer hacer cosas similares al inspector de elementos en Firebug. 
En Stylizer, los valores se pueden ajustar sobre la marcha. Para cambiar la altura, el relleno o la posición del fondo, el usuario puede literalmente hacer clic en el valor y editar el elemento en tiempo real. Los colores también son los mismos. El usuario puede hacer clic en ellos, arrastrarlos con el mouse y ver el color del texto, el fondo o el borde en el navegador, en tiempo real, creando una experiencia de "Photoshop para la web". Stylizer Básico es gratis. La versión completa (Precio: $69.95) no es muy diferente, pero la versión gratuita no le permite filtrar la hoja de estilos para mostrar solo estilos con contenido específico.
Editor CSS rápido
Editor CSS rápido (Win)Este editor admite resaltado de sintaxis, autocompletado y un inspector de código que garantiza que el código producido sea correcto. Puede utilizar la ayuda CSS y HTML integrada para buscar rápidamente la sintaxis y los atributos basados en selectores o etiquetas. La paleta permite a los diseñadores seleccionar un color y ver el resultado "en vivo" usando la Vista previa de la hoja de estilo para Internet Explorer y Firefox. El administrador de archivos también puede encargarse de cargar archivos CSS a través de FTP. Además, puede utilizar el portapapeles extendido para almacenar varios fragmentos de código ya preparados. El editor cuesta 29,85 dólares. Versión de prueba disponible.
Algunas de las características de Rapid CSS Editor
* Resaltado de sintaxis para documentos CSS y HTML
* Comprobador y validador de CSS
* Explorador de código CSS
* Inspector de código
* Autocompletar para CSS y HTML
* Vista previa de la hoja de estilo con Internet Explorer o Firefox
* Rayos X para visualización HTML
* Cumplimiento de los estándares CSS y varios navegadores.
* Integración con validadores HTML y CSS del W3C
* Ayuda integrada CSS
* Formato de código CSS
* Compresor de código CSS
* Buscar y reemplazar con soporte de expresiones regulares
* Buscar y reemplazar en archivos
* Portapapeles de varios elementos
* Explorador de archivos incorporado
* Guarde y abra archivos directamente desde FTP
* Responsable de proyectos y sitios y publicación FTP.
* Interfaz totalmente personalizable
Estilo máximo
Estilo superior (victoria)
El editor TopStyle CSS y HTML está disponible en su versión Lite junto con el editor HTML Homesite; sin embargo, también hay una versión completa más compleja para desarrolladores web profesionales. Con TopStyle, los desarrolladores han recibido una serie de funciones que no están disponibles en otros editores. Por ejemplo, con HTML-tidy integrado puedes traducir fácilmente etiquetas HTML al estilo XHTML. Entonces etiquetas como - a una etiqueta con las correspondientes reglas CSS válidas. La biblioteca contiene colecciones de fragmentos de código de uso frecuente. Dividir una ventana le permite comparar directamente la presentación de un sitio en Internet Explorer y Mozilla. También puede cambiar la definición de Doctype para descubrir cómo las diferentes DTD afectan el diseño en diferentes navegadores.
Probablemente la herramienta más poderosa de TopStyle sea el verificador de estilo. Le permite no solo verificar las hojas de estilo y, en consecuencia, garantizar el formato de presentación correcto en diferentes navegadores. También puede predecir errores en navegadores populares que pueden aparecer a pesar del código CSS válido. También puede consultar los estilos CSS del Servicio de validación CSS del W3C para corregir errores que TopStyle no encontró.
La versión completa cuesta $79,95. Advertencia: la versión lite no se puede actualizar. Sólo Windows.
Algunas de las características de TopStyle:
* Edición de HTML, xHTML y CSS en el Programa Unificado: los atributos HTML están ordenados para que pueda ver rápidamente cuáles son necesarios.
* Navegación sencilla entre documentos: haga clic en una clase de atributo HTML para ir a la definición de esta clase en una hoja de estilo externa o haga clic en un enlace para abrir el archivo para editarlo. Incluso puedes hacer clic en etiqueta para abrir el archivo gráfico en su editor de imágenes favorito.
* Validación de Elementos y Atributos: Todas las clases se definen en sus propios bloques de estilo y hojas de estilo externas, por lo que asignar una clase a una etiqueta HTML es una tarea muy sencilla.
* Comprobador de estilo: verifica sus estilos en varios navegadores y marca cualquier valor o propiedad no válido. También puede enviar sus hojas de estilo directamente al Servicio de Validación de CSS del W3C, para que pueda compararlas rápidamente con la especificación oficial de CSS.
* Actualización de estilo: una forma rápida y confiable de reemplazar todas las etiquetas HTML obsoletas (incluida la etiqueta HTML obsoleta desde hace mucho tiempo) - al CSS equivalente.
* Integración HTML Tidy: ¡Haga que el cambio a XHTML sea sencillo con la configuración Tidy incorporada que convierte HTML a XHTML con un solo clic!
* Informes del sitio: vea los estilos utilizados en su sitio. Descubra dónde los está utilizando o descubra qué estilos que ha definido no se utilizan.
* Vista previa en pantalla completa: vista previa dividida en Internet Explorer y Mozilla para obtener una descripción general instantánea de las diferencias. Incluso puedes cambiar el DOCTYPE de cada panel de vista previa sobre la marcha para ver cómo los diferentes DOCTYPE afectan el diseño.
* Integración con la validación HTML del W3C: los resultados de la validación se muestran en TopStyle, con un hipervínculo de números de línea, que se sincroniza con el editor TopStyle.
CSS
MacRabbit CSSEditar (Mac)Al igual que XyleScope, CSSEdit proporciona edición de hojas de estilo "en tiempo real", incluso cuando se ejecutan aplicaciones web dinámicas que utilizan bases de datos o AJAX. Puede editar y analizar estilos sin la molestia de descargarlos o actualizarlos (modo en línea y fuera de línea). Selector Builder le permite describir elementos en inglés sencillo. Intelligent CodeSense analiza CSS y el comportamiento de CSS para ofrecer consejos inteligentes y sensibles al contexto.
El inspector de rayos X le mostrará qué estilos se aplican al documento HTML. También puede comparar sus estilos con los estándares del W3C y utilizar una herramienta de gestión de proyectos (Hitos, etc.) para mejorar su flujo de trabajo.
Hay un complemento EditCSS para Firefox, así como también marcadores CSSEdit. Puede comenzar a editar los estilos de cualquier sitio con solo hacer clic en un botón en su navegador, y también puede usar CSSEdit para editar. La herramienta tiene una interfaz hermosa e intuitiva que también es muy compacta, está muy bien organizada y es un placer trabajar con ella. EditCSS cuesta 29,95 € (47 dólares). También hay versiones de prueba disponibles para descarga gratuita.
Algunas de las funciones de edición de CSS
* Generador de selectores
* Fácil organización de carpetas y filtros.
* Modificar el código fuente con CodeSense inteligente
* páginas de rayos X
* Vista previa en vivo
* Gestión de proyectos
* Validación
* Integración con navegadores web.
Maestro de estilo
Maestro de estilo (Win/Mac)
Este editor CSS WYSIWIG hace que todos se sientan como un maestro, con características que le permiten destacarse entre la multitud. De hecho, Style Master permite tanto a principiantes como a profesionales crear estilos válidos y semánticamente correctos. Los selectores se pueden agrupar por alfabeto, categoría o configuración actual. El editor cuenta con una paleta de colores integrada, varias plantillas, herramientas de automatización y validación. De esta manera, los profesionales pueden trabajar de manera fácil y eficiente, y los principiantes no necesitan mucho tiempo para crear excelentes sitios web. 
Lo que sorprende es que las distintas plantillas que vienen incluidas por defecto en el editor sean realmente útiles, algo que no suele ser el caso en la mayoría de aplicaciones de edición. Aquí puede simplemente tomar el diseño CSS y definir los estilos; todos los selectores ya están allí. También puede utilizar los ejemplos de estilo del W3C, que definen estilos para casi todas las etiquetas HTML, como los encabezados.
-.
Puede utilizar todas las funciones del Panel de diseño, similar a X-Ray, para crear sus propios estilos. El editor es muy sencillo, intuitivo y claro. Precio: $59,99. No es barato, pero al final obtendrás una herramienta eficaz y potente para tu trabajo diario. Style Master está disponible tanto para Windows como para Mac. También hay versiones de prueba disponibles para descarga gratuita.
Algunas de las características del Style Master
* Ayuda con el soporte del navegador
*Magos
* Más de 40 plantillas
* Rayos X, que te permite ver inmediatamente la estructura de tus capas.
* Optimización de código
* Código inteligente
Estudio de estilo
Estudio de estilo (ganar)Style Studio proporciona un potente "CSS-Checker" que permite a principiantes y profesionales desarrollar diseños CSS para varios navegadores. Los desarrolladores pueden utilizar una serie de herramientas de soporte, como un "enlazador inteligente" que vincula varios documentos CSS con varios documentos HTML, XHTML/XML a la vez y un administrador de CSS que gestiona y actualiza el código compatible con los estándares (tidy) e identifica CSS. errores.
El editor cuenta con tecnología IntelliSense (para estilos y HTML) con ayuda rápida de CSS. Property Watch detecta automáticamente una propiedad CSS (o etiqueta HTML si está editando un documento HTML) y muestra información completa sobre ella.
Style Studio cuesta $49,95 y sólo está disponible para usuarios de Windows.
Algunas de las características de Style Studio:
* Resaltado de sintaxis potente y personalizable con capacidades de búsqueda/reemplazo/edición
* Validador de CSS: Detecta y corrige errores de CSS.
* Potente Administrador de CSS que le permite administrar, actualizar código e identificar problemas de CSS en su sitio web.
* Integración con más de 35 editores HTML
* IntelliSense para estilos y HTML
* Vigilancia de propiedades y ayuda instantánea para palabras clave CSS
* Asistente de CSS
* Validación de documentos XML
* Analizador inteligente que detecta propiedades no válidas a medida que se ingresan.
* Detección automática de navegadores instalados.
* Cambie fácilmente los valores CSS usando las teclas de acceso rápido Ctrl + Arriba / Abajo.
* Sistema integrado de búsqueda y reemplazo.
Taza de café
Creador de hojas de estilo CoffeeCup (Win)
CoffeeCup StyleSheet Maker ofrece un editor CSS que es un cruce entre un editor funcional complejo y funciones de edición básicas. Es similar a TopStyle, pero claramente aún no ha alcanzado el mismo nivel de flexibilidad. Usando CoffeeCup StyleSheet Maker tendrás aproximadamente las mismas opciones. Precio: $34.00. Versión de prueba disponible.
Algunas de las posibilidades de CoffeeCup:
* Combinación de colores incorporada en el sitio web de CoffeeCup
* Diseñador de fuentes CSS simple, simplemente seleccione en el menú desplegable.
* Ayuda paso a paso al crear estilos
* Verificación en múltiples navegadores
* 50 etiquetas desplegables de hojas de estilo
* Asistente de clase e identificación para crear sus propias etiquetas HTML.
* Crear estilos para Netscape e Internet Explorer 3.0 +
Editor CSS de EngInSite
Editor CSS EngInSite (Ganar)
Si desea asegurarse de tener un código CSS estricto y correcto que cumpla con los estándares del W3C, definitivamente vale la pena considerar EngInSite. La tarea principal del editor es crear sitios web en estricta conformidad con los estándares revisados por el W3C. La herramienta tiene una vista previa de estilo integrada, finalización automática de código, resaltado de sintaxis, está integrada con un validador HTML del W3C, tiene ayuda integrada y ayuda CSS, una biblioteca de código personalizable y extensible y una función de edición en vivo. 
También puede utilizar el Editor de propiedades CSS con soporte para propiedades dinámicas y el Constructor de selectores, un práctico asistente para selectores complejos y varias herramientas de código, como expandir/extraer URL, convertir colores, convertir código, etc. Puede ver selectores, propiedades, comentarios y reglas @ y agregar/eliminar HTML, como comentarios HTML y secciones CDATA. Precio: $39,95. Versión de prueba disponible.
Algunas de las características de EngInSite:
* Editor de texto totalmente personalizable
* Vista previa integrada de la hoja de estilo instantánea
* Comprobación de sintaxis CSS para múltiples navegadores
* Integración con el validador HTML del W3C
* Cumplimiento de los estándares CSS y varios navegadores.
* Vista previa en varios navegadores.
* Sistema de ayuda integrado y ayuda CSS integrada
* Buscar y reemplazar con soporte de expresiones regulares
* Editor visual para varios tipos de datos.
* Asistentes para cuerpo, barras de desplazamiento de IE, listas y fondos
CSS de medusas
CSS de medusas (Mac)
Al ser extremadamente simple y directo, Jellyfish CSS garantiza que los desarrolladores puedan editar estilos CSS de forma rápida y sencilla. El editor tiene una biblioteca de códigos, soporte Code-Sense, ayuda del navegador, asistentes y ayuda para ayudarle a evitar errores (se le notificará inmediatamente si cometió un error accidentalmente). También puedes utilizar el Colorblender integrado para crear una paleta de colores. Precio: 29? ($47). Por supuesto, existe una versión de prueba. 
Algunas de las características de Jellyfish CSS:
* Code-Sense te ayudará a evitar errores
* Compatibilidad con perfil móvil 1.0
* Resaltado de sintaxis
* Verificación de código al ingresar
* 3 tipos de vista previa diferentes
* Se integra con programas externos para un acceso rápido
* Comprobación de estilo con W3C Validator y CSS-Tidy
* Descargue archivos CSS directamente desde www y trabaje en ellos
* Fragmentos de código
* Mezclador de colores
Un estilo
Astyle (victoria)
Astyle es un editor visual de CSS que ofrece exactamente lo que esperarías de la mayoría de las herramientas de edición. No hay funciones adicionales, pero se incluyen todas las herramientas de edición más importantes. Astyle no puede evitar impresionarnos con algunas características y habilidades muy útiles. Precio: $20. 
Algunas de las características de Astyle:
* Interfaz fácil de usar
* Propiedades agrupadas y selectores.
* Selección y agrupación automática de selectores CSS.
* Resaltado de código CSS, HTML, XML
* Limpiar documento HTML usando CSS
* Soporte para arrastrar y soltar
Si tienes alguna duda te recomendamos utilizar nuestro
Style Master v 5.0 (para Mac OS X), v 4.6 (para Windows) 1997 - 2016 Interfaz y ayuda en inglés. idioma. Peso 8,79 MB. Precio: $59,99 Una vez finalizado el período de prueba (30 días), el programa seguirá funcionando en una versión gratuita simplificada.
Funciona en Windows 2000/NT/XP/Vista, Mac OS X.
El objetivo del programa es crear hojas de estilo CSS. Crea hojas de estilo basadas en tu HTML. Edición de CSS, así como PHP, ASP.NET, Ruby, etc. Soporte para CSS3 y HTML5. Información de derechos de autor en Internet (inglés)
Descargar
TopStyle Pro v5 (1999 - 2006). Interfaz y ayuda en inglés. idioma (hay un localizador). Precio: $79,95 Existe una versión gratuita del programa (TopStyle Lite).
El objetivo del programa es crear hojas de estilo CSS para páginas web.
Soporte CSS3 y HTML5. Tendrá acceso a todas las funciones y propiedades de etiquetas más recientes.
Obtenga una vista previa de HTML y CSS mientras crea reglas CSS.
TopStyle es compatible con los navegadores IE, Chromium, Firefox y Safari.
Editor CSS estilo A
Editor CSS Astyle v 3.8 Beta 8. (2003 - 2008). Interfaz y ayuda en inglés. idioma. Peso 1,48 MB. Programa gratuito.
Funciona en Microsoft Windows 98, Me, NT 4, 2000, XP.
Astyle CSS Editor es un editor visual para hojas de estilo CSS.
El trabajo se realiza en modo visual, sin escribir código.
LiveStyle es un programa diseñado para editar hojas de estilo CSS en tiempo real. Peso 44,7 MB.
Cualquier cambio que realice en la hoja de estilo se refleja inmediatamente en la página web actual (sin actualizar la página).
LiveStyle se instala como una extensión para el navegador Google Chrome o el editor Sublime Text y puede funcionar con proyectos de cualquier tamaño: desde pequeños sitios de una página hasta sitios web enormes. E incluso puedes trabajar con tu sitio web.
Cuando instala LiveStyle, por ejemplo, como una extensión para Google Chrome, el icono del programa aparece en la barra de herramientas del navegador.
Revisión de vídeo
Descargar
LiveRecarga v 0.9. Peso 10,3 MB. Funciona en Mac, Windows, Linux.
Se utilizan como extensiones con los navegadores Safari, Chrome, Firefox y Mobile Safari). En sus funciones y finalidad, LiveReload es similar al programa LiveStyle.
Descargar
CSS simple v2.3 (2016). Interfaz en inglés idioma. Peso 5,9 MB. Programa gratuito. Funciona en Mac OS X y Windows.
CSS simple ("CSS simple"): un programa simple para crear hojas de estilo en formato CSS2.
Le permite diseñar rápidamente el área principal de la página (el área
Caja de herramientas CSS gratuita
Caja de herramientas CSS gratuita v 1.2 (1999 - 2008). Interfaz en inglés idioma. Peso 1,4 MB. Programa gratuito.
El propósito de Free CSS Toolbox es crear, editar y verificar código CSS.
El programa también incluye búsqueda, validador CSS, formateador CSS y compresor CSS. Actualmente, el desarrollo del programa ha sido interrumpido; ha sido reemplazado por otro programa de este autor, Rapid CSS editor.
Descargar
Editor CSS rápido
Editor rápido de CSS 2018 v 15.4 (2004 - 2018). Interfaz en ruso, ayuda en inglés. idioma. Peso 24,7 MB. Precios: Rapid CSS 2018 - $49.95, Rapid CSS Personal (uso personal) - $39.95 Funciona en Windows XP, Vista, 7, 8 10.
El objetivo del programa es crear hojas de estilo (CSS). Al mismo tiempo, el editor Rapid CSS también se puede utilizar para trabajar con páginas HTML.
Editor ArduoCSS
Editor ArduoCSS v 1.0.0. Interfaz en inglés idioma. Peso 5,3 MB. Programa gratuito.
El propósito de ArduoCSS es crear hojas de estilo CSS.
El trabajo se realiza en modo visual. Vista previa disponible. Programa fácil de usar.
- Traducción
Este no es un intento de crear una lista de todas las herramientas de desarrollo CSS existentes. Sólo unos pocos, los más útiles, fueron seleccionados y colocados en las categorías apropiadas.
Para que una herramienta sea realmente útil, debe contar con una buena documentación y una interfaz fácil de usar. Lamentablemente, algunas de las herramientas de la lista no cumplen plenamente estos criterios. Si alguien conoce mejores alternativas con una interfaz más amigable y más funcionalidad, escriba en los comentarios.
Diseños
Generador de diseño CSSEste generador puede crear un diseño de tres columnas (una, dos) con un diseño flotante o fijo que contiene un encabezado y pie de página. Las dimensiones se pueden especificar en px, em o %.
Más allá de CSS
MásCSSMoreCSS es una biblioteca de JavaScript dirigida a diseñadores que le permite escribir código de estilo CSS para crear ventanas emergentes, información sobre herramientas, menús de pestañas, tablas de cebra, estilos de lista enriquecidos y transparencia entre navegadores.
MENOS – CSS más eficiente
Less es una joya de Ruby que extiende CSS agregando características como variables, mixins, operaciones y reglas anidadas. Basta con cambiar el nombre de los archivos .css a .less para obtener todas estas funciones.
DtCSS
DtCSS es un script PHP que procesa archivos CSS, permitiéndoles usar selectores anidados, combinación de colores, etc. DtCSS lee un archivo CSS con instrucciones especiales escritas para DtCSS y genera CSS normal. Hay un sistema de almacenamiento en caché inteligente.
SASS es un compilador de hojas de estilo. Muy conveniente: formato con sangría, como en Python, mixins con parámetros (casi funciones), variables y operaciones sobre ellos.
Etiquetas:
- CSS
- herramientas de desarrollo
El editor CSS en línea es una herramienta para editar fácilmente código CSS. Ahora puedes editar archivos CSS incluso sin un conocimiento profundo de las reglas CSS. Simplemente apunte y haga clic, ajuste los controles deslizantes y confirme su trabajo. Así, todo el trabajo se realiza muy rápidamente y con el mínimo esfuerzo.
Tres mejores editores de CSS en línea:
Editar código CSS es una tarea bastante difícil, especialmente cuando estos archivos se vuelven enormes y confusos. A veces sólo necesitamos editar un pequeño fragmento de código proporcionado con una plantilla gratuita o comprada. No todos los webmasters son expertos en CSS. Por lo tanto, esta herramienta le ayudará a realizar el trabajo sin ningún conocimiento o habilidad especial. Si bien el complemento Firebug para Firefox ayuda mucho en este sentido, no es una herramienta independiente. Hoy quiero hablarles de una herramienta especial: el editor CSS en línea.
¿Cómo trabaja?
Editar un archivo CSS y guardar cambios
Puede descargar y probar la versión gratuita del editor CSS en línea. El panel del editor principal está dividido en tres ventanas principales. Barra de URL, panel de control y ventana de vista previa. Primero ingresamos la URL de la página. El editor detectará todos los archivos CSS que se utilizan en la página. Una vez que se abre el archivo, todos los cambios en el archivo CSS se realizan en el panel de control y luego se muestran en la pantalla de vista previa. También puede obtener una vista previa de la página en 9 navegadores integrados. La página de vista previa es diferente en diferentes navegadores, lo que le permite hacer que un archivo CSS sea compatible con todos los navegadores. Una vez que haya terminado de editar, puede guardar los cambios utilizando el cliente FTP integrado cargándolos en la ubicación original del servidor.
Edición CSS WYSIWYG
Propiedades visuales del editor
Aquí estamos hablando de la aplicación Stylizer del editor de escritorio, pero es necesario descargarla, no está en línea, a diferencia de las mencionadas anteriormente.
El editor CSS en línea tiene algunas propiedades únicas que antes no existían. La característica más conveniente y notable es Bullseye. Con la herramienta Bullseye habilitada, puede desplazarse sobre elementos específicos de una página web en modo de vista previa, y la herramienta le mostrará solo aquellas líneas de código CSS en el panel de control que generan ese elemento. La función Steak out hace lo contrario. Señale una línea de código CSS y la herramienta obtendrá una vista previa del elemento en la página que se basa en esa línea de código. La edición de atributos como el relleno, los márgenes y el tamaño de fuente se puede realizar con el mouse. Los cambios se reflejan inmediatamente en el panel de vista previa.
Otras funciones y herramientas útiles
El editor CSS en línea incluye muchas propiedades y herramientas convenientes. Lo más importante y conveniente: un selector de color con la capacidad de usar un cuentagotas, buscar y reemplazar texto en un archivo CSS, una regla para posicionamiento y cambios, una lupa para un posicionamiento más preciso, validación de sintaxis CSS incorporada.
Esta es exactamente la herramienta que te ayudará mucho. Especialmente si no te consideras un gurú de CSS. Es una herramienta visual y WYSIWYG. El resultado de los cambios realizados se puede ver inmediatamente en la misma ventana. Apuesto a que este software es único y personalmente te lo recomiendo mucho. Yo mismo lo uso para crear y editar plantillas de Joomla. Puede probar la demostración y decidir usted mismo si necesita dicha herramienta.
