Как сделать внешний стиль в css
Перейти к содержимому

Как сделать внешний стиль в css

  • автор:

9 распространённых ошибок в CSS, которые мы совершаем

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

Чрезмерное использование !important

!important — ключевое слово в CSS, позволяющее установить для значения свойства более высокий приоритет (более важное значение) по сравнению с другими вариантами стилей. Например, если применить декларацию !important к стилю элемента, то этот стиль будет перекрывать все остальные стили для данной категории свойств. Вот синтаксис:

selector  
property: value !important;
>

Например, если у вас есть элемент заголовка — h1 примерно такой:

h1 class="css-mistake">CSS Mistakesh1>

Затем применяются следующие правила стилей:

h1  
color: red;
>
.css-mistake
color: green;
>

По умолчанию текст заголовка будет иметь зелёный цвет, поскольку селектор класса имеет более высокую CSS-специфичность, чем селектор элемента (тега). Но с помощью !important можно отменить это CSS-правило стилизации (тем самым селектор элемента (тега) отменяет селектор класса). Таким образом, цвет текста заголовка будет красным, имеющим приоритет перед зелёным, который задаёт селектор класса.

h1  
color: red !important;
>

Чрезмерное использование !important приводит к войне специфичности — состоянию, когда стили начинают переопределять друг друга и работать не так, как их определил автор таблицы стилей. Далее предлагается решение этой проблемы путём определения подходящих случаев для использования !important .

Когда следует использовать !important

Как сказано в названии этого раздела — Чрезмерное использование !important >, так и следует быть осторожным с использованием этого ключевого слова. !important следует использовать очень редко, только тогда, когда в этом есть крайняя необходимость. Вот несколько примеров такого использования:

  • В таблице стилей, где используется сторонняя библиотека или фреймворк, и вам нужно, чтобы ваши пользовательские стили (пользовательский CSS, написанный вами) перекрывали стили из библиотеки без изменения тем данной библиотеки.
  • Когда необходимо изменить предопределённые стили для повышения доступности. В качестве примера можно привести ситуацию, в которой вы пытаетесь сделать свой сайт доступным для всех пользователей, включая людей с нарушениями зрения. Например, вы задали значения цветов, которые, по вашему мнению, будут лучше восприниматься людьми с нарушениями зрения (слабовидящие), чем установленные по умолчанию в используемой библиотеке/фреймворке. Вы можете использовать !important , чтобы отменить значения цветов по умолчанию.
  • Если вы столкнулись с проблемой вёрстки, которую не удалось эффективно решить с помощью корректировки стилей CSS, то для решения конкретной проблемы со стилями можно использовать команду !important . Однако всегда помните, что этот способ следует рассматривать как крайнее средство.
  • В некоторых браузерах для CSS используются стили по умолчанию. В этой ситуации можно использовать !important для переопределения стилей по умолчанию, обеспечивая согласованность стилей в различных браузерах.
  • Его также можно использовать для тестирования и отладки таблицы стилей. Если какой-то стиль не работает, можно применить команду !important , чтобы заставить работать нужный стиль, переопределяя все конфликтующие стили. Такой подход позволяет быстро определить, где именно в коде возникла проблема.

Использование абсолютных единиц

Использование правильных единиц длины при создании стиля очень важно для создания отзывчивого дизайна. В CSS существует две категории единиц измерения длины: абсолютные и относительные. Многие свойства CSS, такие, как width , height , font-size и т.д., используют единицы для представления своих значений. В фрагменте кода ниже приведён пример использования единицы измерения:

selector  
font-size: 14px;
>

В представленном выше фрагменте кода мы объявили CSS-свойство font-size , а затем присвоили ему значение 14px .

Что такое абсолютные единицы

Это единицы длины с фиксированными значениями, не зависящими от среды визуализации — от размера экрана устройства. Эти единицы отлично подходят для сохранения одинаковых размеров элементов на экранах различных размеров. К стандартным абсолютным единицам, с которыми вам приходилось работать, относятся пиксели — px , пункты — pt , дюймы — in , миллиметры — mm , сантиметры — cm и типографские пики — pc .

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

С другой стороны, относительные единицы, как следует из названия, являются относительными по отношению к другому свойству (в большинстве случаев к родительскому элементу). Эти единицы являются гибкими, поскольку динамически увеличиваются, подстраиваясь под область просмотра, что позволяет использовать их для реализации отзывчивого дизайна, в отличие от абсолютных единиц. Примерами относительных единиц являются проценты ( % ), rem , em и т.д.

Как применять относительные единицы измерения и их интерпретация

Понимание значения каждой относительной единицы позволяет эффективно их использовать. Ниже приведены некоторые относительные единицы и их пояснения:

  • % — эта единица зависит исключительно от родительского элемента. Таким образом, она является относительной по отношению к родительскому элементу. Например, если задать ширину элемента 80% , то она будет составлять 80% от ширины его родительского элемента. Обратите внимание, что процент используется для значений следующих свойств: width , height , margins и paddings .
  • em — размер шрифта относительно родительского элемента. Например, если установить размер шрифта элемента 4em , то он будет в четыре раза больше размера шрифта родительского элемента. Используйте em при работе с типографикой (текстом) — это позволяет пропорционально масштабировать текст.
  • rem — размер шрифта относительно корневого элемента. rem обычно используется для достижения согласованного стиля во всем макете.
  • vh — относительно 1% высоты области просмотра.
  • vw — относительно 1% ширины области просмотра.

Использование встроенного/инлайн стиля

Встроенный стиль — это система стилизации, при которой стиль передаётся непосредственно элементу HTML через атрибут style . Несмотря на существование этой системы стилей, необходимо понимать, что её использование не соответствует лучшим практикам построения приложений, поскольку создаёт невоспроизводимый код. Используйте встроенный стиль только при тестировании или украшении простого HTML-файла. Вот несколько причин, по которым следует избегать этой системы стилей:

  • При использовании встроенного стиля вы не можете следовать принципу DRY . Встроенный стиль приводит к повторению кода и невозможности его повторного использования, поскольку каждый элемент стилизуется отдельно, даже если он имеет тот же стиль, что и другой элемент. Встроенный стиль приводит к избыточному коду.
  • Код становится сложным для чтения и раздувается. Это приводит к увеличению размера HTML-файла, что сказывается на производительности. Кроме того, код становится беспорядочным и неструктурированным, поэтому необходимо различать структуру (HTML) и стилистику (CSS).
  • Это приводит к состоянию, называемому «Сложность Сопровождения», которое означает, что код становится сложным для сопровождения. Например, если необходимо изменить внешний вид элемента, то придётся найти соответствующий HTML-тег и произвести непосредственную корректировку стиля. Представьте себе ситуацию, когда встроенные стили разбросаны по разным местам; такой подход не подходит для масштабирования.

Лучшие практики

Чтобы преодолеть недостатки встроенного стиля, необходимо использовать внутренние таблицы стилей (стили внутри тега ) или внешние таблицы стилей, позволяющие сохранить код здоровым и организованным.

  • Внешняя таблица стилей. Создайте внешний CSS-файл. Храните в нем свои стили, а затем свяжите с ними ваш HTML. Таким образом, достигается разграничение между HTML и CSS-кодом, что делает стили удобными для поддержки и многократного использования.
  • Внутренняя таблица стилей. Непосредственно в HTML-файле используйте тег в HTML-документа. Несмотря на то, что этот подход находится внутри HTML-файла, все равно достигается разделение содержания (элемента) и представления (стилей).

Не используйте сброс CSS

Различные браузеры имеют различные стили по умолчанию, отличающиеся друг от друга, что приводит к несовместимому внешнему виду элементов. Именно поэтому необходимо определить некоторые стили, чтобы сделать веб-страницы единообразной отправной точкой для стилизации в различных браузерах. Эти стили называются «сбросами CSS». Сбросы CSS — это CSS стили, которые служат в качестве правил для удаления стилей по умолчанию, поставляемых с браузером. Если вы знакомы с CSS, то иногда замечали, что для некоторых специфических свойств, например margin , существует стиль по умолчанию. Сброс CSS помогает нам выровнять стили, чтобы они были последовательными. Вот причины, по которым используются сброс CSS:

  • Согласованный стиль: Мы можем переопределять стили браузеров по умолчанию с помощью сброса CSS, делая таблицу стилей согласованной.
  • Для сохранения контроля над таблицей стилей сброс CSS гарантирует, что влияние на стили оказываете вы — автор таблицы стилей, а не ваш браузер.

Как создавать собственный сброс CSS

Вот простые шаги, которые необходимо выполнить:

  • Прежде всего, необходимо определить стили по умолчанию, которые необходимо удалить или переопределить. Это начальный этап, поскольку прежде чем искать решение, необходимо определить проблему.
  • Затем, ориентируясь на выявленные стили, напишите свои собственные стили CSS. Эти стили будут служить правилами, которых будет придерживаться ваша таблица стилей.
  • Наконец, протестируйте свою таблицу стилей в различных браузерах, чтобы убедиться, что сброс CSS имеет приоритет над стилями конкретного браузера. Чтобы не выглядеть абстрактно, приведём простую реализацию сброса CSS с помощью универсального CSS-селектора ( * ):

*  
margin: 0;
padding: 0;
border: 0;
>

Приведённый выше код представляет собой фундаментальный CSS-сброс, который нацелен на свойства margin , padding и border и присваивает каждому из них значение 0 . Этот процесс называется «нормализацией», поскольку он нейтрализует интервалы и границы, установленные браузером по умолчанию. Вот некоторые способы сброса CSS в Интернете:

  • Normalize.css
  • Josh Comeau custom CSS reset — Это тот вариант, который я использую в настоящее время, и Josh проделал большую работу, объяснив эти пользовательские CSS правила в явном виде.
  • HTML5 Boilerplate
  • Популярный Reset CSS Eric Meyer

Неиспользование в CSS однострочных правил

Однострочные правила в CSS — это сокращённые стили для написания CSS-кода. Они делают код более чистым и хорошо структурированным. Знание таких сокращений поможет вам писать более лаконичный код (сжатие нескольких строк кода в одну строку). Например, если вы хотите придать элементу стиль margin со всех сторон (сверху, снизу, слева и справа), вам не нужно явно указывать все свойства, такие как margin-top , margin-right , margin-bottom и margin-left , вы можете просто использовать сокращение для свойства margin . Приведённый ниже код поясняет это:

/* Не делайте так*/ 
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 15px;
/* Вместо этого используйте сокращение margin */
margin: 10px 20px 10px 20px;
/* Сокращение margin может быть даже более упрощённым */
margin: 10px 20px;

Эти односложные правила дают отличные преимущества:

  • Лаконичный код. Вы можете писать более короткий код, аккуратный и читаемый.
  • Эффективный код. Вы получаете возможность писать эффективный код, уменьшая размер файла таблицы стилей и увеличивая производительность.
  • Поддерживаемый код. Таблица стилей становится более удобной в обслуживании и не содержит ошибок. Также будет легко изменять стили и легко отлаживать их. Чтобы оценить всю мощь этих однострочных слов, необходимо ознакомиться с доступными однострочными словами CSS. Вот несколько ресурсов, которые помогут вам в этом:
    • Краткая форма записи свойств
    • Ten modern layouts in one line of CSS

    Неэффективное использование селекторов

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

    • Селекторы тегов: эти селекторы нацелены на конкретный HTML-элемент, используя имя тега (например: div , p ). Они имеют наименьшую специфичность, а также приводят к широкому стилю, то есть применяют стиль ко всем HTML-элементам с указанным тегом.
    • Селекторы классов: эти селекторы, в отличие от селекторов тегов, более специфичны, поскольку используют атрибут class , применяемый к элементу HTML. Например: ( .container ), ( .header ).
    • Селекторы идентификаторов: в повседневной жизни идентификатор — это уникальное значение, то же самое можно сказать и о селекторах идентификаторов в CSS. Селекторы идентификаторов — это уникальные атрибуты идентификатора, используемые для указания на единственный или уникальный элемент HTML. Например, ( #name ), ( #title ). Они обладают высокой специфичностью, и редкое использование делает их уникальными. Выше приведено несколько селекторов CSS. Предполагается, что вы уже знакомы с селекторами CSS. Тем не менее в этом руководстве рассказывается о некоторых распространённых селекторах и о том, как они работают. Итак, на что следует обратить внимание при выборе селектора?
    • Специфичность. Используйте селекторы, специфичные для целевых элементов. Это позволит создать стилевые ограничения и избежать чрезмерно специфических селекторов, которые могут помешать повторному использованию кода.
    • Удобство чтения. Выбранный селектор должен быть легко читаем и понятен, что поможет нам добиться чистой архитектуры кода.
    • Минимальное использование селектора идентификаторов. Использование селектора идентификатора должно быть минимальным. Используйте его только для уникальных идентификаторов. Его высокая специфичность приводит к большим сложностям при неосторожном использовании.
    • Используйте селекторы классов, когда ставите перед собой задачу многократного использования кода.

    Как избежать использования слишком сложных селекторов

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

    #container > .box > content .section .title p > span .italic  
    color: blue;
    font-weight: bold;
    >

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

    • Задействуйте наиболее специфический селектор для элемента.
    • Избегайте вложенности селекторов — сохраняйте низкую иерархию.
    • Используйте комбинаторы селекторов для элементов, имеющих одинаковый стиль.
    • Научитесь проводить частый рефакторинг кода (это позволит выявить сложные селекторы).
    • Используйте CSS-модули для структурирования кода.
    • Избегайте использования селекторов-потомков. Например, использование ( ul , li и a ) для выбора элемента. Это может быть эффективно, но со временем приводит к появлению слишком сложных селекторов.

    Игнорирование браузерной совместимости

    Совместимость с браузерами очень важна, поскольку вы не хотите, чтобы стиль хорошо функционировал в одном браузере и не работал в другом. Игнорирование совместимости браузеров может привести к несовместимости пользовательского опыта в разных браузерах. Это связано с тем, что различные браузеры по-своему отображают стили CSS. Однако учитывая совместимость браузеров и обеспечивая совместимость стилей с различными браузерами, можно добиться единообразия стилей. Одним из способов достижения совместимости кода с браузерами является следующая реализация:

      Использование вендорных префиксов. Некоторые CSS свойства требуют использования префиксов для того, чтобы они отображались независимо от браузера. К числу браузеров, требующих использования таких префиксов, относятся Internet Explorer, Mozilla Firefox и Safari. Префиксы называются вендорными, поскольку они уникальны для некоторых конкретных типов браузеров. Примеры префиксов: -webkit- , -moz- и -ms- .

    /* версия с префиксом webkit - используется браузерами, использующими движок вёрстки WebKit, такими как Chrome и Safari- */ 
    -webkit-border-radius: 8px;
    /* Версия с префиксом ms - используется в браузерах, использующих механизм разметки Microsoft, таких как Internet Explorer. */
    -ms-border-radius: 10px;
    /* стандартная версия */
    border-radius: 8px;
    /* Это фрагмент CSS-кода, использующий резервные шрифты (sans-serif) */ 
    selector
    font-family: "Courier New", sans-serif;
    >

    Использование названий цветов вместо шестнадцатеричных кодов

    Шестнадцатеричные коды — это шестнадцатеричное представление цветов. Это 6-значный код с префиксом в виде символа # , за которым следуют три пары шестнадцатеричных цифр, где первая пара представляет собой значение красного цвета, вторая пара — зелёного, а последняя — синего. Синтаксис:

    selector  
    color: #rrggbb;
    >

    Использование прямых цветовых ключевых слов имеет некоторые ограничения:

    • Названия цветов в разных браузерах несовместимы. Если, например, задать свойству color значение green , то интерпретация этого свойства одним браузером будет отличаться от интерпретации другим. Следовательно, рендеринг в различных браузерах будет противоречивым.
    • Названия цветов ограничены, так как их нельзя настраивать по тону, тени и т.п.
    • Названия цветов имеют ограниченные возможности. В связи с ограничениями, связанными с использованием названий цветов, мы вынуждены использовать Hex-коды, которые не имеют таких ограничений. Вот причины, по которым Hex-коды являются более подходящими по сравнению с ключевыми словами цвета:
      • Hex-коды/шестнадцатеричные коды являются точными и согласованными в различных браузерах.
      • Современные браузеры широко поддерживают их
      • Они имеют широкую цветовую гамму, доступную для разработчиков
      • Не ограничены в реализации — их можно легко подстроить под свои предпочтения.

      Эффективный способ поиска Hex-кодов

      Вот несколько способов получения Hex-кодов:

      • Использование онлайн-подборщика цветов — откройте браузер и введите такой запрос — «онлайн-подборщик цветов», затем выполните поиск. На открывшейся странице вы получите подборщик цветов.
      • Вы также можете познакомиться с Hex-кодом, используя цветовые диаграммы.
      • Прямо в консоли браузера в инструменте разработчика также можно получить доступ к инструменту выбора цвета.
      • Наконец, можно найти в Интернете ресурсы, которые провели соответствующее исследование и составили список этих Hex-кодов.

      Дополнительные ошибки, которые мы не замечаем

      • Использование 0px вместо 0 . Несомненно, это может не повлиять на таблицу стилей, но для лучшей практики убедитесь, что вы используете 0 , а не 0px .
      selector  
      /* Не делайте так */
      padding: 10px 12px 15px 0px;
      /* Делайте так */
      padding: 10px 12px 15px 0;
      >
      selector  
      /* Не делайте так */
      z-index: 50;
      /* Делайте так */
      z-index: 2; /* Пусть значение будет минимальным */
      >

      Заключение

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

      Основы CSS3. Селекторы

      Любой html-документ, сколько бы он элементов не содержал, будет по сути «мертвым» без использования стилей. Стили или лучше сказать каскадные таблицы стилей ( Cascading Style Sheets ) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.

      Стиль в CSS представляет правило, которое указывает веб-браузеру, как надо форматировать элемент. Форматирование может включать установку цвета фона элемента, установку цвета и типа шрифта и так далее.

      Определение стиля состоит из двух частей: селектор , который указывает на элемент, и блок объявления стиля — набор команд, которые устанавливают правила форматирования. Например:

      В данном случае селектором является div . Этот селектор указывает, что этот стиль будет применяться ко всем элементам div.

      После селектора в фигурных скобках идет блок объявления стиля . Между открывающей и закрывающей фигурными скобками определяются команды, указывающие, как форматировать элемент.

      Каждая команда состоит из свойства и значения . Так, в следующем выражении:

      background-color:red;

      background-color представляет свойство, а red — значение. Свойство определяет конкретный стиль. Свойств css существует множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например, выше указанная команда определяет для свойства background-color значение red . Иными словами, для фона элемента устанавливается цвет «red», то есть красный.

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

      Наборы таких стилей часто называют таблицами стилей или CSS ( Cascading Style Sheets или каскадные таблицы стилей). Существуют различные способы определения стилей.

      Атрибут style

      Первый способ заключается во встраивании стилей непосредственно в элемент с помощью атрибута style :

          Стили  

      Стили

      Inline-стили элементов html5

      Здесь определены два элемента — заголовок h2 и блок div. У заголовка определен синий цвет текста с помощью свойства color . У блока div определены свойства ширины ( width ), высоты ( height ), а также цвета фона ( background-color ).

      Второй способ состоит в использования элемента style в документе html. Этот элемент сообщает браузеру, что данные внутри являются кодом css, а не html:

          Стили h2 < color:blue; >div 

      Стили

      Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.

      Часто элемент style определяется внутри элемента head , однако может также использоваться в других частях HTML-документа. Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор , после чего в фигурных скобках идет все те же определения свойств css и их значения, что были использованы в предыдущем примере.

      Второй способ делает код html чище за счет вынесения стилей в элемент style . Но также есть и третий способ, который заключается в вынесении стилей во внешний файл.

      Создадим в одной папке с html странице текстовый файл, который переименуем в styles.css и определим в нем следующее содержимое:

      h2 < color:blue; >div

      Это те же стили, что были внутри элемента style . И также изменим код html-страницы:

          Стили  

      Стили

      Здесь уже нет элемента style , зато есть элемент link , который подключает выше созданный файл styles.css:

      Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации. При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в элементе style , и такой способ является предпочтительным в HTML5.

      Использование стилей во внешних файлах позволяет уменьшить нагрузку на веб-сервер с помощью механизма кэширования. Поскольку веб-браузер может кэшировать css-файл и при последующем обращении к веб-странице извлекать нужный css-файл из кэша.

      Также возможна ситуация, когда все эти подходы сочетаются, а для одного элемента одни свойства css определены внутри самого элемента, другие свойства css определены внутри элемента style , а третьи находятся во внешнем подключенном файле. Например:

      А в файле style.css определен следующий стиль:

      В данном случае в трех местах для элемента div определено свойство width , причем с разным значением. Какое значение будет применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:

      • Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше итоговой шириной будет 120 пикселей
      • Далее в порядке приоритета идут стили, которые определены в элементе style
      • Наименее приоритетными стилями являются те, которые определены во внешнем файле.

      Атрибуты html и стили css

      Многие элементы html позволяют устанавливать стили отображения с помощью атрибутов. Например, у ряда элементов мы можем применять атрибуты width и height для установки ширины и высоты элемента соответственно. Однако подобного подхода следует избегать и вместо встроенных атрибутов следует применять стили CSS. Важно четко понимать, что разметка HTML должна предоставлять только структуру html-документа, а весь его внешний вид, стилизацию должны определять стили CSS.

      Не применяется внешний стиль CSS

      -style.css не работает вообще с любыми селекторами, даже с глобальными. -Google Chrome, ctrl+F5 не спасает. -Все файлы лежат в одной папке и расширения у всех корректные. -script.js работает. -style.css открывается в браузере, если перейти к нему через отладку.

      Отслеживать
      задан 20 июн 2018 в 14:08
      694 1 1 золотой знак 5 5 серебряных знаков 23 23 бронзовых знака

      1 ответ 1

      Сортировка: Сброс на вариант по умолчанию

      Кавычки надо бы выпрямить и в дальнейшем смотреть, что копипастишь.

      Отслеживать
      ответ дан 20 июн 2018 в 14:13
      123k 24 24 золотых знака 127 127 серебряных знаков 305 305 бронзовых знаков
      Спасибо, работает. Как же я сгорел. >< 20 июн 2018 в 14:24 Это от копипаста =) – user245150 20 июн 2018 в 14:30

      • html
      • css
        Важное на Мете
      Похожие

      Подписаться на ленту

      Лента вопроса

      Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

      Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

      Три метода использования CSS

      Каскадные таблицы стилей (CSS) используются для установки стиля на веб-страницах, которые содержат элементы HTML. Они устанавливают цвет фона, размер шрифта и т.д.

      Существует три способа написания CSS для веб-страницы.

      Три способа использования CSS:

      1. Встроенные стили: размещаются внутри элементов HTML.
      2. Внутренние стили: размещаются в разделе заголовка веб-страницы.
      3. Внешние стили: размещаются на внешней таблице стилей, которая представляет собой отдельную страницу, связанную с веб-страницей.

      Встроенные стили

      • Встроенные стили помещаются в элемент HTML в коде;
      • Когда вы используете встроенный стиль, ваш стиль будет влиять только на выбранный вами элемент;
      • Встроенные стили не имеют селекторов, потому что они написаны внутри элемента html.

      Text Here

      Внутренние стили

      • Размещаются в разделе заголовка веб-страницы, которую вы пишете, с помощью тега стиля

        ;

      • Написанные вами стили будут использоваться только для веб-страницы, на которой вы их использовали;
      • Внутренние стили также называют «встроенными стилями».
           FahadStein p 

      Внешние стили

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

      Напишите свои CSS-коды с помощью любого из редакторов кода, а затем сохраните его в виде файла .css. Затем свяжите таблицу стилей с HTML-страницей, добавив этот код в раздел head:

      Не забудьте изменить местоположение таблицы стилей и name.css таблицы стилей на реальное местоположение и имя созданной вами таблицы стилей.

      Понравилось то, что вы прочитали?

      Подписывайтесь на нашу рассылку и получайте ежедневные обновления о новых учебниках, статьях, курсах и о многом другом!

      Просто введите ваш адрес электронной почты, чтобы подписаться.

      (Без спамов; ежемесячно два письма; отписаться от рассылки можно в любое время)

      Спасибо!

      Подписка успешно оформлена. ��

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *