CSS — язык форматирования. Основы CSS для начинающих Что такое css файлы

Оставьте комментарий 6,950

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

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

Что такое CSS

CSS (Cascading Style Sheets) - каскадные таблицы стилей.

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

) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.

Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...). Набор стилей всех элементов называют таблицей стилей .

Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование , которое определяет приоритет того или иного стиля.

Преимущества CSS

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

Здравствуйте, дорогие читатели блога! Что-то давно я ничего не писал в рубрику о создании сайта. Так вот, в этой статье я расскажу о том, что же такое каскадные таблицы стилей и зачем они вообще нужны . Для начала советую прочесть предыдущие материалы из этой рубрики — и .

Итак, CSS (Cascading Style Sheets) — это язык описания внешнего вида документа, написанного с помощью языка гипертекстовой разметки (HTML). Сегодня CSS используется практически на всех сайтах. Сам язык был разработан Консорциумом Всемирной паутины (о нем можете прочесть статье про теги) и опубликован в конце 1996 года.

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

Например, нам требуется изменить цвет букв в какой-либо части документа. Для этого можно воспользоваться тегом font и атрибутом color. Вот так будет выглядеть текст , которую требуется перекрасить, в html коде:

текст

Вроде и коротко, и не загрязняет код. Но если нам требуется изменить текст как-нибудь еще. Например, изменить и увеличить шрифт. Допустим вот так: пример . Вот так этот пример будет выглядеть в коде:

пример

Код становится больше. А если таких текстов на странице много? И у них есть еще какие-нибудь свойства? Если писать текст каждый раз посредством html тегов, то страница будет выглядеть как минимум не красиво. Вот для этих целей и создали язык CSS .

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

блоков).

Правила написания css стилей

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

Простой невзрачный текст. В коде получается следующее:

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

Как уже было сказано ранее, css — язык стилевой разметки, следовательно — у него есть свой синтаксис и особенности. Вообще, весь язык можно разделить на 2 пункта:

  1. Правила — как должен выглядеть элемент в браузере (в фигурных скобках).
  2. Селекторы — какой элемент должен так выглядеть (перед фигурной скобкой).

Вот небольшой поясняющий рисунок:

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

Теперь немного о правилах написания правил (тавтология получается). Слово перед двоеточием называется свойством, а после — значением свойства.

  • Первое правило — значение всегда отделяется от свойства двоеточием.
  • Второе правило — правила всегда разделяются точкой с запятой

Как видите, особо сложного здесь ничего нет, главное не запутаться. Кстати, пробелы роли не играют и то, что написано на скрине выше можно записать в одну строчку.

Как применить css свойства - подключение к html документу

А сейчас разберемся, как можно применить данные свойства к нашему документу. Существует три способа:

  1. Прописывание свойств прямо в теге — используется атрибут style, который применим к любому html тегу. В атрибуте и прописываем все стили, которые хотим использовать.
  2. Прописывание стилей в head — в шапке сайта (теги head) прописываем все стили, которые будем использовать, с помощью тега style.
  3. Подключение отдельного файла — сначала создаем файл со всеми стилями, затем подключаем его к документу с помощью специальных тегов в head.

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

Классическое оригами

Классическое оригами

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

Второй способ подразумевает нахождение всех стилей в шапке сайта. Для этого нам потребуется тег style. Открываем наш файл и вносим вот такие изменения:

Основные правила тега style — находится между открывающим и закрывающим тегом head, внутри него прописываются все необходимые свойства. Также, для того чтобы браузер не принял стили за html код, необходимо прописать атрибут type со значением text/css. А вот как теперь выглядит страница:

Теперь во всех абзацах (тег

) текст стал зеленым, используется шрифт семейства cursive, а заголовок стал красным. Тег style мы добавили только в шапку сайта, основная часть страницы осталась без изменений . Очень удобный способ, но не лучший.

Самым популярным и оптимальным вариантом будет подключение отдельного стилевого файла. Сделать это можно двумя способами:


Большинство веб-мастеров используют первый вариант подключения файла. Преимущество подключаемого файла стилей, по сравнению с остальными, очевидно — ускорение загрузки сайта и уменьшение нагрузки на хостинг . Ведь браузеру будет достаточно лишь раз загрузить файл стилей, вместо постоянного чтения атрибута style. Да и код менее захламлен получается.

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

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

Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

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

CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.


Некоторые стили поддерживаются не всеми браузерами. Однако можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.


Возможно, Вам понадобятся также:


По методам добавления стилей в документ различают три вида стилей.

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

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.

Пример

Абзац с текстом синего цвета

РЕЗУЛЬТАТ:

Абзац с текстом синего цвета

Абзац с текстом красного цвета

Не стоит использовать внутренние стили слишком часто, так как тогда Web-документ оказывается перегружен кодом и его внешний вид трудно изменить.

Глобальные стили

Глобальные стили CSS располагаются в контейнере , расположенном в свою очередь в контейнере ... .


Атрибут type="text/css" , ранее обязательный для тега .........

Серый цвет текста во всех абзацах Web-страницы

РЕЗУЛЬТАТ:

Серый цвет текста во всех абзацах Web-страницы

Серый цвет текста во всех абзацах Web-страницы

Внешние (связанные) стили

Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.

Для связи с файлом, в котором описаны стили, используется тег , расположенный в контейнере ... .

В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.

Пример
......... ......... .........

Подключение стилей

Правило подключения глобальных и внешних стилей состоит из селектора и объявлений стиля .

Селектор, расположенный в левой части правила, определяет элемент (элементы), для которых установлено правило. Далее, в фигурных скобках перечисляются объявления стиля, разделенные точкой с запятой. Например:

P { text-indent: 30px; font-size: 14px; color: #666; }

Объявление стиля – это пара свойство CSS: значение CSS .

Например: color: red

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

Селекторы CSS

Селектор Описание Подробнее
* Любой элемент
E Элемент, определенный тегом E
E#myid Элемент E с идентификатором "myid"
E.myclass Элемент E класса "myclass"
E Селектор существования атрибута
E Селектор равенства атрибута
E Селектор атрибута со списком значений Селекторы атрибутов
E Селектор префикса атрибута
E Селектор суффикса атрибута
E Селектор подстроки атрибута
E:link Элемент E – еще не посещенная пользователем ссылка Динамические псевдоклассы
E:visited Элемент E – уже посещенная пользователем ссылка Динамические псевдоклассы
E:hover Элемент E при наведении на него указателя мышки Динамические псевдоклассы
E:active Элемент E, активированный пользователем Динамические псевдоклассы
E:focus Элемент E в фокусе Динамические псевдоклассы
E:target Элемент E, который является целью ссылки Целевой псевдокласс
E:lang Элемент E, написанный на указанном языке Псевдокласс языка
E:enabled Элемент E – доступный элемент формы Псевдоклассы состояний
E:disabled Элемент E – недоступный элемент формы Псевдоклассы состояний
E:checked Элемент E – включенный флажок или переключатель Псевдоклассы состояний
E:indeterminate Элемент E – неопределенный флажок или переключатель Псевдоклассы состояний
E:root Элемент E, корень документа Структурные псевдоклассы
E:nth-child(n) Элемент E, n-й ребенок родительского элемента Структурные псевдоклассы
E:nth-last-child(n) Элемент E, n-й ребенок родительского элемента, считая с конца Структурные псевдоклассы
E:nth-of-type(n) n-й элемент типа E Структурные псевдоклассы
E:nth-last-of-type(n) n-й элемент типа E, считая с конца Структурные псевдоклассы
E:first-child Элемент E, первый дочерний элемент родителя Структурные псевдоклассы
E:last-child Элемент E, последний дочерний элемент родителя Структурные псевдоклассы
E:first-of-type Первый элемент типа E Структурные псевдоклассы
E:last-of-type Последний элемент типа E Структурные псевдоклассы
E:only-child Единственный у родителя дочерний элемент Структурные псевдоклассы
E:only-of-type Единственный у родителя элемент типа E Структурные псевдоклассы
E:empty Элемент E, не содержащий дочерних элементов Структурные псевдоклассы
E:not(X) Элемент E, который не соответствует простому селектору X Псевдокласс отрицания
E::first-line Первая строка элемента E Псевдоэлементы
E::first-letter Первая буква элемента E Псевдоэлементы
E::before Содержимое до элемента E Псевдоэлементы
E::after Содержимое после элемента E Псевдоэлементы
E::selection Выделение в элементе E Псевдоэлементы
E F Элемент F, который находится внутри элемента E
E > F Элемент F, который находится непосредственно внутри элемента E
E + F Элемент F, который следует сразу после элемента E
E ~ F Элемент F, который следует после элемента E

Универсальный селектор

Универсальный селектор соответствует любому элементу html-документа.

Для обозначения универсального селектора применяется символ "звёздочка" (*).

Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например:

* { margin: 0; padding: 0; }

В некоторых случаях символ "звёздочка" (*) может быть опущен:
*.myclass и .myclass эквиваленты,
*#myid и #myid эквивалентны

Селекторы тегов

В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например:

H1 {color: red; text-align: center;}

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

H1, h2, h3, h4 {color: red; text-align: center;}

Селекторы идентификаторов

HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:

...

Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.

В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:

Div#a1 {color: green;}

аналогично

#a1 {color: green;}

Желательно использовать id не для стилевого оформления элемента, а для обращения к нему через скрипты или перехода по ссылке.

Селекторы классов

Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:

...

Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.

В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:

I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}

Для тега можно одновременно указать несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяются стили каждого из указанных классов.

...

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

Селекторы атрибутов

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


h1 {color: #800000;} /* элемент h1, у которого есть атрибут title */
input { border: 1px solid #ссс; padding: 4px 6px; width: 300px; }
a { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; }
span { display: inline-block; background-image: url("/img/icon_sprite.png"); }
a, a { background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; }
{ display: block; float: left; width: 280px; }

Между именем тега и квадратной скобкой ([) не должно быть пробела!


Универсальный селектор, селекторы тегов, идентификаторов, классов и атрибутов, а также псевдоклассы относятся к простым селекторам.

Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами.

Контекстные селекторы

Один из самых часто используемых комбираторов – контекстный селектор.

Контекстные селекторы или селекторы потомков определяют несколько элементов, один из которых находится внутри другого. В контекстном селекторе простые селекторы разделены пробелом.

Пример
  1. Пушкин А.С.
    • «Выстрел»
    • «Метель»
    • «Дубровский»
  2. Гоголь Н.В.
    • «Ревизор»
    • «Тарас Бульба»
    • «Мертвые души»
  3. Толстой Л.Н.
    • «Война и мир»
    • «Анна Каренина»
    • «Воскресение»

РЕЗУЛЬТАТ:

  1. Пушкин А.С.
    • «Выстрел»
    • «Метель»
    • «Дубровский»
  2. Гоголь Н.В.
    • «Ревизор»
    • «Тарас Бульба»
    • «Мертвые души»
  3. Толстой Л.Н.
    • «Война и мир»
    • «Анна Каренина»
    • «Воскресение»

Дочерние селекторы

Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).

Пример
  1. Пушкин А.С.
    • «Выстрел»
    • «Метель»
    • «Дубровский»
  2. Гоголь Н.В.
    • «Ревизор»
    • «Тарас Бульба»
    • «Мертвые души»
  3. Толстой Л.Н.
    • «Война и мир»
    • «Анна Каренина»
    • «Воскресение»

РЕЗУЛЬТАТ:

  1. Пушкин А.С.
    • «Выстрел»
    • «Метель»
    • «Дубровский»
  2. Гоголь Н.В.
    • «Ревизор»
    • «Тарас Бульба»
    • «Мертвые души»
  3. Толстой Л.Н.
    • «Война и мир»
    • «Анна Каренина»
    • «Воскресение»

Соседние селекторы

Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.

Пример

РЕФЛЕКСОТЕРАПИЯ

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПИЯ

Смежные селекторы

Смежный селектор определяет знак "тильда" (~), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым (необязательно непосредственно).

Пример

РЕФЛЕКСОТЕРАПИЯ

"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПИЯ

"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.



.

CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык, позволяющий управлять внешним видом блога. Язык не так сложен для изучения, но мне хватает мизерных знаний по CSS. Изучение основы CSS позволит Вам вполне уверенно “владеть” дизайном Вашего блога.

За внешний вид блога на WordPress отвечает файл style.css , находящийся в папке темы. И, как Вы, наверное, поняли, если захотите поменять шрифт или, к примеру, цвет фона нужно открыть style.css , найти нужную строку, изменить данные и сохранить. Результатом будет изменение внешнего вида блога.

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

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

Теория по CSS

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

Шрифт

font-size - размер шрифта ( font-size: размер шрифта в пикселях (px), в процентах (%) и т. д.)

Font-size: 14 px;

font-family – шрифт для элемента ( font-family: имя_шрифта)

Font-family: Tahoma;

font-weight – толщина шрифта (font-weight: bold или normal и т. п.)

Font-weight: bold;

font-style – стиль шрифта (font-style: normal (нормальный) или italic (курсив) и т. п.)

Font-style: normal;

font – объединение всех свойств для шрифта ( font: стиль_шрифта (необязательно) размер семейство)

P { font: bold italic 12px verdana; }

Размер

width – ширина элемента ( width: значение в пикселях, процентах и т.п.)

Width: 333px;

height – высота элемента (аналогично width)

Height: 333px;

max-width – максимальная ширина элемента (по аналогии)

Max-width: 333px;

min-width – минимальная ширина элемента (так же как и width)

Min-width: 333px;

max-height – максимальная высота элемента;

Max-height: 333px;

min-height – минимальная высота;

Min-height: 333px;

Свойства текста

text-align – горизонтальное выравнивание (text-align: по центру (center) или по ширине (justify) или по левому краю (left) и т. д. )

Text-align: center;

vertical-align – вертикальное выравнивание;

Vertical-align: justify;

line-height – высота строки (line-height: в пикселях (px), в процентах (%) и т.д. ) Также можете использовать множитель: например, значение 1.5 означает полуторный интервал между строками:

Line-height: 1.5;

color – цвет текста (color: цвет ). Цвета могут задавать по-разному :

  1. используя название (red, green, white и т.д.);
  2. по шестнадцатеричному значению, перед кодом не забудьте ставить символ решетки – #
color: #000000;

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

letter-spacing – увеличение / уменьшение расстояния между буквами (letter-spacing: значение (в пикселях и т.п.) | normal – нормальный интервал):

Letter-spacing: 7px;

text-transform – выбор написания слова заглавными/строчными буквами (text-transform: lowercase (все буквы будут строчными) | uppercase (все символы будут заглавными)

Text-transform: uppercase;

Фон

background – фон страницы (background: , ни одно свойство не обязательное, поэтому можно использовать лишь то, что необходимо):

Background: #000 url("images/wpnew.png") repeat-y;

Выше приведен пример, где задан цвет фона, затем идет путь к фоновому изображению и по вертикали.

background-position – стартовая позиция фона страницы (background-position: || ):

Background-position: left top;

background-color – цвет фона (background-color: цвет);

Background-color: #333333;

background-attachment – фон страницы фиксированное или прокручивается вместе с “ползунком” (background-attachment: fixed | scroll)

Background-attachment: scroll;

background-image – изображение фона (background-image: url(путь к файлу)):

Background-image: url("images/wpnew.gif");

background-repeat – повторение фонового изображения (background-repeat: no-repeat | repeat | repeat-x | repeat-y)

Background-repeat: repeat-y;

Позиции

float - определение выравнивания объекта (float: left | right)

Float: left;

Выше приведен пример обтекания по правому краю.

visibility – возможность сделать любой объект видимым или невидимым (visibility: visible | hidden):

Visibility: hidden

Границы

border – рамка (граница) элемента (толщина стиль цвет_рамки):

Border: 1px solid black;

  • solid – сплошная рамка
  • dotted – точечная
  • dashed – пунктирная

Остальные виды рамок, которые перечислены ниже, работают аналогичным способом.

border-top – верхняя рамка

border-right – правая рамка

border-bottom – нижняя рамка

border-left – левая рамка

Отступы

margin – величина отступа ();

Margin: 3px 3px 3px 3px;

margin-top – верхний отступ;

Margin-top: 3px;

margin-right – правый отступ;

margin-bottom – нижний отступ;

margin-left – левый отступ;

Поля

padding – свойства поля (сверху, справа, снизу и слева соответственно );

Padding: 3px 3px 3px 3px;

padding-top – верхнее поле

Padding-top: 3px;

padding-right – правое поле

padding-bottom – нижнее поле

padding-left – левое поле

Псевдоклассы

:hover – стиль объекта при наведении мышкой (элемент:hover { ... })

A:hover { background: #333333; color: #333333;}

A:visited {color: #333333;}

Практика по CSS

Итак, что же делать, если Вы вдруг решили поработать со шрифтом блога? Я предпочитаю делать следующее:

Аналогичным образом Вы можете изменить, что угодно на блоге. Использование делает редактирование CSS очень удобной. Не нужно 50 раз редактировать style.css, обновлять на сервере и смотреть нравится ли так.

Поэтому для редактирования CSS, сначала смотрите изменения в Firebug, только потом изменяете в style.css и обновляете на сервере . Таким образом, Вы сэкономите кучу времени.

Мелкие изменения , которые я совершил на демонстрируемом блоге (если Вы активный читатель , Вы знаете адрес того блога):

_____________________

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

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

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

Дополнительно CSS может использоваться и с другими документами типа XML, наиболее часто используются документы XUL и SVG.

Чтобы понять, что такое CSS, разберем простой пример. Когда сотрудник редакции газеты или журнала производит верстку издания, он делает пометки, по которым затем разрабатывается внешний вид готового материала. Например: «выделить заголовок красным», «сделать отступ», «увеличить расстояние между информационными блоками» и так далее. При работе с сайтами нельзя прописать подобные заметки обычным языком, браузер не сможет их прочитать. Чтобы он учел отметки, необходимо прописать их на языке CSS.

Принцип работы CSS

Принцип работы основывается на том, что CSS находит определенный элемент HTML (заголовок) и определяет для него конкретное свойство (цвет), чтобы присвоить ему значение (красный). Прописывается это так:

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

Как и где можно написать CSS

  • CSS может быть прописан как атрибут непосредственно в HTML.

  • Можно применять тег
© Copyright 2024, https://qzoreteam.ru