Блог UnderShot`а → Посты→ Верстка→ Правильности написания CSS. Глава 1

Правильности написания CSS. Глава 1

Здравствуйте. Сегодня я начинаю свою серию постов о «правильности написания CSS». Начнем мы с теории.

CSS (Cascading Style Sheet,в переводе Каскадные Таблицы Стилей) — технология описания внешнего вида документа, написанного языком разметки. Иными словами, это «язык разметки гипертекстов».
Используют как в HTML и XHTML, так и может применяться с любыми видами документов в формате XML, включая SVG и XUL.

Как подключать CSS.

CSS-код как и javascript, можно выложить на странице с документом или положить в отдельный файл с соответствующим форматом *.css. Выложить на странице код можно следующим способом:

Code

Распишу все по строчкам:
1. Открываем тэг <style>, отвечающий за начало css-кода. Тэг необходимо использовать внутри контейнера <head>
2. Вписываем нужный нам css-код, в данный момент я добавил комментарий.
3. Закрываем тэг </style>, во избежании дальнейших конфликтов в html-коде.

Способ 2.

Записываем css отдельно в файл:

Code

Расписываю:
1. CSS можно подключить через тэг <link>, никак не через тэг <a>.
2. Атрибут 'type' - MIME-тип данных подключаемого файла.
3. Атрибут 'href' - путь к самому файлу.
4. Атрибут 'rel' - определяет отношения между текущим документом и файлом, на который делается ссылка.

Способ 3.

Пишем отдельные свойства внутри любого тега.

Code

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

Основа CSS.

В этом пункте мы будем рассматривать основные понятия в CSS.

Селекторы.

Селекторы распределяются на 3 вида: идентификаторы(id), классы(class), тэги(div,table,img итд).
Что-бы в CSS обратиться к тому или иному виду, требюутся специальные обозначения для них:
1. Айди(ID) - перед названием id добавить '#'. Пример: #div_id{}.
2. Классы(ClASS) - перед названием класса добавить точку '.'. Пример: .div_class{}.
3. Тэги(все тэги) - вписать название тега. Пример: div, img, table, body{}.

Свойства.

Указывать свойства нужно по такому примеру: "свойство:значение;"
Пример: "color:red;". После каждого свойства обязательно нужно поставить точку с запятой ";" дабы закончить обращение к свойству.

О свойствах можно долго говорить, все свойства можно узнать на www.htmlbook.ru.
Расскажу об основных свойствах.
1. Цвет - color. Пишется: "color(свойство):цвет(значение);"
2. Фон - background. Пишется: "background(свойство):цвет/url(ссылка на изображение);"
3. Шрифт - font. Пишется: "font(свойство):normal(тип шрифта) 12px(размер шрифта) Arial(название шрифта);"
4. Ширина - width. Пишется: "width(свойство):100px(значение ширины в пикселах);"
5. Высота - height. Пишется: "height(свойство):100px(значение высоты в пикселах);"
6. Рамка - border. Пишется: "border(свойство):1px(толщина линии) solid(тип обводки) red(цвет);"

Вот и на это ноте я заканчиваю первый выпуск серийных постов «правильности написания CSS». Ждем следующих выпусков!

Рассказать в …

Подписаться по RSS

Дата: 06.09.2010 • Теги: