Смотреть видео: CSS — Базовый курс 3


62 просмотра.

Краткое описание видео: .продолжаем изучение css сейчас у нас в.одном файле открыта страница не убийца.другом таблицы стилей пустая да и.браузер и так же открыто страницу new.patch.давайте попробуем создать первые правила.и посмотрим как они действуют на нашу.страницу здесь самое главное что вы.должны усвоить при создании правил это.такой момент мы можем изменять во-первых.либо готовые теги.то есть есть т.п. да он выглядит.определенным образом мы здесь можем.прописать как будут выглядеть все три.гипс мы все абзаца на сайте вот либо.второй момент мы можем создать.определенное правило который мы можем.присвоить любому тегу сейчас мы.посмотрим как это делается и допустим.первым делом мы создадим.правила которые будет изменять уже.реально существующий ттп о котором мы.говорили в самом начале отправился.даются очень просто если мы создаем для.определенного тега мы просто указываем.его имя без всяких скобок без всяких.точек просто имя tgp а дальше мы ставим.фигурную скобку открываем ее и закрываем.внутри этих фигур no scope.скобок мы будем прописывать правила.которые будут определять внешний вид.данного тега на странице так первое.правило с которым мы познакомимся там.кола цвет всех типов п то есть то что мы.здесь напишем будет определять цвет.текста внутри абзацев вот поставок.свойства прописано да вот моего.прописали мы должны поставить двоеточие.и указать его значение если в html мы.атрибут прописываем таким образом потом.ставим знак равенства дата здесь все с.мы прописываем свойства и ставим.двоеточие только после : мы прописываем.цвет.давайте попробуем прописать всем абзацам.нашей странице цвет допустим серый до.серый цвет можно прописать таким образом.42 42 42 ставим точку запятой то есть.когда прописали какое-то свойство в.конце обязательно ставьте точку запятой.теперь давайте сохраним данную страницу.и попробуем обновить нашу страницу здесь.что мы видим у нас весь текст который.расположен внутри абзацев стал серым при.этом текст который расположен в.заголовках торгах hd.он остался чёрным если посмотреть.исходный код данной странице мы увидим.что у нас никаких здесь атрибутов ничего.не прописано просто т.п..и он выглядит серым то есть вот это и.есть действие таблицы стилей теперь.давайте продолжим.допустим мы хотим сделать чтобы шрифт у.нас у всех абзацев был.12 до цвет отвечает свойство font.сайт спешит таким образом фонд тире says.: прописываем размер допустим мы хотим.12 пикселей на как я сказал ставим точку.запятой выбираем файл сохранить.обновляем нашу страницу вот мы видим что.у нас.текста 12 пикселей в высоту но проблема.в том что мы ещё не указали гарнитуру.шрифта то есть какой должен быть шрифт.поэтому он нас сейчас выглядит не очень.корректно гарнитура шрифта указывается с.помощью свойство font family.то есть семейства шрифта здесь можно.назвать несколько шрифтов запустим и.первым указанную бердана если система в.системе этот шрифт установлен текст на.сайте будет отображаться именно этим.жертвам.если такой же рик не найден мы допустим.можно дальше указать tahoma.вот система если не найдешь шрифт.verdana будет отображать текст на сайте.вот таким же там и так далее здесь можно.указать несколько шрифтов.ставим . , сохраняем данной таблицы.стилей и обновляем и и вот теперь мы.видим что у нас гарнитуры что-то.изменилось он настал бердана 12 пикселей.на и серый теперь второй тип правил.допустим мы хотим чтобы вот этот абзац у.нас вот это да он у нас был жирным да и.красном то есть мы хотим выделить как.создать правила для определенного абзаца.давайте посмотрим это как бы второй тип.правил вот делается это следующим.образом мы пишем п ..и создаем новое правило допустим мы ему.даем какое-то название любое название.допустим не ядра.вот и . new теперь мы можем этому.правилу прописать свои свойства.во-первых если мы хотим чтобы у нас.шрифт был жирным мы должны прописать.свойство font улей.то есть вес шрифта до пишем фонд вид и.после : пишем слово болт это говорит о.том что шрифт должен быть жирным.запомните если у вас есть тетрадка под.рукой запишите что вот это свойство.придает тексту жирность и цвета цвет мы.уже знаем он задается через свойство.кого даём команду и цвет красный на.красный можно задать таким две.английские буквы c и 4 0.ставим точку запятой сохраняем таблицы.стилей вот и теперь как нам прописать.данное правило именно для вот этого.абзаца да если посетители нашего сайта.а для этого нам нужно открыть код.страницы new patch html найти этот абзац.вот он и прописать ему это правило.правило у нас прописывается с помощью.специального атрибута класс пишет таким.образом класс равняется.и в двойных кавычках указываем название.этого правила в данном случае у нас она.называется индию и давайте сохраним.страницу или обновляем и видим что у нас.вот этот абзац.стал черным и красным то есть что.произошло а браузер дойдя до вот этой.строчке увидел что данному абзацу нужно.придать определенный внешний вид где.взять правило определяющий этот внешний.вид вот ему об этом говорит класс new он.идет в таблице стилей находит класс new.и придает вот эти свойства которые мы.здесь прописали этому абзацу а вот таким.образом действует второй тип проявил.определенные правила для определенного.тега.то есть мы указываем название также.после точки указываем название правила.далее третий тип правил это правило.которое можно применять к любому то есть.если вот это можно было применять только.к абзацам давайте вот проверим это.допустим применим вот этот класс new для.заголовка да вот и посмотрим изменится.он нас на красной цепь или нет он не.изменяется до соответственно отсюда.можно сделать вывод что вот этот класс.работает только для абзацев то есть мы.имеем права прописать этот класс только.в 3gp.вот и 30 правил это.его который можно прописывать на любому.тэгу создаются они также очень просто.через простую точку то есть мы ну кайзен…и название правила напустим ну да то.есть мы до точки никаких тегов не.прописан это будет означать что данное.правило можно применить к любому тегу.и соответственно также можем здесь.прописать какие-то свойства допустим.давайте пропишем кола цвет допустим.зеленый зеленый цвет можно указать таким.образом 2 0 2 английский c.еще раз 20 а вот и попробуем применить.уже к тому же самому заголовку уже.провела ru.так сохраняем таблицу стилей далее идем.в исходный код страницы и меняем вот.этот класс.заголовка с нею на канал не забываем.сохранить эту страницу переходим браузер.обновляем здесь страницу и видим что у.нас заголовок стал зеленым есть понятно.да тогда мы прописали new он никаких.действий не принял потому что отдельного.такого правила new не существует вы.только для абзацев.а здесь мы уже прописали правила которые.можно применить к любому тегу.соответственно к любому тайгу которому.мы пропишем его тексты по ватагу станет.на зеленым а вот таким образом мы.познакомились с базовыми тремя типами.правил которые есть все с то есть.правило изменяющие уже определенной теги.правила которые уже изменяет конкретно.какой то так и правило которое можно.применять к любому тэнгу в этот момент.уясните обязательно потренируетесь.экспериментируйте и только после этого.переходите к следующему уроку

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

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