Приятно быть стильным! или Урок по CSS — хватит бояться кодов!

23 комментария

Сеньоры и сеньориты, а также прочие категории моих читателей! Я рада вас приветствовать на моем блоге!

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

Для тех, кто немного в теме, сразу поясню — на славу Евгения Попова я ни в коем случае не претендую. Полноценных знаний по этому языку стилевой разметки я, естественно, не дам, да и не является это моей целью сегодня.

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

Начнем, как водится, с начала.

Что такое CSS, и зачем нам, приличным блогерам, знать такие страшные аббревиатуры?

Css — это язык стилей для вашего сайта. Внешний вид каждого элемента сайта описывается именно средствами этого языка. Зная его основы, вы можете полностью управлять внешним видом своего блога — менять цвета и размеры, расположение элементов относительно друг друга, поведение их при наведении курсора и многое-многое другое.

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

Пойдем дальше. Все оформление вашего блога на самом деле хранится лишь в одном (в редких случаях — в двух и более) файле, который входит в состав вашей темы оформления. Это файл style.css. Сейчас для ясности еще одна наглядная демонстрация, после чего перейдем уже к делу!

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

Думаю, дальнейшие пояснения излишни.

Итак, выяснив роль CSS в нашей жизни оформлении блога, начнем со всем этим разбираться подробнее.

Встроенные возможности Firefox для просмотра и редактирования html и css кода

Первое, что нужно понять, что прежде чем приступать к редактированию стилей, нужно определить, какой элемент, точнее, стили какого элемента, мы должны подправить для достижения нужного эффекта. И тут незаменимым рабочим инструментом для нас станет браузер Firefox.

Дальше на пальцах объяснять становится сложно, поэтому перейду к примерам.

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

Вначале определим, какие стили нужно подредактировать:

  • открываю блог в Firefox, выделяю мышкой кусочек текста, цвет которого хочу изменить и нажимаю правую кнопку мыши;
  • в появившемся контекстном меню выбираю «Исследовать элемент» и открывается моему взору такая картина:

  1. Это сам выделенный фрагмент текста
  2. Элемент, которым является наш текст — это абзац в моем примере. Ну не важно, абзац, или еще что-то, главное, буква «р» — хотя html, друзья мои, учить все равно придется.
  3. Все стили, которые имеют отношение к нашему элементу. Тут дело вот в чем: страница сайта имеет блочную вложенную структуру. Есть большой контейнер — страница целиком, в нем находится контейнер контента, то есть тот блок, где и расположены сами статьи, в контенте есть абзацы. Ну это такая сильно упрощенная схема для общего понимания.
    Так вот: на каждый элемент влияют стили, как прописанные непосредственно для него, так и для всех блоков, в которые он вложен. У нас цвет текста отдельно для абзаца не указан, он наследуется от более крупных контейнеров, в которые вложен абзац.
    Но мы можем указать цвет конкретно для абзаца, и тогда цвет, заданный на более высоком уровне, работать не будет. То есть чем более точно указан элемент, для которого задается стиль оформления, тем выше приоритет этого стиля.
    Так вот на этой вкладке перечислены абсолютно все стили, которые могли бы повлиять на оформление нашего абзаца, независимо от того, переопределены они или нет. Единственное отличие: стили, которые переопределены, в списке зачеркнуты — значит, они не работают для данного элемента.
  4. А здесь построен полный список всех стилей, которыми определяется внешний вид нашего абзаца. Для того, чтобы узнать, где то или иное свойство определяется, достаточно нажать на него в списке, и вы увидите номер строки файла style.css, где оно прописано:
  5. Ну и собственные стили для элемента, который мы изучаем.

Немного запутанно описала, но стоит только пару раз попробовать, как вы сразу оцените удобство этого инструмента и простоту использования!

В общем, теперь нужно просто добавить нужный нам стиль — color (цвет) — к свойствам абзаца.

На скрине в п.5 видно, что свойства абзаца прописаны в строке 338 файла style.css. Теперь достаточно открыть этот файл на редактирование (а лежит он в папке с вашей темой оформления) и в нужные строки добавить необходимые свойства.

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

и результат сразу налицо:

Если же вас не устраивает то, что получилось, просто обновите страницу, и все изменения исчезнут. А устраивает — тогда уж идите смело править код.

В общем, чтобы прочувствовать все, что я здесь понаписала, нужно попробовать пару раз. Если будете экспериментировать на реальном блоге, то не забудьте сделать бэкап файла style.css, чтобы в случае чего все вернуть на круги своя.

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

Форматирование шрифта

Гарнитура, или имя шрифта

задается атрибутом font-family:

p { font-family: Monotype Corsiva }

Здесь можно указать несколько шрифтов через запятую на случай, если первого из перечисленных в списке на компьютере у пользователя не окажется. Многие начинающие веб-дизайнеры грешат тем, что форматируют текст какими-то невообразимыми шрифтами, которые в половине случаев просто не отображаются у пользователей. Здесь же можно указать через запятую и тип шрифта serif, sans-serif, cursive, fantasy или monospace (с засечками, без засечек, курсив, фантазийный или моноширинный)

Стиль шрифта

Атрибут font-style может принимать значения normal (нормальный), italic (курсив) или oblique (наклонный).

p {font-style: normal}

Размер шрифта

Атрибут font-size можно указывать как в пикселах, что наиболее привычно, так и в процентах от значения, определенного на уровень выше. Просто посмотрите, как у вас задан размер.

p {font-size: 14px}

Цвет шрифта

Атрибут color обычно определяют либо html-кодом цвета либо его rgb-моделью.

p {color: #000000}

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

Таких программок море на самом деле. Хотите — поищите альтернативу, я же приготовила для вас ссылку на скачивание Pixie, если пожелаете.

RGB-цвет по его html-коду, если вдруг понадобилось, узнать довольно просто в Фотошопе: открываете палитру, копируете код в окошечко (1) и видите его  RGB-составляющие (2):

Жирность текста

Атрибут font-weight определяется:

  • значениями 100, 200, 300, 400, 500, 600, 700, 800, 900. 100 — самый бледный, 900 — самый жирный;
  • normal — соответствует значению 400;
  • bold — 700.
p {font-weight: bold}

Все эти свойства шрифта можно объединить и в одну запись для краткости:

p {font: normal italic 14px}

Форматирование текста

Расстояние между символами в словах

задает атрибут letter-spacing, который принимает такие значения:

  • normal;
  • указание абсолютной величины расстояния в пикселах либо других единицах, которые поддерживаются css.
p {letter-spacing: 2px}

Расстояние между словами задается аналогично расстоянию между символами в слове, и для этого используется атрибут word-spacing:

p {word-spacing: 15px}

Отступ первой строки,

или красная строка, создается добавлением атрибута text-indent с указанием величины отступа:

p {text-indent: 30px}

Вертикальное расстояние между строками

указывается при помощи атрибута line-height и задается так:

  • normal — это значение по умолчанию;
  • или же в абсолютных (пикселах, миллиметрах, em) или относительных (%) величинах:
p {line-height: 5mm}

Горизонтальное выравнивание текста

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

Задается выравнивание атрибутом text-align со следующими значениями:

  • center — по центру;
  • left или right — по левому или правому краю;
  • justify — по ширине.
p {text-align: justify}

Подчеркивание, надчеркивание и прочие эффекты

определяется атрибутом text-decoration:

  • none — обычный текст без оформления;
  • underline — подчеркивание;
  • overline — линия над текстом;
  • line-through — зачеркнутый текст;
  • blink — мигающий
p {text-decoration: underline }

Изменение регистра символов

возможно с помощью атрибута text-transform:

  • capitalize — делает первую букву каждого слова прописной;
  • uppercase — все буквы прописные;
  • lowercase — все буквы строчные.
h1 {text-transform: uppercase}

Отступы

Любой и каждый элемент страницы занимает некоторую прямоугольную область, которая имеет как внешние отступы — это расстояния до другого элемента страницы,  так и внутренние — расстояния от содержимого элемента до границ области, где этот элемент содержится.

В качестве иллюстрации:

  1. Элемент страницы
  2. Область, которую он занимает на странице
  3. Отступы до границ областей других элементов.

Внешние отступы

задаются атрибутом margin. Причем можно задавать как отступы по отдельности: сверху, справа, снизу, слева, используя записи margin-top, margin-right, margin-bottom и margin-left соответственно, так и перечислить все отступы в одной записи по часовой стрелке, начиная с верхнего отступа:

p {margin: 5px 10px 3px 8px}

Если же отступы совпадают со всех сторон, или они симметричны, то можно писать так:

p {margin: 0}

или так:

p {margin: 0 10px}

Внутренние отступы

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

p {padding-left: 10px}
p {padding: 0 10px}
p {padding: 0}

Рамки

Стиль линии рамки

задается атрибутом border-style:

  • none — линия не отображается;
  • solid — сплошная линия;
  • dotted — пунктирная;
  • dashed — штриховая;
  • double — двойная;
  • groove — вдавленная рельефная диния;
  • ridge — выпуклая рельефная линия;
  • inset — весь блок элемента отображается вдавленным в страницу;
  • outset — весь блок будто выпуклый

Можно указывать стиль рамки для каждой стороны по отдельности, используя border-left-style, border-top-style и т.д.

p {border-style: solid}
p {border-top-style: dotted}

Цвет линии рамки

указывается при помощи либо border-color, либо border-left-color (и по аналогии для других сторон)

Толщина линии рамки

задает border-width:

p {border-width: 2px}

Обычно все стили для рамки сводятся в одну запись с атрибутом border:

p {border:1px solid #000000}

Скругление углов рамки

можно указать при помощи атрибута border-radius:

p {border-radius: 2px}

Фон элементов

Цвет фона

можно задать с помощью атрибута background-color:

p {background-color: #000000}

Если нужен прозрачный фон, в качестве значения нужно использовать transparent.

Фоновый рисунок

указывается атрибутом background-image, который в качестве значения принимает адрес картики, которая будет использована в качестве фона:

body {background-image: url('images/default-bg.png')}

Режим повтора фонового рисунка

задается с помощью background-repeat, который принимает такие значения:

  • repeat — повтор рисунка по вертикали и горизонтали;
  • repeat-x — повтор только по горизонтали;
  • repeat-y — только по вертикали;
  • no-repeat — не повторяется
body {background-repeat : no-repeat}

Прокрутка фонового рисунка

определяется атрибутом background-attachment и имеет всего два значения:

  • scroll — рисунок прокручивается вместе с прокруткой страницы;
  • fixed — фоновый рисунок не прокручивается

Все свойства фона могут объединяться в атрибуте background.

Списки

Вид маркера списка

задается атрибутом list-style-type и может принимать такие значения:

  • disc — кружок с заливкой;
  • circle — кружок без заливки;
  • square — квадрат с заливкой;
  • decimal — арабские цифры;
  • lower-roman — малые римские цифры;
  • upper-roman — большие римские цифры;
  • lower-alpha — малые латинские буквы;
  • upper-alpha — большие латинские буквы;
  • none — без маркера.
ol {list-style-type: disc}

Изображение в качестве маркера списка

можно указать, используя атрибут list-style-image и указав путь к изображению, которое будет служить маркером:

ol {list-style-image: url(image.gif)}

Псевдостили гиперссылок

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

  1. a:link — это вид непосещенной ссылки
  2. a:visited — вид посещенной ссылки
  3. a:active — вид ссылки во время нажатия на нее;
  4. a:hover — вид ссылки при наведении на нее мышиного курсора
a:hover {color: #000000; text-decoration: underline}

Размеры элементов

указываются атрибутами width и height для ширины и высоты соответственно и могут иметь как абсолютные, так и относительные значения:

div { width: 100px; height: 50px}

При необходимости можно задать максимальные и минимальные размеры для блока, используя min-width и min-height, ну и по аналогии — max-width и max-height .

Управление обтеканием

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

  • left — блок выравнивается по левой стороне, а другие элементы обтекают его справа;
  • right — блок выравнивается по правой стороне, а остальные элементы обтекают его слева;
  • none — без выравнивания.

Ну и отвечает за это дело атрибут float:

div {float: left}

Небольшое послесловие от Web-Кошки

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

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

Конечно, в первый раз в код лезть очень страшно! Но стоит только попробовать, как потом из style.css вас за уши не вытянешь. По себе знаю — я пока вот этот самый свой шаблон два раза на локалке не раскурочила — не успокоилась. Зато в третий вышло вполне пристойно, как мне кажется.

Кстати, хотите скрин моего шаблона по дефолту?

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

Была с вами ваша пушистая Web-Кошка! До новой встречи, друзья мои!

23 коммент.
  1. Привет, ЛАриса! Отличный мануал получился.
    Только вопрос: А огнелис может показывать стили сам по себе? Я всегда думал, для этого плагин Firebug нужен.
    Вот с обтеканием долго не мог вкурить — как это делать, а так в принципе ничего сложного если понял принцип то дальше проще будет. Но любому блоГГеру (Саше, привет) нужно знать такие азы.
    Внес себе в Еверноте, что бы не рыскать по инету буду пользоваться твоей статьей.

    • Web-Кошка

      Привет, Артем!
      Да, в том все и дело, что у Firefox есть встроенные возможности , вполне сравнимые с Firebug. Конечно, плагин понавороченнее, но лично я им никогда не пользуюсь, хотя и установила. Не знаю, почему очень редко где можно найти упоминания о том,что огнелис прекрасно справляется и встроенными возможностями.
      Я сама обтекание долго пыталась понять в теории, а потом просто нашла с файле Float и стала менять его значения и смотреть, что получается! Поняла за пять минут!

      • Самый лучший способ понять как работает — это на практике посмотреть, здесь согласен. А плагин удобная вещь не только для верстки, но и для проверки скорости, с некоторыми дополнениями.

        • Web-Кошка

          Артем, а про проверку скорости подробнее? Первый раз слышу об этом.

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

    • «Но любому блоГГеру (Саше, привет)»

      А вот Лариса — умничка! Правильно пишет это слово, не ведясь на мнения большинства блоГГеров (привет Васе НоГГано :))

      • Да. Лариса молодец, быть ей в топе.
        Да ладно, правильно — не правильно, как благозвучнее так и надо писать. 😛
        А кто такой Вася Ноггано *UNKNOWN*

        • Да, это репер такой (он же Баста). Очень популярен у молодежи))

          • Гы, вот не молодеж я… уже совсем. *CRAZY*

          • Web-Кошка

            Я по ходу тоже уже не молодежь *SORRY* … Неожиданно как-то, блин…

        • Web-Кошка

          «быть ей в топе» — давно не слышала таких милых моему кошачьему сердцу пророчеств — спасибо! 8)

  2. Привет! Отличный мануал. Прям шпаргалка для верстальщика! Забирают тоже в Эвернот)

  3. =) Что такое Эвернот, блоГГеры?
    А вот у меня проблемы с Firefox. Стремный он какой-то, поэтому только Хром. Но это на любителя, (уже вижу кучу летящих в меня стрел от ценителей) =)
    Ларис, а тебе не кажется что у этой статьи странный урл? Она под запрос писалась или от души? Хотя одно другому очень часто не мешает 8)

    • Привет, Александр. Енот это программа для хранения информации. Я на первых порах даже писал о ней http://artabr.ru/chto-za-evernote/.
      Я огнелисом только для верстки пользуюсь, а так Хром. Хотя и Хром тот еще товарищи, память жрет как пылесос.
      А чего не так с урлом? Вроде все в норме…

      • Вот, кстати, часто говорят, что Хром много оперативы «кушает». На самом деле — ровно столько же, сколько и другие браузеры (ну, примерно наравне). Дело в том, что у Хрома все процессы отображаются отдельно + если много расширений + в него изначально уже встроен Adobe Flash и прочие «служебные» плагины. Вот в совокупности и получается, что визуально кажется много.

        Я, конечно, какие-то специальные замеры и мониторинг не делал, но думаю — так и есть.

      • Многие «маги» пишут, что в урл тоже можно (и нужно — тоде «маги») прописать продвигаемый запрос. Потому и спросил. А тут как есть заголовок, так плагин и написал, а Лариса это дело оставила. Даже еще интереснее слово «быть» переведено в транслит и записано by-t. В итоге длиннющий урл получается… Прошу прощение, что не по делу

    • Web-Кошка

      Ага, моя стрела уже вылетела ]:->
      У меня все пишется от души, честно, потому что обожаю все эти коды, плагины и прочую фигню! А урлы формируются из заголовков, а не из тайтлов — так что некая оптимизация все же присутствует, правда,ненавязчивая — потому что мне по основному логичному запросу не конкурировать все равно с монстрами.

      • Я больше так не буду *SORRY*

        • А еще я коряво сформулировал вопрос. Я понимаю, что ты пишешь от души =) . Мне и самому в какой-то период была интересна эта тема, даже книжку купил разбирался. Я вообще еще в августе не знал, что сайт можно создать на готовом движке и установить любой шаблон. Сидел, изучал теги и стили.
          Просто если есть одна мысль всей статьи, то ее можно сформулировать 1-2 словами и прописать в урл. Вот это я и хотел сказать… (Буквально сегодня у Дмитрия на блоге я про эти урл вспоминал — паранойя %) у меня что ли, так вроде нет)

  4. Ого! Лариса, у тебя что, в каментах дофоллоу стоит?)) Ссылка Артура dofollow 🙂

  5. Ой, спасибо! Очень ценная и давно искомая информация! В закладки!
    Лариса, подскажите «чайнику» — «стиль рамки», о котором здесь речь — это какие рамки имеются в виду? Вокруг картинок или … ?

    • Рамку можно сделать вокруг чего угодно — вокруг отдельного абзаца, всех картинок на блоге или только определенных — в общем, для любого блока на сайте. Нужно только знать класс, который за вывод этого блока отвечает, или его ID.

      • Ой! А эта премудрость — про класс, уже в другом месте водится…
        Непросто все. Все равно спасибо! Как-то я пыталась изменить размер шрифта — почему-то не получилось. Может, с Вашими подсказками получится?

Добавить комментарий

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