如何在不向元素添加css类的情况下设置页面内容的样式？

Question

我使用CMS作为客户端，客户端不知道CSS他使用WYSIWYG编辑器将​​内容放入页面。客户端在段落（左或右浮动），有序和无序列表，表格中添加段落，图像，图像。当他想要在段落（左或右浮动）中添加图像时出现问题。并且没有添加css类它是不可能的。我不想在内容中添加<div>因为WYSIWYG编辑器无法管理div和客户端在WYSIWYG模式下工作。

如何在不使用css类的情况下设置页面内容的样式？

Answer 1

您将需要您的用户以某种方式向图像添加css类/样式属性 - 而不向图像添加任何内容以告诉它向左或向左浮动它不会向右或向左浮动。

如果您的问题是客户端如何添加类而不必手动编辑html我认为唯一的方法是深入了解wysiwyg编辑器的javascript并在图像添加过程结束时写一些类似的东西：

var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
   //line of code to add class "right" to the image tag
} else {
   //line of code to add class "left" to the image tag
}

添加类的代码应该取决于wysiwyg编辑器的工作方式

Answer 2

您可以尝试使用element selectors或ID selectors向HTML元素添加样式，而无需在其中引用CSS类。

元素选择器会为页面上的所有图像添加边框：

img { border:1px; }

ID选择器仅对ID为'image1'的图像执行相同操作：

img #image1 { border:1px; }

您仍然需要从您的页面引用样式表。

Answer 3

有许多不同的方法可以使CSS Selectors不需要CSS类。例如，要制作适用于p标记内所有img标记的规则，可以这样写：

p img { float: left; }

但是您希望如何确定哪些图像需要右对齐以及哪些图像需要左对齐？该数据是否以任何机器可读格式存在于文档中？

Answer 4

WYSWYG应该具有图像的“对齐”属性（至少是我见过的那些）。然后，您可以使用CSS属性选择器img [align=left] { float:left; }或img [align=right] {float:right;}这不适用于IE 6,7但是，您可以使用JavaScript来模拟这些浏览器。