- Главная
- Информатика
- HTML и CSS. Введение
Содержание
- 2. ЧТО ТАКОЕ CSS
- 3. CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Это не
- 4. CSS-правило состоит из селектора и перечня свойств и их значений Блок правил для каждого селектора обрамляется
- 5. ТИПЫ СТИЛЕЙ
- 6. Стиль браузера Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в
- 7. ДОБАВЛЕНИЕ СТИЛЕЙ НА СТРАНИЦУ
- 10. Внутренние стили Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей
- 11. ИНСТРУМЕНТЫ РАЗРАБОТЧИКА
- 12. Панель разработки можно отрыть следующими способами Ctrl + Shift + I (⌘ + ⌥ + I
- 13. Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета. Можно убирать галочки напротив свойств для
- 14. СЕЛЕКТОРЫ
- 15. Селектор элемента (селектор тега или типа) Выбирает все HTML элементы указанного типа. Содержит имя тега без
- 17. Итак сегодня мы изучили: ДЗ: Что такое css Из каких частей состоит css-правило Какие бывают типы
- 19. Скачать презентацию
Слайд 3CSS (Cascading Style Sheets) — это код, который вы используете для стилизации
CSS (Cascading Style Sheets) — это код, который вы используете для стилизации
![CSS (Cascading Style Sheets) — это код, который вы используете для стилизации](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-2.jpg)
Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML.
Синтаксис CSS представляет собой плоский список CSS-правил (в чистом CSS правила нельзя вкладывать друг в друга).
Помимо CSS-правил (rule sets) в языке существуют так называемые «эт-правила» (at-rules), они начинаются с символа @, например, @font-face. «Эт-правила» ещё называют CSS-директивами.
Слайд 4CSS-правило состоит из селектора и перечня свойств и их значений
Блок правил для каждого селектора обрамляется фигурными
CSS-правило состоит из селектора и перечня свойств и их значений
Блок правил для каждого селектора обрамляется фигурными
![CSS-правило состоит из селектора и перечня свойств и их значений Блок правил](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-3.jpg)
Слайд 5ТИПЫ СТИЛЕЙ
ТИПЫ СТИЛЕЙ
![ТИПЫ СТИЛЕЙ](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-4.jpg)
Слайд 6Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление
![Стиль браузера Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-5.jpg)
, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Слайд 7ДОБАВЛЕНИЕ СТИЛЕЙ НА СТРАНИЦУ
ДОБАВЛЕНИЕ СТИЛЕЙ НА СТРАНИЦУ
![ДОБАВЛЕНИЕ СТИЛЕЙ НА СТРАНИЦУ](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-6.jpg)
Слайд 10Внутренние стили
Внутренний или встроенный стиль является по существу расширением для одиночного тега
Внутренние стили
Внутренний или встроенный стиль является по существу расширением для одиночного тега
![Внутренние стили Внутренний или встроенный стиль является по существу расширением для одиночного](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-9.jpg)
Текст со стилем
Все способы подключения CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль.
Слайд 11ИНСТРУМЕНТЫ РАЗРАБОТЧИКА
ИНСТРУМЕНТЫ РАЗРАБОТЧИКА
![ИНСТРУМЕНТЫ РАЗРАБОТЧИКА](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-10.jpg)
Слайд 12Панель разработки можно отрыть следующими способами
Ctrl + Shift + I (⌘ +
Панель разработки можно отрыть следующими способами
Ctrl + Shift + I (⌘ +
![Панель разработки можно отрыть следующими способами Ctrl + Shift + I (⌘](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-11.jpg)
Firefox. Открыть меню > Инструменты разработки, или Инструменты > Веб-разработка > Инструменты разработки
Chrome. Дополнительные инструменты > Инструменты разработчика
Safari. Разработка > Показать Web Inspector . Если Вы не видите меню "Разработка", зайдите в Safari > Настройки > Дополнительно, и проверьте стоит ли галочка напротив "Показать меню разработки".
Opera. Меню > Разработка > Инструменты разработчика. Если Вы не видите меню "Разработка", включите его отображение, перейдя в Меню > Другие инструменты > Показать меню разработчика.
Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором нужно выбрать пункт Исследовать Элемент. (этот способ отобразит код того элемента, на котором щёлкнули правой кнопкой).
Слайд 13Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.
Можно убирать галочки напротив
Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.
Можно убирать галочки напротив
![Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета. Можно убирать](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-12.jpg)
Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.
Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором Вы можете задать новые значения и увидеть, как изменится Ваш элемент с новыми значениями.
Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт Вас в окно, где можно редактировать этот CSS и сохранить.
Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где можно написать новую декларацию.
Слайд 14СЕЛЕКТОРЫ
СЕЛЕКТОРЫ
![СЕЛЕКТОРЫ](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-13.jpg)
Слайд 15Селектор элемента (селектор тега или типа)
Выбирает все HTML элементы указанного типа. Содержит
Селектор элемента (селектор тега или типа)
Выбирает все HTML элементы указанного типа. Содержит
![Селектор элемента (селектор тега или типа) Выбирает все HTML элементы указанного типа.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-14.jpg)
h1 { color: red; } /* выберет все заголовки 1 уровня */
ID селектор
Выбирает элемент на странице с указанным ID. Содержит имя идентификатора с префиксом #. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.
#my-id { font-size: 15px; } /* выберет
Слайд 17Итак сегодня мы изучили:
ДЗ:
Что такое css
Из каких частей состоит css-правило
Какие бывают типы
Итак сегодня мы изучили:
ДЗ:
Что такое css
Из каких частей состоит css-правило
Какие бывают типы
![Итак сегодня мы изучили: ДЗ: Что такое css Из каких частей состоит](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/907846/slide-16.jpg)
Каким есть способы добавления стилей на страницу
Что такое инструменты разработчика и как ими пользоваться
Селекторы по тегу (типу)
Селекторы по идентификатору
Селекторы классов
Контекстные селекторы