क्या एक सीएसएस फ़ाइल को दूसरे में शामिल करना संभव है?

779

क्या एक सीएसएस फ़ाइल को दूसरे में शामिल करना संभव है?

css 
— गिजका अलेंदे
स्रोत
26
बस एक फी, ऐसा करने से HTTP अनुरोध नहीं बचता है। यह आपको आयातित .css फ़ाइल को कहीं और शामिल करने से बचाता है।
— टी। ब्रायन जोन्स
1
मैं लगभग एक ही सीएसएस को शामिल करने से पहले और प्रथाओं का सबसे अच्छा नहीं होगा
— Gaizka Allende

जवाबों:

1084

हाँ:

@import url("base.css");

ध्यान दें:

  • @importनियम पूर्व में होना चाहिए (को छोड़कर अन्य सभी नियमों @charset)।
  • अतिरिक्त @importबयानों के लिए अतिरिक्त सर्वर अनुरोधों की आवश्यकता होती है। एक विकल्प के रूप में, कई HTTP अनुरोधों से बचने के लिए सभी सीएसएस को एक फ़ाइल में संक्षिप्त करें। उदाहरण के लिए, की सामग्री की प्रतिलिपि base.cssऔर special.cssमें base-special.cssऔर केवल संदर्भ base-special.css।
— केविन पढ़ें
स्रोत
143

हाँ। CSS फ़ाइल को दूसरी CSS फ़ाइल में आयात करना संभव है।

यह @import नियम का उपयोग करके स्टाइल शीट में पहला नियम होना चाहिए ।

@import "mystyle.css";
@import url("mystyle.css");

केवल चेतावनी यह है कि पुराने वेब ब्राउज़र इसका समर्थन नहीं करेंगे। वास्तव में, यह सीएसएस शैलियों को पुराने ब्राउज़रों से छिपाने के लिए सीएसएस 'हैक' में से एक है।

ब्राउज़र समर्थन के लिए इस सूची का संदर्भ लें ।

— रोनी Liew
स्रोत
42

@import url("base.css");मन में ठीक काम करता है लेकिन भालू है कि हर @importबयान सर्वर को एक नया अनुरोध है। यह आपके लिए एक समस्या नहीं हो सकती है, लेकिन जब इष्टतम प्रदर्शन की आवश्यकता होती है तो आपको इससे बचना चाहिए @import।

— जीन
स्रोत
2
CSS फ़ाइल कैश नहीं हैं? तो यह केवल एक बार फ़ाइल का अनुरोध करने जा रहा है? चिंता करने के लिए तुच्छ लगता है।
— एंडोलिथ
1
यदि आप अपनी css को एक फ़ाइल में नहीं जमा कर रहे हैं, तो हाँ आप सही हैं लेकिन एक बार यह हो जाने के बाद आप सिर्फ एक css फ़ाइल को कॉल कर रहे हैं। सही होने पर मुझे सही करें।
— mjwrazor
11

कुछ मामलों में यह @import "file.css" का उपयोग करके संभव है, और अधिकांश आधुनिक ब्राउज़रों को इसका समर्थन करना चाहिए, पुराने ब्राउज़र जैसे कि NN4, थोड़ा पागल हो जाएगा।

नोट: आयात विवरण को फ़ाइल में अन्य सभी घोषणाओं से पहले होना चाहिए, और इसे उत्पादन में उपयोग करने से पहले अपने सभी लक्षित ब्राउज़रों पर परीक्षण करना चाहिए।

— seanb
स्रोत
6

हाँ यह @import का उपयोग करके संभव है और उदाहरण के लिए css फ़ाइल का पथ प्रदान करना

@import url("mycssfile.css");

या 

@import "mycssfile.css";
— vidhi
स्रोत
6

@import("/path-to-your-styles.css");

Css का उपयोग करके css स्टाइलशीट में css स्टाइलशीट को शामिल करना सबसे अच्छा तरीका है।

— फ्लोयड
स्रोत
6

"@Import" नियम कई शैलियों फ़ाइलों में कॉल कर सकता है। इन फ़ाइलों को ब्राउज़र या उपयोगकर्ता एजेंट द्वारा बुलाया जाता है जब जरूरत होती है जैसे HTML टैग सीएसएस को कॉल करते हैं।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>

CSS फ़ाइल "main.css" में सिंटैक्स शामिल है:

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

स्टाइल एलिमेंट का उपयोग करने के लिए createTexNode इनर HTML का उपयोग न करें लेकिन:

<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
    @import 'fineprint.css' print;
    @import 'bluish.css' projection, tv;
    @import 'custom.css';
    @import 'chrome://communicator/skin/';
    @import 'common.css' screen, projection;
    @import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>
— Chetabahana
स्रोत
केवल इंगित करने के लिए, जबकि @hylp यह इंगित कर रहा है कि आयातों (कक्षाओं projectionऔर screen?) से कक्षाओं को ओवरराइड करना संभव है, यह आमतौर पर एक अच्छी बात नहीं है। ;)
— Tcll
2 
@import url('style.css');

सबसे अच्छे उत्तर के विपरीत, HTTP / 2.0 का उपयोग करते समय सभी CSS फाइलों को एक चंक में एकत्रित करने की अनुशंसा नहीं की जाती है

— peterC_
स्रोत
2

परिवर्तन बूटस्टा और वर्डप्रेस के साथ बूटस्ट्रैप आयात करें

मैं इसे वर्डप्रेस के साथ ट्रांसफ़ॉर्मविस्टा में bootstrap.css आयात करने के लिए उपयोग करता हूं

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

और यह ठीक काम करता है, क्योंकि यह html लिंक rel कोड को डिलीट कर देता है अगर मैं इसे किसी पेज में डालता हूं

— जियोवन्नी जी। पी। वाई
स्रोत
1

हां, आप आसानी से एक सीएसएस दूसरे (वेबसाइट में किसी भी जगह) पर आयात कर सकते हैं।

@import url("url_path");
— NARGIS PARWEEN
स्रोत
1

जो भी कारण के लिए, @import मेरे लिए काम नहीं किया, लेकिन यह वास्तव में आवश्यक नहीं है?

यहाँ मैंने इसके बजाय html के भीतर क्या किया है:

  <link rel="stylesheet" media="print" href="myap-print.css">
  <link rel="stylesheet" media="print" href="myap-screen.css">
  <link rel="stylesheet" media="screen" href="myap-screen.css">

ध्यान दें कि मीडिया = "प्रिंट" में 2 स्टाइलशीट हैं: myap-print.css और myap-screen.css। यह myap-screen.css के साथ myap-print.css को शामिल करने जैसा ही प्रभाव है।

— कॉलिन कीनन
स्रोत
नहीं, यह सही नहीं है। यह एक HTML फ़ाइल के भीतर से कई सीएसएस फ़ाइलें शामिल है, अन्य सीएसएस फ़ाइल के भीतर से सीएसएस फ़ाइल शामिल नहीं है।
— टायलरएच
0

यहां सीएसएस @import नियम गाएं 

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;
— Pocky_Thailand
स्रोत
0

मैंने main.css फ़ाइल बनाई है और इसमें सभी css फाइलें शामिल की हैं।

हम केवल एक main.css फ़ाइल शामिल कर सकते हैं

@import url('style.css');
@import url('platforms.css');
— दिनेश वैटरेट
स्रोत
-3

मैं इस पर लड़खड़ाया और मैं कहना चाहता था कि कृपया CSS में इसका उपयोग न करें !!!! आयात विवरण ग्राहक को भेजा जाता है और ग्राहक एक और अनुरोध करता है। यदि आप अपने CSS को विभिन्‍न फ़ाइलों के बीच विभाजित करना चाहते हैं तो कम का उपयोग करें। कम में आयात विवरण सर्वर पर होता है और आउटपुट कैश हो जाता है और क्लाइंट को दूसरा कनेक्शन बनाने के लिए मजबूर करके एक प्रदर्शन जुर्माना नहीं बनता है। सास भी एक विकल्प है जो मैंने नहीं खोजा है। सच कहूं, अगर आप कम या सैस का इस्तेमाल नहीं कर रहे हैं तो आपको शुरू कर देना चाहिए। http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
स्रोत
1
यह ग्राहक एक और अनुरोध करेगा, दूसरा कनेक्शन नहीं। और गुणवत्ता के लिए यह आयात सीएसएस का उपयोग करने का एक अच्छा तरीका है। एक बड़ी सीएसएस फ़ाइल के बजाय उन आयातों को करना बेहतर है जो परियोजना के साथ बढ़ता है और बढ़ता है ...
— YvesR
3
— अनुशंसा है
1
फिर भी - यह केवल एक और अनुरोध है। पूर्ण पृष्ठ लोड के लिए संभावित सैकड़ों में से।
— स्टीव बेनेट
8
सही?! एक और अनुरोध शायद ही हथियार लहराते हुए और सभी-कैप्स अस्वीकरणों को वारंट करता है। एक अनुरोध बुरा अभ्यास नहीं है। उत्तर के लिए -1 - लेस और एसएएस कार्गो पंथ।
— क्रिस बेकर
खैर, यह केवल एक अनुरोध अधिक है .. लेकिन आप एक में अधिक सीएसएस आयात कर सकते हैं और वे समानांतर रूप से डाउनलोड किए जाते हैं।
— wh1sp3r
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.