Изучение CSS для новичков / Урок #2 - Форматы подключения стилей
Переглядів 177,356
День томуПодключить 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
@itcode2803 Рік тому
LOREM- значение Важно заботиться о самой боли, а за ней последует рост больного, но в то же время случится так, что работы и боли будет много. Ибо, говоря в мельчайших подробностях, никто не должен заниматься какой-либо работой, если он не извлечет из нее какой-либо пользы. Не злиться на боль, на выговор в наслаждении, он хочет быть волоском от боли, в надежде, что размножения нет. Если они не ослеплены похотью, они не выходят наружу; виноваты те, кто оставляет свои обязанности и смягчает свое сердце, то есть труд. +++++++++++++++++++++ это Lorem и это не бессмысленный текст
@user-mz6yr7sn3m Рік тому
легенда спасибо за детство
@KATYANOONO 9 місяців тому
надеюсь автор имел ввиду, что lorem бессмысленный текст только в качестве заглушки
@user-gs4ec4it5l 3 роки тому
Спасибо! Очень классные и понятные уроки!
@yMastera 3 місяці тому
это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
@ksenrix 8 місяців тому
Спасибо за такие качественные и понятные уроки !!!
@yMastera 3 місяці тому
это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
@new_capybara 3 місяці тому
@@yMastera пропиши html и нажми Tab у него мак, может поэтому и так
@yMastera 3 місяці тому
@@new_capybara спасибо.. я просто сменил редактор
@RassamahRass 4 місяці тому
Лучшая подача, красавчик
@latarin Рік тому
Применяем css стили color и font-size к тегу input . Если input имеет тип text, url или email , то атрибут placeholder не наследует свойство css color (при этом свойство font-size работает). Изменим атрибут на value, свойство color применяется. Если input имеет тип file, свойство color работает на надписи "Не выбран не один файл", и не действует на "Выбор файла"
@tc88610 3 роки тому
Крууто! 😘
@user-nc2qu4ld2g 3 роки тому
Спасибо.
@user-ug5xh8wu9z 2 роки тому
Спасибо большое, полезный и понятный урок! После окончания бесплатных курсов CSS и JavaScript, думаю, что запишусь на ваш платный курс!
@itproger 2 роки тому
Спасибо, приятно слышать 😉
@ezikj7915 Рік тому
Есть результат?
@volk30miner62 9 місяців тому
уже обучился?
@yMastera 3 місяці тому
@@itproger это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
@textpistels Рік тому
спасибо!Интересно!
@HaveFun_and_Smile Рік тому
0:19 создание проекта 2:23 Атрибут "style" 6:23 Отдельный тег "Style" 8:23 Отдельный файл со стилями 13:14 Заключительная часть
@user-hx7jh8cl2u 3 місяці тому
Админ закреп
@yMastera 3 місяці тому
это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
@user-hx7jh8cl2u 3 місяці тому
@@yMastera значит ты не том текстовый редакторе, что ты используешь?
@yMastera 3 місяці тому
@@user-hx7jh8cl2u АТОМ
@yMastera 3 місяці тому
@@user-hx7jh8cl2u кстати именно в этом редакторе происходит видео обучение.. и именно рекомендации по этому текстовому редактору!
@adamm4739 3 роки тому
Очень понятно, по тихонько надеюсь выучу так css
@Itpedie 3 роки тому
Выучил?
@sanlink7183 2 роки тому
Выучил?
@user-sr3cb7be1n 2 роки тому
Выучил?
@vvnnsshh6624 2 роки тому
Выучил?
@adamm4739 2 роки тому
да
@vab321bav Рік тому
Была проблемка с подключение css файла к html файлу через link...а именно нужно указать полный путь к файлу, а в видео, как у автора, не сработало ... в href" здесь пришлось нажать на css файле правой кнопкой copy full path и вставить сюда"
@user-cm5dq4fy2y Рік тому
чел, я с этой проблемой 40 минут возилась. спасибо огромное за коммент!!!!!
@juliaswn296 Рік тому
Спасибо!!! Вы очень помогли❤
@Zloy_Ded0 11 місяців тому
Лучший
@forttressor00 9 місяців тому
О помогло!
@evgeniadanilova4135 8 місяців тому
Спасибо, милый человек! )
@syberyHeart 2 роки тому
не восклицательный надо вначале ставить а написать html и tab)))))тогда вся схема вылезет
@muxammadamininoyatov9477 2 роки тому
Spasibo!!!
@user-kf8uk3yz3w 2 роки тому
гениально
@eosreign818 2 роки тому
А я то думаю, что за фигня.. Уж было полез смотреть горячие клавиши. Благодарю.
@user-lz2ep9ir4w 2 роки тому
У меня и восклицательный раБотает
@kostian.solarev 2 роки тому
Большое спасибо
@Magaaston 3 роки тому
Так мило ты говоришь "Пока" В конце видео)))
@itproger 3 роки тому
😊
@user-we9hp4gb3r 3 роки тому
@@itproger Особенно прикольно что "Так мило" судя по нику пишет брутальный горец)))))))))))))
@user-gs4ec4it5l 3 роки тому
@@user-we9hp4gb3r хахахахаххаха
@Ar1osssa 3 роки тому
@@itproger Привет. А есть возможность проставить тэг-пустышку, с упором на то, что в ней мы будем прописывать атрибуты. Для CSS стилей, например
@forttressor00 9 місяців тому
Можете подсказать при подключении css файла ничего не происходит, в чём может быть проблема?
@FedTih2537 2 місяці тому
Тоже самое, не как не могу исправить
@domiz6860 2 місяці тому
@@FedTih2537 если тебе это еще надо то body { color: red; } b { color: blue; } так показал автор body p { color: red; } b { color: blue; } а так нужно тоесть все же надо указывать p. Ну по крайней мере мне это помогло💁
@Vlad-Ra 2 роки тому
nice!
@commie-kazi6208 2 роки тому
спасибо за видео, у меня есть один вопрос, если у меня несколько текстов (несколько разных ) как я могу придать им разный цвет? (используя 3 метод другой файл)
@user-lw2ks1jl4s 2 роки тому
Да используй атрибут id и потом в css файле задавай каждому id свои параметры!
@itproger 2 роки тому
можно обратиться по тегу или классу, если есть несколько объектов
@Aldikkosh Рік тому
Имба
@roman3403 2 роки тому
Дякую
@user-db9ti4hf7w Рік тому
Не прописываются основные теги после нажатия на Tab, в прочитал что нужно установить Emmet, как это сделать?
@fiatm1986 8 місяців тому
Если у кого-то не подключается сss файл к хтмл, то попробуйте прописать полный путь к файлу сss.
@besbogov9489 6 місяців тому
пасиба
@besbogov9489 6 місяців тому
либо чёрточку в другую сторону
@aybekthebest5794 5 місяців тому
Это как ?
@knocker6970 11 місяців тому
Автор текста заглушки Lorem ipsum Цицерон. Там более чем глубокий смысл в этом тексте. Достаточно огромный. Если учесть ещё тот факт, какими путями его труды дошли до нас и что именно этот текст выбран как текст заглушка
@KATYANOONO 10 місяців тому
да, автор конечно тут отсебятину нес, проверять нужно такие вещи.
@user-ts4mi9mf8v 8 місяців тому
Попробовал подключить цсс к чтмл я чет не понимаю или че но я все делаю так же но ничего не меняется
@fybek97 3 роки тому
когда следующий урок?
@tc88610 3 роки тому
После '!' Tab не работает, как PyCharm(.
@Endermens_Nikos 3 роки тому
html начни писать, и жми на Enter
@tc88610 3 роки тому
@@Endermens_Nikos проехали, вообще-то
@boomermax 3 роки тому
В атоме есть плагин emmet скачай его и будет таб.
@OpO738 2 роки тому
@@boomermax Спасибо кто бы ты небыл герой =-)))
@psyl1ne Рік тому
@@boomermax Спасибо, очень помогло (Install a Pacage -> в поле ввода emmet -> emmet 2.4.3)
@Bezdarnyi_Master 3 роки тому
В Блокноте не канает почему-то. Папка с проектом в "Загрузках", в этой папке файлы с JS, HTML, CSS. Что-то не взаимодействуют они. И вообще, ни одним способом у меня не подкрашивается.
@Bezdarnyi_Master 3 роки тому
Ахахаха нашёл ошибку! Вместо head написал hade!!! Забавно, что при этом, название и заголовок отобразились, а заголовок, даже, покрасился.
@user-md1gw5wx2y 3 роки тому
Привет, а как прописать весь основной html синтаксис visual studio code? не могу найти. подскажи
@itproger 3 роки тому
Установить нужно плагин - Emmet
@user-md1gw5wx2y 3 роки тому
@@itproger Благодарю, разобрался.
@katekras9814 3 роки тому
@@itproger подскажите? плиз? как его установить? да, выше писали, но у меня такого пути нет (выше писали: File --> Settings --> install --> В поиске введите emmet и установите). работаю на маке
@katekras9814 3 роки тому
нашла) Atom -> Preferences (откроется вкладка Settings), в менюшке "+Install"Б в поисковике забить emmet, установить. Работает!
@3dtravel291 2 роки тому
У меня браузер Opera не видит таблицу стилей, а Хром видит и цвет там применяется. Что делать?
@tiltosha8948 Рік тому
не получается установить плагин Emmet для Атома, в категории Install поисковик не реагирует на поиск и выдает ошибку, что ничего не найдено
@user-dm3jw9vw5p 3 роки тому
почему-то у меня если прописываю тег style в теге head пропадает подсветка стилей,абривиатур и синтаксисов,почему так?
@D3agle_LTD 3 роки тому
Рекомендую отдельно подключать папку с файлом main.css так удобней и правильней. Только начал учить исправьте профы если ошибаюсь. Касательно Вашего вопроса, правильно прописываете тег Style он парный а точнее при открытии нужно закрывать тег пример:
@user-ck5sl7bz6p Рік тому
Подскажите пожалуйста,при указание корневой папки не отображается ничего ,в чем проблема
@nersisyan202 Рік тому
++
@nersisyan202 Рік тому
Получилось или ещё нет??
@weiland8348 2 роки тому
а у меня почему то фон стал красным, а не текст, когда привязала css к html
@KorotkoONeKorotkom 2 місяці тому
Не выходит подключиться хотя делаю всё как на видео, тег style выводится просто текстом а отдельный css style file не подключается хотя прописываю путь и вообще делаю всё как на видео
@adamuuu6 Рік тому
здравствуйте,как вы презагружаете страницу я не понял
@maksimmaksim1636 Рік тому
body{ color: red; } i { color: blue; }
@user-qi2lz6ss2x 2 роки тому
Не получилось из-за неверно указанного пути к файлу, оказывается если html файл находится в папке, а css в корне, то нужно указывать так href="../main.css"
@makssidorenko140 Рік тому
как после p сделать круглые скобки, их брать копировать с интернета или где то там найти?
@jojoilluminati8992 Рік тому
На клавиатуре должны быть по идеи, попробуй загуглить если их нет
@user-sf3qd5tf8y Рік тому
Знаю что поздно ,но shift + X
@GANKSTER Рік тому
Работайте в Notepad++ они удобнее
@Viktor_Gold_161 3 місяці тому
C:\Users\Professional\Desktop\CSS\main.css Если не получилось наследовать CSS файл к HTML То на рабочем столе в папке CSS копируем в командной строке полный путь и дописываем с таким же слешем css\main.css Мне помогло. Следите за регистром
@BadElf39 23 дні тому
Огромное спасибо ❤
@user-ry6di5br1p 11 місяців тому
когда я прописываю css он у меня вообще никак не отображается. Не подскажешь, что я делаю не так?
@user-ub5ve5yj5q 4 місяці тому
нажимаю таб и не прописывается основной html синтаксис. в чем дело?
@bogdanpasha2556 5 місяців тому
Объясните мне пожалуйста, почему у меня не работает? Сделал всё как у вас через link, ничего не работает. Пишу на php storm последней версии. А дальше учить просто не возможно, по тому что вы пользуетесь таким вариантом.
@denis5823 3 місяці тому
как поставить точку с запятой в atom?
@MrRados 2 місяці тому
Я не могу понять, что в 6 строке кода. На html-курсах такого не было
@soapfighter2131 11 місяців тому
type="text/css" еще прописывать надо в линк, у кого не читается css фаил
@forttressor00 9 місяців тому
Не помогло
@soapfighter2131 9 місяців тому
@@forttressor00 тогда висуал код проще скачать
@nesikkk2863 7 місяців тому
знаю что поздно, но можно нажать правой кнопкой мыши на файл css, скопировать путь и вставить в href@@forttressor00
@GalinaKazakova43 Рік тому
ПОСЛЕ НАЖАТИЯ ! И ТАБ У МЕНЯ НЕ ВЫСКОЧИЛО НИЧЕГО. ЧТО Я СДЕЛАЛА НЕ ТАК?
@frenk8472 9 місяців тому
есть ответ?
@pyroenza 8 місяців тому
Вместо "!" напишите "html"
@frenk8472 8 місяців тому
@@pyroenza уже сам фиксанул;)
@doctor3880 3 роки тому
У меня текст за экран уходит. Как сделать так, как у тебя?
@edabgaryan 3 роки тому
alt+z либо же в настройках потыкать
@elvinvelizade9875 3 роки тому
Зайди в settings в разделе editor включи soft wrap
@iraklipaichadze3282 5 місяців тому
@@edabgaryanспасибо, помогло!
@xeither289 2 роки тому
☦❤❤💕🙏☦
@user-ti4ni3gt7h 7 місяців тому
Ошибка при создании папки css и созданию файла css/main.css
@sergeydimitriev8928 3 роки тому
Не могу соеденить html и css, после атрибута href что писать? Я уже все варианты перепробовал
@Antarktster 3 роки тому
втычил минут 10, потом понял что файл main.css создал в корневой папке и в коде писал href="css/main.css" , а нужно было href="main.css". Посмотрите правильное расположение файла, может та же ошибка, а я спать)
@sergeydimitriev8928 3 роки тому
@@Antarktster спасибо
@yesko5057 Рік тому
@@Antarktster спасибо
@_SOMEONE_ Рік тому
@@Antarktster Спасибо огромное, я сидел на протяжении 25 минут и не понимал что не так, нужно отдохнуть...
@user-dv3wo7es5k Рік тому
@@Antarktster СПАСИБИЩЕ!!!!!!!!!!!
@user-ft9so4yw4p 2 роки тому
что значит этот тег
@Scalebearer 2 роки тому
Гугл в помощь. Прагма директива X-UA-Compatible призывает Internet Explorer работать в определённом режиме документа. Остальные браузеры должны игнорировать данную прагма директиву.
@user-sf6hh2hv2n 2 роки тому
Якщо після зберігання, не показується в гуглі?
@itproger 2 роки тому
Нужно обновить кэш браузера
@-mishana- 2 роки тому
на мое мнение проще будет конкретно в одном файле будет лутше html и css писать
@SRN_studio 11 місяців тому
Это будет слишком громоздко, но это твое решение. Удачи😅
@-mishana- 11 місяців тому
@@SRN_studio через год веба я понял что ты прав на 80085%
@manz3086 3 місяці тому
а что делать когда после ! нажимаешь таб и ничего не происходит?
@vitaliksavchuk7536 3 місяці тому
как успехи ?
@Gitaristikus 10 місяців тому
Добрый день, помогите пожалуйста. У меня текст-заглушка пишеться в один рядок, очень напрягает.(((
@KATYANOONO 9 місяців тому
у меня так же)
@xeither289 2 роки тому
БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ
@Huseynov361 Рік тому
+
@user-ds3ig7wj4n 7 годин тому
пишу на Brackets и подключить CSS вообще невозможно.
@yMastera 3 місяці тому
это какой-то ппц! ставлю восклицательный знак, нажимаю Tab и.. вуаля.. ни чего не происходит!😠 о боги.. ну как же тяжело в одиночку познавать эту сферу 🤦♀ ужас какой-то. помогите народ!!
@vitaliksavchuk7536 3 місяці тому
ну как усепехи ?
@yMastera 3 місяці тому
@@vitaliksavchuk7536 если не лень ☝️
@yMastera 3 місяці тому
@@vitaliksavchuk7536 Ты пойми брат.. где для тебя какие-то вещи считаются элементарными для меня космос. Вот если у тебя возникнет вопрос как снять стекло на должен 90х годов ты голову сломаешь 🤷♀️ Я к чему.. не суди строго..
@vitaliksavchuk7536 3 місяці тому
@@yMasteraЯ не имел не несу в своем вопросе что-то плохое.Просто спросил как дела спустя неделю,бросил или продолжыл изучать програмирование может быть просто пошел изучать другую технологию
@yMastera 3 місяці тому
@@vitaliksavchuk7536 нет.. я не бросил, спасибо. Обстоятельства очень не простые дома.. в жизни.. и не получается. Хотя уроки html просмотрел/прослушал/законспектировал выделил для себя.. пробую выстраивать страничку. Но всё сложно.. обстановка 🤷♀️
@xeither289 2 роки тому
ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС
@andku2689 3 роки тому
Не подрубается css к html... все перепробовал...
@andku2689 3 роки тому
блин написал stilesheet ((
@user-gs4ec4it5l 3 роки тому
Хаха
@user-bk3pk1ms4n Рік тому
вообще ничего не понял. зачем этот третий стиль, если всё можно писать в хэде штмл.
@tude2478 Рік тому
У меня не получилось:( сделал всё как на видео хоть я и делаю в вижиал студиа
@tude2478 Рік тому
@Nirps ок
@tude2478 Рік тому
@Nirps кинь ты а то оно чет не присылается
@Lisva... 9 місяців тому
Не работает ничего.
@user-bw1go1vf4q 3 роки тому
Ставлю "!", нажимаю TAB и ни чего не происходит(
@user-lu9jh9cj6n 3 роки тому
В atom нужно нажимать ctrl+e чтоб сниппет сработал)
@tc88610 3 роки тому
@@user-lu9jh9cj6n нет, получается
@user-lu9jh9cj6n 3 роки тому
@@tc88610 на большинстве сниппетов эммета срабатывает таб, на некоторых типа !+tab работает контрол + е
@tc88610 3 роки тому
@@user-lu9jh9cj6n если бы работал ctrl+e я б не писал. Ни ctrl+e ни другие сочетания с шифтами и переключениями раскладки не работают(
@user-lu9jh9cj6n 3 роки тому
@@tc88610 а, а вы установили плагин emmet для атома? Он обязателен для того, чтоб работали сниппеты
@user-lz2ep9ir4w 2 роки тому
Лол,я смог покрасить текст😄
@sergeydimitriev8928 3 роки тому
Помогите!
@annavulishnaia322 3 роки тому
Че те
@juliaglazko2130 7 місяців тому
За первые 40 секунд видео 2 раза реклама их редактора. Это все можно в любом редакторе написать, хоть в блокноте.
@user-ti4ni3gt7h 7 місяців тому
Подключил css к html но lorem не как не реагирует на то что я пишу в css но в html прописал link rel stylesheet href css/style.css Создал папку css внутри ее файл css/ style. Css и внутри ее почему то создалось вде папки css и все пишу точно как в видео но в браузере не как не реагирует Помогите люди
@a4_top_ne_smei_otricat 6 місяців тому
тоже самое!!
@mrwerniplay6941 2 роки тому
Скажите у меня правильный?
Школа itProger / Программирование
Переглядів 142 тис.
Школа itProger / Программирование
Переглядів 153 тис.
ЗНЕНАЦЬКА! ЗСУ повернули території - БАГАТО ПОЛОНЕНИХ/ Німеччина ВИМАГАЄ Patriot / Смоленськ: ГАРЯЧЕ
24 Канал онлайн
Переглядів 374 тис.
Слідство.Інфо | Розслідування, репортажі, викриття
Переглядів 306 тис.
Школа itProger / Программирование
Переглядів 102 тис.
Go to Frontend (учу языки)
Переглядів 184
Школа itProger / Программирование
Переглядів 88 тис.
Школа itProger / Программирование
Переглядів 124 тис.
Школа itProger / Программирование
Переглядів 249 тис.
DKA-DEVELOP
Переглядів 2,8 млн