Подписаться на RSS рассылку
Главная » Статьи по разработке сайтов » HTML и CSS » Что такое CSS и как с ним работать?

Что такое CSS и как с ним работать?

Автор: Борисов С. А.

CSS (Cascading Style Sheets) в переводе на русский язык каскадные таблицы стилей. Это технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML.

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

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

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

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

Чтобы подключить файл со стилями просто в теге <head> документа напишите:

<link rel="stylesheet" type="text/css" href="путь_к_файлу/имя_файла.css">

Стиль можно назначить любому тегу в документе, будь это <p>, <h1>, <a> или знакомый всем <div>.

У тега <h1> уже есть какой-то стиль, который можно переопределить на его основе. То есть если, например, размер шрифта по умолчанию у него 18px, то его можно изменить, просто прописав в стиле его размер. Выглядеть это будет так:

h1{
  font-size: 10px;
}

font-size как раз и указывает то, что мы изменяем размер шрифта.

На заметку: Я рекомендую найти специальную программу для редактирования CSS, так как помнить все свойства наизусть невозможно, либо придется постоянно обращаться к справочникам, что не очень удобно. Программа, которой пользуюсь я называется TopStyle Lite v.3.10. Она поставляется с продуктом HomeSite. Поставляется ли по отдельности не знаю.


Скриншот программы TopStyle Lite

С помощью CSS определяются id и class. Это вы, наверняка, видели в самом коде HTML документа:

<div id="idName">

или

<p class="clName">

idName и clName это и есть имена селекторов из CSS. А теперь как задать id тегу div в CSS:

#idName{

}

А так задается class:

.clName{

}

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

1. В CSS, селектор класса обозначается через точку, а селектор id через решетку.

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

3. Еще одно отличие это то, что у id и class разные веса. У id он больше. То есть если в HTML документе написано следующее:

<h2 id="header1" class="header2">...</h2>

то первым применется стиль header1.


Это далеко не все, что возможно сделать при помощи CSS. Например, имеется стиль:

#news p {
  color: blue;
}

И имеется код:

<div id="news">
  <p>Параграф</p>
</div>

В этом случае стиль применится к тексту "Параграф" и он станет синего цвета. Но применяться будет не ко всем тегам <P>, а только к тем, которые находятся внутри элемента с атрибутом id, равным «news». Т.е. если написать без тега <div>, то стиль не будет применен. Точно также и с классами.

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

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

Рассмотрим еще несколько примеров. Есть код:

<div class="level1">
  <div class="level2">
    <p>Мама мыла раму</p>
  </div>
  <p>Молодая мама мыла раму</p>
</div>

<div class="level2">
  <p>Мама все еще моет раму</p>
</div>

И стиль:

.level1{
  font-size: 50px;
}

.level2{
  font-size: 20px;
}

Первая и последняя строчки будут одинакового стиля, а средняя другого, т.к. к ней применился стиль level1.

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

.level1 .level2{
    font-size: 50px;
}

Теперь стиль будет применен только к первой строчке, так как она находится в элементе с классом level2, а тот, в свою очередь, находится в элементе с классом равным level1.

Ну и вот еще пример:

p{
color: Green;
}

#sea p{
font-size: 50px;   
}

Код:

<div id="sea">
    <p>Первая строчка</p>
</div>
<p>Вторая строчка</p>

Так как первая и вторая строчки заключены в тег <p>, то применится стиль "p" и они будут зелеными. Только первая строчка находится в элементе с id = sea и к ней еще применится стиль #sea p. Размер шрифта будет 50px.

Помимо всех этих прелестей есть еще одна. Рассмотрим ее:

a {
 font-size:12px;
 color : #000000;
}

a:hover {
 font-size:14px;
 color: #FF0000;
}

Таким образом, мы установили стиль для всех ссылок (если они не будут переопределены далее) в документе. Прелесть вся заключается в том, что мы добавили после селектора ":hover", что означает "применить этот стиль к тегу <a> если над ним указатель мыши". Это очень удобная вещь. С ее помощью, я сделал меню на этом сайте. Как это делать я расскажу в другой статье.

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

/* шапка сайта */
#Header {
  width: 500px;
  height: 100px;
  background-color: #FAFAFA;
}

Просмотров: 8044

Обсудить на форуме

0   Спам
(29.04.2014)
2. Алексей Плехов (Levsha)
http://eatcity.ucoz.ru/
uninstall tool 3.3,hard disk sentinel pro 4

0   Спам
(29.04.2012)
1. DarafeUnloalo
Присоединяюсь. Очень хороший пост. Добавил в закладочник. Ну и порекомендую для этих целей бобрдобр smile


Имя *:
Email:


Код *:

Copyright © 2008-2016 Программирование на Delphi для начинающих и не только

Полнота авторских прав на все материалы, опубликованные на сервере DelphiDevelop.ru принадлежит их авторам

Перепечатка материалов разрешается с указанием авторства и гиперссылки на первоисточник информации

Хостинг от uCoz

Автор проекта: Борисов Сергей

e-mail: save-x@yandex.ru

Связь с администрацией сайта