Программирование с нуля с чего начать? Web разработка Урок 20 Способы применения CSS

Автор Vera Abramova
Программирование с нуля   с чего начать? Web разработка  Урок 20 Способы применения CSS

в этой лекции мы научимся применять сес.

Давайте создадим новую папку Developer course. Я назову её CSS и теперь создадим файл и сохраним. Иван к примеру.

Я назову его CSS types типы сэз или виды сэз — это будет html-файл.

Поэтому пишем расширение HTML и сохраню его в папке сердце как обычно создам шаблон далее напишу здесь в тайтле CSS пусть будет ibody. Например можно написать H1 заголовок для начала напишем здесь s-t-i-k-s примеру едалия запишем параграф какой так примеру how to apply сес как применять сес. Давайте сохраним файл. Открой мне в браузере и вот так вот он выглядит без применения ссы теперь я хочу вам рассказать как можно применять CSS можно применять тремя первый самый простой способ — это указать стиль в самом HTML элементе. То есть например в заголовке H1 или параграфе мы можем указать атрибуты внутри самого HTML элемента например Style то есть мы пишем атрибут Style и далее пары свойства например самое простое свойства — это цвет нашего заголовка свойство Color доля ставится двоеточие и указывается значение мы можем указать примеру red красный и теперь сохраняются файлы обновляю страницу изменили. Как вы видите цвет заголовка на. Красной Точно также мы можем внутри элемента пи в параграфе тоже указать атрибут и здесь указать пару Color & Green и он становится цвет становится зеленым если мы хотим указать несколько слов свойств то нам нужно после пары свойства и значение поставить точку с запятой и далее можно оказывать в следующую пару например font-size распространённое свойства размер шрифта то есть по умолчанию заголовок H1 имеет вот такой вот размер шрифта до например давайте сделаем его в 2 раза меньше указав 50%. Как увидеть он стал в два раза меньше. Но он стал в два раза меньше не по отношению к тому каким он был, а по отношению к размеру текста в параграфе. То есть к стандартному размеру текста. То есть если мы указываем в процентах фонд связь то величина будет измеряться от размера об текст, а то есть текста такой как в параграфе. То есть если мы укажем 200% то он. Станет таким же как и был например вот если мы уберем смотрите и обновим ничего не меняется почему же — это происходит потому, что по умолчанию размер текста в H1 в 2 раза больше чем текст в параграфе. Например если мука бонсай из 300% то он будет в 3 раза больше текста в параграфе увидите. Также можно указать по. НДС в пикселях на. Первом например 35 пикселей и например 350 пикселей будет огромный текст. Этот способ применения CSS внутри элемента называется Inline CSS. То есть он указывается внутри внутри самого HTML элемента, но этот способ не рекомендуется использовать. Почему Потому, что если к примеру у нас таких вот заголовков или пусть. Давайте уберём размер чтобы видеть параграф лучше и давайте сделаем несколько параграфов. Скопируй этот параграф и вставим низко и попробуем отобразить всё вроде неплохо, но теперь если мы хотим поменять цвет текста во всех параграфах то нам нужно в каждом из этих параграфов меняет цвет то есть довольно-таки большой объем работы нужно совершить если мы хотим поменять всё особенно если этих строчек очень много — это одна причина. Вторая причина — это то, что рекомендуется отделять html5 CSS чтобы реализовать так называемая правила разделение интересов то есть HTML должен отображать контент отец должен отображать как этот контент выглядит и поэтому лучше не использовать онлайн способ применение CSS внутри HTML элементов и теперь я вам покажу второй способ который мы в принципе уже видели — это так называемый Internal CSS то есть внутренний сердце так называется потому, что он тоже отображается внутри html-документа, но он отображается не вводи не в самих элементах. А в ходе и мы — это уже видели. Давайте перейдем на сайт. Экзо . com и здесь посмотрим код страницы и вот здесь вот в чём вы видите есть htm HTML Element Style и здесь применяется. Сеск разным элемент документа к элементу баре к элементу div к элементу ссылка и точно так же мы можем использовать в своём html-документе. Этот способ применения. СИЗ для этого. Входи нам нужно указать Style HTML элемент с таким вот атрибутом Type CSS и внутреннего мы можем указывать селектор так называемый то есть вот — это часть CSS тот элемент которому мы хотим применить вот этот блок SRS в нашем случае — это можно также применить к бабе. То есть к элементу баре сделать его селектором какой-то стиль мы можем применить в бане до например мы можем применить фонд сайт для всего Buddy пусть будет 50 пикселей и. Давайте посмотрим, что у нас получится и как вы видите. Наш текст стал размером 50 пикселей, а заголовок ещё один по умолчанию в два раза больше него. Точно также мы можем применить и к отдельным элементам например к элементу H и, тогда он будет 50 пикселей на 61. Давайте 150 пикселей чтобы было нагляднее вы видите можем применить как элементу п пирогов мы можем применить например Color свойства сделать. Пусть Orange и поставить точку с запятой и он текстом такого оранжевого цвета дальше мы можем перечислять сколько мы захотим сколько угодно то есть опять же укажем фонд. Союз давайте пока тоже. Пусть будет 150 пикселей и теперь размер текста в параграфе его ещё один одинакового размера чем такой способ все случае он. Хорош тем, что теперь если у нас очень много элементов параграфа как у нас было да давайте сделаем — это поставляем и теперь если мы хотим поменять цвет параграфа то мы можем поменять. Это всего лишь в одном месте применив ко всем параграфам то есть мы.

0 комментариев
0

Читайте также