Затем в main.css импортируем несколько других CSS-файлов, header.css для шапки сайта, navbar.css для меню, и так далее:

 @import url("header.css");@import url("navbar.css");@import url("footer.css");@import url("grid.css"); @import url("header.css"); @import url("navbar.css"); @import url("footer.css"); @import url("grid.css");    Скопировать Скопировано Не удалось скопировать   

Преимущества

Скопировать ссылку "Преимущества" Скопировано

По мере того как ваш проект растёт в размерах и сложности, поддержка CSS-файлов тоже усложняется. @import помогает разбить массивную таблицу стилей на более мелкие и понятные части.

Недостатки

Скопировать ссылку "Недостатки" Скопировано

Подключение стилей при помощи CSS-файла, в котором директивы @import подключают другие файлы, может значительно увеличить время отрисовки страницы. Браузер узнает о существовании других CSS-файлов слишком поздно, а если и в них окажутся импорты, то всё будет ещё хуже.

Если вам очень нужно подключить несколько файлов, лучше добавить несколько элементов .

Иногда так всё же делают при разработке сайтов, чтобы не тратить время на сборку многих файлов и просто подключать их одним файлом с кучей импортов. Но перед публикацией сайта все эти импорты «склеиваются» в один файл для более эффективной загрузки.

Инлайн-стили

Скопировать ссылку "Инлайн-стили" Скопировано

В этом варианте элементам, которые необходимо оформить, добавляется атрибут style . Значением этого атрибута могут быть свойства и значения CSS, которые и применятся к элементу:

 
Заголовок
Текст h1 style="сolor: yellow; margin: 10px 20px">Заголовокh1> p style="text-align: right; font-size: 12px">Текстp>    Скопировать Скопировано Не удалось скопировать   

Преимущества

Скопировать ссылку "Преимущества" Скопировано

• Как и со встроенными стилями, браузеру не нужно запрашивать файл, что ускоряет рендеринг.
• Не нужно писать селекторы, потому что стили применяются сразу к нужному элементу.
• Удобно отлаживать код или делать быстрые правки прямо в админке, без разворачивания проекта.

Недостатки

Скопировать ссылку "Недостатки" Скопировано

Однако несмотря на преимущества, инлайн-стили — это антипаттерн. Недостатков у этого подхода слишком много.

Приоритет. У инлайн-стилей наивысший приоритет, их нельзя переопределить с помощью селекторов по идентификатору, классу или тегу во внешнем CSS. Единственный способ это сделать — добавить !important к значению свойства. Но этот приём тоже считается плохой практикой.

Переиспользование. При использовании инлайн-стилей мы будем вынуждены добавлять инлайн-стили к каждому элементу, который необходимо оформить. Если элементов на странице много, прописывать стили вручную станет неудобно.

Всё в одну кучу. Оформление при помощи инлайн-стилей нарушает принцип «разделения содержимого и оформления».

Псевдоклассы и псевдоэлементы. В инлайн-стилях нельзя использовать псевдоклассы и псевдоэлементы.

Восприятие кода. Если писать стили внутри атрибута style , то HTML становится трудно читать. Логическая структура перестаёт быть видна, стили размазываются по всему коду. И чем крупнее проект, тем сложнее управлять оформлением.

Согласитесь, что такой код читать намного труднее:

 
Заголовок  
У моей кошки светло-синие глаза.  h1 style="сolor: yellow; margin: 10px 20px 15px 10px;">Заголовокh1> div style="border: 1px solid red; max-widht: 500px; margin: auto"> p>У моей кошки span style="color: lightblue;">светло-синиеspan> глаза.p> div>    Скопировать Скопировано Не удалось скопировать   

 
Заголовок  
У моей кошки светло-синие глаза.  h1 class="title">Заголовокh1> div class="wrapper"> p>У моей кошки span class="eyes">светло-синиеspan> глаза.p> div>    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку "На практике" Скопировано

Никита Канищев советует

Скопировать ссылку "Никита Канищев советует" Скопировано

🛠 Одна из самых распространённых областей применения инлайн-стилей — почтовые рассылки.

По соображениям безопасности почтовые службы (например, Яндекс.Почта или Gmail) блокируют загрузку внешних ресурсов, в том числе и файлы стилей. Поэтому разработчикам ничего не остаётся, кроме как использовать инлайн-стили.

Вот так может выглядеть HTML-разметка при вёрстке письма:

  border="0" cellpadding="0" cellspacing="0" width="100%" style block-code__original-line"> font-size:28px;font-weight:500; text-align:center;padding:0;margin:0">    style="padding-top:20px;padding-bottom:20px;" align="right" valign="middle" >  style block-code__original-line"> font-size:12px;font-weight:400; line-height:20px;padding:0;margin:0" > Привет, это рассылка!      table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#000;font-family:Poppins,sans-serif; font-size:28px;font-weight:500; text-align:center;padding:0;margin:0" > tbody> tr> td style="padding-top:20px;padding-bottom:20px;" align="right" valign="middle" > p style="color:#bbb;font-family:'Open Sans',sans-serif; font-size:12px;font-weight:400; line-height:20px;padding:0;margin:0" > Привет, это рассылка! p> td> tr> tbody> table>    Скопировать Скопировано Не удалось скопировать   

Источник

Почему не подключаются стили?

И html с включением style.css :

но почему то не видит стили с colors и другие. В чем проблема?

Ты импортируешь css в scss. Соответственно, срабатывает стандартный css импорт, а этих css файлов рядом нет. Код импортируемых файлов при css импорте не включается в компилируемый файл.

Верно. Sass, к сожалению, по умолчанию не включает импорты css файлов в результирующий файл, и не имеет специальных конструкций для включения (как в less и stylus)

Хмм вы не серваке компилите сасс что ли?
Я все делаю через prepros (или koala - она бесплатная) - локально весь сасс компилиться и минифируеться и только потом я заливаю на сервак скомпилиный файл.
Плюсы для вас - вы сразу видите ошибки в коде, компилятор выдаст ошибку если у вас не правильно подключен файл или ошибка в коде.
И кстати компилит он все в фоновом режиме, очень удобно. рекомендую попробовать 🙂

Войдите, чтобы написать ответ

Как сделать обязательный скролл слайдера при прокрутке страницы?

Источник

Не могу импортировать CSS файлы в React Project

Когда я пытался импортировать файл CSS, он показал ошибку, что загрузчики отсутствуют. поэтому я установил пакеты css-loader и style-loader. если я добавлю эти пакеты в webpack.config.js, я получу следующую ошибку. Я не знаю, как решить это.

ERROR in ./node_modules/css-loader!./src/index.js Module build failed: Unknown word (1:1) > 1 | import React from 'react'; | ^ 2 | import ReactDOM from 'react-dom'; 3 | import from './components/App'; 4 | @ ./src/index.js 3:14-73 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 

Webpack.config.js

module.exports = < entry: [ './src/index.js' ], module: < rules: [ < test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader","style-loader","css-loader"], >] >, resolve: < extensions: ['*', '.js', '.jsx'] >, output: < path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' >, devServer: < contentBase: './dist' >>; 

я установил следующие зависимости

package.json

< "name": "Reactjs", "version": "1.0.0", "description": "", "main": "index.js", "scripts": < "start": "webpack-dev-server --config ./webpack.config.js --mode development" >, "keywords": [], "author": "", "license": "ISC", "babel": < "presets": [ "env", "react", "stage-2" ] >, "devDependencies": < "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "css-loader": "^0.28.11", "style-loader": "^0.20.3", "webpack": "^4.2.0", "webpack-cli": "^2.0.12", "webpack-dev-server": "^3.1.1" >, "dependencies": < "react": "^16.2.0", "react-dom": "^16.2.0", "react-router-dom": "^4.2.2" >> 

Источник

css import не работает

Каким образом работает импорт в css. У меня в обной папке лежат два файла index.css и js-components.css В index.css в первой строке пишу:

@import url(./js-components.css); @import url('./js-components.css'); @import url('js-components.css'); @import url("./js-components.css"); @import "./js-components.css"; @import './js-components.css'; @import "js-components.css"; @import 'js-components.css';

по одной строке. Не работает ни какая. Я не знаю просто как я могу ошибаться в путях когда мне редактор подсказывает их.

@import в CSS
Не могу понять как работает @import, как нужно оформлять его и в каком участке кода, и относительно.

@import внутри CSS файла
Имеется файл стилей base.css, который содержит: /* Copyright (C) YOOtheme GmbH, YOOtheme.

C перебоями работает @import шрифта в IE
В IE (7, 8) странно показывается шрифт Lobster: @import.

Сообщение от Alex Web

Сообщение от Academik

ну написано же выше что я это пробовал

Сообщение от NTHing

Сообщение от Alex Web

Директива import (Как работает import?)
Например есть 2 модуля. В первом модуле import pygame и далее работаем с окном. Во втором модуле.

Не работает #import
не работает #import // Импортируем файл Program Files\Microsoft Office\OfficeXX\EXCEL.EXE.

Не работает import sqlalchemy
Ребята, прошу помощи! Действую по имеющемуся скрипту: import sys import urllib import string.

Не работает import в NetBeans 7.3.1
Пишу программу на Java в NetBeans 7.3.1 не могу подключить библиотеку, с помощью import.

import mysql.connector не работает
Учусь работать в программе PyСharm на языке Python. В одном классе есть строка import.

Источник