既存のhtmlをCSSの競合なしで統合する

ウィジェットのhtmlファイルを既存のhtmlページに統合する必要がありますが、後で多くのCSSの問題が発生しています。主なHTMLのCSSファイルをウィジェットHTMLファイルに適用しないように制限する方法はありますか？既存のhtmlをCSSの競合なしで統合する

**Sample html :** 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" > 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <link href="abc.css" media="screen" rel="stylesheet" type="text/css"/> 
    <script src="abc.js" type="text/javascript"></script> 
</head> 
<body> 


<!-- WIDGET CODE--> 
<!DOCTYPE html> 
<html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <link href="def.css" media="screen" rel="stylesheet" type="text/css"/> 
    <script src="defjs" type="text/javascript"></script> 
</head> 

<body> 
.......widget html code 
</body> 
</html> 



<body> 
</html>

出典

2016-09-16 yusuf

ウィジェットのCSSファイル内のクラス名を変更することで影響を受ける共通のクラスがある場合 – brk

HTMLでは、1つのファイルに2つのHTMLドキュメントを含めることはできません。これを解決する

一つのアプローチは、あなたのメインのHTMLにはiframeを使用することです：

<iframe src="widget.html"></iframe>

ですから、独自のスタイルとJavaScriptのスクリプトを持つ独自のHTMLファイルにあなたのウィジェットを作成し、自分のメインに埋め込みますiframeを使ったHTMLファイル（あなたのウィジェットはメインのHTMLスクリプトやスタイルから完全に分離されていて、影響を受けません）。

もう1つの方法は、あなたのウィジェットのために別個のCSSを作成してそれをあなたのメインHTMLに含めることです。そしてあなたのメインHTMLボディにあなたのウィジェットのマークアップ（htmlとbodyタグなし）を挿入します。

あなたはこのような何か実行して、あなたのCSSの残りの部分と衝突しないのスタイルウィジェットのウィジェットのCSSファイルで使用すると、「名前空間」を作成する必要があります（私は通常、何かを使用したい

.my-widget-name { 
    // your widget styles 
} 
.my-widget-name span.name { 
    // your widget style 
} 
.my-widget-name .box { 
    // your widget style 
} 
....... 
.......

は、 LESSのような、しかし、上に示した従来のCSSの例です）

「私のウィジェット名」だけあなたのウィジェットが使用しているユニークなクラス名であり、この下に、あなたのウィジェットのスタイルのすべてをサブクラス化することによって必要があります基本的にはそれを他のCSSと区別しています。

ほんの少し役に立ちます

出典

2016-09-16 05:45:26 codelock

既存のhtmlをCSSの競合なしで統合する

答えて

関連する問題