ОСНОВЫ CSS - раздел Программирование, ОСНОВЫ CSS
Css- Cascading Style Sheets – В Переводе ...
CSS- Cascading Style Sheets – в переводе Каскадные таблицы стилей.
CSS значительно облегчает и автоматизирует создание веб-сайтов.
Каскадные таблицы стилей открывают совершенно новые возможности в веб-дизайне.
Сделать качественный дизайн без их использования очень проблематично.
Но самое важное то, что используя CSS можно сэкономить уйму времени. Ведь с помощью одного маленького файла стилей, можно управлять дизайном многих страниц.
Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде.
CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html.
ОТЛИЧИЯ CSS ОТ HTML
Дело в том, что изначально html использовался исключительно для разметки содержимого документа, т.е. с его помощью указывалось, что это - параграф, а это - таблица, а это - картинка.
Но с каждым месяцем количество пользователей интернет росло. Выдвигались все более серьезные требования к дизайну, т.е. внешнему оформлению страниц.
Вскоре разработчиками были изобретены новые теги, такие как <font> , <strong> , <italic> и др., которые определяли уже не структуру, а внешний вид сайта. Таких тегов появилось очень много.
И все бы хорошо, НО! большая доля этих тегов поддерживалась только одним видом браузеров. Обычным явлением при попытке просмотра того или иного сайта стала ошибка: "Вам необходим браузер X для просмотра этой страницы".
Специально для исправления этой ситуации был создан CSS . Он предоставил возможность точного дизайна, поддерживаемого всеми браузерами.
Вот еще пример отличия css от html :
Допустим перед нами стоит задача - сделать сайт о природе из 100 страниц.
По правилам хорошего тона, весь сайт необходимо выполнить в одном стиле, к примеру, зеленый фон, шрифт Verdana 14 размера , ссылки красного цвета. Если мы делаем такой сайт на чистом html, то на каждой новой странице нужно указывать зеленый фон, указывать чтобы ссылки были красного цвета, каждому новому параграфу указывать шрифт 14 размера. Т.е. каждой странице нужно как-бы заново создавать стиль.
Используя CSS, это можно сделать значительно проще. В отдельном файле создаем стиль, одинаковый для всех страниц. И на каждой странице пропишем единственную строчку, подключающую этот стиль. Вот и все!
А теперь представим, что вы захотели поменять дизайн всего сайта. В случае с чистым html , Вам придется заходить на каждую страницу и менять все параметры на другие.
А в случае использования CSS вы просто поменяли эти параметры в файле стилей и на всех 100 страницах дизайн обновился!
С помощью CSS можно делать такие вещи, которые на html сделать вообще нереально. По ходу обучения Вы сами увидите это.
Подведем итоги: основные преимущества CSS:
· управление дизайном любого количества документов с помощью одной таблицы стилей;
· более точный дизайн страниц, поддерживаемый всеми браузерами;
· разделение документа на две составляющие: структура и дизайн, благодаря чему исходный код становится чистым и легко читаемым
· новые расширенные возможности по сравнению с обычным html
Комментарии используются чтобы пояснить ваш код и могут помочь вам когда вы будете редактировать исходный код позже Комментарии игнорируются... CSS комментарий начинается с quot quot и заканчивается quot quot... Это комментарий p text align center Это другой комментарий color black font family arial...
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ:
ОСНОВЫ CSS
Что будем делать с полученным материалом:
Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:
Синтаксис и принцип работы CSS
CSS имеет строго определенный синтаксис, т.е. правила, по которым создаются таблицы стилей.
В CSS, в отличие от HTML, нет ни элементов, ни атрибутов, ни тегов. Основной структурной единице
ВСТРОЕННЫЕ СТИЛИ
Встроенный стиль теряет много преимуществ таблиц стилей, смешивая содержание с оформлением. Этот метод используется в исключительных случаях!
Чтобы добавить встроенные стили, вы исп
НЕСКОЛЬКО ТАБЛИЦ СТИЛЕЙ
Если некоторые свойства были установлены для одного и того же селектора в различных таблицах стилей, значения будут браться из более специфической таблицы стилей.
Например, внешняя таблица
Цвет и фон в CSS
Цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.)
Основными свойствами цвета
Все Фоновые Свойства CSS
Свойство
Описание
background
Устанавливает все фоновые свойства в одном объявлении
background-attachment
Шрифты в CSS
Рассмотрим основные свойства шрифтов:
font-family font-style font-variant font-weight font-size font
Все CSS Свойства Шрифта
Свойство
Описание
font
Устанавливает все свойства шрифта в одном объявлении
font-family
Устанав
Текст в CSS
В этом уроке мы рассмотрим основные свойства CSS отвечающие за форматирование текста.
text-align text-decoration text-indent text-transform letter
Все Текстовые Свойства CSS
Свойство
Описание
color
Устанавливает цвет текста
direction
Устанавливает направление текста/на
Списки в CSS
Рассмотрим основные свойства CSS, отвечающие за внешний вид списков.
Ø list-style-type
Ø list-style-position
Ø list-style-image
&Osla
Все CSS Свойства Списка
Свойство
Описание
list-style
Устанавливает все свойства списка в одном объявлении
list-style-image
Типы селекторов в CSS
Селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS .
Селектор по элементу; Селект
Границы Таблиц
Чтобы указать границы таблиц в CSS, используйте свойство border.
Пример ниже указывает черную границу для элементов table, th, и td:
table,th,td { border:1px solid black
Выравнивание Текста Таблицы
Текст в таблице выравнивается с помощью свойств text-align и vertical-align.
Свойство text-align указывает горизонтальное выравнивание, например, по левому краю (left), по правому краю (ri
Цвет Таблицы
Пример ниже указывает цвет границ, текста и фона элементов th:
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
Блоковая модель в CSS
В html различают элементы блочные и строчные. Причем блочные элементы - это отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемент
Рамки в CSS
Давайте в этом уроке поговорим о рамках. Основные свойства рамок в CSS следующие:
border-width border-color border-style Сокращенна
WIDTH - свойство устанавливающее ширину блока;
Обычно, в качестве блоков в CSS используют элемент DIV. Однако свойство ширины и высоты можно применить и к параграфам, спискам и др.
Теория - теорией, но давайте практико
Позиционирование блоков
Технология CSS позволяет размещать что угодно, там где Вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, спи
Плавающие блоки(свойство float)
В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще , с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современ
Слои в CSS
В этом уроке, поговорим о таком понятии как слой в CSS. Для тех, кто работал с графическими редакторами, это понятие должно быть знакомо, а для остальных постараюсь объяснить.
Создавая бло
Хотите получать на электронную почту самые свежие новости?
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Новости и инфо для студентов