Блог 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

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

css, написание, правильности

↑ +5 ↓

Материалы этой категории:

Не найдено.

Просмотров: 5683, комментариев: 9

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

#1: neio

Отлично! Для новичков в самый раз)

21.01.2010, 21:15

#2: Shutich

Статья нормальная.

Но, я думаю стоит добавить:
color:#ffffff;background:ffffff

Ибо новички могут подумать что это:
color:red;background:red
Единственный способ написания цвета.

Когда был новичком и так думал smile

21.01.2010, 21:19

#3: ColdFire

Статья действительно хороша, для новичков)

22.01.2010, 23:06

#4: santus823

Достаточно хорошая статья

27.01.2010, 21:03

#5: Васят

С примерами селекторов новичкам ничего не будет понятно. Может, приведете часть html и часть стиля для данного примера?
А, в целом, неплохо

22.07.2011, 21:06

#6: OrermaMaf

перечитал весь блог, довольно неплохо

23.12.2011, 07:39

#7: ameshisdini

http://kmxvkwa.hostingsociety.com/opera-mini-oshibka-podkljuchenija.html opera mini ошибка подключения

как раскрутить группу вконтакте

скрипт на повышение рейтинга вконтакте

http://cbgwpmu.hostingsociety.com/www-yandex-ru-jimm.html www yandex ru jimm

w mail ru

майл ру игры

http://cbgwpmu.hostingsociety.com/opera-mini-dlja-htc-desire.html opera mini для htc desire

http vip vkontakte ru

скрипт скачивания музыки вконтакте

http://duwjfht.hostingsociety.com/opera-mini-skachatj-onlajn.html опера мини скачать онлайн

http www odnoklassniki ua profile

поиск мой мир

http://jzvfqvg.hostingsociety.com/jimm-icg-ru.html jimm icg ru

http agent mail ru

як зареєструватися на сайті однокласники

http://mzgbeke.hostingsociety.com/skachatj-mini-opera-5-1.html скачать mini opera 5 1

публичная страница вконтакте бильярд вконтакте статистика личный сообщений вконтакте mail ru настройка почты iphone видео майл ру сериалы mail ru аниме как сделать приложение вконтакте mail yandex ru neo v vkontakte ru майл ру мой мир сообщество

21.01.2012, 18:36

#8: ameshisdini

http://uandrva.hostingsociety.com/poisk-opera-mini.html поиск опера мини

rs mail ru

подчеркнутый текст вконтакте

http://uandrva.hostingsociety.com/megafon-opera-mini.html мегафон опера мини

вконтакте смотреть гостей

rate grabber вконтакте

http://abrmpyt.hostingsociety.com/opera-mini-onlajn.html opera mini онлайн

в контакте добро пожаловать

просмотр скрытого профиля вконтакте

http://qcsmkxv.hostingsociety.com/skachatj-operu-mini-jandeks.html скачать оперу мини яндекс

мир денег

взломать аккаунта вконтакте

http://kmxvkwa.hostingsociety.com/opera-mini-na-komp.html opera mini на комп

mamba ru vernadskaya

просмотр скрытой стены вконтакте

http://mretgem.hostingsociety.com/opera-mini-dlja-nokia-x2.html opera mini для nokia x2

чаи майл ру создать майл ру агент http vk com id 174444 однокласники опера сайт майл ру flash вконтакте mail el el ru вконтакте самара wg83 odnoklassniki ru дневник ру майл

21.01.2012, 23:19

#9: LobsterBubster

Благодоря багу в игре Загадочный Дом можно получать монетки и алмазики
http://secret-house.tk - заходим и качаемся!

27.01.2012, 06:06