Как создать мастер-файл CSS - манекены

Многие дизайнеры создают свою собственную версию главного CSS-кода HTML-кодов, который затем адаптируется к потребностям каждого отдельного сайта, чтобы ускорить процесс создания сайта с нуля.

По мере того, как вы создаете все больше и больше веб-сайтов, некоторые стили станут обычной частью вашей стандартной практики проектирования. Например, вы всегда можете установить для полей страницы значение 0, указать цвет фона на странице, выбрать шрифт по умолчанию для всего текста, создать стили переопределения для абзацев и заголовков, указать атрибуты стиля для как минимум двух (ссылки и посещенных) гиперссылок состояний и создавать собственный стиль пули.

Используйте этот файл для проверки стилей вашего CSS при создании файла master css. Образец HTML-файла содержит текст абзаца, заголовок 1, заголовок 2, неупорядоченный список и пару действующих гиперссылок.

Чтобы создать собственный мастер-файл CSS, выполните следующие действия:

1. Создайте новый пустой документ без какого-либо кодирования HTML и сохраните его с помощью мастера имен файлов. CSS.

   Сохраните этот файл CSS в том же месте на вашем компьютере, что и ваш образец. html-файл.

2. Внутри области вашего образца. html, добавьте ссылку на новый внешний файл css, который включает в себя тип носителя, установленный для всех:

   Эта ссылка указывает образ. html-файл, чтобы использовать определения стиля в связанном внешнем CSS.

3. Внутри мастера. css-файл, создайте стиль переопределения тега для тега, который устанавливает поля верхнего, левого, нижнего и правого страниц в 0px; заполнение на всех четырех сторонах страницы до 10 пикселей; и фон светло-персикового оранжевого цвета с шестнадцатеричным значением # fc3bb6.

   Код стиля должен выглядеть следующим образом:

   body {margin: 0px; padding: 10px; background-color: # fc3bb6;}
   

   Когда все четыре стороны объекта используют одно и то же значение, например, с интервалом между полями и отступом, показанным здесь, значение нужно указывать в CSS только один раз. Однако, когда значение отличается на одной или нескольких сторонах, вы должны указать значения для каждой из сторон:

   body {margin: 10px 10px 0px 0px; padding: 20px 0px 0px 20px; background-color: # fc3bb6;}
   

4. Создайте стиль redefine тега в вашем файле CSS для тегов

   ,

   и

   , указав шрифт, размер шрифта и цвет шрифта для каждого.

   Используйте любой шрифт, размер, вес и цвет, которые вам нравятся, потому что позже вы можете настроить значения в соответствии с любым конкретным проектом. Вот пример кода, который вы можете использовать:

   p {font-family: Грузия, «Times New Roman», Times, serif; размер шрифта: 12 пикселей; цвет: # 000000;} h1 {font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; цвет: # 000066;} h2 font-family: Arial, Helvetica, sans-serif; размер шрифта: 24px; font-weight: bold; color: # 000066;}
   

5. Чтобы изменить стиль гиперссылки по умолчанию, вы можете создавать стили элементов псевдокласса для каждого из четырех состояний гиперссылки.

   Вы можете указать любые атрибуты, которые вам нравятся для каждого из четырех состояний, от изменения шрифта или веса шрифта, до изменения цвета текста или цвета фона, чтобы изменить оформление текста по умолчанию.

   Вот пример кода, который вы можете использовать для четырех состояний ссылки:

   a: link {font-weight: bold; text-decoration: подчеркивание; color: # 0099cc;} a: visited {font-weight: bold; text-decoration: подчеркивание; цвет: # 990000;} a: hover {font-weight: normal; text-decoration: none; цвет: #ffffff; background: # ff9933;} a: active {font-weight: normal; text-decoration: none; цвет: #ffffff; background: # cc0000;}
   

6. Чтобы создать неупорядоченный список, вы можете либо переопределить тег

7. , либо создать стиль класса, который может быть выборочно применен к любому тегу
8. с атрибутом класса. При желании укажите изображение для замены пули по умолчанию.

   Определение стиля выглядит одинаково, если вы переопределите тег

9. или создайте свой собственный стиль класса; только селектор написан по-разному, как либо li, либо, возможно, как. пуля.

   Ваш код для стиля переопределения тега bullet li может выглядеть примерно так:

   li {list-style-position: outside; list-style-image: url (images / bullet. gif); font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
   

10. Сохраните ваши файлы HTML и CSS и запустите свой HTML-файл в окне браузера.

    Чтобы просмотреть страницу в браузере, вы можете либо дважды щелкнуть файл HTML, либо перетащить значок файла в любое открытое окно браузера.

    Файл должен отображаться со всеми атрибутами стиля, которые вы только что создали в главном файле CSS. Если это не совсем правильно или некоторые элементы отображаются неправильно, снова откройте файлы и проверьте точность всего кода, исправьте найденные ошибки и повторите проверку. Убедитесь, что вы помните, чтобы добавить период (.) Перед всеми вашими именами классов и символом числа (#) перед всеми шестнадцатеричными значениями цвета.

    

11. Проверьте свои новые стили гиперссылок в окне браузера на

    1. Перемещение по ссылке, чтобы увидеть стиль зависания.

    2. Нажатие и удерживание мыши над ссылкой, чтобы увидеть активный стиль.

    3. Нажав на ссылку и вернитесь на страницу с образцом, нажав кнопку «Назад» браузера, чтобы узнать, как эта ссылка изменяется от обычного к посещенному состоянию ссылки.

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