Блогер должен знать CSS и HTML. Что такое CSS и как его использовать в Blogger? Существует несколько основных кодов CSS, которые мы должны понять для Blogger. Это облегчит управление нашими блогами. Ниже приведены основные понятия CSS, как использовать CSS в HTML и как применять CSS в шаблоне Blogger. Я надеюсь, что, поняв основную концепцию CSS, она поможет нам улучшить ваш шаблон Blogger и внешний вид блога.
CSS для шаблона Blogger
В этой статье я поделюсь своим видением CSS, которое будет охватывать несколько тем, как показано ниже:
- Что такое CSS (каскадная таблица стилей)?
- Как использовать CSS в HTML?
- Разметить текст, используя атрибут style (встроенный CSS)
- Разметить текст с помощью внутреннего CSS
- Разметить текст с помощью внешнего CSS
- CSS-приложение в Blogger (b:skin и b:template-skin)
- Базовый CSS для Blogger
Что такое CSS?
CSS — это каскадная таблица стилей. Так что же такое таблица стилей? Таблица стилей — это список кода, который имеет функцию для стилизации внешнего вида элемента в сети или другом связанном приложении. Мы знаем, что HTML — это язык разметки. Он размечает текст, чтобы его можно было отображать так, как мы собираемся в веб-браузере. HTML отвечает за структуру и разметку документа, а CSS отвечает в основном за разметку. Мы можем увидеть приложение CSS в примере ниже.
CSS — это каскадная таблица стилей.
Как использовать CSS в HTML?
Один элемент / атрибут, который работает, в частности, для форматирования (разметки) элемента HTML <style>. Это может быть элемент HTML или атрибут HTML. Мы можем поместить <style> элемент внутрь <head> элемента, и мы назвали его внутренней таблицей стилей. Мы также можем поместить стиль атрибута в любой элемент HTML, чтобы разметить элемент HTML, и мы назвали его встроенными стилями. Мы также можем использовать таблицу стилей, которая помещается в файл CSS вне HTML. Мы назвали это внешней таблицей стилей.
Напомним, что есть три способа вставки таблицы стилей в документ HTML.
- Внешняя таблица стилей (как файл .css)
- Внутренняя таблица стилей (расположена внутри <head> элемента)
- Встроенная таблица стилей (как атрибут в каждом элементе 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-документ и открыть его в веб-браузере. Вы получите что-то вроде этого.
Мы видим, что атрибут 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-документ и открыть его в веб-браузере. Вы получите что-то вроде этого.
Разметить текст с помощью атрибута стиля (внутренний 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. Сильфон это список. Объяснение будет выложено в другом посте
- CSS Reset от Эрика Мейера или другого ресурса
- CSS для управления макетом (b:skin)
- CSS для управления элементом Blogger (b:skin)
- CSS для управления внешним видом шаблона (b:template-skin)
Базовый CSS обычно ставится поверх CSS-кода.
В заключение, CSS очень важен для Blogger. Прочитав эту статью, я надеюсь, что вы сможете понять хотя бы основную концепцию CSS и структуру CSS. В следующей статье я подготовлю больше технических материалов, связанных с CSS, таких как CSS-селектор, создание макетов с использованием CSS, создание меню с использованием CSS и другие интересные темы в CSS.
Надеюсь, вам понравится эта статья. Пожалуйста, поделитесь, если вы нашли эту статью полезной.
