Курс CSS - Урок №3. Подключение CSS и основные селекторы.

Подписаться 76 тыс.

Просмотров 122 тыс.

50% 1

Бесплатный миникурс «Домен и хостинг»: 4994.ru/2015
Бесплатный миникурс «Wordpress.Базовый»: 4994.ru/3112
Бесплатная книга «Как зарабатывать на продаже знаний по системе Евгения Попова ТУРБИНА»: 4994.ru/3113
Подписывайтесь на мой Инстаграм: 4994.ru/3114
Блог Евгения Попова: 4994.ru/3115
Рейтинг хостингов: hosting-ninja.ru
Блог Евгения Попова: evgeniypopov.com
Здесь вы поймете как таблицы стилей подключаются к HTML-странице и для чего нужны селекторы.
Ссылка на дополнительные материалы к курсу CSS (один архив ко всем урокам курса):
yadi.sk/d/g4ULzxQ-zijZB

Опубликовано:

4 янв 2012

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 124

@user-iu1sz5yp1e 8 лет назад

Евгений Вы лучший из лучших! Спасибо Вам огромное ! Есле бы не Вы я бы не смогла разобраться , У Вас большой талант!!

@zver6865 Год назад

если кто смотрит это в 2023, то не обязательно устанавливать доп прогу колорманию, сейчас в VS code просто пишешь колор и выбираешь цвет любой какой захочешь, спасибо за урок

@user-ke5di8gn9i 6 лет назад

Спасибо за прогу, позволяющую так четко выбирать цвет! Очень осмысленные уроки!

@lybopitnaya9052 6 лет назад

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

@user-xo6ks7ck9e 7 лет назад

Если кто то только начал изучать, и не меняется цвет, создайте файл css не в отдельной папке css/style.css А сразу там же где наш index.html и не забудьте в коде поменять

@dauletbakhitov5715 4 года назад

Спасибо! очень выручил

@Soper84 2 года назад

Спасибо!)

@user-kc1tx1zv6h 6 лет назад

Чувак, ты просто лучший)

@dik8559 6 лет назад

Спасибо вам большое! Освоила Html. Продолжаю CSS.

@user-sh8kf8qc7c 9 лет назад

путь начинайте прописывать с rel все работает

@helenroof9600 7 лет назад

Спасибо, сработало.

@helenroof9600 7 лет назад

Просто файл style.css не был в папке css у меня. Поместил его на место, и путь заработал.

@daironschannel4890 6 лет назад

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

@user-yu6rv9mg7g 6 лет назад

Спасибо.

@user-yu6rv9mg7g 6 лет назад

Все получилось

@entefoxtail6250 8 лет назад

Semion Semionych 2 года назад Должно быть CSS палитру сменили. Серый теперь #808080 (можно просто вписать color:grey) красный это #FF0000 СПАСИБО ТЕБЕ ПАРЕНЬ! INDEX (файл style.css лежит в не в отдельной папке) CSS p{ color:#FF0000 }

@user-je4dw9yl1y 8 лет назад

+Ente FoxTail Спасибо! Действительно, время идет, что-то меняется, надо об этом знать!))

@crermakbutster2478 8 лет назад

+Ente FoxTail подскажите.. положение курсора поменялось в css на горизонтальный . как его вернуть на исходный?

@hugoboss9860 7 лет назад

Нажми кнопку Insert , и больше ее не трогай

@user-zl4iv4tl1z 5 лет назад

Благодарю)

@Irinakobzeva2011 8 лет назад

все работает у меня, все как в видео сделала! Спасибо! Пошла дальше смотреть!

@AllpowerfulAndrew 8 лет назад

Как так работает? Я уже все комменты перечитал, ничего не получается, всё сделано в точности по видео. и не по видео тоже делал, цвета менял, ничего не получается.

@Oleynik996 7 лет назад

MahaDev тоже самое

@vladyslavkazarin895 8 лет назад

все получилось, спасибо

@user-xg2fd7mt9y 9 лет назад

Отлично,Евгений!Спасибо!

@user-dv8gz9nx9f 8 лет назад

хорошие видеокурсы

@user-wu1kf5xu9p 5 лет назад

У тебя талант

@user-oj4bb9wv9z 10 лет назад

Все спасибо понял)

@romanvalkov1989 8 лет назад

У многих не получается с первого раза... И у меня тоже. Файл style.css почему-то не лежал в папке css, к которой прописывался путь. У меня было так. Теперь всё заработало.

@user-tv9pv1hq1p 7 лет назад

Может кому пригодится. Если у вас не привязывается файл style.css (любые изменения в данном файле, не отображаются на странице) попробуйте сделать следующее: 1. Переименовать папку где у вас лежит файл style.css 2. Прописать новый путь, например была папка css, заменили на css1,соответственно в html коде исправляем на

@user-gh6hc2wc7t 11 лет назад

Все работает! Кроме серого цвета конечно, но разницы нет"

@garnikn 5 лет назад

Все прекрасно работает. Если не меняет цвета, то внимательно просмотрите написание имен и путь. Какая то незаметная с первого взгляда ошибка. Например stil.css написали вместо stile.css

@Grynya 9 лет назад

Всё прекрасно работает. Просто возьмите не серый ,а какой то другой цвет.

@englishtogether6506 7 лет назад

Не получается изменить цвет выбранных пунктов списка. Можете помочь ?

@batyrkhanzhumadilda339 7 лет назад

а где находятся дополнительные материалы по CSS???

@user-mv9ml6uq7w 9 лет назад

короче кого не получается то сделайте так:

@tubtivi 6 лет назад

Не установить FireBug,нужна версия браузера 3.0,а где ее взять?

@AstroHook 10 лет назад

а откуда взялся этот index.html ?

@aibardulatov 6 лет назад

А можно ли через class в css менять тир шрифта и размер шрифта?

@hugoboss9860 7 лет назад

Когда автор сохраняет созданый файл style.css , на видео стоит тип файла : Normal text file. --- Это не значит что сохраненный файл будет txt. Проверьте чтобы файл style был именно в формате css. У меня ушло 2 часа чтобы с этим разобраться.

@alextagere8910 6 лет назад

Может кому будет полезно. Составлял index.html по своей теме, отличной от примера автора. И в качестве ID написал два слова вместо одного (header, как у автора). Так вот, не срабатывала смена цвета заголовка до тех пор, пока не соединил два слова нижним подчеркиванием вместо пробела. Будьте внимательны!!!)))

@anton_kupriianchuk 5 лет назад

Если Style.css не подключается к index.html попробуйте создать его в VSCode (можете и перейти на него вместо Notepad++). Последний не правильно сохраняет css файлы.

@Perel_adovv 11 лет назад

Если всё делать по порядку так как говорит автор, то всё получается. Я думаю причина может быть в том, что серый цвет визуально не сильно отличается от черного. Попробуйте в файле css выбрать другой цвет текста. Например салатовый. Вот его код. color:#7FFF00; - отличие заголовка от параграфа станет более заметно. И обязательно нужно ставить в конце кода точку с запятой, иначе не будет работать.

@user-hr5cc4js4t 11 лет назад

файле стилей: h1 { color:#FF1827; }, в html.loc так: link href="css/style.css" type="text/css" rel="stylesheet" никаких изменений нет, ничего не меняет.

@akitavi777 9 лет назад

1) данный цвет либо серый и его тупо не видно, либо он устарел. Берите цвета из палитр в интернете. 2) у кого не меняет цвет по id, у меня проблема была в том что id заголовка включен в параграф, поэтому не менял ( точнее менял только все параграфы). Пробуйте не параграф а другой id. У меня все заработало после этого.

@user-qq4fp1mp8e 9 лет назад

А есть ли отличие если написать тег css, следующиюм образом

@user-zt8ht1yx9s 5 лет назад

Ребятам ниже респект, так бы потратил больше времени, пока додумался.

@rezak204 10 лет назад

Я лично допустил ошибку в слове stYle) написал stIle) долго думал)

@47comedy47 6 лет назад

Может кому-то поможет. Я убрал запрет в операционной системе на "ручное изменение расширение файла" заново сохранил Style, выбрав тип файла Css. Может была проблема в том, что Style сохранялся в формате "txt"?)

@user-kf9xk4xd4s 5 лет назад

Это работает только с простыми папка, с архивом не получается почему то.. пробовал так - href="style.css" href="../style.css" href="../../style.css" href="../../css/style.css" href="../exam/css/style.css" href="../exam.rar/css/style.css" href="../exam.zip/css/style.css" exam.zip это архив, css простая папка в архиве, как делать то?

@MrZhloba 7 лет назад

Цвет #404040 меняется, но это заметить очень трудно. Вот попробуйте синий и не парьтесь #0000FF

@lukeskyworker2637 9 лет назад

Если создавать на новую папку css на виртуальном диске, который мы создали в курсе html и от туда запускать html файл, то цвета, почему-то, у меня не запускались. А вот с другого диска, диска D, всё нормально запустилось и цвета поменялись. Короче, нужно создать и запустить файлы .css и .html на нормальном диске С или D.

@nechaev1982 9 лет назад

Luke Skyworker Спасибо за ваш комментарий, мне он помог в решении данной проблемы! Помимо диска (я назвал его N) на диске С мы создавали папку testingServer. Так вот, если открывать файл index.html из папки диска N, то ничего не работает, а если запускать с папки, расположенной на диске С, то всё ОК!))

@mihaiciobanu9438 9 лет назад

evgeniy gde ya mogu naiti etot document index.html?

@Kl-hk4lw 8 лет назад

Создай сам)

@user-st1mw4ff6p 11 лет назад

если в область окраски попадает ссылка он ее не окрасит тут вся палитра help-html-css.narod.ru/webcolor.html

@walromul2655 11 лет назад

Че то не так.Во Во всех 3 случаях ничего у меня не поменялось.Непонятно как style.css взаимодействует c index.html

@rickgoals3721 9 лет назад

Папку css создавайте внутри папки html, где лежать все папки которые мы делали в курсе по html. У меня заработало. То есть, если не работают цвета, значить путь к файлу прописан неправильно. Поиграйте с пропиской путей

@MrFraxlol 9 лет назад

"Поиграйте с пропиской путей" ? лол)

@crermakbutster2478 8 лет назад

подскажите.. положение курсора поменялось в css на горизонтальный . как его вернуть на исходный?

@hugoboss9860 7 лет назад

Нажми кнопку Insert , и больше ее не трогай

@user-et8wp7hu9m 10 лет назад

Обычный вариант не прокатил) но я по другому сделал. В html документе я прописал путь к css другой а css так же как у Евгения. Откуда этот путь?-открываем наш файл css с помощью гугл (направляем мышь на файл-далее щелкаем на праву кнопку мыши-открыть с помощью и выбираем с помощью чего) вот этот путь в адресной строке после открытия документа,а его уже вставляем между " " -у меня прокатил данный вариант

@user-bq4pt2lw7k 10 лет назад

логично хранить сss докумен рядом или в соседней папке с html, тогда путь будет прописать значительно проще)))

@user-if6rt8gw5e 11 лет назад

евгений плиз дай файл Index.html я закончил html курс а потом етот файл слител а остальние остались плиз дай файл ато нехочу все заново делать

@TTaNkis 7 лет назад

Index.html Document Цветной текст Style.css p{ color: #458283; } просто попробуйте изменить цвет просто сложно заметить разницу между черным и чуть более черным

@user-hl5og6uo7g 3 года назад

Если не меняется цвет, посмотрите на букву c в названиях папок (прим. css). Возможно вы написали букву с на русском. Заодно проверьте и другие названия с буквой с.

@dimamolodec 11 лет назад

Должно быть CSS палитру сменили. Серый теперь #808080 (можно просто вписать color:grey) красный это #FF0000

@artempalamarchuk9440 9 лет назад

В чём разница между классом и id селекторами? по-сути тоже самое, только класс распознаётся через точку( .new), а id через #( #header).

@user-sc4my8sc2r 9 лет назад

Разница в том, что один класс можно присвоить нескольким элементам, а индетификатор уникален. С помощью классов, можно задать один стиль сразу для нескольких элементов, а для каждого идентфикатора придется прописывать стиль заново.

@Mixxxx777 9 лет назад

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

@lucyckyfile8157 5 лет назад

не исользуй ид, ид для js и для редких случай Класс 10 очков Ид 100 С опытом поймёшь

@MrMoska2 10 лет назад

По идентификатору"header" цвет не меняет. Возможно уже как-то по другому это делается... изменил просто по заголовку H1.

@MrMoska2 10 лет назад

Капался-капался таки обнаружил ошибку... оказывается идентификатор стоял в абзаце а должен в быть в заголовке

@user-cc8ck2lv3f 7 лет назад

Нельзя ли вместо группировки тегов с помощью class="new", использовать просто одинаковый идентификатор. К примеру те же три строки можно было обозначить как id="header".

@batyrkhanzhumadilda339 7 лет назад

а нельзя ли создать тэги с одинаковыми id ? это будет ошибкой ?

@Groupw-po4yc 7 лет назад

ДА,грубой !

@freedomtv2295 6 лет назад

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

@SkyLine74444 7 лет назад

при подключений: href="style.css" а не ="css/style.css"

@user-wh4di4xo1b 5 лет назад

зачем нужны точка с запятой ; если без них все работает?

@user-te3ez6ut8w 11 лет назад

не работает цвет не меняеться что делать

@maxwelplay2851 6 лет назад

У кого заголовки, абзацы или что-то другое не выделяется во-первых проверьте код, во-вторых вот пример как можно встраивать стили прямо в html. How To Avoid Wasting Your Most Valuable Online Asset - TIME!

@user-go7xq8tn3j 4 года назад

Скиньте кто-нибудь html файл первой странички, удалился с компа))

@user-lf9yh1wj9q 10 лет назад

У меня тоже не работают 3 цвета.

@user-zh1jp3lp9f 6 лет назад

13:26

@vmolo4ke 7 лет назад

Ребят просто пишите цвета на английском что бы красный написать не надо #cc0000 а надо просто red

@boysband2078 7 лет назад

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

@vi1cky1 11 лет назад

И у меня не меняется цвет

@garrykim4062 11 лет назад

не меняется цвет(

@misskatyandmistermax156 8 лет назад

*Можно ли после 9го класса пойти учится на программиста?*

@smakomkylebyaka6955 8 лет назад

+Russian Bob vs CS:GO да, в колледж или пту

@Kl-hk4lw 8 лет назад

Если ты смотришь Miss Katy и Mister Max то нет

@user-de8wn5je4h 9 лет назад

Цвета не работают, прописываю все правильно, делаю так же, как и на видео, все ровно нечего не меняется. Может кто то знает в чем проблема ?

@Kl-hk4lw 8 лет назад

Да я знаю. Но уже год прошёл, думаю ты понял

@cocsax922 6 лет назад

не видно ничего

@user-np1kx9td5x 7 лет назад

У кого не подключается , пишем в документе html в разделе контейнера @import url("css/style.css"); а в файле css просто с верху прописываем тоже @import url("css/style.css");

@user-co6eg9cj7j 7 лет назад

Зачем использовать атрибут class? Вместо этого можно ведь каждому необходимому элементу прописать атрибут id. Я попробовал, то же самое получается.

@FOMA_DIY 6 лет назад

Iliya 1 одинаковый айди тебе потом боком выйти может

@bitluha 9 лет назад

вот что мы записываем:

@user-sc4my8sc2r 9 лет назад

А что до этого не работало?

@bitluha 9 лет назад

Денис Ерасов нет. Все перепробовал что ниже советовали. Помогло только добавление расширения

@user-sc4my8sc2r 9 лет назад

Значит что-то не так было с кодом. Расширение .txt - это неправильно. Скорее всего ваш файл css не имел расширения .css, а был .txt

@bitluha 9 лет назад

да, он имеет разрешение .txt А что, нужно было в имени фала написать разрешение .css?

@user-sc4my8sc2r 9 лет назад

Каким редактором для написания кода пользуешься?

@kksss53 5 лет назад

А как выделить не строку а слово или букву? Мало ли

@wellshopping4438 6 лет назад

У меня не получается

@user-lz9lw2ik1j 6 лет назад

Обрати особое внимание на путь 90% ошибок из за неверного пути.

@user-rs3re2qk1d 6 лет назад

был у меня трудный вопрос который я решил просмотрев это видеоru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DCXuq0v-7VU.html кстати цвета у меня отображаются если пишу green,red,purple,yellow и т.д

@ohWsihT 8 лет назад

Впишите свой код цвета , они уже поменялись.

@Pekhnei 8 лет назад

он вернется назад 2012 год

@ohWsihT 8 лет назад

Я обращался не к автору видео...

@user-he6xi9vh5l 8 лет назад

скіки не пробував не можу підключити style.css

@user-in4re1oi4r 8 лет назад

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

@Kl-hk4lw 8 лет назад

Потому что у него есть отдельная папка styles, он ведь говорил, если файл css лежит в одной директории с файлом html (главным) то не надо писать путь, просто название. А у него в папке, что не понятного?