О CSS!

Понедельник, 17 мая 2010 года в 18:24      Просмотров: 4819

Приветствую вас в уроке о CSS. hello

Где вы узнаете – что такое CSS и, собственно, нафига его вам так необходимо знать.

Ну что, начинаем покорять мое авторское чтиво? smile

Вы когда-нибудь слышали про каскадный таблицы стилей? А про блочную верстку?

Так вот, это все одно и тоже – это CSS. surprised

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

Одна за шапку, другая за контент, третья за боковой сайдбар, за подвал сайта и так далее.

Отсюда и название – табличная верстка.

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

Сейчас СSS используется на 99% сайтов в интернете.

Давайте так. Рассказывать про CSS  и переубеждать в его выгодности я вас не буду.

Я назову вам всего лишь 7 причин, таких, знаете, незначительных.

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

А  вы уж сами думайте – нужны вам эти знания или да. grin

Ну что, погнали что ли?

Причина №1. Существенное сокращение кода.

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

Глобус лопнуть может angry

Возьмем, к примеру, ссылки .

Допустим,  у вас есть сайт в  100 страниц, и на каждой странице по 10 ссылок. И вы решили поменять их цвет. Что будет? Тысячу повторений одного и того же кода.

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

Это куча убитого вами времени, а если еще и нервишки шалят, не факт что ваша клава или мышка выдержит очередной удар вашего могучего кулака boks.

А теперь прикиньте, если вы решите полностью поменять дизайн?

В CSS – достаточно прописать для каждого элемента свойство один раз, и оно начнет работать для всех элементов сайта.

Причина 2. Простота работы с кодом.

Если при табличной верстке весь код сбит в кучу, то при CSS – все оформление выносится в отдельный файл! Т.е. в самой странице сайта содержится ТОЛЬКО структура документа, а уже в файле стилей все свойства прописанных блоков на сайте – размеры, цвет, заливка, фон и т.д.

Плюс вместо одинаковых тегов таблиц, строк и ячеек, будут использоваться блоки, которые мы можем назвать так, как нам угодно! ok

Как думаете, где легче разобраться в коде? Там где сто одинаковых тегов таблицы sick, или там где десять блоков с уникальными именами? Ведь для создания блока нам нужен всего один тег!

Причина 3. Ускорение загрузки сайта в интернете.

[sbox id="info" big="true"]

Неоспоримый факт – сайты на основе CSS грузятся гораздо быстрее, чем HTML сайты.

[/sbox]

И это достигается не только за счет сокращения кода.

Дело в том, что когда пользователь заходит на сайт, созданный при помощи CSS – браузер автоматически начинает грузить файл стилей (см. Причину 2).

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

В HTML сайте, вы хоть разместите две абсолютно одинаковые страницы, при переходе с одной на другую – все будет грузиться заново! fubar

Причина 4. Легкое управление дизайном.

Это достигается за счет того, что весь дизайн содержится в отдельном файле.

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

А это означает одно, что изменяя параметры дизайна в одном маленьком файле, вы изменяете дизайн всего сайта автоматически.

При HTML вам придется ковыряться на каждой странице.

Причина 5. Качество дизайна!

Посмотрите внимательно на мой сайт, здесь много всяких фишек. Я не про функциональность, а про дизайн говорю.

Так вот, создать такую же “ляпоту” при помощи HTML будет невозможно! no

В CSS можно реализовать очень много интересных фишек – смена картинки при наведении, выпадающее меню, отступы, высоту строки…  Не буду писать “Войну и Мир”, и так уже много “накалякал”.

Но, думаю, Вам моя мысль понятна –

в HTML нету и половины фишек, которые может представить вам CSS.

Причина 6. Быстрота и удобство.

Сайты на блочной верстке - намного легче создавать, чем на табличной!

Так как кода получается намного меньше. Разобраться в нем намного проще. И управлять таким кодом намного удобнее.

Я это говорю Вам - как истинный практик! cool smile

Причина 7. Это современно!

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

А это означает одно:

[sbox id="warning" big="true"]

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

[/sbox]

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

Но однажды сел, и начал разбираться. И самое замечательное, что на практике все оказалось очень легко и интересно.

Я понял, что можно создать классный дизайн с меньшими трудозатратами и в кратчайшие сроки excaim

В общем, не теряйтесь. Если вы выучите HTML и CSS – создать современный сайт с офигительным дизайном для вас не составит труда!

На связи с вами был Серега! Удачи и до завтра. wink

 

Комментариев: 18 RSS

Серёжа,ОГРОМНЕЙШЕЕ спасибо!

Я уже столько юзю и наконец-то просветление только с твоей рассылкой пришло.Ещё раз спасибо!

4. Михаил
2010-12-24 в 15:18:46

Сергей, спасибо!

Всё очень доходчиво, как раз для начинающих! smile

Сергей, большое спасибо. Интересно, а самое главное понятно и вразумительно, рассчитано на таких чайников, как я. Пока что все понятно. Будут вопросы - буду доставать. Но работа у меня такая, что могу уехать на 2- 3 недели и поэтому не вовремя буду отвечать и работать с уроками. Но мне очень хочется все это освоить и применять. Интересно и хочется идти в ногу с сыновьями. Еще раз спасибки!!!

8. Владимир
2010-12-26 в 19:19:43

Спасибо! Пока все понятно и доступно.

10. Елена
2011-01-16 в 14:20:37

Спасибо, Сергей, за Ваши уроки! Мне очень импонирует Ваше чувство юмора. Надеюсь, так же легко будет проходить и мое обучение по вашим урокам.

Сережа, я немного отстала, так хорошо начинала. Просто приболела. Тимпература39,9 уже три дня, этобы ещё ничего, так таблетками Эриспал отравили. Плохо соображаю.Вся семья гриппует. Я же не отстану? Вы же никуда не денетесь?)) Завтра или послезавтра дальше начну учить. Если будут вопросы, смогу задавать?

13. pro100_stalkers
2011-03-09 в 18:54:27

cool hmm ХМ CSS как то не прет но остальные вещь ok

Здравствуйте, Сергей! У меня почему-то нет изображения в уроках. Звук есть. Подскажите, что можно сделать. Проигрывать пробовала в winamp,LA, проигрывателе WIN. Опер.система win7.

Попробуйте KMPlayer

А также поставьте на свой компьютер последние версии кодеков.


  • Комментариев: 18

  • Вконтакте

  • Facebook:

  • Disqus

Тест-драйв тренинга Верстаем на 5+ 2.0

Комментариев: 18

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Войти через loginza

A PHP Error was encountered

Severity: Notice

Message: Undefined index: tc_vk_apiid

Filename: blocks/comments-vk.php

Line Number: 15

comments powered by Disqus