Лёгкое введение в CSS

Давно я не писал в блог, а уж тем более о CSS. Сегодня я наверстаю это упущение.

Итак, что же такое CSS. CSS – таблица каскадных стилей. Но что это такое? Те, кто знаком с версткой, особенно с момента её появления, знают, что все параметры, относящиеся к тегу, такие, как размер, обводка, цвет, выделение, количество колон, писались после самого тега. Это делало код страницы очень большим.

К примеру, вы хотите сделать таблицу растянутую во всю длину монитора, у которой рамка в 2 пикселя и желтого цвета, залита красным фоном, текст выровнен посредине, текст из семейства Times New Roman, и размером 14. Для этого использовался бы такой код:

<table width="100%" border="2" bordercolor="#FFFF00" bgcolor="#FF0000" style="font-size: 14px">
<tr>
<td align="center" style="font-family:'Times New Roman', Times, serif">Наша информация</td>
</tr>
</table>

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

В то время, как с использованием CSS она выглядела бы так:

<table></table>

Как видите – разница огромна. «А куда делись параметры?», - спросите вы. А параметры перекачивали в отдельный файл CSS – каскадную таблицу стилей.

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

Сам файл CSS хранится в любой папке, которую вы захотите использовать, но в большинстве случаев он кладется в папку с дизайном сайта, а ещё чаще, в папке с дизайном сайта создается папка CSS, в которой хранятся несколько видов данных файлов. Зачем несколько? С помощью CSS вы имеете возможность моментально изменять цветовую схему своего сайта. К тому же, для особо «одаренных» браузеров, типа IE, используются свои CSS, т.к. он «не понимает» нормального «языка».

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

<link rel="stylesheet" href="ваш_путь_до_файла/style.css" />

Так как же выглядит сам код CSS? Сам код выглядит примерно так:

.title_quote {
color:#545454;
background-color:#FBCB3C;
border:1px dotted #bebebe;
border-bottom: 0;
font-weight: bold;
padding: 5px;
}

Но более подробно о CSS мы поговорим в следующей статье.

Уважаемые читатели! Если вы обнаружили в тексте ошибку, не поленитесь, выделите слово и нажмите CTRL+Enter. Сделаем язык чище!

  • 0
comments powered by Disqus

Ваше Имя:

Ваш E-Mail:

Или войтите с помощью социальных сетей

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
  • Введите два слова, показанных на картинке: