Веб дизайн сайта с помощью CSS
Я сам создал свой сайт. Когда я создал только лишь одну-две странички, то сильно удивлялся и восхищался моим веб-дизайном. Но вскоре мне приходилось увеличивать страницы своего сайта, добавлять туда информацию. Какое-то время я все также создавал страницы, как и прежде. Но, чем больше страниц, тем рутиннее все это становилось. И я уже не так как прежде восхищался своим творением, даже был момент, когда я хотел «завязать» с этим делом. Писал коды, но мне все время приходилось менять цвет, шрифт и т.д., и так на каждой странице…
Но, вскоре я вспомнил про одну великую вещь – верстка дивами! И я, как будто снова родился. И теперь я действительно снова получаю удовольствие, а создание веб сайтов стало еще увлекательнее. Ведь как же красиво, когда у тебя фон одного цвета, заголовок совсем другого, а абзацы другим шрифтом, картинки разных размеров, красивое выпадающее меню… Все это делает CSS, о котором я рассказал более подробно ниже.
Значит, создание и дизайн сайта – это не только HTML, одного языка гипертекстовой разметки будет недостаточно. В смысле достаточно, когда сайт у Вас маленький. А, если жалко нервов, то хочется чего-то другого. И к нам на помощь приходит так называемый каскадные таблицы стилей. Раньше, когда еще не было таблиц стиля, документы, написанные с помощью HTML, подвергались форматированию разных атрибутов, которые в свою очередь задавали цвет, задавали шрифты и т.д. Например: <p><b><font size=”3”>сам текст</font></b></p>
Но такое форматирование текста требовала от создателя веб-сайта многого времени, потому что примерно аналогичную запись приходилось применять много раз, когда хотелось как-то поменять текст, украсив его разными цветами. Еще один минус. Если вы применяете эти конструкции слишком часто, то вес документа становится слишком большим, что тоже влияет на цены тарифных планов хостинга.
Таблицы убрали все эти минусы, так как с помощью него можно всего лишь один раз назначить стиль для какого-то элемента. Например, если мы назначим один раз стиль для тега <b>, то он применится во всем документе, где встречается <b>. CSS используется для того, чтобы задать определенный цвет, шрифт, расположить отдельные блоки и настраивать по своему усмотрению внешний вид Вашей веб-страницы. Каскадные таблицы стилей можно создавать в отдельных файлах и уже прикреплять к готовой странице HTML. И таким образом к каждой странице HTML всего лишь нужно привязать готовый шаблон.
Определение таблицы стилей возможно четырьмя способами:
1.Названная выше ссылка на внешний файл. Тогда ссылка на этот файл делается с помощью тега <link>. Как же эта ссылка работает? Браузер, читая код страницы, обращается по указанному пути, обнаруживат указанный стиль и отображает данную страницу, применив данный стиль.
2. Внедрение в сам документ. Под этим понятием подразумевается задание стиля внутри самой конструкции HTML документа.
3.Включение в теговые конструкции. Т.е. внутри HTML тега можно задать определенное правило реализации.
4.Импортирование. Этот способ аналогичной ссылки на внешний файл.
Таблица стилей состоит из селектора и определения шаблона. Селектор, по сути это некий указатель для HTML элемента. В качестве селектора HTML выступают: элементы HTML; классы, идентификаторы.
Но несмотря на это прекрасное нововведение не все браузеры поддерживают CSS. Самыми лучшими браузерами, которые поддерживают, являются Mozilla Firefox, Safari, Google Chrome. Но всеми известный Internet Explorer не до конца поддерживает CSS.
Николаев Иван