Изучение CSS для новичков / Урок #2 - Форматы подключения стилей

Подключить 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/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

[@user-gs4ec4it5l]

Спасибо! Очень классные и понятные уроки!

[@yMastera]

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

[@RassamahRass]

Лучшая подача, красавчик

[@tc88610]

Крууто! 😘

[@vab321bav]

Была проблемка с подключение css файла к html файлу через link...а именно нужно указать полный путь к файлу, а в видео, как у автора, не сработало ... в href" здесь пришлось нажать на css файле правой кнопкой copy full path и вставить сюда"

[@user-cm5dq4fy2y]

чел, я с этой проблемой 40 минут возилась. спасибо огромное за коммент!!!!!

[@juliaswn296]

Спасибо!!! Вы очень помогли❤

[@Zloy_Ded0]

Лучший

[@forttressor00]

О помогло!

[@evgeniadanilova4135]

Спасибо, милый человек! )

[@ksenrix]

Спасибо за такие качественные и понятные уроки !!!

[@yMastera]

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

[@new_capybara]

@@yMastera пропиши html и нажми Tab у него мак, может поэтому и так

[@yMastera]

@@new_capybara спасибо.. я просто сменил редактор

[@textpistels]

спасибо!Интересно!

[@itcode2803]

LOREM- значение Важно заботиться о самой боли, а за ней последует рост больного, но в то же время случится так, что работы и боли будет много. Ибо, говоря в мельчайших подробностях, никто не должен заниматься какой-либо работой, если он не извлечет из нее какой-либо пользы. Не злиться на боль, на выговор в наслаждении, он хочет быть волоском от боли, в надежде, что размножения нет. Если они не ослеплены похотью, они не выходят наружу; виноваты те, кто оставляет свои обязанности и смягчает свое сердце, то есть труд. +++++++++++++++++++++ это Lorem и это не бессмысленный текст

[@user-mz6yr7sn3m]

легенда спасибо за детство

[@KATYANOONO]

надеюсь автор имел ввиду, что lorem бессмысленный текст только в качестве заглушки

[@MotoMiteng]

Спасибо большое)

[@latarin]

Применяем css стили color и font-size к тегу input . Если input имеет тип text, url или email , то атрибут placeholder не наследует свойство css color (при этом свойство font-size работает). Изменим атрибут на value, свойство color применяется. Если input имеет тип file, свойство color работает на надписи "Не выбран не один файл", и не действует на "Выбор файла"

[@user-nc2qu4ld2g]

Спасибо.

[@user-ug5xh8wu9z]

Спасибо большое, полезный и понятный урок! После окончания бесплатных курсов CSS и JavaScript, думаю, что запишусь на ваш платный курс!

[@itproger]

Спасибо, приятно слышать 😉

[@ezikj7915]

Есть результат?

[@volk30miner62]

уже обучился?

[@yMastera]

@@itproger это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦‍♀ ужас какой-то. помогите народ!!

[@Verxus22]

@@yMastera попробуй написать просто html и нажать Enter

[@adamm4739]

Очень понятно, по тихонько надеюсь выучу так css

[@Itpedie]

Выучил?

[@sanlink7183]

Выучил?

[@user-sr3cb7be1n]

Выучил?

[@vvnnsshh6624]

Выучил?

[@adamm4739]

да

[@syberyHeart]

не восклицательный надо вначале ставить а написать html и tab)))))тогда вся схема вылезет

[@muxammadamininoyatov9477]

Spasibo!!!

[@user-kf8uk3yz3w]

гениально

[@eosreign818]

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

[@Q_roxe]

У меня и восклицательный раБотает

[@kostian.solarev]

Большое спасибо

[@Vlad-Ra]

nice!

[@user-db9ti4hf7w]

Не прописываются основные теги после нажатия на Tab, в прочитал что нужно установить Emmet, как это сделать?

[@user-dm3jw9vw5p]

почему-то у меня если прописываю тег style в теге head пропадает подсветка стилей,абривиатур и синтаксисов,почему так?

[@Extwow]

Так мило ты говоришь "Пока" В конце видео)))

[@itproger]

😊

[@user-we9hp4gb3r]

@@itproger Особенно прикольно что "Так мило" судя по нику пишет брутальный горец)))))))))))))

[@user-gs4ec4it5l]

@@user-we9hp4gb3r хахахахаххаха

[@Ar1osssa]

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

[@Aldikkosh]

Имба

[@commie-kazi6208]

спасибо за видео, у меня есть один вопрос, если у меня несколько текстов (несколько разных ) как я могу придать им разный цвет? (используя 3 метод другой файл)

[@user-lw2ks1jl4s]

Да используй атрибут id и потом в css файле задавай каждому id свои параметры!

[@itproger]

можно обратиться по тегу или классу, если есть несколько объектов

[@forttressor00]

Можете подсказать при подключении css файла ничего не происходит, в чём может быть проблема?

[@FedTih2537]

Тоже самое, не как не могу исправить

[@domiz6860]

@@FedTih2537 если тебе это еще надо то body { color: red; } b { color: blue; } так показал автор body p { color: red; } b { color: blue; } а так нужно тоесть все же надо указывать p. Ну по крайней мере мне это помогло💁

[@roman3403]

Дякую

[@Krylowandrey]

Lorem может выдать осмысленный текст? ( он вобще генериться или выбирается из заготовленного списка?)

[@3dtravel291]

У меня браузер Opera не видит таблицу стилей, а Хром видит и цвет там применяется. Что делать?

[@user-ts4mi9mf8v]

Попробовал подключить цсс к чтмл я чет не понимаю или че но я все делаю так же но ничего не меняется

[@tiltosha8948]

не получается установить плагин Emmet для Атома, в категории Install поисковик не реагирует на поиск и выдает ошибку, что ничего не найдено

[@knocker6970]

Автор текста заглушки Lorem ipsum Цицерон. Там более чем глубокий смысл в этом тексте. Достаточно огромный. Если учесть ещё тот факт, какими путями его труды дошли до нас и что именно этот текст выбран как текст заглушка

[@KATYANOONO]

да, автор конечно тут отсебятину нес, проверять нужно такие вещи.

[@user-md1gw5wx2y]

Привет, а как прописать весь основной html синтаксис visual studio code? не могу найти. подскажи

[@itproger]

Установить нужно плагин - Emmet

[@user-md1gw5wx2y]

@@itproger Благодарю, разобрался.

[@katekras9814]

@@itproger подскажите? плиз? как его установить? да, выше писали, но у меня такого пути нет (выше писали: File --> Settings --> install --> В поиске введите emmet и установите). работаю на маке

[@katekras9814]

нашла) Atom -> Preferences (откроется вкладка Settings), в менюшке "+Install"Б в поисковике забить emmet, установить. Работает!

[@adamuuu6]

здравствуйте,как вы презагружаете страницу я не понял

[@Bezdarnyi_Master]

В Блокноте не канает почему-то. Папка с проектом в "Загрузках", в этой папке файлы с JS, HTML, CSS. Что-то не взаимодействуют они. И вообще, ни одним способом у меня не подкрашивается.

[@Bezdarnyi_Master]

Ахахаха нашёл ошибку! Вместо head написал hade!!! Забавно, что при этом, название и заголовок отобразились, а заголовок, даже, покрасился.

[@Have476]

0:19 создание проекта 2:23 Атрибут "style" 6:23 Отдельный тег "Style" 8:23 Отдельный файл со стилями 13:14 Заключительная часть

[@user-hx7jh8cl2u]

Админ закреп

[@yMastera]

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

[@user-hx7jh8cl2u]

@@yMastera значит ты не том текстовый редакторе, что ты используешь?

[@yMastera]

@@user-hx7jh8cl2u АТОМ

[@yMastera]

@@user-hx7jh8cl2u кстати именно в этом редакторе происходит видео обучение.. и именно рекомендации по этому текстовому редактору!

[@mr_potato7946]

я работаю на вс коде и у меня при попытке изменить цвет он не меняется в папке цсс , может я не правильно делаю но текст выделяется от остальных и все

[@weiland8348]

а у меня почему то фон стал красным, а не текст, когда привязала css к html

[@user-ry6di5br1p]

когда я прописываю css он у меня вообще никак не отображается. Не подскажешь, что я делаю не так?

[@user-ck5sl7bz6p]

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

[@scheme_academy1]

++

[@scheme_academy1]

Получилось или ещё нет??

[@KorotkoONeKorotkom]

Не выходит подключиться хотя делаю всё как на видео, тег style выводится просто текстом а отдельный css style file не подключается хотя прописываю путь и вообще делаю всё как на видео

[@user-ub5ve5yj5q]

нажимаю таб и не прописывается основной html синтаксис. в чем дело?

[@makssidorenko140]

как после p сделать круглые скобки, их брать копировать с интернета или где то там найти?

[@jojoilluminati8992]

На клавиатуре должны быть по идеи, попробуй загуглить если их нет

[@user-sf3qd5tf8y]

Знаю что поздно ,но shift + X

[@tc88610]

После '!' Tab не работает, как PyCharm(.

[@Endermens_Nikos]

html начни писать, и жми на Enter

[@tc88610]

@@Endermens_Nikos проехали, вообще-то

[@boomermax]

В атоме есть плагин emmet скачай его и будет таб.

[@OpO738]

@@boomermax Спасибо кто бы ты небыл герой =-)))

[@psyl1ne]

@@boomermax Спасибо, очень помогло (Install a Pacage -> в поле ввода emmet -> emmet 2.4.3)

[@fybek.fortnite]

когда следующий урок?

[@denis5823]

как поставить точку с запятой в atom?

[@user-qi2lz6ss2x]

Не получилось из-за неверно указанного пути к файлу, оказывается если html файл находится в папке, а css в корне, то нужно указывать так href="../main.css"

[@GANKSTER]

Работайте в Notepad++ они удобнее

[@bogdanpasha2556]

Объясните мне пожалуйста, почему у меня не работает? Сделал всё как у вас через link, ничего не работает. Пишу на php storm последней версии. А дальше учить просто не возможно, по тому что вы пользуетесь таким вариантом.

[@Viktor_Gold_161]

C:\Users\Professional\Desktop\CSS\main.css Если не получилось наследовать CSS файл к HTML То на рабочем столе в папке CSS копируем в командной строке полный путь и дописываем с таким же слешем css\main.css Мне помогло. Следите за регистром

[@BadElf39]

Огромное спасибо ❤

[@fiatm1986]

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

[@besbogov9489]

пасиба

[@besbogov9489]

либо чёрточку в другую сторону

[@aybekthebest5794]

Это как ?

[@MrRados]

Я не могу понять, что в 6 строке кода. На html-курсах такого не было

[@xeither289]

☦❤❤💕🙏☦

[@soapfighter2131]

type="text/css" еще прописывать надо в линк, у кого не читается css фаил

[@forttressor00]

Не помогло

[@soapfighter2131]

@@forttressor00 тогда висуал код проще скачать

[@nesikkk2863]

знаю что поздно, но можно нажать правой кнопкой мыши на файл css, скопировать путь и вставить в href@@forttressor00

[@sergeydimitriev8928]

Не могу соеденить html и css, после атрибута href что писать? Я уже все варианты перепробовал

[@Antarktster]

втычил минут 10, потом понял что файл main.css создал в корневой папке и в коде писал href="css/main.css" , а нужно было href="main.css". Посмотрите правильное расположение файла, может та же ошибка, а я спать)

[@sergeydimitriev8928]

@@Antarktster спасибо

[@yesko5057]

@@Antarktster спасибо

[@_SOMEONE_]

@@Antarktster Спасибо огромное, я сидел на протяжении 25 минут и не понимал что не так, нужно отдохнуть...

[@user-dv3wo7es5k]

@@Antarktster СПАСИБИЩЕ!!!!!!!!!!!

[@manz3086]

а что делать когда после ! нажимаешь таб и ничего не происходит?

[@vitaliksavchuk7536]

как успехи ?

[@user-sf6hh2hv2n]

Якщо після зберігання, не показується в гуглі?

[@itproger]

Нужно обновить кэш браузера

[@doctor3880]

У меня текст за экран уходит. Как сделать так, как у тебя?

[@edabgaryan]

alt+z либо же в настройках потыкать

[@elvinvelizade9875]

Зайди в settings в разделе editor включи soft wrap

[@iraklipaichadze3282]

​@@edabgaryanспасибо, помогло!

[@GalinaKazakova43]

ПОСЛЕ НАЖАТИЯ ! И ТАБ У МЕНЯ НЕ ВЫСКОЧИЛО НИЧЕГО. ЧТО Я СДЕЛАЛА НЕ ТАК?

[@frenk8472]

есть ответ?

[@pyroenza]

Вместо "!" напишите "html"

[@frenk8472]

@@pyroenza уже сам фиксанул;)

[@user-ft9so4yw4p]

что значит этот тег

[@Scalebearer]

Гугл в помощь. Прагма директива X-UA-Compatible призывает Internet Explorer работать в определённом режиме документа. Остальные браузеры должны игнорировать данную прагма директиву.

[@mrwerniplay6941]

Скажите у меня правильный?

[@Gitaristikus]

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

[@KATYANOONO]

у меня так же)

[@-mishana-]

на мое мнение проще будет конкретно в одном файле будет лутше html и css писать

[@SRN_studio]

Это будет слишком громоздко, но это твое решение. Удачи😅

[@-mishana-]

@@SRN_studio через год веба я понял что ты прав на 80085%

[@maksimmaksim1636]

body{ color: red; } i { color: blue; }

[@Huseynov361]

+

[@user-bk3pk1ms4n]

вообще ничего не понял. зачем этот третий стиль, если всё можно писать в хэде штмл.

[@tude2478]

У меня не получилось:( сделал всё как на видео хоть я и делаю в вижиал студиа

[@tude2478]

@Nirps ок

[@tude2478]

@Nirps кинь ты а то оно чет не присылается

[@andku2689]

Не подрубается css к html... все перепробовал...

[@andku2689]

блин написал stilesheet ((

[@user-gs4ec4it5l]

Хаха

[@xeither289]

ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС

[@xeither289]

БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ

[@user-ds3ig7wj4n]

пишу на Brackets и подключить CSS вообще невозможно.

[@MotoMiteng]

+ только я в вз студио код

[@yMastera]

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

[@vitaliksavchuk7536]

ну как усепехи ?

[@yMastera]

@@vitaliksavchuk7536 если не лень ☝️

[@yMastera]

@@vitaliksavchuk7536 Ты пойми брат.. где для тебя какие-то вещи считаются элементарными для меня космос. Вот если у тебя возникнет вопрос как снять стекло на должен 90х годов ты голову сломаешь 🤷‍♀️ Я к чему.. не суди строго..

[@vitaliksavchuk7536]

@@yMasteraЯ не имел не несу в своем вопросе что-то плохое.Просто спросил как дела спустя неделю,бросил или продолжыл изучать програмирование может быть просто пошел изучать другую технологию

[@yMastera]

@@vitaliksavchuk7536 нет.. я не бросил, спасибо. Обстоятельства очень не простые дома.. в жизни.. и не получается. Хотя уроки html просмотрел/прослушал/законспектировал выделил для себя.. пробую выстраивать страничку. Но всё сложно.. обстановка 🤷‍♀️

[@user-bw1go1vf4q]

Ставлю "!", нажимаю TAB и ни чего не происходит(

[@user-lu9jh9cj6n]

В atom нужно нажимать ctrl+e чтоб сниппет сработал)

[@tc88610]

@@user-lu9jh9cj6n нет, получается

[@user-lu9jh9cj6n]

@@tc88610 на большинстве сниппетов эммета срабатывает таб, на некоторых типа !+tab работает контрол + е

[@tc88610]

@@user-lu9jh9cj6n если бы работал ctrl+e я б не писал. Ни ctrl+e ни другие сочетания с шифтами и переключениями раскладки не работают(

[@user-lu9jh9cj6n]

@@tc88610 а, а вы установили плагин emmet для атома? Он обязателен для того, чтоб работали сниппеты

[@sergeydimitriev8928]

Помогите!

[@annavulishnaia322]

Че те

[@Lisva...]

Не работает ничего.

[@Q_roxe]

Лол,я смог покрасить текст😄

[@juliaglazko2130]

За первые 40 секунд видео 2 раза реклама их редактора. Это все можно в любом редакторе написать, хоть в блокноте.

[@user-ti4ni3gt7h]

Подключил css к html но lorem не как не реагирует на то что я пишу в css но в html прописал link rel stylesheet href css/style.css Создал папку css внутри ее файл css/ style. Css и внутри ее почему то создалось вде папки css и все пишу точно как в видео но в браузере не как не реагирует Помогите люди

[@a4_top_ne_smei_otricat]

тоже самое!!

[@user-ti4ni3gt7h]

Ошибка при создании папки css и созданию файла css/main.css