เป็นไปได้หรือไม่ที่จะรวมไฟล์ CSS หนึ่งไฟล์ไว้ในไฟล์อื่น?

781

css

— Gaizka Allende
แหล่งที่มา

26

เพียงแค่ fyi การทำเช่นนี้จะไม่บันทึกคำขอ HTTP มันช่วยให้คุณไม่ต้องรวมไฟล์. css ที่นำเข้ามาที่อื่น

— ต. ไบรอันโจนส์

1

ฉันจะเหมือนกับ CSS อื่นมาก่อนและไม่ใช่วิธีปฏิบัติที่ดีที่สุด

— Gaizka Allende

1086

ใช่:

@import url("base.css");

บันทึก:

@importกฎต้องนำหน้ากฎระเบียบอื่น ๆ (ยกเว้น@charset)
@importคำสั่งเพิ่มเติมต้องมีการร้องขอเซิร์ฟเวอร์เพิ่มเติม เป็นทางเลือกเชื่อม CSS ทั้งหมดเป็นไฟล์เดียวเพื่อหลีกเลี่ยงการร้องขอ HTTP หลายรายการ ยกตัวอย่างเช่นคัดลอกเนื้อหาของbase.cssและspecial.cssเข้าและการอ้างอิงเท่านั้นbase-special.cssbase-special.css

— เควินอ่าน
แหล่งที่มา

143

ใช่. การนำเข้าไฟล์ CSS ไปยังไฟล์ CSS อื่นเป็นไปได้

มันจะต้องเป็นกฎข้อแรกในรูปแบบแผ่นโดยใช้กฎ @import

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

ข้อแม้เดียวคือเว็บเบราว์เซอร์รุ่นเก่าจะไม่สนับสนุน อันที่จริงนี่เป็นหนึ่งใน 'แฮ็ค' CSS เพื่อซ่อนสไตล์ CSS จากเบราว์เซอร์รุ่นเก่า

อ้างถึงรายการนี้สำหรับการสนับสนุนเบราว์เซอร์

— Ronnie Liew
แหล่งที่มา

42

@import url("base.css");ทำงานได้ดี แต่จำไว้ว่าทุก@importคำสั่งเป็นคำขอใหม่ไปยังเซิร์ฟเวอร์ นี้อาจจะไม่เป็นปัญหาสำหรับคุณ @importแต่เมื่อประสิทธิภาพที่ดีที่สุดเป็นสิ่งจำเป็นที่คุณควรหลีกเลี่ยง

— ยีน
แหล่งที่มา

2

ไฟล์ CSS ไม่ถูกแคช? ดังนั้นจะขอไฟล์เพียงครั้งเดียว ดูเหมือนเล็กน้อยที่จะกังวล

— endolith

1

หากคุณไม่ลดขนาดไฟล์ css ของคุณเป็นไฟล์เดียวใช่แล้วคุณจะถูกต้อง แต่เมื่อเป็นเช่นนั้นคุณจะเรียกไฟล์ css เพียงไฟล์เดียว ถูกต้องฉันถ้าฉันผิดแน่นอน

— mjwrazor

27

@importกฎCSS ทำเช่นนั้น เช่น,

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

— Sören Kuklau
แหล่งที่มา

16

ใช่.

@import "your.css";

กฎเป็นเอกสารที่นี่

— กอร์ดอนวิลสัน
แหล่งที่มา

11

ในบางกรณีเป็นไปได้ที่ใช้ @import "file.css" และเบราว์เซอร์ที่ทันสมัยส่วนใหญ่ควรรองรับสิ่งนี้เบราว์เซอร์ที่เก่ากว่าเช่น NN4 จะไปเล็กน้อย

หมายเหตุ: คำสั่งการนำเข้าจะต้องนำหน้าการประกาศอื่น ๆ ทั้งหมดในไฟล์และทดสอบในเบราว์เซอร์เป้าหมายทั้งหมดของคุณก่อนที่จะใช้ในการผลิต

— seanb
แหล่งที่มา

8

ใช่ใช้ @import

ข้อมูลรายละเอียดได้อย่างง่ายดาย googled สำหรับคนที่ดีที่http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

— DarenW
แหล่งที่มา

6

ใช่มันเป็นไปได้โดยใช้ @import และให้เส้นทางของไฟล์ css เช่น

@import url("mycssfile.css");

หรือ

@import "mycssfile.css";

— นัน
แหล่งที่มา

6

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

นั่นคือวิธีที่ดีที่สุดในการรวมสไตล์ชีต css ภายในสไตล์ชีท css โดยใช้ css

— ฟลอยด์
แหล่งที่มา

6

กฎ "@import" สามารถโทรในหลายไฟล์สไตล์ ไฟล์เหล่านี้ถูกเรียกโดยเบราว์เซอร์หรือตัวแทนผู้ใช้เมื่อจำเป็นเช่นแท็ก HTML เรียก CSS

<!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 อย่าใช้ InnerHTMLแต่:

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

ตรงกันข้ามกับคำตอบที่ดีที่สุดไม่แนะนำให้รวมไฟล์ CSS ทั้งหมดไว้ในอันเดียวเมื่อใช้ HTTP / 2.0

— peterC_
แหล่งที่มา

2

นำเข้า bootstrap ด้วย altervista และ wordpress

ฉันใช้สิ่งนี้เพื่อนำเข้า bootstrap.css ใน altervista ด้วย wordpress

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

และมันใช้งานได้ดีเพราะมันจะลบรหัสลิงค์ html ถ้าฉันใส่มันลงในหน้า

— Giovanni G. PY
แหล่งที่มา

1

ใช่คุณสามารถนำเข้า css หนึ่งไปยังอีกที่หนึ่งได้ง่าย (ที่ใดในเว็บไซต์) คุณต้องใช้สิ่งต่อไปนี้:

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

โปรดสังเกตว่า media = "print" มี 2 สไตล์ชีท: myap-print.css และ myap-screen.css มันมีผลเช่นเดียวกับการรวม myap-screen.css ภายใน myap-print.css

— โคลินคีแนน
แหล่งที่มา

ไม่ไม่ถูกต้อง นี่คือการรวมไฟล์ CSS หลายไฟล์จากภายในไฟล์ HTML ไม่รวมถึงไฟล์ CSS จากภายในไฟล์ CSS อื่น

— TylerH

0

ร้องเพลง CSS @import Rule ที่นี่

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

— Dinesh Vaitage
แหล่งที่มา

-3

ฉันสะดุดกับสิ่งนี้และฉันแค่อยากจะบอกว่าโปรดอย่าใช้ @import in CSS !!!! คำสั่งการนำเข้าจะถูกส่งไปยังลูกค้าและลูกค้าทำตามคำขออื่น หากคุณต้องการหาร CSS ของคุณระหว่างไฟล์ต่างๆให้ใช้ Less ใน Less คำสั่ง import จะเกิดขึ้นบนเซิร์ฟเวอร์และเอาต์พุตจะถูกแคชและไม่สร้างการปรับประสิทธิภาพโดยบังคับให้ไคลเอนต์ทำการเชื่อมต่ออื่น Sass เป็นอีกตัวเลือกหนึ่งที่ฉันไม่ได้สำรวจ ตรงไปตรงมาถ้าคุณไม่ได้ใช้ Less หรือ Sass คุณควรเริ่มต้น http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
แหล่งที่มา

1

ลูกค้าจะทำคำขออื่นไม่ใช่การเชื่อมต่ออื่น และสำหรับคุณภาพมันเป็นวิธีที่ดีในการใช้ css นำเข้า มันจะดีกว่าที่จะมีการนำเข้าเหล่านั้นแทนที่จะเป็นไฟล์ CSS ขนาดใหญ่ที่เติบโตและเติบโตไปพร้อมกับโครงการ ...

— YvesR

3

นี่คือคำแนะนำของทั้ง Google ( developers.google.com/speed/docs/best-practices/

— ......

1

แต่ถึงกระนั้น - มันเป็นเพียงอีกหนึ่งคำขอ อาจมีหลายร้อยรายการสำหรับการโหลดหน้าเว็บที่สมบูรณ์

— Steve Bennett

8

ขวา?! อีกหนึ่งคำขอแทบจะไม่รับประกันว่าการโบกแขนและการปฏิเสธความรับผิดชอบทั้งหมด การร้องขอไม่ใช่วิธีปฏิบัติที่ไม่ดี -1 ถึงคำตอบ - LESS และ SASS Cargo ลัทธิ

— Chris Baker

มันเป็นเพียงคำขอเดียวที่มากกว่า .. แต่คุณสามารถนำเข้า CSS มากขึ้นในอันเดียวและพวกมันจะถูกดาวน์โหลดแบบขนาน

— wh1sp3r