CSS в шаблоне Blogger

Основные понятия CSS, как использовать CSS в HTML и как применять CSS в шаблоне Blogger.
Блогер должен знать CSS и HTML. Что такое CSS и как его использовать в Blogger? Существует несколько основных кодов CSS, которые мы должны понять для Blogger. Это облегчит управление нашими блогами. Ниже приведены основные понятия CSS, как использовать CSS в HTML и как применять CSS в шаблоне Blogger. Я надеюсь, что, поняв основную концепцию CSS, она поможет нам улучшить ваш шаблон Blogger и внешний вид блога.

CSS для шаблона Blogger

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

  1. Что такое CSS (каскадная таблица стилей)?
  2. Как использовать CSS в HTML?
  3. Разметить текст, используя атрибут style (встроенный CSS)
  4. Разметить текст с помощью внутреннего CSS
  5. Разметить текст с помощью внешнего CSS
  6. CSS-приложение в Blogger (b:skin и b:template-skin)
  7. Базовый CSS для Blogger


Что такое CSS и как его использовать в Blogger


Что такое CSS?

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

CSS - это каскадная таблица стилей.

Как использовать CSS в HTML?

Один элемент / атрибут, который работает, в частности, для форматирования (разметки) элемента HTML <style>. Это может быть элемент HTML или атрибут HTML. Мы можем поместить <style> элемент внутрь <head> элемента, и мы назвали его внутренней таблицей стилей. Мы также можем поместить стиль атрибута в любой элемент HTML, чтобы разметить элемент HTML, и мы назвали его встроенными стилями. Мы также можем использовать таблицу стилей, которая помещается в файл CSS вне HTML. Мы назвали это внешней таблицей стилей.

Напомним, что есть три способа вставки таблицы стилей в документ HTML.

  1. Внешняя таблица стилей (как файл .css)
  2. Внутренняя таблица стилей (расположена внутри <head> элемента)
  3. Встроенная таблица стилей (как атрибут в каждом элементе HTML)

Напомним, что есть три способа вставки таблицы стилей в документ HTML.

Многие онлайн-ресурсы доступны для изучения CSS. W3school мой любимый. У этого есть структурное объяснение с большим количеством примеров, которым мы можем следовать. И что самое приятное, у него есть редактор Try It, где мы можем изменить код и увидеть влияние этого кода рядом.

Разметить текст с помощью атрибута стиля (встроенный CSS)

Мы можем разметить текст в HTML, используя атрибут style, например, код ниже. Атрибут style используется для изменения цвета внутри <h1>тега на красный.
<html>
<head>
<title>The example of application of style attribute in HTML </title>
</head>
<body>
</br>
<h1 style="color:red"> This is example of HTML with style attribute in h1 element </h1>
<p>This paragraph is the content of the first heading</p>
</body>
</html>
Вы можете скопировать этот код в блокнот и сохранить его как HTML-документ и открыть его в веб-браузере. Вы получите что-то вроде этого.


Пример атрибута стиля приложения в HTML для изменения цвета h1 на красный



Мы видим, что атрибут style со значением «color:red» отвечает за изменение цвета текста на красный. Что если у нас много заголовков и мы хотим изменить цвет всего текста внутри заголовка на красный? Мы можем использовать атрибут style для каждого тега <h1> в документе. Однако это не практично. Нам нужно написать один и тот же код 3 раза, чтобы цвет заголовка стал красным. Ниже приведен пример.
<html>
<head>
<title>The example of application of style attribute in HTML </title>
</head>
<body>
</br>
<h1 style="color:red"> This is example of HTML with style attribute in h1 element </h1>
<p>This paragraph is the content of the first heading</p>
<h1 style="color:red"> Second Heading </h1>
<p>This paragraph is the content of the second heading</p>
<h1 style="color:red">Third Heading </h1>
<p>This paragraph is the content of the second heading</p>
</body>
</html>
Вы можете скопировать этот код в блокнот и сохранить его как HTML-документ и открыть его в веб-браузере. Вы получите что-то вроде этого.


Пример атрибута Style для разметки нескольких текстов в HTML


Разметить текст с помощью атрибута стиля (внутренний CSS)

Как мы видим, это не практично и не эффективно использовать встроенный стиль для форматирования текста в HTML. Нам нужно записать один и тот же атрибут в каждый элемент <h1>, который мы создаем.

Это где CSS играет свою роль. CSS может быть объявлен в элементе <head>, и стиль будет применяться ко всем заголовкам в документе HTML. Мы не создаем встроенный стиль в каждом элементе <h1>, чтобы получить тот же эффект, что и встроенный стиль.

Мы можем написать один код на CSS и применить его к каждому <h1> внутри документа или событию вне HTML-документа.

В этом очень простом случае мы можем определить наш CSS внутри элемента <head> или поместить его во внешний файл с расширением css. Ниже приведен код для использования CSS внутри элемента <head>. Мы назвали это внутренней таблицей стилей .<style>элемент внутри элемента head и напишите h1 {color:red}. Он разметит весь текст с <h1>элемента на красный.
<html>
<head>
<title>Пример применения атрибута style в HTML </title>
<style>
h1 {color:red;}
</style>
</head>
<body>
</br>
<h1>  Это пример HTML с атрибутом style в элементе h1 </h1>
<p>Этот абзац является содержимым первого заголовка</p>
<h1> Второй заголовок </h1>
<p>Этот абзац является содержанием второго заголовка</p>
<h1>Третий заголовок </h1>
<p>Этот абзац является содержанием третьего заголовка</p>
</body>
</html

Разметить текст с помощью файла CSS (внешний CSS)

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

Мы используем элемент <link> для связи файлов HTML и CSS. Ниже иллюстрация.
<html>
<head>
<title>The example of application of style attribute in HTML </title>
<link rel="stylesheet" type="text/css" href="simple.css">
</head>
<body>
</br>
<h1> This is example of HTML with style attribute in h1 element </h1>
<p>This paragraph is the content of the first heading</p>
<h1> Second Heading </h1>
<p>This paragraph is the content of the second heading</p>
<h1>Third Heading </h1>
<p>This paragraph is the content of the second heading</p>
</body>
</html>
Для этого примера нам нужен только внешний файл CSS, чтобы отформатировать весь контент <h1> в красный цвет. Ниже приведен код CSS. Скопируйте этот код в Блокнот и сохраните как «simple.css». Поместите файл CSS в ту же папку, что и файл HTML.
/* This is simple.css to format <h1> become red */
h1 {color:red;}
Поэтому мы использовали HTML-файл для создания содержимого, а HTML-файл будет вызывать внешний CSS-файл для форматирования содержимого.

Приложение CSS в Blogger 

Ведение блога - это представление контента посетителю. Содержание - король, но представление - премьер-министр. Blogger - это платформа для ведения блогов, которая использует некоторую базу данных и файл XML в качестве шаблона для представления базы данных. XML работает как генератор HTML, когда к нашему блогу обращаются. Финальная презентация будет в формате HTML. Этот HTML отформатирован или стилизован с использованием некоторого кода CSS. Код CSS расположен внутри <b:skin>области шаблона блогера, а также внешнего CSS, который связан с <b:skin>. Вот почему CSS очень важен для Blogger.

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

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

В чем преимущество использования CSS?

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

Что такое базовый CSS, который должен понимать Blogger?

Есть несколько CSS, которые часто используются в шаблоне Blogger. Сильфон это список. Объяснение будет выложено в другом посте

  1. CSS Reset от Эрика Мейера или другого ресурса
  2. CSS для управления макетом (b:skin)
  3. CSS для управления элементом Blogger (b:skin)
  4. CSS для управления внешним видом шаблона (b:template-skin)

Базовый CSS обычно ставится поверх CSS-кода.





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

Надеюсь, вам понравится эта статья. Пожалуйста, поделитесь, если вы нашли эту статью полезной.
ОткрытьЗакрытьКомент
Cancel