Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Agregar css personalizado al código html con jsoup

Estoy trabajando en una aplicación para Android, que carga una página HTML y la muestra en una vista web. El problema es que quiero añadir mi css personalizado (el HTML cargado no tiene ningún CSS o enlace a un css). ¿Cómo puedo añadir el css personalizado al código HTML usando jsoup? No puedo modificar el html. ¿Y cómo la webview puede abrirla después? Gracias

3 Solutions collect form web for “Agregar css personalizado al código html con jsoup”

De varias maneras. Puede utilizar el Element#append() para añadir un poco de HTML al elemento.

 Document document = Jsoup.connect(url).get(); Element head = document.head(); head.append("<link rel=\"stylesheet\" href=\"http://example.com/your.css\">"); 

O bien, utilice el Element#attr(name, value) para agregar atributos a los elementos existentes. He aquí un ejemplo que añade style="color:pink;" A todos los enlaces.

 Document document = Jsoup.connect(url).get(); Elements links = document.select("a"); links.attr("style", "color:pink;"); 

De cualquier manera, después de la modificación obtener la cadena HTML final por Document#html() .

 String html = document.html(); 

Escríbalo al archivo por PrintWriter#write() (con el charset correcto).

 String charset = Jsoup.connect(url).response().charset(); // ... Writer writer = new PrintWriter("/file.html", charset); writer.write(html); writer.close(); 

Finalmente, ábrala en la vista web. Ya que no puedo decirlo desde la parte superior de la cabeza, aquí es sólo un enlace con un ejemplo que creo que es útil: WebViewDemo.java . He encontrado el enlace en este blog por el camino (que a su vez encontró por Google).

Probablemente la forma más fácil es buscar y reemplazar en el texto HTML para insertar sus estilos personalizados, antes de cargarlo en su WebView . Hago esto en mi aplicación BBC News para restyle la página del artículo de noticias ligeramente. Mi código se ve así:

 text = text.replace("</head>", "<style>h1 {font-size: x-large;} h1, div.date, div.storybody, img {margin:4px; padding:4px; line-height:1.25;}</style></head>"); 

Vea cómo busco y reemplazo en la etiqueta de la head final (incluida mi propia etiqueta </head> en el segmento reemplazado, lo que garantiza que el nuevo fragmento vaya en el ritmo adecuado en la página.

Hay algunas maneras de incluir ccs en html

Tis yo uso si usted lo tiene almacenado como archivo externo:

 <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> 

Si quiere ponerlo en el archivo html:

 <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> 

O si desea modificar una etiqueta individual:

 <p style="color:sienna;margin-left:20px">This is a paragraph.</p> 

Editar

Cualquiera de estos ejemplos no debe tener ningún problema con la visualización.

Ref: W3 Escuelas CSS

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.