Подключить файл css к css: Способы добавления стилей на страницу

Не корректно подключается файл CSS к HTML

Задать вопрос

Вопрос задан

Изменён 1 год 3 месяца назад

Просмотрен 67 раз

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>html+css</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>Это самый главный заголовок</h2>
  <h3>Это второй после самого главного заголовка</h3>
  <h4>А это заголовок заголовочного заголовка</h4>
<p> Ублюдок мать твою а ну иди сюда говно собачье </p>
</body>
</html>
.
head1 { color :green; }; .head2 { color :blue; }; .head3 { color :orange; }; .paraghraph { color :blue; };

Причем,если поменять значение в классе .head1 ,цвет поменяется ,с остальными классами так не работает.

P.S. если есть мысли подскажите почему если файл CSS лежит в одной папке с HTML файлом,то подключается всё корректно, если же файлы находятся в разных папках то подключение файла не происходит.

  • html
  • css
  • color

5

Не нужно ставить точку с запятой после блока стиля. В CSS они ставятся только после строк.

Верный пример будет такой:

.head1 {
  color: green;
}
.head2 {
  color: blue;
}
.head3 {
  color: orange;
}
.paraghraph {
  color: blue;
}

1

Подключить файл стилей из другой директории можно таким образом.

<link rel="stylesheet" href=". ./style.css">

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

React css — компонентый подход

Всем привет. В этом уроке мы разберем как работать с стилями в react.

Если мы посмотрим в index.js файл, то увидим, что там импортируется index.css. То есть в javascript можно импортировать css. Это делается при помощи webpack лоадера, который специальным образом обрабатывает все файлы с расширением .css.

Давайте добавим в index.css у body

background: green;

Как мы видим, в браузере фон поменялся на зеленый. Если мы посмотрим в head нашей страницы, то увидим, что у нас добавился элемент style с стилями внутри. Обратите внимание, что когда мы меняем стили, страница не перегружается. Это происходит потому, что внутри react-create-app настроен hot-reloader, который позволяет многие действия применять без перезагрузки страницы. Это очень удобно, так как позволяет быстро пробовать различные стили и елементы.

Как же мы с вами можем структурировать стили этого проекта?

  1. В index.css пишем глобальные стили
  2. Под каждый компонент пишем стили для каждого компонента отдельно

Давайте попробуем

Создадим App. css и импортируем его в App.js

import './App.css';

Для того, чтобы задать елементу в react класс, используется специальный атрибут className. Например, мы можем в className задать строку container. И эта запись конвертируется в обычный класс в html, который будет искать у нас .container. Если мы напишите атрибут class, то он работать не будет. Это очень часто бывает у людей, которые только начинают знакомиться с реакт.

<div className="container">
  <RegistationForm />
</div>

И добавим стили в файле App.css к классу container.

.container {
  width: 700px;
  border: 1px solid red;
  margin: 0 auto;
}

Как мы видим, я неправильно указал импорт App.css. Нам нужно указать relative путью

Как мы видим в браузере все стили применились, но они глобальные. То есть написав класс container в двух разных файлах и примените к ним стили, мы перетрем стили одного из них.

Ну и напоследок давайте применим какие-то стили к вложенному компоненту RegistationForm. Мы, естественно, не хотим их писать в App.js, поскольку это будет тогда не внутри формы регистрации. Мы хотим ее переиспользовать сразу с стилями. Создаем новый файл RegistationForm.css и добавляем классы к инпуту и к button.

  <input
    type="text"
    placeholder="E-mail"
    value={this.state.email}
    onChange={this.handleEmailChange}
    className="emailField"
  />
  <button className="submitBtn">Save</button>

Импортируем цсс файл к нашей компоненте

import './RegistationForm.css';

Добавляем стили для инпута и кнопки.

.emailField {
  width: 300px;
  height: 40px;
  display: block;
  border-radius: 4px;
  margin-bottom: 10px;
}
.submitBtn {
  width: 300px;
  background: green;
  height: 50px;
  border: 0;
}

Теперь если мы посмотрим в браузер, мы видим, что все наши стили применились. И единственный вопрос, что же будет с стилями для продакшена. Так как у нас все стили находятся в head, и это подойдет не всем. Для продакшена многие люди хотят отдельный файл css в котором все стили минифицированы. Это абсолютно нормально, потому что create-react-app позволяет билдить наш продакшен командой

npm run build

То у вас в папке build/static будет лежать 2 файла css и js. Оба файла минифицированы. У нас также есть файл index.html, в который подключены эти файлы. Все что вам остается после билда — это засунуть эти файлы в проект на сервере.

Библиотека и технологии | Колледж Уэллсли

NEW: Library FOLIO Migration News and Information и

FAQ по библиотечным системам

Каталог библиотек | Руководства по исследованиям | Базы данных | АрхивКосмос | Цифровой репозиторий
WorldCat | Поиск артикулов | Поиск публикаций

Полезные ресурсы

Оборудование для заимствования

Планы этажей CLAPP

Подключите к Интернету

Connect Удаленно (VPN)

Кредит межлибренного кредита

Политика открытого доступа

Печать

Общие библиотеки.

Новый? Начать!

 

Документирование опыта COVID-19 Wellesley College

Архивы Wellesley College рады объявить о запуске «Документирования COVID-19 колледжа Wellesley».Опыт». Этот проект направлен на краудсорсинг цифровых материалов, связанных с опытом жизни сообщества колледжа Уэллсли во время глобальной пандемии COVID-19. Архивы собирают пожертвования от членов сообщества колледжа Уэллсли, включая сотрудников, преподавателей, студентов и выпускников. , Пожертвования могут включать в себя что угодно: от художественных начинаний, таких как поэзия, до заданий, которые пришлось перенести в условиях перехода на виртуальное обучение, до фотографий — всего, что говорит об этом беспрецедентном времени и о том, как оно повлияло на жизнь сообщества Уэллсли. часть официальных записей колледжа того времени, которое мы переживаем, и будет сохранена как часть нашего нового COVID-19.коллекция.

Архиву нужна ваша помощь! Пожалуйста, отправляйте пожертвования здесь: https://sites. google.com/wellesley.edu/documentingcovid-19/home

Мы надеемся собрать материалы от самых разных членов сообщества, насколько это возможно. Если у вас есть технические вопросы о подаче или общие вопросы о процессе, пожалуйста, не стесняйтесь обращаться к нам по адресу [email protected] или 781-283-3745. Пожертвования будут приниматься на постоянной основе.

Объявление победителей конкурса студенческих библиотек 2022 года!

Комитет по оценке наград студенческой библиотеки с радостью объявляет лауреатов премии студенческой библиотеки за исследования 2022 года, спонсируемой библиотекой друзей колледжа Уэллсли (подробнее о наградах).

Лауреаты премии продемонстрировали вдумчивый, методичный и научный подход к исследованиям и творчески использовали разнообразные библиотечные ресурсы, что помогло им создать выдающийся исследовательский проект.

Несмотря на продолжающиеся проблемы с проведением исследований в течение еще одного пандемического года, мы снова получили большое количество заявок (всего на одну меньше прошлогоднего рекорда в 75). Мы по-прежнему впечатлены разнообразием и творчеством студентов, а также их вдумчивыми размышлениями о исследовательском процессе. Благодаря щедрости друзей библиотеки колледжа Уэллсли мы смогли присудить по две премии в каждой категории, а также два почетных упоминания.

 

Награда за первый год обучения

Ханна Гримметт, 25 лет, , получила награду за первый год обучения за свою статью SOC 212 «Структурные барьеры для бедных сельских жителей: ответ на культурный аргумент». Вспомогательный преподавательский состав: Джо Свингл

Миа Зильберштейн ’24 получила награду за первый год работы за свою статью WRIT 134 «Битва за душу наших судов: дело для администрации Байдена, статья I, независимая иммиграционная судебная система. ” Вспомогательный преподавательский состав: Эрин Баттат

Награда уровня 100/200

Ида Беккет ’24 получила награду уровня 100/200 за свою статью MES/REL 264 «The Sufi of Origin and Serious Кофе и его дома: как стимулятор спровоцировал восстание в Османской империи». Вспомогательный преподавательский состав: Эфе Мурат Балыкчиоглу

Кейт Хабич, 22 года, получила награду уровня 100/200 за свою работу ES 214 «Понимание и устранение загрязнения атмосферы бензолом в Пасадене, штат Техас». Вспомогательный преподавательский состав: Beth DeSombre

 

Награда уровня 300

Жаклин Кай ’22 получила награду уровня 300 за свою статью NEUR 300 «Изучение пробиотиков для двухкомпонентной терапии: фекальная трансплантация» Болезнь Альцгеймера на мышиной модели». Вспомогательный преподавательский состав: Майкл Уист

Натали Ли, 23 года, , получила награду уровня 300 за свою статью HIST 334 «Поднятие знамени жесткой экономии: взгляды на экономический переход 19Итальянские левые 70-х». Вспомогательный преподавательский состав: Куинн Слободян

 

Награда за независимое исследование

Ребекка Кокс, 22 года получила награду за независимое исследование за свой проект ES 250 «Планктон Национального морского заповедника Stellwagen Bank». Вспомогательный преподавательский состав: Джеки Маттес

Ребекка Хоббс ’22 получила награду независимого исследования за свою статью PSYC 350 «Комплексное исследование связей между детской травмой и психозом у афроамериканцев». Вспомогательный преподавательский состав: Christen Deveney

 

Почетное упоминание

Ниам Бэйлисс ’22 получила почетное упоминание за свою статью ES 312 «Уличные деревья и городское планирование: изучение неравномерного распределения городских крон деревьев. ”

Вспомогательный преподавательский состав: Beth DeSombre

Сара Шарпантье, 22 года, , получила почетную награду за свое видео-эссе CAMS 302 «Разложение: время жизни и конец жизни изображения». Вспомогательный факультет: Кодруца Морарь

Работы-победители скоро будут доступны в цифровом репозитории Wellesley College.

Дополнительная информация: Karen Storz, [email protected]

Wellesley College присоединяется к HathiTrust

Wellesley College в настоящее время является членом HathiTrust, глобального объединения исследовательских и академических библиотек, выполняющих свою миссию по обеспечению сохранности и доступности культурных памятников в будущем. HathiTrust предлагает доступ для чтения в максимально возможной степени, разрешенной законом об авторском праве США, вычислительный доступ ко всему корпусу для научных исследований и другие новые услуги, основанные на объединенной коллекции.

Узнайте больше о HathiTrust и о том, как вы можете использовать его для своих исследований.

Как правильно использовать HTML-идентификатор внутри ваших файлов CSS

Учебник: Как правильно использовать HTML-идентификатор внутри ваших файлов CSS.

  • 126
    акций

Как вы должны знать, «id» — это просто атрибут HTML, который можно использовать для нескольких опций.

Одним из этих вариантов является правильная идентификация элементов внутри ваших HTML-документов, которые впоследствии могут быть оформлены с помощью CSS.

Если вы хотите правильно оформить свой HTML-идентификатор с помощью CSS, вы должны сначала создать связь между разметкой HTML и файлом CSS.

Для этого вам нужно вызвать имя «id» внутри вашего файла CSS, используя символ хэштега «#».

Поначалу это может показаться сложным, но давайте рассмотрим быстрый пример.

Например, представьте, что у вас есть div с именем «id» «clever».


<дел>

Пример содержания.

Sample #1

Этот «id» в CSS называется селектором.

Итак, если вы хотите стилизовать этот div, вам нужно будет написать символ хэштега «#» с именем «clever».

См. пример CSS ниже.


#умный {
фон: фиолетовый;
}

 

Образец #2

В этом примере мы просто задаем «id» с именем «clever» фиолетовый цвет фона.

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

В приведенном ниже примере вы можете увидеть всю HTML-разметку и CSS вместе в действии.

В этом случае мы используем внутреннюю таблицу стилей, но вы также можете использовать внешний файл CSS, если хотите.






<голова>
<мета-кодировка="utf-8">
Использование идентификатора в CSS

<стиль>
#умный {
    фон: фиолетовый;
    белый цвет;
    граница: 2px сплошная #000;
    выравнивание текста: по центру;
    отступ: 8px 0 10px 0;
}




<тело>

<дел>

Пример содержания.

Образец №3

А вот как будет выглядеть окончательный результат.

Пример содержимого.

Имейте в виду, что с CSS у вас будет много комбинаций.

Например, вы также можете использовать шестнадцатеричный цвет #830083, чтобы получить такой же фиолетовый цвет.

Так что никогда не ограничивайте свои возможности при работе с CSS и не думайте, что только потому, что кто-то делает что-то другое, вы можете ошибаться.

Возможности CSS безграничны.

Всегда можно смешивать и сочетать что угодно.

Например, смешать шестнадцатеричные имена цветов или смешать имена «id» с именами «class» или объединить «id» с любым элементом HTML, просто посмотрите на примеры ниже.


div#умный {
    фон: #830083;
    цвет: #FFF;
    граница: 2px сплошная #000;
    выравнивание текста: по центру;
    отступ: 8px 0 10px 0;
}

тело #умный {
    фон: #830083;
    цвет: #FFF;
    граница: 2px сплошная #000;
    выравнивание текста: по центру;
    отступ: 8px 0 10px 0;
}

 

Образец #4

Единственная рекомендация, которую я могу вам дать, прежде чем закончить это, будет заключаться в том, чтобы ограничить себя при использовании имен «id».