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


51 просмотр.

Краткое описание видео: .продолжаем разбираться с с сейчас мы.пройдем еще три момента которые также.должны обязательно знать итак первый.момент эта ситуация когда нам нужно.прописать двум разным тегом один и тот.же стиль.предположим у нас возникла ситуация.когда нам нужно чтобы у нас.или абзаца выглядели таким образом да и.заголовки заголовки.именно второго уровня да то есть мы.хотим сделать заголовки второго уровня.такими же маленькими эсерами для.какими у нас являются абзаце как это.сделать самое простое решение которое.здесь может прийти в голову да это.прописать также h2 не прописать ему.такой же стиль как раз копировать вот.эти 3 правил и не ставить сюда вот но.это естественно не самый лучший путь.потому что во-первых это вызовет.лишний код во вторых это будет проще.сделать совсем по другому проще это.сделать просто поставить здесь запятую и.написав еще здесь аж 2 то есть это.скажет браузеру о том что нужно вот.этими стилями отображать не только все.абзацы но и все заголовки второго уровня.а ты замечаешь сохраним данная таблица.стилей и 1 им нашу страницу мы увидим.что у нас.заголовки второго уровня превратились.приняли точнее на себя такой же стиль.но так как это заголовок мы видим что он.у нас жирный а потому что все заголовки.они по умолчанию пишется жирными.шрифтами мы можем также доработать эту.таблицу стилей прописать здесь еще одно.правило опять-таки фон plate то есть вес.как бы да если там мы писали жирному.здесь был бы описали то здесь можно.написать normal вот это заставить.браузер.отобразить шрифт нежирным обычным.нормальным размером сохранили и.проверяем.а теперь мы видим что у нас головок.второго уровня ничем не отличается от.текста если он такой же как текст хотя.если мы посмотрим в хтмл код до то мы.увидим что это у нас на самом деле.заголовок 2 уровня вот так работает этот.принцип.если мы хотим прописать сразу двум.каким-то торгам одни стиле мы можем.просто их перечислить через запятую.давайте этого берем сохраним и пойдем.дальше следующий момент который мы.изучим это вложенность правил для.реализации примера нам понадобится.добавить в текст страницы кое какие тэги.поэтому давайте это сделаем откроем.страницу не пей . html и добавим.допустим где-нибудь жирного текста.допустим вот внутри абзаца какого-нибудь.любого добавьте чтобы одно слово у вас.было жирным для этого как вы помните.используется так strong.поэтому прописан 2t костром к 1.открывающий другой закрывающейся и кроме.этого где-нибудь недалеко от этого.абзаца сделайте отступ через tbr и.пропишите еще какое-нибудь слово также в.теге strong здесь уже вне абзаца и.напишем одни.абзаца так и закроем так strong.так и дальше опять таки сделаем перенос.чтобы у нас это слово эта фраза.выделялась так теперь сохранен данную.страницу.проверим браузера что у нас получилось.так вот у нас текст в не абзаца и вот.жирный текст внутри абзаца вот тем более.здесь сразу видно да что вне оказаться.отличается и по шрифту и по размеру от.того которое находится внутри абзаца.потому что мы задавали там стиле вот но.сейчас не об этом сейчас о том что такое.вложенные правило допустим нас возникла.ситуация когда нам нужно поменять только.тех жирных слов до которые находятся.внутри абзаца есть можно применять.допустим цвет серого на красной тех слов.которые выделены жирным внутри абзаца.при этом все что находится вне абзаца.жирным выделены нам изменять.не нужно вот в таких ситуациях.используются вложенные правила и пишется.не таким образом если мы хотим изменить.цвет только тех жирных слов которые.находятся внутри тега strong внутри.абзаца мы должны прописать.и далее через пробел должны прописать.strong он дальше мы уже задаем правило.который будет регулировать внешний вид.текста находящегося внутри тега strong.который свою очередь находится внутри.тгп и найди здесь напишем color допустим.пусть будет синим до 40 а и в конце две.английские буквы c ставим точку ,.сохраняем таблицы стилей.обновляем страницу и видим что у нас.текст который находится внутри 3d strong.который свою очередь находится внутри.абзаца стал синим хотя такой же текст в.треке strong до который находится вне.абзаца он так и остался у нас черным вот.на этом примере видно что такое.вложенное правила и последний момент.который мы здесь изучим этому ракета.правило состояний для этого нам.понадобится хотя бы 2 ссылки.давайте в нашей странице new beach.где-нибудь создадим пару ссылок до.которые будут у нас для примера создадим.откроем т.к. пропишем атрибута шериф и.он при этом атрибутом сделаем ссылку на.страницу где мы изучали таблицы ты.убийц . html так и сделаем чтобы.открывалась данной странице в новом.окошке и в принципе пока все здесь.напишем страница.а блиц и закроем ссылку так и после ее.поставим под переноса создадим еще одну.ссылку 2 сок у нас будет идти на.страницу с формами.то страница у нас называлась форум по.each поэтому так и пропишем есть . hdmi.так и также при будто гид зададим чтобы.открывался новом окне.здесь напишем страница форум.закрываем ссылку отлично две ссылки она.создана теперь мы через таблицу стилей.будем изучать правила состояний сохраним.страницу проверим что у нас получилось.появились на ссылки до воды они.появились у нас теперь давайте попробуем.прописать правилам состояний и также.каковы правила состояния это правило.которое регулирует внешний вид тегов.которые имеют определенное состояние.пример такого так это как раз итак а.который может быть принимать состояние.когда отсылка не посещена когда она.посвящена.когда мне она виде на мышь и когда по.ней нажимаю левой кнопкой мыши до такого.как прописывать такие правила.а прописываются они очень просто через.название тега пишем так оставим : и.пишем его состояние для которого мы.хотим создать правило первое состояние.это состояние когда ссылку никто не.посещал пишется таким образом link.и фигурных скобках мы уже можем указать.правила для этого состояния допустим мы.хотим чтобы.а когда ссылку никто не посещал у нас.цвет даны ссылки был.допустим черный ставим все нули вот.кроме этого мы хотим чтобы ссылка была.подчёркнуто то есть ссылки было.подчеркивают это которая иди сейчас есть.та же линия под ней он делается это.через атрибут текст decoration пирс.таким образом текста не корешем и после.: указываем какое именно подчёркивание.мы хотим видеть либо.а внизу ссылки либо наверху либо.посередине и самки вот если мы хотим под.ссылкой.мы должны прописать ключевое слово.underline то есть под ссылкой.м . запятой следующее состояние это.состояние когда срок уже посетили.пишется таким образом визитов из.посещена я ссылка также фигур на сколько.указано пусть он цвет у нас о посещенных.ссылок должен быть ну допустим красный.две английские буквы c и 40 а то рака.текст decoration вот подчеркивание.печенок силу ссылок вообще быть не.должно примерно он делается это так.пишется просто новым что подчёркивание.быть не должно.следующее состояние это состояние когда.на ссылку наведена мышь называется ну.хорош и в качестве значения пишем ковер.из когда мы наводим на ссылку мышь мы.допустим хотим чтобы у нас свет был.оранжевый пишем о вич текст decoration.можно в принципе прописать чтобы было.под ссылкой долине.так я загар и шин underline далее и.последний момент когда ссылка у нас.активно то есть когда по ней нажимает.актив и фигурных скобках также.прописываем цвет у нас допустим при.нажатии будет зеленый пусть он 0.00 до.тех дикарей шин подчёркивания мы укажем.подчеркивание была сверху ссылки когда.делается через.power line пишем airline ставим точку.запятой сохраняем данную таблицу стилей.возвращаемся браузер обновляем и.проверяем и так посещенные ссылки на.стали красными и без подчёркивания то.есть как мы прописали вот она висит.подчёркивание нет ссылка красным если я.сейчас наведу курсор мыши на ссылку.цвет должен стать оранжевым и.подчёркивание появится снизу окна лажу.мышь иногда по терке до подчёркивание.появилась цель ссылки стала ранчо в.момент нажатия ссылка нужно стать.зеленый и линия должна появиться над ней.добром нажимаю на ссылку ссылка.становится зеленый линия появляется на.дней он не открыл страница с таблицами.единственное что мы не увидели это.момент когда ссылка не причина так как.все эти ссылки мы уже посетили они у нас.автоматически проставляются как визитов.чтобы проверить этот первый пункт нам.нужно создать какую-нибудь ссылку по.которым мы еще не раз не щелкали найти.допустим создадим ссылку на страницу.какого-нибудь сайт http.на путем google.com ну ты пропишись.в якоре ссылкой богу вот теперь по если.мы сохраним данную страницу обновим и и.проводили то мы увидим что у нас.появится ссылка на google о чем она у.нас черная из подчеркиванию при сильно.такая какая здесь и прописано черное с.подчеркиванием вот что касалось правил.состоянии имейте ввиду что у тебя а4.состояние для каждого вы можете.прописать свой стиль при этом вы можете.прописать.и размер шрифта и сам шрифт да то есть.момент допустим когда ссылку посещенного.может быть органы до 12 пикселей когда.не причина там плохом и 14 пиксель или.ареал и так далее вот здесь можете.потренироваться попробовать разные.варианты я на этом прощаюсь увидимся в.следующем уровень

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

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