Jak dołączyć jeden plik CSS w innym?

Podczas opracowywania rozległych projektów lepiej tworzyć osobne pliki dla HTML i CSS. Jak dobrze wiemy, CSS zapewnia liczne właściwości, których programiści mogą użyć do tworzenia stron internetowych i dokumentów HTML. Dlatego idealnym podejściem jest tworzenie wielu plików CSS dla różnych komponentów projektu. Pomaga programistom wyszukiwać określony kod modyfikacji.

Ten post wyjaśni, jak dodać jeden plik CSS do drugiego.

Jak włączyć jeden plik CSS do drugiego?

CSS „@Import Reguła”Jest wykorzystywany do włączenia jednego pliku CSS do drugiego. Sprawdź przykład, aby uzyskać jasne zrozumienie.

Przykład: w tym jeden plik CSS w innym

Najpierw utwórz trzy pliki, jeden HTML i dwa pliki CSS.

Krok 1: Utwórz plik HTML

Utwórz plik HTML, „indeks.html”, A następnie dodaj„„Element w„”Sekcja, jak podano poniżej. Tutaj "rel„Atrybut służy do zdefiniowania związku między HTML a połączonym plikiem oraz„ ”Href”Służy do określenia źródła pliku:

W "”Sekcja wykonaj następujące kroki:

• Dodać "”Element i przypisz dwie klasy”Content-Div" I "książka".
• Dodać "

  „Element do nagłówka i„

  „Element do utworzenia listy.
  • Aby wymienić elementy, dodaj „
  • „Tagi:
  
  

  Książki

  
  
  
  
  • Alchemik
  
  
  • Biegacz latawca
  
  
  
  

  Krok 2: Utwórz plik CSS

  Następnie utwórz „główny.CSS”Plik i dodaj następujący kod:

  .content-div
  szerokość: 400px;
  Wysokość: 300px;
  Margines: Auto;
  kolor tła: RGB (245, 230, 212);
  

  „„.Content-Div”Jest wykorzystywany do dostępu do„„Element zawierający klasę nazwaną„Content-Div”I zastosowano do niego następujące właściwości:

  • "szerokość”Określa szerokość elementu.
  • "wysokość”Dostosowuje wysokość elementu.
  • "margines”Generuje przestrzeń wokół elementu HTML.
  • "kolor tła”Zmienia kolor tła elementu HTML.

  Wyjście

  Krok 3: Utwórz drugi plik CSS

  Następnie utwórz drugi plik CSS, „książka.CSS". Następnie uzyskaj dostęp do nazwy drugiej klasy „.książka”I przypisz następujące właściwości CSS:

  .książka
  Image tła: URL (/obrazy/liście-.jpg);
  Rozmiar tła: okładka;
  Wyściółka: 15px;
  Rozmiar czcionki: 40px;
  Font-Weight: Bold;
  Kolor: RGB (243, 243, 243);
  

  Tutaj:

  • "zdjęcie w tle”Służy do ustawienia obrazu tła poprzez zdefiniowanie adresu URL obrazu.
  • "Rozmiar tła”Określa rozmiar obrazu tła elementu.
  • "wyściółka”Stosuje przestrzeń wewnątrz granicy elementu.
  • "rozmiar czcionki”Ustawia rozmiar czcionki.
  • "grubość czcionki”Określa grubość czcionki.
  • "kolor”Określa kolor czcionki.

  Dodaj "@import”Reguła na szczycie„główny.CSS" plik:

  @Import URL (książki.CSS);

  „„@import”Reguła importuje plik CSS do innego pliku CSS. Na przykład „„książki.CSS”Jest zawarty w„główny.CSS" plik.

  Wyjście weryfikuje, że właściwości CSS obu plików zostały pomyślnie zastosowane:

  Z powodzeniem dołączyliśmy jeden plik CSS w innym.

  Wniosek

  Aby dołączyć jeden plik CSS w drugim, użyj CSS ”@import”Reguła. Reguła „@Import” musi być określona u góry pliku CSS, w którym chcesz dołączyć kolejny plik CSS. Aby połączyć pliki CSS w HTML, „”Tag wraz z„Href„Atrybut, jest używany. Ten post wyjaśnił, jak włączyć jeden plik CSS do drugiego.