Как создать СSS

Загрузить PDF
Загрузить PDF

CSS — это язык таблиц стилей, с помощью которого можно создавать веб-страницы и одновременно управлять несколькими функциями, назначая группам определенные элементы. К примеру, с помощью цветового кода дизайнер может изменить цвет фона на всех страницах сайта, внеся всего одно изменение в CSS-код.

Часть 1
Часть 1 из 4:

Как написать встроенный CSS-код

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bc\/Create-CSS-Step-1-Version-2.jpg\/v4-460px-Create-CSS-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bc\/Create-CSS-Step-1-Version-2.jpg\/v4-728px-Create-CSS-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Необходимо знать, как работают теги и атрибуты src и href .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6c\/Create-CSS-Step-2-Version-2.jpg\/v4-460px-Create-CSS-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6c\/Create-CSS-Step-2-Version-2.jpg\/v4-728px-Create-CSS-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Изучите некоторые из основных свойств CSS . Существует множество свойств, но не нужно запоминать все.
    • Запомните следующие основные свойства CSS: color и font-family .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Create-CSS-Step-3-Version-2.jpg\/v4-460px-Create-CSS-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Create-CSS-Step-3-Version-2.jpg\/v4-728px-Create-CSS-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Для каждого свойства указывается значение. Например, для свойства color можно указать значение red .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/64\/Create-CSS-Step-4-Version-2.jpg\/v4-460px-Create-CSS-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/64\/Create-CSS-Step-4-Version-2.jpg\/v4-728px-Create-CSS-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Он используется внутри элемента href или src . Чтобы использовать указанный атрибут, в кавычках после знака равенства введите CSS-атрибут, двоеточие, а затем значение свойства. Это называется CSS-правилом.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/Create-CSS-Step-5-Version-2.jpg\/v4-460px-Create-CSS-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/Create-CSS-Step-5-Version-2.jpg\/v4-728px-Create-CSS-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Обратите внимание, что профессиональные веб-разработчики, как правило, не пользуются встроенным CSS-кодом для создания сайтов. Встроенный CSS-код может нарушить целостность HTML-кода. Тем не менее это отличный способ познакомиться с основами функционирования CSS.
    Реклама
Часть 2
Часть 2 из 4:

Как написать простой CSS-код

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ec\/Create-CSS-Step-6.jpg\/v4-460px-Create-CSS-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ec\/Create-CSS-Step-6.jpg\/v4-728px-Create-CSS-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Если специальной программы нет, воспользуйтесь Блокнотом или другим текстовым редактором. Просто сохраните файл как текстовый файл и файл CSS.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/Create-CSS-Step-7.jpg\/v4-460px-Create-CSS-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/Create-CSS-Step-7.jpg\/v4-728px-Create-CSS-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Сделайте это в HTML-редакторе (если он есть).
    • В HTML-редакторе можно работать с HTML-кодом и с CSS-кодом.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b8\/Create-CSS-Step-8.jpg\/v4-460px-Create-CSS-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b8\/Create-CSS-Step-8.jpg\/v4-728px-Create-CSS-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В этом случае CSS-код можно написать без необходимости создавать отдельный файл.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/Create-CSS-Step-9.jpg\/v4-460px-Create-CSS-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/Create-CSS-Step-9.jpg\/v4-728px-Create-CSS-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Теперь введите имя элемента и фигурные скобки ( { } ). Чтобы сделать код более разборчивым, вторую фигурную скобку всегда вводите на новой строке.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1d\/Create-CSS-Step-10.jpg\/v4-460px-Create-CSS-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/Create-CSS-Step-10.jpg\/v4-728px-Create-CSS-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Внутри скобок введите CSS-правило, как если бы вы использовали атрибут style . Каждая строка должна заканчиваться точкой с запятой (;). Чтобы сделать код разборчивым, каждое правило вводите на отдельной строке, а каждая строка должна иметь отступ.
    • Обратите внимание, что этот стиль будет влиять на «все» элементы выбранного типа на странице. Более конкретный стиль будет рассмотрен в следующем разделе.
    Реклама
Часть 3
Часть 3 из 4:

Как написать более сложный CSS-код

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d7\/Create-CSS-Step-11.jpg\/v4-460px-Create-CSS-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d7\/Create-CSS-Step-11.jpg\/v4-728px-Create-CSS-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Также откройте HTML-файл.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/Create-CSS-Step-12.jpg\/v4-460px-Create-CSS-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/Create-CSS-Step-12.jpg\/v4-728px-Create-CSS-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Так вы свяжете отдельный CSS-файл с HTML-файлом. Для тега <link> требуются три атрибута: rel , type и href .
    • rel указывает браузеру, как относиться к HTML-файлу. Здесь этот атрибут должен иметь значение stylesheet .
    • type сообщает, к какому типу медиа относится ссылка. Здесь этот атрибут должен иметь значение text/css
    • href здесь используется так же, как в элементе <a> , но здесь этот атрибут должен ссылаться на CSS-файл. Если CSS-файл находится в одной папке с HTML-файлом, в кавычках укажите только имя файла.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2b\/Create-CSS-Step-13.jpg\/v4-460px-Create-CSS-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2b\/Create-CSS-Step-13.jpg\/v4-728px-Create-CSS-Step-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Выберите элементы разных типов, к которым хотите добавить один стиль. Добавьте атрибут class к таким элементам и приравняйте их к имени выбранного класса. В этом случае у элементов будет одинаковый стиль.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/Create-CSS-Step-14.jpg\/v4-460px-Create-CSS-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/Create-CSS-Step-14.jpg\/v4-728px-Create-CSS-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В CSS-файле введите имя класса после точки . , то есть так: .class .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/Create-CSS-Step-15.jpg\/v4-460px-Create-CSS-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/Create-CSS-Step-15.jpg\/v4-728px-Create-CSS-Step-15.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Выберите отдельные элементы, к которым хотите добавить специальный стиль, и добавьте атрибут id . В CSS идентификаторы создаются с помощью символа # , а не точки.
    • Идентификаторы более специфичны, чем классы, поэтому идентификатор переопределяет любой стиль класса, если у него есть атрибут со значением, отличным от значения класса.
    Реклама
Часть 4
Часть 4 из 4:

Как изучить CSS и HTML

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/Create-CSS-Step-16.jpg\/v4-460px-Create-CSS-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/Create-CSS-Step-16.jpg\/v4-728px-Create-CSS-Step-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Откройте сайт HTML Academy . На нем можно научиться основам веб-разработки.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Create-CSS-Step-17.jpg\/v4-460px-Create-CSS-Step-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Create-CSS-Step-17.jpg\/v4-728px-Create-CSS-Step-17.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Найдите другие сайты, специально предназначенные для изучения HTML и CSS. Ищите авторитетные источники, чтобы приумножить свои знания.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9d\/Create-CSS-Step-18.jpg\/v4-460px-Create-CSS-Step-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9d\/Create-CSS-Step-18.jpg\/v4-728px-Create-CSS-Step-18.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Их опыт поможет вам овладеть ценными знаниями и навыками.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c1\/Create-CSS-Step-19.jpg\/v4-460px-Create-CSS-Step-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c1\/Create-CSS-Step-19.jpg\/v4-728px-Create-CSS-Step-19.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Просмотр CSS-кодов хорошо сделанных веб-сайтов позволит вам ознакомиться со способами разработки частей веб-сайтов. Скопируйте код, а затем редактируйте его, чтобы научиться пользоваться различными атрибутами CSS.
    Реклама

Советы

  • Существует множество различных свойств, которыми можно манипулировать с помощью CSS. Найдите веб-сайт, который вам нравится, и просмотрите его исходный файл. Если внутри тегов HEAD есть имя CSS-файла, щелкните по нему, чтобы просмотреть различные свойства и значения, назначенные элементам.
Реклама

Предупреждения

  • Копирование HTML- и CSS-кодов поможет вам в обучении, но вы должны использовать свои собственные дизайнерские идеи. Использование чужого дизайна — это воровство и плагиат.
Реклама

Дополнительные статьи

Как
создать простую веб страницу в Блокноте
Как
создать простую веб страницу с помощью HTML
Как
задать цвет фона в HTML
Как
добавить фоновое изображение в HTML
Как
создать ссылку для оплаты через PayPal
Как
комментировать в HTML
Как
выделить текст жирным с помощью HTML
Как
бесплатно разместить свой сайт в Интернете
Как
задать ширину и высоту картинки с помощью HTML
Как
подчеркнуть текст в HTML
Как
начать wiki–сайт
Как
сделать сайт в Word
Как
создать ссылку на электронную почту в HTML
Как
использовать теги цвета шрифта в HTML
Реклама

Об этой статье

На других языках
Эту страницу просматривали 27 351 раз.

Была ли эта статья полезной?

Реклама