Каскадная таблица стилей (CSS) - это система для кодирования веб-сайтов, которая позволяет дизайнерам управлять несколькими функциями одновременно, назначая определенные элементы группам. Например, используя код для фона веб-сайта, дизайнеры могут изменить цвет фона или изображение на всех страницах веб-сайта одним изменением файла CSS. Вот как создать CSS для базового веб-сайта.
Шаги
Часть 1 из 4: Написание встроенного CSS
Шаг 1. Убедитесь, что вы имеете базовое представление о тегах HTML
Вы должны знать, как работают теги и
src
а также
href
атрибуты.
Шаг 2. Изучите некоторые основные свойства CSS
Вы обнаружите, что здесь очень много свойств. Однако изучать их все необязательно.
-
Некоторые хорошие базовые свойства CSS, которые следует знать:
цвет
а также
семейство шрифтов
- .
Шаг 3. Узнайте о значениях для каждого соответствующего свойства
Все свойства нуждаются в стоимости. Для
цвет
свойство, например, можно поставить
красный
ценить.
Шаг 4. Узнайте о
стиль
Атрибут HTML.
Он используется в таком элементе, как
href
или
src
. Чтобы использовать его, в кавычках после знака равенства поместите атрибут CSS, двоеточие, а затем значение свойства. Это известно как правило CSS.
Шаг 5. Поймите, что встроенный CSS обычно не используется профессиональными веб-разработчиками для веб-сайтов
Встроенный CSS может добавить ненужный беспорядок в HTML-документ. Однако это отличный способ познакомиться с тем, как работает CSS.
Часть 2 из 4: Написание базового CSS
Шаг 1. Запустите желаемую программу
Это должно позволить вам создавать файлы HTML и CSS.
Если у вас не установлена специальная программа, вы можете использовать Блокнот или другой текстовый редактор. Просто сохраните файл как текстовый файл, так и файл CSS
Шаг 2. Откройте HTML-файл вашего сайта
Вы также должны открыть это с помощью редактора HTML, если он у вас установлен.
Редакторы HTML позволяют редактировать HTML и CSS одновременно
Шаг 3. Создайте тег в заголовке HTML
Это позволит вам писать CSS без необходимости в отдельном файле.
Шаг 4. Выберите элемент, к которому вы хотите добавить стиль, и введите имя элемента, за которым следует набор фигурных скобок ({})
Чтобы код был более разборчивым, всегда ставьте вторую фигурную скобку на отдельной строке.
Шаг 5. Между фигурными скобками введите свои правила CSS, как если бы вы использовали
стиль
атрибут.
Каждая строка должна заканчиваться точкой с запятой (;). Чтобы код был удобочитаемым, каждое правило должно начинаться с отдельной строки, и каждая строка должна иметь отступ.
Очень важно отметить, что этот стиль повлияет на все элементы выбранного типа на странице. Более конкретный стиль будет рассмотрен в следующем разделе
Часть 3 из 4: более продвинутый CSS
Шаг 1. Создайте файл CSS, а не файл HTML, и сохраните его с помощью
.css
расширение.
Также откройте свой HTML-файл.
Шаг 2. Создайте тег в заголовке HTML
Это позволит вам связать отдельный файл CSS с вашим HTML-документом. Тег ссылки нуждается в трех атрибутах:
rel
тип
а также
href
-
rel
означает «отношение» и сообщает браузеру, каково отношение к HTML-документу. Здесь он должен иметь значение
"таблица стилей"
- .
-
тип
сообщает, к какому типу медиа привязаны. Здесь он должен иметь значение
"текст / CSS"
-
href
- здесь используется аналогично тому, как он используется в элементе, но здесь он должен ссылаться на файл CSS. Если файл CSS находится в той же папке, что и файл HTML, в кавычках необходимо указать только имя файла.
Шаг 3. Выберите элементы разных типов, к которым вы хотите добавить одинаковый стиль
Добавить
класс
атрибут этих элементов и установите их равными имени класса по вашему выбору. Это придаст вашим элементам одинаковый стиль.
Шаг 4. Назначьте стиль, который получит класс
Введите имя класса в файл CSS с точкой (.) Перед ним (т. Е.
.класс
).
Шаг 5. Выберите отдельные элементы, к которым вы хотите добавить особый стиль, и добавьте
я бы
атрибут.
Идентификаторы создаются в CSS с использованием символа фунта (#), а не точки.
Идентификаторы более конкретны, чем классы, поэтому идентификатор переопределит любой стиль класса, если у него есть атрибут с другим значением, чем класс
Часть 4 из 4. Дополнительные сведения
Шаг 1. Посетите школы w3
Это официальный сайт, предназначенный для обучения навыкам веб-разработки. В w3 есть множество ссылок на HTML и CSS, а также на другие веб-языки.
Шаг 2. Найдите другие сайты, специально предназначенные для изучения и преподавания HTML и CSS
Такие сайты, как CSS tricks.com, специально предназначены для обучения навыкам CSS и веб-дизайна. Поиск авторитетных источников поможет вам в вашем учебном путешествии.
Шаг 3. Свяжитесь с веб-дизайнерами и разработчиками
Их опыт и ноу-хау могут научить вас ценным знаниям и навыкам.
Шаг 4. Просмотрите исходный код веб-сайтов, с которыми вы сталкиваетесь
Просмотр CSS хорошо разработанных веб-сайтов может показать вам способы создания частей веб-сайтов. Копирование его в качестве практики и возня с кодом могут помочь вам научиться использовать различные атрибуты CSS.
