CSS — Базовый курс 1


232 просмотра.

Краткое описание видео: .начинаем второй базовый курс который вы.обязательно должны пройти перед тем как.а приниматься за создание сайта это курс.по каскадным таблицам стилей кожи.достаточно простой но очень важный.поэтому обязательно заведите себе.какую-нибудь тетрадку у нас записывайте.основные моменты этого курса они вам.очень пригодятся при создании сайта и.так что это такое.каскадные таблицы стилей css да где они.применяются какие преимущества есть у.них мы сейчас это все рассмотрим для.начала давайте вспомним.из курса по html нашу первую.html-страницу то есть смысл.каскадных таблиц стилей будет очень.просто понять на следующем примере вот.допустим у нас есть два абзаца да мы.решили сделать эти абзацы и.допустим шрифтом verdana и размерам там.двойка и цветом допустим каким-нибудь.темно-сером то есть для этого мы должны.прописать так фонд задать ему атрибуты.сайт задать ему атрибут фэйс задать ему.атрибут колада и указать все вот эти.наши параметры цвета размер и шрифт.причем мы решили как бы сделать это для.всех.абзацев и для всех страниц нашего сайта.которых у нас допустим очень и очень.много сотня все вроде бы мы добились.результата у нас на всех страницах шрифт.определенного размера цвета и гарнитуры.но в один прекрасный день допустим у нас.поменялся дизайн там изменилось шапка.сайта изменились еще какие-то детали и.нам допустим нужно изменить шрифт уже на.а tahoma размер допустим на тройку да и.цвет на черный вот что нам предстоит в.этом случае делать нам предстоит открыть.все 100 страниц и сидеть менять эти.шрифты до.менять размеры меняет цвет и так далее.вот хорошо если есть какой-нибудь.автоматизированный.html-редактор который позволяет это.сделать очень быстро да вот но если.такого нет что в большинстве случаев и.бывает до вам придется все это.переделывать вручную вот тоже самое.допустим там с изображениями в один.момент вы решили что у вас во всех.изображений должны быть рамки допустим и.должен быть какой-то отступ оси вы.видите прописываете атрибутах space.отступ от текста на border рамку и так.далее но всего каких-то обстоятельств в.другой день вам нужно поменять допустим.внешний вид каких-то изображения опять.придется открывать страницу html до.искать так с изображением и менять его.атрибуты согласитесь это не очень удобно.особенно есть на сайт будет постоянно.расти.особенно если дизайн у него будет.достаточно часто дорабатываться вот это.будет просто катастрофически убиваюсь.огромное количество времени и.соответственно здесь нужно использовать.естественно другое решение как действуют.таблицы стилей и чем она может нам здесь.помочь давайте подключим пример нашей.таблицы стилей и посмотрим вот смысл.таблицы стилей в том что в ней задаются.различные правила.то есть у правило имеется определенное.имя вот например данном случае me.escada и в этом правильно прописано.определенные параметры допустим шрифта.жирный цвет серый.вот что это нам дает эта таблицы стилей.подключается к html страницы также вот в.области head с помощью тега link об этом.мы еще поговорим позже ведь мы.подключаем эту таблицу стилей к нашей.страницы и соответственно подключают эти.различные правила теперь мы можем.прописать любому тайгу с помощью.атрибута класс а вот это правило до sk и.этот ток начнет как бы отображается в.соответствии с этим правилом допустим.если мы в данный момент пропишем.вот этому tgp close escada он у нас.станет жирным и будет вот такого цвета.42 42 42 это серый цвет вот.соответственно таких правил мы можем.создавать огромное ему множество при.этом мы как бы можем задать общие.правила для всех тегов в данном случае.надо всех тегов п до всех абзацев мы.задаем одно единое правило шрифт verdana.размер 12 и.а цвет черная до такой таблице мы можем.подключить ко всем страницам нашего.сайта и на всех страницах у нас все.абзаца будут отображаться вот таким наши.в том таким размером таким цветом мало.ли выйти до насколько это удобней то.есть мы здесь просто даже ничего уже не.пишем никаких правил не что просто у нас.в таблице ясно написано что всей тгп.должны выглядеть таким образом другой.момент если мы хотим чтобы вот этот.абзац у нас чем-то отличался для него мы.создаем специальное правило в данном.случае эскадра и прописываем этому.параграфу определенное правило теперь он.как был а вот на это правило уже не.смотрит который предназначен для всех.тегов п он смотрит уже на то конкретное.которые написали лично для него вот и.принимает эти свойства вот.соответственно если в один прекрасный.день нам пришло приходится как бы.заменить шрифт или цвет или размер на.всех страницах нашего сайта у всех.абзацев нам достаточно только открыть с.с таблицу поменялись допустим один.символ всего с 12 допустим на 11 и все у.нас на всех страницах сайта хоть их там.1000 хоть миллион.все абзаца станут 11 размер а вот так.работает таблицы стилей это очень.удобное изобретение для веб-дизайна и на.практике вы в этом еще не раз убедитесь.теперь давайте посмотрим реальный пример.использования таблицы стилей опять-таки.возьмём мой сайт вот у меня допустим на.сайте есть абзаца простые просторам.зации без прописывания каких-либо правил.теперь допустим я в какой то день.захотел изменить цвет вот серого который.сейчас на черный вот я открываю таблицу.стилей этого сайта вот так она примерно.выглядит вот те самые правила которые.можно записывать вот правило для всех.тегов.пэда для всех абзацев нельзя здесь могу.спокойно изменить допустим цвет вот он у.меня серый стоит на черный сохраняя.данную страницу и смотрим все у меня.таблицы стилей перья.обновилась до и теперь мне цвет кружевом.зайцев черный допустим я захотела.сделать их поменьше опять таки я захожу.в правила для всех абзацев стороны.допустим 11 размер сохраняю обновляю мне.как вы видите все абзацы и стали 11.размер а вот тоже самое ссылками можно.изменить цвет всех ссылок на сайте можно.изменить что угодно то есть css.очень и очень плотно взаимодействует с.html и очень частые они как бы.используются вместе при этом css.позволяет задавать такие тайники рамки.как здесь допустим да видно позволяет.задавать различные фоны в кнопок ну и.много других особенностей которые через.простой html.разрешить как бы достаточно сложно вот.на этом я данный урок заканчиваю.я надеюсь вы поняли саму суть каскадных.таблиц стилей и дальше уже у вас.обучение пойдет намного проще потому что.вы понимаете зачем эти таблицы нужны.ноты как они взаимодействуют самим.html-кодом до самой страницы

CSS — Базовый курс 1

Как? Вы еще не смотрели? Ну это зря...