Как подключить таблицу стилей css к html - видео

Рубрика: Секреты верстки;
Метки:

Как можно подключить стили к своему сайту?

Только что записал новое видео. В котором рассказываю про три способа подключения стилей на своем сайте.

Даже не так, не рассказываю, а показываю, как применять эти способы на практике, и не просто на одном свойстве, а на целом вагоне стилей. Видео получилось довольно таки долгим – целых 17 минут. Но оно сугубо практическое. Т.е. необходимо будет повторять все за мной на практике.

В итоге вы узнаете ответы на следующие вопросы:

  • Что такое связанные стили?
  • Что такое глобальные стили?
  • Что такое внутренние стили?
  • Как их подключать к своей страничке?
  • Как их использовать?
  • Как они работают?

Кто не знает что такое стили - они используются в создании сайта (за исключением разве что - старого Г chuckle и флеш-сайтов). Хочу заметить - что лучше всего использовать именно связанные стили.

Ну и помимо этого, как обычно, мы будем практиковать каждый способ подключения стилей так, что бы на выходе у нас получилась красивое оформление. Кстати, вот пример страницы:


Демо


Конечно, страничка простенькая как дважды два. Но все же оформлена красиво.

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


Зарегистрироваться


Ладно, что-то я отвлекся от темы. Вот, ниже я разместил видео урок в режиме онлайн:



Еще Тебе понадобится файл заготовка с фоновым рисунком.

ЗЫ: на все вопросы отвечу в комментах.

Комментариев: 20 RSS

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Комментариев: 20
  •  Саня | 16 мая 2012 в 20:32:55

    Кому удобней скачать с Народа

    https://narod.ru/disk/49465810001.d88909d326b3da0b261dc81cf5590bfb/3_vkl.zip.html
  •  Серёга | 16 мая 2012 в 21:15:18

    СПС smile

  •  Руслан | 17 мая 2012 в 10:08:16

    Спасибо Сергей за урок. Позволь дать несколько советов.

    Если урок делался для новичков , то с точки зрения обучения, начинать надо было с внутренних стилей, потом перейти к глобальным стилям а потом объяснить откуда взялся CSS и связанные стили. А так у новичка который начал например изучать HTML будет в голове каша (знаю по своему опыту).

    Еще ты не объяснил про приоритет стилей если для одного элемента указаны все стили (внутр, глоб, и связан) то какой будет применен?

  •  Серёга | 17 мая 2012 в 10:47:49

    А попробовать сам не можешь? smile

    А вообще я начинал осваивать CSS именно со связанных стилей.

    Так лучше всего, потому что стили находятся отдельно от разметки.

    Да и лучше использовать именно связанные стили.

  •  Серёга | 17 мая 2012 в 12:18:10

    Да и сточки зрения обучения - начинать надо с HTML.

    Но как я сказал в самом уроке - он для новичков, которые только начинают осваивать CSS. А значит, уже какое-то представление о нем - должно быть.

  •  Руслан | 17 мая 2012 в 13:45:19

    Сам попробовать я конечно могу, и учебников и самоучителей много! Тогда скажи какая ценность твоего урока ?, если новичку потом еще кучу информации нужно найти самому.

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

    Тогда может подскажешь как с помощью связанных стилей изменить цвет одного слова?.

  •  Серёга | 17 мая 2012 в 14:15:50

    Ценность урока? Она заключается в том, что люди узнают каким макаром можно подключать стили к своему сайту.

    если новичку потом еще кучу информации нужно найти самому.

    Какую кучу информации? Читай внимательно название урока. Способы подключения, а не какой из них главнее. Так что если уж что то не нравится, давай уже по теме урока. Так можно придраться и к тому, почему я не рассказал про виды селекторов, раз урок для новичков smile

    Ну и если кому то влом поэкспериментировать 5 минут, какая может идти речь об обучении вообще? Лентяй один хрен ничему не научится.

    Тогда может подскажешь как с помощью связанных стилей изменить цвет одного слова?.

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

    В связанных стилях "руки развязаны" wink

    Не надо подкалывать в том, чего сам не знаешь grin

  •  Серёга | 17 мая 2012 в 14:28:42

    Блин, все забываю что то дописать.

    К слову:

    Задавать стиль для одного слова проще и удобней через связанные стили, а не через внутренние.
  •  Руслан | 17 мая 2012 в 15:33:32

    Сергей , только без обид.

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

    Я смотрел все твои уроки и многому научился - за это тебе спасибо.

    Но как только закрываешь урок и начинаешь "экспериментировать"

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

    Ну и конечно на счет лентяя - это ты зря ...!

    Обижать своих подписчиков , да и еще прилюдно.

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

    И к слову - если уже и придраться к теме урока "3 способа подключения стилей." - то я знаю только один способ ПОДКЛЮЧЕНИЯ

    "link rel="stylesheet" href="style.css", а остальные стили не подключаются а прописываются в самом документе.

    wink

  •  Серёга | 17 мая 2012 в 15:49:57

    Так я и не говорю, что я идеальный, да туплю - с кем не бывает grin Оговориться не проблема, главное что бы меня правильно поняли. Это ерунда.

    Для того что бы получалось - нужна практика. А на счет лентяя, я это не про тебя конкретно, а про вообще wink Ну разве я не прав?

    Кто сидит и ждет с моря погоды, тому только остается сидеть и ждать.

    По поводу слова все просто:

    1. Обрамляешь слово в тег спан.

    2. В стилях задаешь класс.

    3. К этому спану его клеишь.

    И заодно на будущее удел остается, можно будет тоже прилепить к другому слову.

  •  Саня | 17 мая 2012 в 21:55:45

    По способам вполне понятно,хотя немного сумбурно.

    Внутренние стили новичок уже должен знать из HTML

    Надо было показать новичку как перетаскиванием файла CSS

    подключить стили,а то не видно мощи Dreamweaver'a

    Еще хорошим тоном считается,когда для блока div сразу создается класс,а потом уже формируется.К тому же в этот момент и появляется файл CSS и привязывается к индексному файлу.

    Для новичка так проще и привлекательней,чем писать или копировать код,где он наделает ошибок.

    Извини,Серёга,этот урок на троечку.

  •  Серёга | 18 мая 2012 в 10:22:18
    Надо было показать новичку как перетаскиванием файла CSS
    подключить стили,а то не видно мощи Dreamweaver'a

    Блин, вот при чем здесь дрим и его возможности? Причем здесь перетаскивание файла? Я показал как надо ПОДКЛЮЧАТЬ! Не у всех есть дрим. Записывая урок я даже не хотел изначально пользоваться подсказками редактора, но потом понял, что иначе урок будет в раза два длиннее, чем надо.

    Еще хорошим тоном считается,когда для блока div сразу создается класс,а потом уже формируется.К тому же в этот момент и появляется файл CSS и привязывается к индексному файлу.

    Ну да ну да smile Это не хороший тон, а все го лишь чья то предвзятость wink Мне лично так неудобно. И тем более это не эффективно. Вам наговорят всякой ерунды, а вы потом говорите направо/налево. Хороший тон - это когда у верстальщика все работает. А ни как он верстает.

    Для новичка так проще и привлекательней,чем писать или копировать код,где он наделает ошибок.

    У тебя позиция "битой собаки". Может вообще тогда новичку ничего не делать? Так он точно ошибок не наделает grin


    А еще лучше, записал бы свою версию урока. Где рассказал бы про типы подключения стилей, про реальные возможности дрима, и заодно свой хваленый хороший тон продемонстрировал, а то я уже столько верстаю своим дурным тоном. chuckle


    Из всего комментария, по теме только:

    Извини,Серёга,этот урок на троечку.
  •  Саня | 19 мая 2012 в 20:26:24

    Не нравится "хороший тон"? Ради бога. А задавать класс при создании div суперудобно.Сразу строится структура и человек мыслит глобально.

    Урок записать не могу: ни дикции ,ни голоса.У Макса вообще золотая

    голова,а уроки не его стихия.

    Зря ты обижаешься.Мнение каждого по статусу ты должен анализировать,

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

    а в общении отталкивает.

    Желаю творческих успехов!Ели брать в общем,у тебя всё здорово получается.

  •  Серёга | 19 мая 2012 в 21:31:38

    Саня. Конечно не нравится, что мне здесь должно нравится - если это полная чепуха?

    Ну про урок - его можно и не как видео. А в текстовом варианте, и я без подколов. Я просто посмотрю как ты в него всунешь и рассказ про стили, и покажешь мощи дримвьювера, заодно расскажешь про свой "хороший тон", который я могу оспорить без проблем. И я посмотрю, как у тебя выйдет урок на 5 smile

    Могу сказать, что если ты в него всунешь все это, у тебя он скорее всего на 2 выйдет. А все потому, что ты в одну тему напихаешь сразу несколько.

    Я потому и согласился с твоим комментом по поводу тройки. Надо было рассказать тупо про три вида подключения, и показать на одном примере. Урок бы получился на минуты 3 - 4 и все бы остались довольны.

    Я все учитываю, если мне делают замечания по теме урока.

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

    Спасибо за пожелания bow

  •  Серёга | 19 мая 2012 в 21:33:08
    У Макса вообще золотая голова,а уроки не его стихия.

    А это ты про что?

  •  Саня | 20 мая 2012 в 17:43:06

    Про создателя MaxSite.

  •  Серёга | 20 мая 2012 в 22:10:24

    Уроки у него нормальные, просто там уровень знаний нужен выше среднего. Я и сам иногда не все с первого раза догоняю smile

  •  Юрий | 29 апреля 2013 в 13:26:07

    Дааааааааа, как на базаре! Если что не понятно, задай вопрос и работай дальше, а так нужно прочитать кучу текста в этих комментах.

  •  Юрий | 29 апреля 2013 в 13:47:33

    Хочу добавить что урок даже очень понятен для новичков.

  •  Юрий | 8 января 2016 в 11:20:53

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

    Да, Серега! А у тебя сейчас на какой версии движка сайт стоит?