html 编辑器样式 怎么与前台页面本身的样式不冲突

Posted 2023-05-17

在制作网站的过程中，有时需要利用编辑器提交文章到前台页面显示，在后台编辑的时候是可以自己添加样式的，但是编辑好的文章发布到前台就会受到前台页面的css样式影响，而变成我不想要的布局。有哪位高手有比较好的解决方法吗？

后台编辑器所添加的样式都是在追加或者重写某些公共样式，本人建议在公共样式表内写一套对你要发布内容的区域的样式进行重写，比如给这个区域放在一个DIV内，并且给一个单独的class，使这个区域内标签元素的所有样式属性全部清除或者重写，这样一来，你在后台编辑器所编辑的内嵌样式可以完全重写你样式表内的属性。 参考技术A 你自己写样式不要直接用html元素来写样式,
要用也是类后面更元素(.xxxx p) 这样你编辑器里的内容不要放在.xxx 类里面就好 参考技术B 因为你网站的样式在代码中起作用都是在那个元素上加了个class属性,你把你自己编写的文章中的样式值接写在元素的style里面,这样在前台页面执行完毕之后你再调用js方法,去掉你自己写的文章的元素上的class属性就好了啊 参考技术C 不要定义编辑器生成的样式标签。 参考技术D 编辑前把前台和后台样式改为一致。

怎样在css样式表中加入自己的图片

方法和详细的操作步骤如下：

1、第一步，打开html编辑器并创建一个新的html文件，具体见下面的图示，进入到下一步骤中。

2、第二步，新建完一个新的html文件后，在index.html的<style>标签中，输入如下所示的CSS代码，具体见下面的图示，进入到下一步骤中。

3、第三步，输入完CSS代码之后，接下来运行index.html页面。
可以发现，本地图片通过背景图片中的本地路径成功调用为了背景图片，具体见下面的图示。这样，图片就成功加入了。

参考技术A css是用来定义样式的，要引入图片要在HTML文件里面用标签img，具体样式<img src="图片地址">,如果是背景图片就用CSS样式定义，background:url(图片地址) no-repeat;背景图片是不平铺的，如果是平铺的把no-repeat换成repeat 参考技术B 可以在CSS里面用background-image:url(你的图片地址)。这样来加入图片，展现到网页中。

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 参考技术C <div id="bgimg"></div>
#bgimg
background: #333 url(图片路径) center center no-repeat;

第一个参数，图片底层的背景颜色
第二个参数，图片路径
第三个参数，图片上下的相对位置（其他参数left,right）
第四个参数，图片左右的相对位置（top,bottom）
第五个参数，图片的重复（其他参数 repeat,repeat-x,repeat-y） 参考技术D css样式表是决定 背景

.xxxbackground-img:url(图片路径/名称)