Коротко о CSS

MnogoBlog > WordPress > Дизайн > CSS и теги > Коротко о CSS
7 комментариев

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

Скачать исходники для статьи можно ниже

Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницы.

При подобном разделении работа над версткой и дизайном сайта может вестись параллельно.

 

Благодаря использованию CSS:

– увеличивается скорость загрузки сайта и уменьшается размер самого кода сайта

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

– стили CSS имеют гораздо больше возможностей по оформлению элементов веб-страниц.

– можно разнообразить внешний вид сайта для разных устройств вывода: монитора, принтера, смартфона, КПК и др.

 

Для добавления стилей на веб-страницу существует 4 способа, которые различаются своими возможностями и назначением.

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

Но вы также можете использовать и другие способы для добавления стилей для сайтов на WordPress.
 
Рассмотрим все 4 способа:

1. Связанные стили

При данном методе создается отдельный файл как правило, с расширением css (например в wordpress –  это style.css), в котором и описываются все параметры внешнего вида вашего сайта.

Выглядит данный файл приблизительно так: 

...
a:hover {
	color: #FF6600;
	text-decoration: underline;
}
img {
	border: none;
}
p {
	padding: 0px 0px 15px;
	margin: 0px;
}
h1 {
...

После данный файл CSS подключается к сайту посредством тега <link>, располагающегося в этом документе между тегами <head> и </head> (в wordpress данный тег расположен в файле header.php).

Выглядит это приблизительно так: 

<head>
.....
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

у меня на сайте данная строчка выглядит так: 

...
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
...

При данном методе можно подключать файл CSS, который находится на другом сайте.

 

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

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются между тегами <style> и </style>, которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>.

То есть здесь не создается отдельного файла с расширением css, а все его содержимое храниться между тегами <head> и </head> в коде сайта (на сайтах с wordpress свойства стилей будут располагаться в файл header.php).

Вот так это будет выглядеть: 

...
<head>
  ...
   <style type="text/css">
   H1 {
    font-size: 120%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333366;
   }
  </style>
 </head>
 <body>
...
  <h1>Hello, world!</h1>
...

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

В данном способе свойства стилей располагаться в теле какого-то отдельного тега (посредством его атрибута style). Все правила этой таблицы стилей действуют только на содержимое этого тега.

Пример: 

<p style="font-size: 21px; color: green;">Вы читаете статью: Коротко о CSS</p>

 
4. Импорт CSS

В данном способе свойства стилей подключены к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> , которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>.

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

Пример: 

<head>
.....
  <style type="text/css" media="all">
    @import url(style.css);
  </style>
</head>

 
 

Как же описываются стили CSS?

Стилевые правила записываются в своем особом формате.

Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования.

Общий способ записи имеет следующий вид (CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика): 

Селектор {
свойство1: значение;
свойство2: значение;
}

Пример: 

td {
  background: olive;
  color: white;
  border: 1px solid black;
}

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

Селектор { свойство1: значение; свойство2: значение; }

 

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

 

Селекторы подразделяются на следующие виды:

  • Селекторы тегов (элементов)
  • Классы
  • Идентификаторы
  • Контекстные селекторы
  • Соседние селекторы
  • Дочерние селекторы
  • Селекторы атрибутов
  • Универсальный селектор
  • Псевдоклассы
  • Псевдоэлементы

 

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

 

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

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

Тег { свойство1: значение; свойство2: значение; ... }

Пример: 

p {
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зеленый цвет текста */
   }

 

2. Классы

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

Cинтаксис для классов будет следующий: 

.Имя класса { свойство1: значение; свойство2: значение; ... }

или 

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

В первом варианте класс можно применять к любому тегу, а во втором только к определенному.

Чтобы указать в нужном месте, что тег нужно используется с определенным классом, к тегу в коде сайта (php, html,..) добавляется атрибут class=”Имя класса”.

Пример: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Классы</title>
  <style type="text/css">
   P { /* Обычный абзац */
    text-align: justify; /* Выравнивание текста по ширине */
   }
   P.cite { /* Абзац с классом cite */
    color: navy; /* Цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   }
  </style>
 </head>
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы.
     Они отличаются высокой световой отдачей, продолжительным сроком службы,
     малой яркостью светящейся поверхности, близким к естественному спектральным
     составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p class="cite">Для исключения засветки экрана дисплея световыми потоками
     оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

Результат данного примера:

Вид текста, оформленного с помощью стилевых классов

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

 

3. Идентификаторы

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

Синтаксис применения идентификатора следующий. 

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

или 

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Пример: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Идентификаторы</title>
  <style type="text/css">
   #help {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div id="help">
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>

 </body>
</html>

В данном примере определяется стиль тега <div> через идентификатор с именем help.

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

 

 

Комментарии.

Также в описании свойств стилей можно использовать комментарии.

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* … */

Пример комментариев: 

/*sidebar */
#sidebar {
	float: right;
	padding: 0px 10px 20px 0px;
	width: 220px;
	color: #666666;
	overflow: hidden;
}

/*sidebar */ – эта строчка и есть комментарии.

 

PS: Более подробно читайте о CSS на сайте http://htmlbook.ru – здесь есть справочник и самоучитель.
А тут можно найти учебник по CSS – http://ru.html.net/tutorials/css/
Также возможно вам покажется интересным следующая ссылка с примерами CSS (на английском языке): http://www.w3schools.com/css/css_examples.asp

Похожие записи:

Введите свой email адрес для того, чтобы подписаться на мой блог:

knopkisoc

Коротко о CSS: 7 комментариев

  1. lenapail

    Опять вас потревожу. Такой у меня вопрос – как изменить шрифт на моем сайте, там где стоят кнопки социальныйх сетей и в форуме. Если подробно, то у меня написанны фразы: “Если вам понравилась статья, то можете поделится с ней” и “Пишите мне” очень мелким шрифтом. А так же в форуме под структурой формы написанно тоже все мелкими не читаемыми практически буквами. Я так думаю, что виной всему тема. Искала во всем редакторе внешнего вида и в плагинах font-size – я так поняла он меняет шрифт. Нашла только в стиле, там ставила и на 100 пикселей и всяко разно, но ничего не меняется. Как быть?

    ↓
    1. Константин

      Lenapail, фразы: “Если вам понравилась статья, то можете поделится с ней” и “Пишите мне” – на вашем сайте регулируются тегом h6 (почему именно он – зависит от плагина социальных кнопок), чтобы изменить их размер нужно добавить в файл стилей style.css (Внешний вид – Редактор – style.css) следующий код:

      h6 {
font-size: 11px;
}
      ↓
  3. lenapail

    У меня комп что ли глючит, не срабатывало ничего около полу часа. А тут вдруг – и раз ни стого ни с сего сработало. Хотя обновляла много раз страницу. Спасибо большое ))) Но на форуме не пойму как увеличить шрифт. Там шрифт мелкий в надписях “Тема”, “Сообщение”, “Модератор”, “Пока нет тем”

    ↓
    1. Константин

      Lenapail, добавьте в файл стилей style.css следующий код:

      small {
font-size: 11px;
}

      “У меня комп что ли глючит, не срабатывало ничего около полу часа. А тут вдруг – и раз ни стого ни с сего сработало” – здесь виноваты cookies, удалите их для своего сайта в браузере и обновите страницу, тогда все изменения увидите сразу или же откройте данную страницу другим браузером.

      ↓

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