Описание некоторых стилевых свойств CSS на примере
В данной статье я расскажу Вам об основных свойствах CSS, которые необходимо знать начинающим блогерам, не имеющих возможность держать в штате своих сотрудников верстальщика сайтов. Под свойствами некоторые понимают атрибуты CSS, но существенной роли это не играет. Главное, что Вы получите после прочтения данной статьи - это толчок в сторону развития как независимого блогера. Заложите фундамент знаний при помощи этой статьи.
Многие посчитают подобные навыки лишними, мол "Зачем мне разбираться в CSS стилях?".
И это будет ошибочное мнение. При помощи свойств (атрибутов) CSS сделан Ваш сайт, а точнее его внешний вид. Найдите у себя на FTP файл style.css, в котором и есть почти весь Ваш дизайн шаблона. Помимо правки внешнего вида сайта, а так же персонализации стандартного шаблона под Вас, полученные знания позволят отформатировать текст статьи так, как это не позволит сделать встроенный редактор текста WordPress.
Данные свойства уже затрагивались частично в других статьях: Информация об авторе сайта без плагина или Хаки WordPress — красивый текстовый блок. Здесь же собрано все вместе и имеет наглядные пояснения.
Если у Вас уже есть азы в данном направлении и Вы хотите развиваться дальше, то можете сразу перейти на сайт htmlbook.ru, где найдете самоучитель, а так же подробный справочник по CSS и HTML. Лично я пользуюсь данным справочником каждый раз, когда нужно освежить знания, либо научиться чему-то новому.
Хватит воды. Приступим.
В качестве наглядного примера выступит следующий блок с информацией. Благодаря нему я последовательно покажу за что отвечает то или иное свойство.
Все поясняющие картинки с текстом будут находиться под "спойлером". Данный шаг позволит существенно сократить длину статьи, что скажется на восприятии материала. Развернуть спойлер можно нажатием левой клавиши мыши по знаку + в соответствующем пояснении.Теперь же Вы можете нажать сочетание клавиш CTRL+D и добавить данную страницу в Закладки своего браузера.
Блок получился не очень красивым, но благодаря разным цветам Вам будет проще понять.
Стилевые свойства CSS: понятия и примеры
Формат следующий: вначале термин, а затем пояснение "человеческим" языком.
- margin: 1px 2px 3px 4px - внешний отступ элемента от других элементов, или родительского элемента. Здесь: 1px 2px 3px 4px обозначают соответствующие стороны, от которых нужно отступить - сверху справа снизу слева.
[spoiler name="Пояснение с картинкой"]
На примере показано, как margin задает внешний отступ картинки от текста. Если говорить простым языком: хотите отодвинуть один элемент от другого, то пользуйтесь данным свойством. Все, что остается сделать - это правильно подобрать размер внешнего отступа с каждой стороны.[/spoiler] - padding: 1px 2px 3px 4px - внутренний отступ от края элемента. Значение отступа задается аналогично, как и в случае с margin, т.е. сверху справа снизу слева.
[spoiler name="Пояснение с картинкой"]
В данном случае, при помощи padding я задал внутренний отступ всех элементов внутри общего бокса, выделенного зеленой рамкой. Благодаря этому текст, либо что у Вас будет внутри общего элемента, не сливается с краями рамки ни с одной стороны. Если брать конкретно Ваш сайт, то padding делает аналогичное внутри поля, где размещается статья - не дает сливаться содержимому статьи с внешней рамкой (границей).[/spoiler]
Сейчас Вы должны понять четко, что margin - это внешний отступ какого-то элемента от другого или родительского (в котором лежит), а padding - это внутренний отступ контента от внешних краев.
- border: 2px solid #333333 - это универсально свойство, позволяющее одновременно установить толщину, стиль и цвет границы вокруг элемента. Проще говоря - это рамка, граница вокруг чего-то. Смотрим скриншот:
[spoiler name="Пояснение с картинкой"]
На данном примере border использован дважды: зеленая прерывистая рамка вокруг общего блока и красная сплошная граница вокруг картинки. Поясню, что в конструкции border: 2px solid #333333 означает:
2px - это толщина рамки в пикселях (px). Задаете произвольно.
solid - это стиль рамки. В данном случае она непрерывная, на что указывает свойство. Что бы получить другого вида, следует использовать другой стиль, которых на данный момент 9. Посмотреть можно на ЭТОЙ странице.
#333333 - это цвет рамки. Можете воспользоваться "Пипеткой" в программе FastStone Capture, чтобы узнать цифровое обозначение любого элемента на Вашем компьютере.[/spoiler] - background:#333333 - это так же универсальное свойство, позволяющее установить одновременно до пяти характеристик фона. Проще говоря - отвечает за цвет заднего фона, картинку на фоне и прочее.
[spoiler name="Пояснение"]Если Вы обратили внимание, то общий фон блока отличается от остальной страницы - он серый. Именно это свойство позволило задать ему такой оттенок. Все 5 свойств я не буду здесь перечислять, т.к. это займет довольно много времени и места на странице. Самое основное, что Вы должны вынести - задать цвет фона можно при помощи данного свойства.[/spoiler] - color:#0976BB - задаем цвет текста.
[spoiler name="Пояснение с картинкой"]
Обратите внимание на синий цвет CTRL+D. Такой оттенок был задан благодаря данному свойству CSS. При редактировании статьи сделать подобное не составит труда. А если нужно выделить другим цветом текст в элементах оформления сайта?[/spoiler] - 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 - добавляет оформление текста в виде: подчеркивания, перечеркивания, линии над текстом и мигания.
[spoiler name="Пояснение на примере"]В предложенном примере данное свойство отвечает вот за такое Мигание. У text-decoration несколько значений: blink (мигание), line-through (перечеркнутый текст), overline
(линия над текстом), underline (подчеркивание снизу), none (убирает все эффекты), inherit (наследует значение родителя, заданного для всего блока, где находится этот текст).
Значение none является для меня одним из самых любимых, т.к. оно убирает подчеркивание в ссылках, которое мне ОООчень не нравится в сайдбаре сайта.[/spoiler] - width:150px - задает ширину элемента. Можно в пикселях (px), либо в процентах (50%). Данное свойство не используется в примере, но знать его нужно, если хотим задать точное значение ширину какого-либо блока.
- height:150px - задает высоту элемента. Все аналогично с шириной (width)
Послесловие
Надеюсь я достаточно понятно донес до Вас информацию и теперь Вы сможете сами подправить шаблон своего сайта, а так же добавить новые элементы в дизайн. Теперь Вы сможете оформить внешний вид формы, которую сделали по предыдущей статье Как отобразить список будущих статей на сайте.
Свои вопросы задавайте в комментариях к статье, чтобы каждый смог увидеть решение той или иной проблемы.
Удачи!
