С помощью языка CSS можно менять всё оформление HTML страницы, все свойства тегов. К примеру, изменять цвет текста или сам шрифт, делать цветные рамки таблицам и даже простейшую анимацию. В этой статье рассмотрим основы CSS. Затем перейдём к более сложным примерам.
К примеру, зададим особый стиль для тега . Этот тег выделяет текст жирным. А мы сделаем такой текст ещё и красным. Для этого используем следующий CSS код:
Строчка «color: red;» называется свойством и его значением. Нетрудно догадаться из названия, что это свойство отвечает за цвет. А значение, которое пишется через двоеточие, делает его красным. В итоге, на странице браузера текст, выделенный тегом , будет автоматически становиться красным:
Часть текста выделена жирным шрифтом
Есть возможностьзадавать сразу несколько свойств для одного селектора. Тогда надо разделять из через точку с запятой «;». Об этом читайте далее в статье.
В CSS коде выше, в примере, b называется «селектором». Этот селектор соответствует тегу b>. По аналогии вы можете использовать другие теги в качестве селекторов: «table», «tr», «i» и т.д.
Как выучить HTML & CSS? Самый аху##### способ!
Где хранится CSS код?
Стили для элементов страницы задаются несколькими способами. Самый простой — это внутри тега в любом месте страницы. В таком случае HTML код выглядит так:
Про мышей
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха.
b <
color: green;
font-size: 120%;
>
i <
color: red;
font-size: 80%;
>
Свойство «font-size: 120%;» задаёт размер шрифта относительно общего размера шрифта. При значении больше 100% оно увеличивает шрифт. Получится такой результат:
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха.
В этом примере продемонстрировано как задавать несколько свойств для разных селекторов. Обратите внимание, что свойства применяются ко всем тегам на странице.
Тег , внутри которого пишется CSS код, может быть где угодно на странице. Часто этот тег ставят в раздел .
CSS правила могут переопределять друг-друга. Если несколько раз написать один и тот же селектор с одним и тем же свойством, то применится только последний:
— в таком случае текст внутри тега будет зелёным, а не красным, потому что значение свойства будет переопределено последним совпадением.
Можно задать сколько угодно свойств. В том числе те свойства, которые будут переопределить родные свойства тегов. К примеру, тегу можно задать свойство, при котором он перестанет выделять текст жирным.
При таком способе записи CSS и HTML перемешиваются, что сильно усложняет работу программисту. Логичным выходом является сбор всех стилей в одно место. А точнее — в один отдельный файл, который загружается при загрузке страницы. Такой файл можно подключить к HTML с помощью тега внутри блока :
Про мышей
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха.
На пятой строчке примера видно, что в блоке появился подключаемый файл со стилями:
По аналогии со ссылками в href=». » можно писать как относитльный путь к файлу стилей, так и абсолютный.
Подключаемый файл стилей «style.css» будет содержать всё, что было внутри тега . из предыдущего примера. То есть:
b <
color: green;
font-size: 120%;
>
i <
color: red;
font-size: 80%;
>
CSS файл «style.css» — это точно такой же текстовый файл, что и HTML. Для изменения этого файла вам понадобится любой текстовый редактор. Нет необходимости применять специальные программы.
Последний способ указать CSS свойство — это непосредственно внутри тега, в атрибуте style=». «. В таком случае свойством будет обладать только один тег, а не все теги на странице. Применять это можно так:
Часть текста выделена жирным шрифтом
Можно указать сразу несколько свойств через «;». Результат на странице будет таким:
Часть текста выделена жирным шрифтом
Помните о том, что свойства перезаписываются. Самым важным является CSS, указанный непосредственно внутри атрибута тега style=». «.
Эти свойства будут применены в любом случае. А CSS в подключенном файле в секции . будет перезаписываться свойствами, которые находятся на странице ниже, внутри . .
Источник: www.mousedc.ru
Веб-верстка для редакторов. Основы: HTML, CSS, Bootstrap
Провел вебинар для студентов Школы стажеров и Школы редакторов: что такое HTML, CSS и Бутстрап, как этим пользоваться.
Первая часть
Общий обзор для понимания области. Что такое ХТМЛ, КСС, Бутстрап.
Видео удалили с Ютуба по жалобам зрителей. Пока идет обжалование, попробуйте скачать с Дропбокса: МП4, 1,21 ГБ
Вторая часть
Верстка длинной статьи на Бутстрапе.
Скоро заканчивается набор в Школу редакторов, и меня стали часто спрашивать, стоит ли идти в школу с точки зрения профессионального роста
Задача Школы редакторов — дать редакторам билет в профессию. Это значит, что сначала мы их обучаем, потом они работают в интересных проектах за интересный для них гонорар
Источник: www.maximilyahov.ru
Что такое html и css ютуб
20 ноября 2017 Опубликовано в разделах: Азбука терминов. 19678