Области действия в css определяются пользователем, так как с его помощью можно сделать много дизайнов, css охватывает шрифты, цвета фона, шрифты, поля, линии, высоту, ширину и положение элементов.
Что вам нужно
Только текстовый редактор в качестве блокнота, который вы найдете на своем компьютере или ноутбуке (если вы используете Windows). Хотя, если вы хотите что-то более продвинутое, вы можете использовать Netbeans, который вы можете загрузить по этому адресу: //netbeans.org/, который также очень прост в использовании, в дополнение к руководству по синтаксису, помогающему вам написать это правильно и самовнушению. В этом уроке мы будем использовать ноутбук.
Основы
Перед началом важно определить структуру файлов, чтобы ваш код был очень хорошо организован. Создайте в том месте, где вы хотите, новую папку с именем CSS_PROJECT, откройте ее и в ней создайте еще одну новую папку с именем «css», которая позже вы будете использовать.
Затем откройте записную книжку и создайте файл с именем index.html. Важно, чтобы вы не забыли добавить расширение, чтобы создать правильный файл. Это будет наш основной файл.
В этом случае исходный шаблон, который будет содержать наш сайт, будет иметь верхний колонтитул в верхней части документа, который будет покрывать 100%, строку меню, место для содержимого и нижний колонтитул, который также будет иметь 100%. Мы напишем основной синтаксис, чтобы начать с нашего документа.
Ранее структуры веб-сайтов создавались с помощью таблиц, теперь эта модель устарела, и теперь используются подразделения, различающиеся по тегу.
, Добавьте первые строки кода, чтобы разделить область, введите текст для идентификации каждого элемента div.
В результате вы получите:
Как только вы это сделаете, пришло время добавить таблицу стилей, чтобы начать форматирование сайта. Откройте новый файл с помощью блокнота, на этот раз ему будет присвоено имя style.css, помня, что важно добавить расширение «.css», а также сохранить его в том месте, которое было создано до / css.
Синтаксис файла .html для распознавания таблицы стилей следующий:
Атрибут href относится к месту, где находится наш файл, эта строка кода будет находиться в файле .html между тегами
По умолчанию файл .html был создан с определенным номером для полей, важно, чтобы, если вы начнете использовать таблицы стилей, вы должны присвоить значение 0. Это значение будет связано с тегом html. Как это:
Что браузер будет переводить как:
Видно, что позиция нашей страницы была изменена. Перейдите к файлу .css, чтобы продолжить изучение.
Как уже упоминалось выше, html и css файлы будут связаны, поэтому каждый элемент
Ему было присвоено имя с атрибутом класса, например, «заголовок» или «нижний колонтитул». Когда имя дается в этом атрибуте, способ связать его в CSS - это поставить точку "." Перед именем каждого элемента div.
Чтобы идентифицировать каждое деление, мы изменим значения для границы каждого элемента до 1 пикселя.
Что будет отображаться таким образом:
Теперь мы разместим каждый элемент там, где его планируем, для этого мы дадим конкретные меры для каждого деления, это достигается с помощью свойств width и height:
В результате видно, что разделы представлены в виде списка, хотя меню div и его содержимое заполнены на 100%.
Это способ, которым браузер переводит их, но мы ищем в этом уроке то, что они «следуют», что мы исправим с помощью свойства «float».
Что приведет к:
Это где у нас уже есть желаемая структура. Отсюда мы можем добавить необходимые элементы для форматирования, некоторые образцы текста были добавлены для начала, вы можете добавить то же самое или, как вы хотите.
CSS, имеет несколько инструментов для стиля текста. Начнем с заголовка. В этом примере мы сфокусируем заголовок страницы и изменим тип шрифта для текстов.
Гарнитура может быть назначена для всего документа или для желаемого раздела. В этом случае используйте одну и ту же гарнитуру для всего документа, как показано в разделе body и со свойством font-family.
В заголовке присвойте фоновый цвет как красный с его эквивалентом в шестнадцатеричном # ff0000, размер шрифта с font-size, полужирный с font-weight, текст по центру с выравниванием текста. Как показано на следующем изображении: $config[ads_text5] not found
Используя свойства, которые мы использовали до сих пор, мы продолжаем изменять другие разделы, чтобы они также имели стиль.
Что в конечном итоге принесет нам:
В этом уроке мы описали самые основные свойства, которые можно использовать в каскадных таблицах стилей, но результат сильно отличается от того, что мы получили бы с помощью html. Как и в любом другом языке программирования или инструменте, практика - это то, что познакомит нас с различными инструментами для разработки веб-страниц.$config[ads_text6] not found
- 0
СТАТЬИ