Ваш промокод mojWPAds на плагин рекламы для WordPress >>

Описание некоторых стилевых свойств CSS на примере

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

Многие посчитают подобные навыки лишними, мол "Зачем мне разбираться в CSS стилях?".

И это будет ошибочное мнение. При помощи свойств (атрибутов) CSS сделан Ваш сайт, а точнее его внешний вид. Найдите у себя на FTP файл style.css, в котором и есть почти весь Ваш дизайн шаблона. Помимо правки внешнего вида сайта, а так же персонализации стандартного шаблона под Вас, полученные знания позволят отформатировать текст статьи так, как это не позволит сделать встроенный редактор текста WordPress.

Данные свойства уже затрагивались частично в других статьях: Информация об авторе сайта без плагина или Хаки WordPress — красивый текстовый блок. Здесь же собрано все вместе и имеет наглядные пояснения.

Если у Вас уже есть азы в данном направлении и Вы хотите развиваться дальше, то можете сразу перейти на сайт htmlbook.ru, где найдете самоучитель, а так же подробный справочник по CSS и HTML. Лично я пользуюсь данным справочником каждый раз, когда нужно освежить знания, либо научиться чему-то новому.

Хватит воды. Приступим.

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

пример использования cssВсе поясняющие картинки с текстом будут находиться под "спойлером". Данный шаг позволит существенно сократить длину статьи, что скажется на восприятии материала. Развернуть спойлер можно нажатием левой клавиши мыши по знаку + в соответствующем пояснении.
Теперь же Вы можете нажать сочетание клавиш CTRL+D и добавить данную страницу в Закладки своего браузера.

Блок получился не очень красивым, но благодаря разным цветам Вам будет проще понять.

Стилевые свойства CSS: понятия и примеры

Формат следующий: вначале термин, а затем пояснение "человеческим" языком.

  • margin: 1px 2px 3px 4px - внешний отступ элемента от других элементов, или родительского элемента. Здесь: 1px 2px 3px 4px обозначают соответствующие стороны, от которых нужно отступить - сверху справа снизу слева.
    Пояснение с картинкой
    применение margin css
    На примере показано, как margin задает внешний отступ картинки от текста. Если говорить простым языком: хотите отодвинуть один элемент от другого, то пользуйтесь данным свойством. Все, что остается сделать - это правильно подобрать размер внешнего отступа с каждой стороны.
  • padding: 1px 2px 3px 4px - внутренний отступ от края элемента. Значение отступа задается аналогично, как и в случае с margin, т.е. сверху справа снизу слева.
    Пояснение с картинкой
    свойства padding css
    В данном случае, при помощи padding я задал внутренний отступ всех элементов внутри общего бокса, выделенного зеленой рамкой. Благодаря этому текст, либо что у Вас будет внутри общего элемента, не сливается с краями рамки ни с одной стороны. Если брать конкретно Ваш сайт, то padding делает аналогичное внутри поля, где размещается статья - не дает сливаться содержимому статьи с внешней рамкой (границей).

Сейчас Вы должны понять четко, что margin - это внешний отступ какого-то элемента от другого или родительского (в котором лежит), а padding - это внутренний отступ контента от внешних краев.

  • border: 2px solid #333333 - это универсально свойство, позволяющее одновременно установить толщину, стиль и цвет границы вокруг элемента. Проще говоря - это рамка, граница вокруг чего-то. Смотрим скриншот:
    Пояснение с картинкой
    свойства border css
    На данном примере border использован дважды: зеленая прерывистая рамка вокруг общего блока и красная сплошная граница вокруг картинки. Поясню, что в конструкции border: 2px solid #333333 означает:
    2px - это толщина рамки в пикселях (px). Задаете произвольно.
    solid - это стиль рамки. В данном случае она непрерывная, на что указывает свойство. Что бы получить другого вида, следует использовать другой стиль, которых на данный момент 9. Посмотреть можно на ЭТОЙ странице.
    #333333 - это цвет рамки. Можете воспользоваться "Пипеткой" в программе FastStone Capture, чтобы узнать цифровое обозначение любого элемента на Вашем компьютере.
  • background:#333333 - это так же универсальное свойство, позволяющее установить одновременно до пяти характеристик фона. Проще говоря - отвечает за цвет заднего фона, картинку на фоне и прочее.
    Пояснение
    Если Вы обратили внимание, то общий фон блока отличается от остальной страницы - он серый. Именно это свойство позволило задать ему такой оттенок. Все 5 свойств я не буду здесь перечислять, т.к. это займет довольно много времени и места на странице. Самое основное, что Вы должны вынести - задать цвет фона можно при помощи данного свойства.
  • color:#0976BB - задаем цвет текста.
    Пояснение с картинкой
    значение свойства css color
    Обратите внимание на синий цвет CTRL+D. Такой оттенок был задан благодаря данному свойству CSS. При редактировании статьи сделать подобное не составит труда. А если нужно выделить другим цветом текст в элементах оформления сайта?
  • font-size: 20px - задаем размер шрифта. Картинку не буду показывать, ибо она аналогична из предыдущего свойства color. Если посмотрите внимательнее, то CTRL+D выделяется не только цветом, но и размером. Именно рассматриваемое свойство делает подобное.
  • font-family:Arial - устанавливает семейство шрифта. Аналогично как в MS Word и Photoshop, когда мы выбираем шрифт текста. Присмотритесь внимательнее к блоку и увидите, что текст сверху отличается от того, который расположен снизу, под картинкой.
  • text-align: justify - определяет горизонтальное выравнивание текста в пределах элемента. На примере мы видим, да и по этой статье, что текст идет по всей ширине поля и нет "ступенек" с правой стороны. Именно justify делает подобное. Так же свойство text-align может принимать следующие значения: center, left, right. Помимо этого есть мало используемые значения, которые навряд ли Вам понадобятся: auto, inherit, start, end. О них так же можно почитать в справочнике, который был анонсирован в начале статьи.
  • text-decoration:blink - добавляет оформление текста в виде: подчеркивания, перечеркивания, линии над текстом и мигания.
    Пояснение на примере
    В предложенном примере данное свойство отвечает вот за такое Мигание. У text-decoration несколько значений: blink (мигание), line-through (перечеркнутый текст), overline
    (линия над текстом), underline (подчеркивание снизу), none (убирает все эффекты), inherit (наследует значение родителя, заданного для всего блока, где находится этот текст).
    Значение none является для меня одним из самых любимых, т.к. оно убирает подчеркивание в ссылках, которое мне ОООчень не нравится в сайдбаре сайта.
  • width:150px - задает ширину элемента. Можно в пикселях (px), либо в процентах (50%). Данное свойство не используется в примере, но знать его нужно, если хотим задать точное значение ширину какого-либо блока.
  • height:150px - задает высоту элемента. Все аналогично с шириной (width)

Послесловие

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

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

Удачи!

Привет. Меня зовут Виталик.

Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 11 комментариев
  1. Breeze says:

    Сайт очень хороший, благодарю вас!
    Беспокоит только одно, вы в каждой своей новости пишите [Вы] с большой буквы…
    Хватит уже, вы же образованный человек (судя по статьям), не коверкайте русский язык, пишите правильно…

    http://www.artlebedev.ru/kovodstvo/sections/165/

    • mojWP says:

      Спасибо за замечание.
      К счастью, не отношу себя к числу фанатов Артемия.

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

  2. Александра says:
    http://mal-domikru.net

    Ой, как это все сложно, но если уж очень хочется подправить шаблон - приходиться забыть о страхах!

  3. Николай says:
    http://zdrawie.com

    Ай, хороша статья! Жаль из-за работы нет времени заняться сайтом((
    Я требую больше таких статей!!! 🙂

  4. Алексей says:
    http://smartincom.ru

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

    • Николай says:
      http://zdrawie.com

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

  5. Sueno says:
    http://sueno.ru

    Еще раз спасибо, Виталик, что ты есть. Опять нашла нужное на твоем блоге. Думаю и впредь буду начинать поиски инфы сразу с него.

  6. Женя says:
    http://tut-blog.ru

    Я решил летом научится верстать. Уже подучил немного основы css

    • Виталий says:

      остались сутки до лета!!!

      мужик сказал, мужик сделал)))

  7. Вика says:

    Много интересного и полезного для себя нашла..

  8. Евгений says:
    http://krasota1959.ru/

    Случайно попал на этот блог и... задержался. Действительно очень много интересного. Сейчас как раз и занимаюсь изучением всех этих премудростей. Не скажу, что получается, но ... надо. Сделал сайт на WP, а исправить его не могу. Вот и маюсь, и удалить его жалко и сделать ничего не могу. Так что я теперь еще один Ваш постоянный посетитель)))

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14.53MB | MySQL:136 | 0,321sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!