Bir CSS dosyasını diğerine eklemek mümkün müdür?

782

css

— Gaizka Allende
kaynak

26

Sadece bir fyi, bunu yapmak bir HTTP isteği kaydetmez. Sadece içe aktarılan .css dosyasını başka bir yere eklemek zorunda kalmazsınız.

— T. Brian Jones

1

Daha önce başka bir CSS

— eklemekle

1087

Evet:

@import url("base.css");

Not:

@importKural önce olmalıdır (hariç diğer tüm kuralları @charset).
Ek @importbildirimler için ek sunucu istekleri gerekir. Alternatif olarak, birden çok HTTP isteğinden kaçınmak için tüm CSS'yi tek bir dosyada birleştirin. Örneğin, içeriğini kopyalamak base.cssve special.cssiçine base-special.cssve sadece referans base-special.css.

— Kevin Oku
kaynak

143

Evet. CSS dosyasını başka bir CSS dosyasına aktarmak mümkündür.

@İmport kuralını kullanan stil sayfasındaki ilk kural olmalıdır .

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

Tek uyarı, eski web tarayıcılarının desteklemeyeceğidir. Aslında, bu eski tarayıcılardan CSS stillerini gizlemek için CSS 'kesmek' biridir.

Tarayıcı desteği için bu listeye başvurun .

— Ronnie Liew
kaynak

42

@import url("base.css");Her akılda cezası ama ayı çalışır @importdeyimi sunucuya yeni bir taleptir. Bu sizin için bir sorun olmayabilir, ancak optimum performans gerektiğinde bundan kaçınmalısınız @import.

— Gen
kaynak

2

CSS dosyaları önbelleğe alınmadı mı? Yani sadece bir kez dosya isteyecek mi? endişelenmek önemsiz görünüyor.

— Endolit

1

Eğer css'nizi bir dosyaya küçültmüyorsanız, evet doğrusunuz ama bir kez o zaman sadece bir css dosyasını çağırıyorsunuz. Tabii ki yanılıyorsam düzelt.

— mjwrazor

27

CSS @importkuralı bunu yapar. Örneğin,

@import url('/css/common.css');
@import url('/css/colors.css');

— Sören Kuklau
kaynak

16

Evet.

@import "your.css";

Kural burada belgelenmiştir .

— Gordon Wilson
kaynak

11

Bazı durumlarda @import "file.css" kullanmak mümkündür ve çoğu modern tarayıcı bunu desteklemelidir, NN4 gibi eski tarayıcılar biraz çıldırır.

Not: içe aktarma ifadesi, dosyada kullanılmadan önce dosyadaki diğer tüm bildirimlerden önce gelmeli ve tüm hedef tarayıcılarınızda test etmelidir.

— seanb
kaynak

8

Evet, @import kullanın

ayrıntılı bilgi kolayca googled, iyi bir bilgi http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

— DarenW
kaynak

6

evet @import kullanmak ve css dosyasının yolunu sağlamak mümkündür örn.

@import url("mycssfile.css");

veya

@import "mycssfile.css";

— Vidhi
kaynak

6

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

Bu, css kullanarak bir css stil sayfasına bir css stil sayfası eklemenin en iyi yoludur.

— Floyd
kaynak

6

"@İmport" kuralı birden fazla stil dosyasında çağrı yapabilir. Bu dosyalar gerektiğinde tarayıcı veya Kullanıcı Aracısı tarafından çağrılır, örneğin HTML etiketleri CSS'yi çağırır.

<!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 Dosyası "main.css" Aşağıdaki Sözdizimini İçeriyor:

@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);

Stil öğesine eklemek için createTexNode öğesini innerHTML kullanmayın, ancak:

<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
kaynak

Sadece şunu belirtmek gerekirse, @hylp ithalattan sınıfları geçersiz kılmanın mümkün olduğunu gösterirken (sınıflar projectionve screen?) Bu genellikle hiçbir zaman iyi bir şey değildir. ;)

— Tcll

2

@import url('style.css');

En iyi yanıtın aksine, HTTP / 2.0 kullanırken tüm CSS dosyalarının tek bir yığın halinde toplanması önerilmez

— peterC_
kaynak

2

Altervista ve wordpress ile içe aktarma önyükleme

Ben wordpress ile altervista bootstrap.css almak için kullanın

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

ve bir sayfaya koyarsam html bağlantı rel kodunu sileceği için iyi çalışıyor

— Giovanni G. PY
kaynak

1

Evet Bir css'i diğerine (web sitesinde herhangi bir yerde) kolayca aktarabilirsiniz.

@import url("url_path");

— NARGIS PARWEEN
kaynak

1

Hangi nedenle olursa olsun, @import benim için çalışmadı, ama gerçekten gerekli değil mi?

Html içinde bunun yerine ne yaptım:

  <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">

Media = "print" öğesinin 2 stil sayfası olduğuna dikkat edin: myap-print.css ve myap-screen.css. Bu myap-screen.css dosyasını myap-print.css içine eklemekle aynı etkiyi yaratır.

— Colin Keenan
kaynak

Hayır, bu doğru değil. Bu, başka bir CSS dosyasındaki CSS dosyası dahil değil, bir HTML dosyasındaki birden çok CSS dosyasını içerir.

— TylerH

0

buradan CSS @import Kuralını söyleyin

@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
kaynak

0

Main.css dosyasını oluşturdum ve tüm css dosyalarını buna dahil ettim.

Yalnızca bir main.css dosyası ekleyebiliriz

@import url('style.css');
@import url('platforms.css');

— Dinesh Vaitage
kaynak

-3

Bunun üzerine tökezledi ve sadece LÜTFEN @ IMPORT KULLANMAYIN söylemek istedim !!!! İçe aktarma ifadesi istemciye gönderilir ve istemci başka bir istekte bulunur. CSS'nizi çeşitli dosyalar arasında bölmek istiyorsanız Daha Az kullanın. Daha Azında içe aktarma ifadesi sunucuda gerçekleşir ve çıktı önbelleğe alınır ve istemciyi başka bir bağlantı kurmaya zorlayarak performans cezası oluşturmaz. Sass, benim keşfettiğim bir başka seçenek de değil. Açıkçası, Less veya Sass kullanmıyorsanız, o zaman başlamalısınız. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
kaynak

1

İstemci, başka bir bağlantı değil, başka bir istekte bulunacaktır. Ve kalite için ithalat css kullanmak için iyi bir yoldur. Proje ile büyüyen ve büyüyen büyük bir css dosyası yerine bu ithalata sahip olmak çok daha iyi ...

— YvesR

3

Bu hem Google'ın ( developers.google.com/speed/docs/best-practices/… ) hem de Yahoo'nun ( developer.yahoo.com/performance/rules.html#csslink )

— 18'de WillSeitz

1

Yine de - bu sadece bir istek daha. Tam sayfa yükleme için potansiyel olarak yüzlerce kişi.

— Steve Bennett

8

Sağ?! Bir talep daha, kol sallamayı ve tümüyle büyük harf reddi beyanlarını zorlukla garanti eder. Bir istek kötü bir uygulama değildir. -1 cevap - DAHA AZ ve SASS kargo kült.

— Chris Baker

Sadece bir istek daha var .. ama birine daha fazla CSS alabilirsiniz ve paralel olarak indirilir.

— wh1sp3r