CSS в шаблоне Blogger
Основные понятия CSS, как использовать CSS в HTML и как применять CSS в шаблоне Blogger.
Блогер должен знать CSS и HTML. Что такое CSS и как его использовать в Blogger? Существует несколько основных кодов CSS, которые мы должны понять для Blogger. Это облегчит управление нашими блогами. Ниже приведены основные понятия CSS, как использовать CSS в HTML и как применять CSS в шаблоне Blogger. Я надеюсь, что, поняв основную концепцию CSS, она поможет нам улучшить ваш шаблон Blogger и внешний вид блога.
Напомним, что есть три способа вставки таблицы стилей в документ HTML.
Многие онлайн-ресурсы доступны для изучения CSS. W3school мой любимый. У этого есть структурное объяснение с большим количеством примеров, которым мы можем следовать. И что самое приятное, у него есть редактор Try It, где мы можем изменить код и увидеть влияние этого кода рядом.
Вы можете скопировать этот код в блокнот и сохранить его как HTML-документ и открыть его в веб-браузере. Вы получите что-то вроде этого.
Мы видим, что атрибут style со значением «color:red» отвечает за изменение цвета текста на красный. Что если у нас много заголовков и мы хотим изменить цвет всего текста внутри заголовка на красный? Мы можем использовать атрибут style для каждого тега <h1> в документе. Однако это не практично. Нам нужно написать один и тот же код 3 раза, чтобы цвет заголовка стал красным. Ниже приведен пример.
Вы можете скопировать этот код в блокнот и сохранить его как HTML-документ и открыть его в веб-браузере. Вы получите что-то вроде этого.
Это где CSS играет свою роль. CSS может быть объявлен в элементе <head>, и стиль будет применяться ко всем заголовкам в документе HTML. Мы не создаем встроенный стиль в каждом элементе <h1>, чтобы получить тот же эффект, что и встроенный стиль.
Мы можем написать один код на CSS и применить его к каждому <h1> внутри документа или событию вне HTML-документа.
В этом очень простом случае мы можем определить наш CSS внутри элемента <head> или поместить его во внешний файл с расширением css. Ниже приведен код для использования CSS внутри элемента <head>. Мы назвали это внутренней таблицей стилей .<style>элемент внутри элемента head и напишите h1 {color:red}. Он разметит весь текст с <h1>элемента на красный.
Третий способ использования CSS - использование внешнего CSS. Так что будет два файла. Первый файл - это HTML, который отвечает за структуру документа. Второй файл - это файл CSS, который отвечает за презентацию. Оба они должны быть помещены в одну папку.
В шаблоне блоггера мы можем найти ссылку на файл CSS. Этот файл CSS создан неким программистом, который нашел определенный CSS, который требуется Blogger. Таким образом, этот CSS хранится на сервере, и другие блогеры, которым нужен этот стиль, могут использовать CSS с помощью ссылок в шаблоне блогера.
Это лучшая иллюстрация того, что означает «каскадный» в CSS. Этот внешний CSS может быть использован тысячами веб-сайтов, которые ссылаются на этот внешний CSS. Это несколько внешних CSS, которые обычно можно найти в шаблоне Blogger.
Базовый CSS обычно ставится поверх CSS-кода.
В заключение, CSS очень важен для Blogger. Прочитав эту статью, я надеюсь, что вы сможете понять хотя бы основную концепцию CSS и структуру CSS. В следующей статье я подготовлю больше технических материалов, связанных с CSS, таких как CSS-селектор, создание макетов с использованием CSS, создание меню с использованием CSS и другие интересные темы в CSS.
Надеюсь, вам понравится эта статья. Пожалуйста, поделитесь, если вы нашли эту статью полезной.
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. Мы назвали это внешней таблицей стилей.- Внешняя таблица стилей (как файл .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> <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>
Разметить текст с помощью атрибута стиля (внутренний 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)
Мы используем элемент <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)
Надеюсь, вам понравится эта статья. Пожалуйста, поделитесь, если вы нашли эту статью полезной.