Статьи

Что такое CSS? И когда использовать его с WordPress

С такими системами управления контентом, как WordPress, в настоящее время создавать веб-сайты невероятно просто. Вам даже не нужно учиться программировать. Просто установите тему WordPress и настраивайте свой сайт, пока не упадете.

Многим неизвестно, что разработчики пишут тонны кода HTML, CSS, PHP и JavaScript для создания ваших любимых тем WordPress.

Вот что означают HTML, CSS, PHP и JavaScript:

  • HTML, сокращенно от HyperText Markup Language, обеспечивает структуру веб-страницы. Он определяет все элементы, которые вы видите на странице, будь то заголовки, абзацы, меню и так далее. Это стандартный язык разметки, который предоставляет строительные блоки для веб-страниц.
  • CSS — это сокращение от Cascading Style Sheets. CSS — это язык, который веб-дизайнеры используют для стилизации веб-страницы. Он контролирует цвета, стили шрифтов, фон, размеры столбцов, скорость отклика и все другие стили веб-страницы. Без CSS веб-страницы были бы скучными и трудными для чтения.
  • PHP — это рекурсивная аббревиатура от HyperText Preprocessor. PHP — это язык сценариев, который выполняется на сервере. Он используется для разработки статических веб-сайтов, динамических веб-сайтов и веб-приложений. Все веб-сайты WordPress в значительной степени полагаются на PHP для компиляции динамического контента, извлекаемого из базы данных. Хорошим примером использования PHP является веб-сайт электронной коммерции, работающий на WooCommerce.
  • JavaScript, часто сокращенно JS, является языком сценариев как на стороне клиента, так и на стороне сервера, который помогает сделать веб-страницы интерактивными.

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

В большей части руководства я буду использовать следующий HTML-документ:

<html>

<head>
<title>What is CSS?</title>
</head>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

Без CSS приведенный выше HTML-документ в браузере выглядит так:

что такое css

Не очень красиво, но приведенный выше шаблон позволит нам продемонстрировать, как работает CSS. Не стесняйтесь копировать приведенный выше фиктивный код для экспериментальных целей.

Без лишних слов, давайте перейдем к делу, потому что есть еще много чего.

Что такое CSS?

краткая история CSS

Итак, что такое CSS? Каскадные таблицы стилей (CSS) — это укладка язык (не путать с разметка язык, такой как HTML или сценарии язык, такой как PHP), который позволяет веб-дизайнерам и разработчикам контролировать внешний вид веб-страницы.

Согласно популярному веб-сайту веб-разработки w3schools.com, «CSS используется для определения стилей ваших веб-страниц, включая дизайн, макет и варианты отображения для различных устройств и размеров экрана».

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

Но это не все. Со временем CSS значительно улучшился и теперь позволяет добавлять интерактивность и даже создавать анимацию, такую ​​как примеры, доступные на веб-сайте animate.style. Крис Койер также создал кучу интересных CSS-анимаций на сайте CSS-Tricks.com,

Без CSS веб-страницы были бы бельмом на глазу. Например, вот как выглядит раздел нашей домашней страницы с помощью CSS:

Все чисто, красиво и красиво, правда? Вот как тот же раздел выглядит без CSS:

О боже, не очень красивое зрелище. И поэтому, дамы и господа, CSS так важен. Что касается веб-страниц, презентация — это все.

CSS был изобретен Хаконом Виум Ли в 1994 году и поддерживается группой людей в Консорциуме Всемирной паутины (W3C), называемом Рабочая группа CSS.

Но как это работает?

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

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

Как видно из приведенного выше примера, CSS состоит из нескольких частей.

  • тело, h1, а также п называются селекторы, и они помогают ориентироваться на определенные элементы в документе HTML. Например, указанные выше селекторы позволяют нам нацеливать на основной раздел, заголовки и абзацы в нашем HTML-документе.
  • фоновый цвет, цвет, выравнивание текста, семейство шрифтов, а также размер шрифта известны как характеристики.
  • светло-синий, центр, Вердана, а также 20 пикселей называются значения. Вы прикрепляете значения к свойствам, а затем значение передается соответствующему элементу HTML. В приведенном выше примере основной раздел будет иметь голубой фон, заголовки будут белыми и расположены по центру страницы, а в абзацах будет использоваться шрифт Verdana.

Знаете, примерно так:

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

Как добавить CSS в HTML

Добавление CSS в ваши HTML-документы — дело относительно простое. Вы можете добавить CSS в свои HTML-документы тремя разными способами.

Внешний CSS

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

Во-первых, вам нужно создать файл CSS для вашего кода CSS. Файлы CSS обычно имеют расширение .css. Мой — style.css, который я сохранил в той же папке, что и HTML-документ.

Во-вторых, добавьте <ссылка> элемент к раздел вашего HTML-документа, как показано ниже:

<html> 

<head> 
<title>What is CSS?</title>
<link rel="stylesheet" href="https://www.wpexplorer.com/what-is-css/style.css">
</head> 

<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>

</html>

Так же просто, как A, B, C. Когда вы загружаете свою веб-страницу в браузере, он выбирает файл CSS и стилизует «… документ HTML в соответствии с информацией в таблице стилей».

Использование внешнего файла CSS — лучший способ реализации CSS.

Внутренний CSS

Если вы хотите добавить уникальный стиль к одной веб-странице, скажем, вы создаете простой одностраничный сайт, вы можете использовать внутреннюю таблицу стилей.

Вы добавляете внутреннюю таблицу стилей внутрь <стиль> элемент внутри раздел вашего HTML-документа следующим образом:

<html>

<head>
<title>What is CSS?</title>

<style>

body {
background-color: lightblue;
} 

h1 {
color: white;
text-align: center;
} 

p {
font-family: verdana;
font-size: 20px;
}

</style>

</head>

<body> 

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> 

</body> 

</html>

Поскольку код CSS находится в вашем HTML-документе, он часто приводит к большим веб-страницам, особенно если у вас есть тонны кода CSS.

Встроенный CSS

Встроенный CSS применяется непосредственно к отдельному элементу путем добавления <стиль> атрибут к этому конкретному элементу следующим образом:

<html>

<head>
<title>What is CSS?</title>

</head>

<body style="background-color: lightblue;"> 

<h1 style="color: white; text-align: center;">This is a Heading</h1>
<p style="font-family: verdana; font-size: 20px;">This is a paragraph.</p>
<p style="font-family: verdana; font-size: 20px;">This is another paragraph.</p> 

</body> 

</html>

Сотрудники W3C не рекомендуют использовать описанный выше подход для реализации CSS, поскольку он не создает «чистый» код. Кроме того, это избыточно и требует много времени. И так же, как внутренний CSS, он приводит к большим файлам HTML.

Теперь вы знаете, что такое CSS и как реализовать его на своем веб-сайте. Если вы используете WordPress, вы можете получить доступ к файлу CSS своей темы, перейдя по ссылке Внешний вид> Редактор тем, как показано ниже:

Это приведет вас прямо к таблице стилей вашей темы:

WordPress не рекомендует вышеуказанный подход, поскольку вы можете редактировать и предварительно просматривать изменения CSS во встроенном редакторе CSS, который доступен в настройщике в реальном времени.

Чтобы получить доступ к встроенному редактору CSS, перейдите к Внешний вид> Настроить, как мы подчеркиваем ниже:

После этого найдите и нажмите Дополнительный CSS на левой боковой панели, как показано ниже.

Кроме того, вы можете получить доступ к встроенному редактору CSS, нажав Пользовательские CSS в верхней части панели администратора WordPress, как показано на скриншоте ниже.

Щелчок по пункту меню выше приводит вас к следующему редактору CSS:

встроенный редактор css в WordPress

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

Когда использовать CSS

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

Вот несколько способов использования CSS.

CSS-адаптивный веб-дизайн (RWD)

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

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

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

Укладка

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

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

Создание согласованного кросс-браузерного опыта

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

Вот почему разные браузеры по-разному отображают один и тот же код. Правильно, вы заметите тонкие (и не очень тонкие) различия при рендеринге идентичного кода, скажем, в Mozilla Firefox и Microsoft Edge.

Чтобы устранить эти проблемы кроссбраузерной совместимости, вы можете использовать свободно доступный файл CSS под названием normalize.css хорошими парнями из Google. Для реализации normalize.cssпросто добавьте следующую строку в свой раздел, как мы делали ранее:

<link rel="stylesheet" src="https://normalize-css.googlecode.com/svn/trunk/normalize.css" />

Вот и все, CSS сработает и сгладит проблемы кроссбраузерной совместимости.

Создание анимации CSS

Раньше для создания анимации приходилось полагаться либо на JavaScript, либо на Flash. Но в последнее время ситуация изменилась с появлением CSS-анимации и переходов.

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

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

Ресурсы CSS

Если вы хотите узнать больше о CSS и его приложениях, мы составили список лучших ресурсов в Интернете:


Поначалу CSS может показаться крепким орешком, но это один из самых простых языков, которые вы когда-либо выучили. Это несложно, поскольку это не такой язык программирования, как C # или PHP.

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

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

Как вы используете CSS? Сообщите нам об этом в комментариях.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Кнопка «Наверх»

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: