Step 2 (S-44729)

From Stepik Wiki
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14821/step/2

Step 2 (S-44729) 1.png

[00:00 - 00:19] мы рассмотрели основные возможности а теперь давайте перейдем к следующей важной части разработки которая нам придется познакомиться любом случае это язык все сразу а зачем вообще нужен в чем проблема проблема в том что


Step 2 (S-44729) 2.png

[00:19 - 00:38] нужно как то задач формирования страницы а дело в том что он обладает конечно семантика тегов то есть большое количество тегов и с помощью этих тегов можно каким то образом сверстать оформить страницу а


[00:38 - 00:57] но те возможности которые предоставляет а именно чисто что мы пели они крайне недостаточно а вы что имели языке в смысле существуют теги для выделения цветом для смены шрифта для а


[00:57 - 01:17] изменение размера шрифта но все же есть возможность они не отвечают требованиям современных веб приложений крайне тяжело каким то образом располагать элементы либо создавать элементы а


[01:17 - 01:33] создавать пользовательские интерфейсы manchester видел в сутки для разметки текста а каково решение данной проблемы а каким образом добавить


[01:33 - 01:50] задать внешние документ был разработан специальный язык xss а каски 1 style sheets то есть каскадирование либо наследуемые а стиле


[01:50 - 02:08] и вот в совместно с языком а что мы мы сдает а структуру разметку документ а все с с а задает внешний вид каких то отдельных элементов либо t t в принципе 1 и тоже а


Step 2 (S-44729) 3.png

[02:08 - 02:25] давайте посмотрим на синтаксис что из себя представляет а это те сас ну в общем то язык это довольно громкое название а синтаксис очень простой а сердце состоит из правил


[02:25 - 02:44] 1 правило правило состоит из селектора и а фигурным скобочкам для данного селектора сдаются стиле


[02:44 - 03:01] в данном случае 1 стиль с именем а стиле состоят из имени и значение а


[03:01 - 03:20] вот в общем и целом синтаксисе сс значение стиля могут быть самые различные то есть мы видим грубо говоря значении стиля 2 строка а синтаксис самой строки он может быть сложность зависит от стиля и обвиняется браузеров браузер


[03:20 - 03:39] а в частности могут быть строчки может быть указания цвета шестнадцатеричном виде могут быть какие то специальные слова а можно задавать угол путь к какому то документу а


[03:39 - 03:56] и а в каждом конкретном случае лучше сверяться с документацией а по конкретному стилю а в языке с есть комментарии комментарии а


[03:56 - 04:13] подобные начинаются слэш звездочка заканчивается звездочка а да к тому селектор у нас может поменяться несколько стилей то есть мы видим от к 1 селектору применяется 1 стиль а ко 2 селектору


[04:13 - 04:31] меняется 2 стиля а стили должны заканчиваться точкой с запятой чтобы разделять их друг от друга а стиль moto может написать их как в 1 строчку так начинать каждый раз новую желательно конечно с новой просто для читаемости


[04:31 - 04:48] улучшения читаемости а допустим у нас есть язык с помощью которого мы можем задавать а стиля для селекторов а каким образом мы можем подключить


[04:48 - 05:03] такой а набор стилей такой style sheets а то что мы документ а существуют разные способы где могут быть заданы стили для мои документы


Step 2 (S-44729) 4.png

[05:03 - 05:20] 1 что нужно обратить внимание в браузер браузер есть встроенный стиле то есть браузер зашиты некоторые стиле а это так называемый стиль по умолчанию то есть когда вы открываете чистая что нет


[05:20 - 05:37] без строчки сразу увидите а что в заголовке а крупнее что у параграфов есть отступа и тому подобные вещи на самом деле в браузере задана просто стиле по умолчанию для всех элементов


[05:37 - 05:56] когда вы смотрите а что вы смотрите как он выглядит а в контексте текстиля которая задана в браузере а браузеры можно у стиле можно создавать во внешнем файле а про этом уже говорили для этого используются так линк


[05:56 - 06:13] не просто link link рфпл style sheet а и атрибуте href указывается ссылка на файл уру уру файла стилей


[06:13 - 06:29] а стиля могут быть заданы прям а в тексте документа то есть содержимое файла можно разместить прям внутри мои документы для этого есть специальный а специальный тег style это факт


[06:29 - 06:46] открывается закрывается внутри тэга style а вы можете размещать все срастется то есть браузер и его содержимое будет анализировать как сейчас а кареткой возможность есть а в современных в приложениях это считается плохой практикой а


[06:46 - 07:05] потому что такие стиле не кэшируются а и они просто находятся не там где должны а современные приложения хорошую практику в стиле вносите в отдельный файл кроме того стиля могут быть привязаны к конкретному элементу


[07:05 - 07:23] а здесь синтаксис немножко отличается во 1 если мы хотим задать стиле конкретного а что мы элементов то есть аш смайлик т г а для него сдается атрибут 100 именно атрибут значение этого атрибута


[07:23 - 07:39] это набор стилей а селекторов в данном случае не пишется вообще поскольку ясно что эти стили применяются конкретному элементу это тоже считается не очень правильное практикой а


[07:39 - 07:54] такие а какие приемы можно использовать либо в процессе разработки для отладки либо исключительных случаях когда вас нет возможности исправить что то в основном а сс файле


[07:54 - 08:12] в общем и целом а стиле желательно размещать в отдельных файлах и а подгружать их подключать документов с помощью тегов линк желательно в самом начале страницы а какие вообще бывают стиле той что можно задать


Step 2 (S-44729) 5.png

[08:12 - 08:27] помощью языка со сс список очень большой на самом деле смотрится содержится огромное количество разных стилей есть несколько версий ц с раз


[08:27 - 08:42] 1 2 а сейчас активно развивается ц состри а здесь перечислены основные стили которые это даже


[08:42 - 08:59] это очень малая часть этих стилей но эти стили с которыми часто работают разработчики а например виц и хайд задает ширину высоту какого то элемента соответственно применимо не ко всем элементам


[08:59 - 09:16] а задают границы элемента а стиле display visibility позволяет менять режим отображения top left right ботом а сдают расположение смещение


[09:16 - 09:34] вверх вниз влево вправо а зависимость от других стилей поэтому поговорим позже бэкграунд создает фон элемента фонд правления аш листом и текст align выравнивание текста а


[09:34 - 09:52] следует заметить что стиле а несмотря на наличие стандартов ц а эти стандарты реализуются разными браузерами по разному то есть некоторые основные стили например которая здесь перечислены работают практически во всех браузерах одинаково но


[09:52 - 10:11] чем ближе стиль находится к последней версии ц 100 с чем более новые этот стиль тем больше шанс то что работает в разных браузерах по разному поэтому некоторых случаях приходится писать sms для разных браузеров отдельно