Изучение CSS для новичков / Урок #2 - Форматы подключения стилей
2024 ж. 16 Мам.
180 395 Рет қаралды
Подключить CSS к веб сайту можно тремя различными способами. За урок мы научимся подключать CSS к проекту. Плюс мы рассмотрим формат выборки и добавления стилей к HTML тегам.
✅ Полезные ссылки:
🔫 Курс на сайте itProger: itproger.com/course/css/2
⏰ Тайм коды:
00:00 - Начало
00:19 - Создание проекта
02:23 - Атрибут «style»
06:23 - Отдельный тег «style»
08:23 - Отдельный файл со стилями
13:14 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - vk.com/prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼💻
- Все уроки по хештегу #itprogerLessons
LOREM- значение Важно заботиться о самой боли, а за ней последует рост больного, но в то же время случится так, что работы и боли будет много. Ибо, говоря в мельчайших подробностях, никто не должен заниматься какой-либо работой, если он не извлечет из нее какой-либо пользы. Не злиться на боль, на выговор в наслаждении, он хочет быть волоском от боли, в надежде, что размножения нет. Если они не ослеплены похотью, они не выходят наружу; виноваты те, кто оставляет свои обязанности и смягчает свое сердце, то есть труд. +++++++++++++++++++++ это Lorem и это не бессмысленный текст
легенда спасибо за детство
надеюсь автор имел ввиду, что lorem бессмысленный текст только в качестве заглушки
Спасибо! Очень классные и понятные уроки!
это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
Была проблемка с подключение css файла к html файлу через link...а именно нужно указать полный путь к файлу, а в видео, как у автора, не сработало ... в href" здесь пришлось нажать на css файле правой кнопкой copy full path и вставить сюда"
чел, я с этой проблемой 40 минут возилась. спасибо огромное за коммент!!!!!
Спасибо!!! Вы очень помогли❤
Лучший
О помогло!
Спасибо, милый человек! )
Лучшая подача, красавчик
Спасибо за такие качественные и понятные уроки !!!
это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
@@yMastera пропиши html и нажми Tab у него мак, может поэтому и так
@@new_capybara спасибо.. я просто сменил редактор
Крууто! 😘
спасибо!Интересно!
Спасибо.
Применяем css стили color и font-size к тегу input . Если input имеет тип text, url или email , то атрибут placeholder не наследует свойство css color (при этом свойство font-size работает). Изменим атрибут на value, свойство color применяется. Если input имеет тип file, свойство color работает на надписи "Не выбран не один файл", и не действует на "Выбор файла"
Спасибо большое, полезный и понятный урок! После окончания бесплатных курсов CSS и JavaScript, думаю, что запишусь на ваш платный курс!
Спасибо, приятно слышать 😉
Есть результат?
уже обучился?
@@itproger это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
Очень понятно, по тихонько надеюсь выучу так css
Выучил?
Выучил?
Выучил?
Выучил?
да
Попробовал подключить цсс к чтмл я чет не понимаю или че но я все делаю так же но ничего не меняется
не восклицательный надо вначале ставить а написать html и tab)))))тогда вся схема вылезет
Spasibo!!!
гениально
А я то думаю, что за фигня.. Уж было полез смотреть горячие клавиши. Благодарю.
У меня и восклицательный раБотает
Большое спасибо
0:19 создание проекта 2:23 Атрибут "style" 6:23 Отдельный тег "Style" 8:23 Отдельный файл со стилями 13:14 Заключительная часть
Админ закреп
это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
@@yMastera значит ты не том текстовый редакторе, что ты используешь?
@@user-hx7jh8cl2u АТОМ
@@user-hx7jh8cl2u кстати именно в этом редакторе происходит видео обучение.. и именно рекомендации по этому текстовому редактору!
Можете подсказать при подключении css файла ничего не происходит, в чём может быть проблема?
Тоже самое, не как не могу исправить
@@FedTih2537 если тебе это еще надо то body { color: red; } b { color: blue; } так показал автор body p { color: red; } b { color: blue; } а так нужно тоесть все же надо указывать p. Ну по крайней мере мне это помогло💁
Не прописываются основные теги после нажатия на Tab, в прочитал что нужно установить Emmet, как это сделать?
Так мило ты говоришь "Пока" В конце видео)))
😊
@@itproger Особенно прикольно что "Так мило" судя по нику пишет брутальный горец)))))))))))))
@@user-we9hp4gb3r хахахахаххаха
@@itproger Привет. А есть возможность проставить тэг-пустышку, с упором на то, что в ней мы будем прописывать атрибуты. Для CSS стилей, например
спасибо за видео, у меня есть один вопрос, если у меня несколько текстов (несколько разных ) как я могу придать им разный цвет? (используя 3 метод другой файл)
Да используй атрибут id и потом в css файле задавай каждому id свои параметры!
можно обратиться по тегу или классу, если есть несколько объектов
nice!
У меня браузер Opera не видит таблицу стилей, а Хром видит и цвет там применяется. Что делать?
а у меня почему то фон стал красным, а не текст, когда привязала css к html
После '!' Tab не работает, как PyCharm(.
html начни писать, и жми на Enter
@@Endermens_Nikos проехали, вообще-то
В атоме есть плагин emmet скачай его и будет таб.
@@boomermax Спасибо кто бы ты небыл герой =-)))
@@boomermax Спасибо, очень помогло (Install a Pacage -> в поле ввода emmet -> emmet 2.4.3)
Lorem может выдать осмысленный текст? ( он вобще генериться или выбирается из заготовленного списка?)
Имба
Дякую
когда следующий урок?
не получается установить плагин Emmet для Атома, в категории Install поисковик не реагирует на поиск и выдает ошибку, что ничего не найдено
здравствуйте,как вы презагружаете страницу я не понял
как поставить точку с запятой в atom?
когда я прописываю css он у меня вообще никак не отображается. Не подскажешь, что я делаю не так?
Не выходит подключиться хотя делаю всё как на видео, тег style выводится просто текстом а отдельный css style file не подключается хотя прописываю путь и вообще делаю всё как на видео
Привет, а как прописать весь основной html синтаксис visual studio code? не могу найти. подскажи
Установить нужно плагин - Emmet
@@itproger Благодарю, разобрался.
@@itproger подскажите? плиз? как его установить? да, выше писали, но у меня такого пути нет (выше писали: File --> Settings --> install --> В поиске введите emmet и установите). работаю на маке
нашла) Atom -> Preferences (откроется вкладка Settings), в менюшке "+Install"Б в поисковике забить emmet, установить. Работает!
Не получилось из-за неверно указанного пути к файлу, оказывается если html файл находится в папке, а css в корне, то нужно указывать так href="../main.css"
почему-то у меня если прописываю тег style в теге head пропадает подсветка стилей,абривиатур и синтаксисов,почему так?
Рекомендую отдельно подключать папку с файлом main.css так удобней и правильней. Только начал учить исправьте профы если ошибаюсь. Касательно Вашего вопроса, правильно прописываете тег Style он парный а точнее при открытии нужно закрывать тег пример:
Если у кого-то не подключается сss файл к хтмл, то попробуйте прописать полный путь к файлу сss.
пасиба
либо чёрточку в другую сторону
Это как ?
Подскажите пожалуйста,при указание корневой папки не отображается ничего ,в чем проблема
++
Получилось или ещё нет??
В Блокноте не канает почему-то. Папка с проектом в "Загрузках", в этой папке файлы с JS, HTML, CSS. Что-то не взаимодействуют они. И вообще, ни одним способом у меня не подкрашивается.
Ахахаха нашёл ошибку! Вместо head написал hade!!! Забавно, что при этом, название и заголовок отобразились, а заголовок, даже, покрасился.
нажимаю таб и не прописывается основной html синтаксис. в чем дело?
Я не могу понять, что в 6 строке кода. На html-курсах такого не было
Объясните мне пожалуйста, почему у меня не работает? Сделал всё как у вас через link, ничего не работает. Пишу на php storm последней версии. А дальше учить просто не возможно, по тому что вы пользуетесь таким вариантом.
Автор текста заглушки Lorem ipsum Цицерон. Там более чем глубокий смысл в этом тексте. Достаточно огромный. Если учесть ещё тот факт, какими путями его труды дошли до нас и что именно этот текст выбран как текст заглушка
да, автор конечно тут отсебятину нес, проверять нужно такие вещи.
как после p сделать круглые скобки, их брать копировать с интернета или где то там найти?
На клавиатуре должны быть по идеи, попробуй загуглить если их нет
Знаю что поздно ,но shift + X
body{ color: red; } i { color: blue; }
Работайте в Notepad++ они удобнее
У меня текст за экран уходит. Как сделать так, как у тебя?
alt+z либо же в настройках потыкать
Зайди в settings в разделе editor включи soft wrap
@@edabgaryanспасибо, помогло!
Якщо після зберігання, не показується в гуглі?
Нужно обновить кэш браузера
Не могу соеденить html и css, после атрибута href что писать? Я уже все варианты перепробовал
втычил минут 10, потом понял что файл main.css создал в корневой папке и в коде писал href="css/main.css" , а нужно было href="main.css". Посмотрите правильное расположение файла, может та же ошибка, а я спать)
@@Antarktster спасибо
@@Antarktster спасибо
@@Antarktster Спасибо огромное, я сидел на протяжении 25 минут и не понимал что не так, нужно отдохнуть...
@@Antarktster СПАСИБИЩЕ!!!!!!!!!!!
а что делать когда после ! нажимаешь таб и ничего не происходит?
как успехи ?
C:\Users\Professional\Desktop\CSS\main.css Если не получилось наследовать CSS файл к HTML То на рабочем столе в папке CSS копируем в командной строке полный путь и дописываем с таким же слешем css\main.css Мне помогло. Следите за регистром
Огромное спасибо ❤
что значит этот тег
Гугл в помощь. Прагма директива X-UA-Compatible призывает Internet Explorer работать в определённом режиме документа. Остальные браузеры должны игнорировать данную прагма директиву.
ПОСЛЕ НАЖАТИЯ ! И ТАБ У МЕНЯ НЕ ВЫСКОЧИЛО НИЧЕГО. ЧТО Я СДЕЛАЛА НЕ ТАК?
есть ответ?
Вместо "!" напишите "html"
@@pyroenza уже сам фиксанул;)
Скажите у меня правильный?
пишу на Brackets и подключить CSS вообще невозможно.
Добрый день, помогите пожалуйста. У меня текст-заглушка пишеться в один рядок, очень напрягает.(((
у меня так же)
type="text/css" еще прописывать надо в линк, у кого не читается css фаил
Не помогло
@@forttressor00 тогда висуал код проще скачать
знаю что поздно, но можно нажать правой кнопкой мыши на файл css, скопировать путь и вставить в href@@forttressor00
☦❤❤💕🙏☦
на мое мнение проще будет конкретно в одном файле будет лутше html и css писать
Это будет слишком громоздко, но это твое решение. Удачи😅
@@SRN_studio через год веба я понял что ты прав на 80085%
Ошибка при создании папки css и созданию файла css/main.css
У меня не получилось:( сделал всё как на видео хоть я и делаю в вижиал студиа
@Nirps ок
@Nirps кинь ты а то оно чет не присылается
Не подрубается css к html... все перепробовал...
блин написал stilesheet ((
Хаха
БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ
вообще ничего не понял. зачем этот третий стиль, если всё можно писать в хэде штмл.
+
Не работает ничего.
это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
ну как усепехи ?
@@vitaliksavchuk7536 если не лень ☝️
@@vitaliksavchuk7536 Ты пойми брат.. где для тебя какие-то вещи считаются элементарными для меня космос. Вот если у тебя возникнет вопрос как снять стекло на должен 90х годов ты голову сломаешь 🤷♀️ Я к чему.. не суди строго..
@@yMasteraЯ не имел не несу в своем вопросе что-то плохое.Просто спросил как дела спустя неделю,бросил или продолжыл изучать програмирование может быть просто пошел изучать другую технологию
@@vitaliksavchuk7536 нет.. я не бросил, спасибо. Обстоятельства очень не простые дома.. в жизни.. и не получается. Хотя уроки html просмотрел/прослушал/законспектировал выделил для себя.. пробую выстраивать страничку. Но всё сложно.. обстановка 🤷♀️
ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС
Ставлю "!", нажимаю TAB и ни чего не происходит(
В atom нужно нажимать ctrl+e чтоб сниппет сработал)
@@user-lu9jh9cj6n нет, получается
@@tc88610 на большинстве сниппетов эммета срабатывает таб, на некоторых типа !+tab работает контрол + е
@@user-lu9jh9cj6n если бы работал ctrl+e я б не писал. Ни ctrl+e ни другие сочетания с шифтами и переключениями раскладки не работают(
@@tc88610 а, а вы установили плагин emmet для атома? Он обязателен для того, чтоб работали сниппеты
Помогите!
Че те
Лол,я смог покрасить текст😄
За первые 40 секунд видео 2 раза реклама их редактора. Это все можно в любом редакторе написать, хоть в блокноте.
Подключил css к html но lorem не как не реагирует на то что я пишу в css но в html прописал link rel stylesheet href css/style.css Создал папку css внутри ее файл css/ style. Css и внутри ее почему то создалось вде папки css и все пишу точно как в видео но в браузере не как не реагирует Помогите люди
тоже самое!!