Главная / Операционные системы

Что такое CSS, подключение CSS файла. Что такое HTML, CSS, PHP и JS? Css стили что

По мере роста популярности веба в девяностых годах, также росло намерение применять к сайту определённый дизайн. Веб-разработчики полагались на конкретные теги HTML для улучшения веб-страниц:

определял шрифт всего HTML-документа;
определял гарнитуру, цвет и размер текста, который находится внутри;
выравнивал по центру всё своё содержимое;
увеличивал размер текста;
отображал текст перечёркнутым.

Также могли быть использованы несколько атрибутов HTML:

bgcolor определял цвет фона элемента;
text определял цвет текста;
атрибуты margin могли быть использованы для добавления пространства с любой стороны элемента.

Зачем избегать таблиц?

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

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

Левое меню

Основное содержимое

Правый сайдбар

Такой подход был громоздким по нескольким причинам:

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

Именно поэтому от применения таблиц в качестве инструмента вёрстки медленно отказались и вместо них был использован CSS.

Что такое CSS

CSS (Cascading Style Sheets) означает каскадные таблицы стилей и представляет собой язык разметки стилей (как HTML или XML). Таким образом, CSS ничего не представляет сам по себе, если не связан с HTML-документом.

CSS привносит жизнь в HTML-документ, выбирая шрифты, применяя цвета, определяя отступы, позиционируя элементы, анимируя взаимодействия и многое другое.

Как работает CSS

CSS выбирает элемент HTML (например, абзац), задаёт свойство для изменения (такое как цвет) и применяет определённое значение (например, красный):

P { color: red;}

Слово «стиль» может быть обманчивым. Можно подумать, CSS используется только для изменения цвета текста, размера и типа шрифта. Но CSS может задать компоновку HTML-документа, определяя высоту, ширину, внутренние и внешние поля, положение, колонки и др.

Где я могу писать CSS?CSS как атрибут

Вы можете писать CSS непосредственно в элементах HTML с помощью атрибута style:

Это важный текст.

CSS в

Вы можете использовать тег внутри вашего HTML-документа:

Привет, мир p { color: red;}

Этот абзац будет красным.

CSS в отдельном файле

Вы можете писать свой CSS в отдельном файле с расширением.css, а затем связать его с HTML с помощью тега .

P { color: red; }

Привет, мир

Этот абзац будет красным.

Данный HTML-документ, который «вызывает» файл CSS, в нашем случае файл с именем style.css, расположен в той же папке, что и CSS-файл.

Этот третий метод , использующий отдельный CSS-файл, является предпочтительным .

Несмотря на всё большее распространение широкополосного доступа к Интернету, проблемы скорости загрузки HTML-страниц всё ещё не безразличны многим пользователям Сети, особенно на просторах бывшего Союза. CSS (Cascading Style Sheets) может помочь в этом деле, сэкономив нам время и трафик.

1. Избегайте использования таблиц для разметки страницы

Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:

Браузеры анализируют таблицы дважды: первый раз для того, чтобы оценить структуру таблицы, и второй - для орпреления их содержимого.
Таблицы отображаются сразу полностью, а не по мере загрузки.
Таблицы заставляют использовать прозграчные картинки для определения ширины колонок и т.п.
CSS требует гораздо меньше кода, чем перегруженные таблицы
Весь CSS-код может быть вынесен во внешний файл, который будет грузиться всего один раз и храниться в кэше браузера.
При помощи CSS можно контролировать очерёдность загрузки элементов страницы.
2. Не используйте картинки для отображения текста

Большинство кнопок и надписей можно отобразить при помощи CSS. Взгляните на пример:

A:link.example, a:visited.example, a:active.example {
color:#fff;
background:#f90;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
padding:0.2em;
border:4px #00f outset
}
a:hover.example {
color:#fff;
background:#fa1;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
padding:0.2em;
border:4px #00f inset
Этот CSS определяет простую кнопку, которая меняет свой вид при наведении курсора. Таким образом можно создавать и более сложные объекты.

Некоторые фоновые изображения лучше загружать через CSS. Например, чтобы показать картинку размером 200х100, можно использовать следующий код:

И соответствующий CSS:

Pretty-image { background: url(filename.gif); width: 200px; height: 100px }

Сначала это может показаться бессмысленным, но на самом деле такой способ может намного ускорить загрузку страницы. В этом случае браузер начнёт загружать картинку только после того, как будет выведен весь текст, а не одновременно. Таким образом пользователи могут работать со страницей, в кто время как изображение ещё будет подгружаться.

Эта техника лучше всего подходит для загрузки чисто декоративных, фоновых элементов страницы. Если изображение является частью содержимого, всё равно придётся использовать тег IMG.

4. Использование контекстных стилей

Данный код неэффективен:

This is a sentence

This is another sentence

This is yet another sentence

This is one more sentence

Text { color: #03c; font-size:2em }

Вместо того, чтобы присваивать класс каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:

This is a sentence

This is another sentence

This is yet another sentence

This is one more sentence

Text p { color: #03c; font-size:2em }

Этот код указывает браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

Вы могли заметить, что цвет здесь указан всего тремя символами, а не шестью. В данном случае #03c является сокращённым написанием значения цвета #0033cc.

5. Использование сокращений

Лучше написать:

Font: 1em/1.5em bold italic serif

Вместо

Font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Border: 1px black solid

Вместо

Border-width: 1px;
border-color: black;
border-style: solid

Background: #fff url(image.gif) no-repeat top left

Вместо

Background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Отступы и границы

Используйте:

Margin: 2px 1px 3px 4px
(верх, вправо, низ, влево)

Вместо

Margin-top: 2px
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px

Аналогично:

Margin: 5em 1em 3em
(верх, влево и вправо, низ)

Вместо

Margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em

Margin: 5% 1% (верх и низ, влево и вправо)

Вместо

Margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%

Эти правила применяются к атрибутам margin, border и padding.

6. Минимизирование пробелов, переводов строк и комментариев

Каждый символ - буква или пробел - занимают один байт. Каждый лишний символ только увеличивает размер страниц. Поэтому старайтесь поменьше нажимать Enter и Tab в процессе вёрстки. Кроме того, не забывайте объединять CSS-стили.

Абсолютные ссылки занимают намного больше места, чем относительные. А кроме того, создаёт дополнительную нагрузку на браузер, что более важно. Пример абсолютной ссылки: . Гораздо правильней будет написать . Но что если нужный файл находится в другом каталоге? Вот несколько примеров, которые помогут вам разобраться в этом вопросе:

- Вызов корневой страницы сайта http://www.URL.com
- Вызов страницы в корневом каталоге http://www.URL.com/filename.html
- Файл в подкаталоге "корня" http://www.URL.com/directory/filename.html
- Обращение к текущему каталогу и index.html
- Каталог-родитель текущего и index.html
- То же самое, с указанием файла
- index.html в двух каталогах выше текущего
8. Не увлекайтесь применением тегов META

Большинство тегов META соврешенно ненужные. Если интересно, можно взглянуть на все существующие варианты. Самые важные теги (keywords и description) используются для оптимизации поисковых машин. При использовании атрибута content в теге META старайтесь не превышать размера в 200 символов. Большие описания и множество ключевых слов могут быть восприняты поисковыми машинами как спам.

9. Выносите CSS и JavaScript в отдельные файлы

Все это знают, но не всегда пользуются. Вот так выглядит вызов CSS из внешнего файла:

И соответственно JavaScript:

Любой внешний файл грузится всего один раз и затем сохраняется в локальном кэше. Ограничений на количество «подключаемых» внешних файлов не существует.

10. Ставьте / (слэш) в конце ссылок на каталоги

Необходимо писать так:

Объясняется это очень просто. В первом случае браузер не знает, на что ведёт ссылка: на файл или каталог. "Слэш" сразу даёт понять, что эта ссылка ведёт в каталог, и необходимости в дополнительной проверке не возникает.

Аббревиатура CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Если верить (а в таких вопросах именно им верить и надо), CSS это механизм добавления стиля в веб-документ. Под стилями понимаются правила, определяющие внешний вид, оформление документа — управление шрифтами, цветами на странице, расположением элементов.

Давай разберемся, что же это за таблицы такие, для чего они нужны и почему они вдруг «каскадные»?

Для чего нужно отделять содержимое от оформления

Классический принцип «разделяй и властвуй» известен еще со времен Древнего Рима. Он неоднократно позволял достигать успеха в военно-политических играх деятелям различных эпох. Поможет он и нам.

Изначально HTML использовался для структурирования текста (вот заголовок, вот абзац, а это — список). Отображение конкретных элементов определялось их атрибутами и во многом оставалось на совести браузера. Так как управлять внешним видом все-таки хотелось, стали появляться теги оформления, такие, например, как или . В результате содержимое документа и его оформление тесно переплелись между собой. Код стал громоздким, негибким, трудночитаемым. Например, таким:

Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit

Очевидные минусы:

много лишних конструкций, не относящихся непосредственно к разметке содержимого — большой размер файла, повышается траффик и время загрузки;
затруднено изменение дизайна. Например, если нужно поменять цвет, придется искать все атрибуты ;
существенные ограничения возможностей форматирования. Многие теги просто невозможно настроить должным образом с помощью одних только атрибутов;
отсутствует возможность подстраивать оформление под различные типы отображающих устройств (монитор ПК, принтер, экран КПК, голосовой браузер и т.д.);
код теряет свою логическую разметку (семантику), и как следствие:
- плохо индексируется поисковыми роботами, ведь им приходится обрабатывать кучу «мусора»;
- значительно ухудшается доступность для пользователей использующих невизуальные браузеры.

Выделение всех правил для оформления в отдельный блок (файл), позволяет решить эти проблемы. Код стает проще, работать с ним значительно легче. Сам HTML становится тем, чем он задумывался — языком смысловой разметки документа:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Плюсы использования CSS:

код разделен на содержимое и оформление. Получаем более легкий и понятный код;
файл с оформлением загружается только один раз и кешируется — уменьшается трафик, время загрузки и нагрузка на сервер;
простота самого языка CSS + принцип отделения оформления от содержания — сокращается время на разработку и поддержку сайта;
один CSS управляет отображением множества HTML-страниц. Изменения дизайна делаются быстрее;
CSS предоставляет дополнительные возможности форматирования о которых при использовании только атрибутов не приходилось и мечтать;
реализован механизм подключения разных CSS для разных типов отображающих устройств;
повышение совместимости с разными платформами за счет использования веб стандартов.

Каскадные таблицы стилей

Итак, CSS — это общепризнанный международный стандарт. CSS — это мощнейший инструмент, одна из основных состаляющих практически любой веб страницы, без которой невозможно представить современную веб разработку.

Таблицы стилей могут быть как внутренние (в пределах HTML файла) так и внешние. Внешние таблицы наиболее удобны и представляют собой файлы с расширением css. Подробнее эти вопросы, будут рассматриваться в одной из следующих статей.

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

Пример фрагмента CSS:

Правил может быть множество, каждое состоит из двух частей (можно представить, что колонок) — к чему применяем стили (селектор) и какие собственно стили применяем (блок определений). Поэтому всю конструкцию назвали «таблица». Итак «таблица стилей». Но почему вдруг «каскадная»?

Каскадное наследование

Дело в том, что CSS использует наследование от родителя к потомку, что позволяет определять стили, опираясь на уже описанные ранее для родителей. При этом возникает ситуация, когда для элемента подходят свойства из нескольких правил одновременно. Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, что делает результаты предсказуемыми. Такая модель называется «каскадом».

Итог

CSS — это мощная технология, позволяющая описать правила оформления HTML документа, отделить их от содержания. Одним из ключевых требований, среди тех, что современный рынок труда выдвигает верстальщику является доскональное знание CSS. Вместе с тем CSS достаточно просты в освоении. Для того чтобы помочь в этом существует наш .

Каскадные таблицы стилей (CSS) - язык описания внешнего вида веб-документа.

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

так и с помощью тега style (для Blogger - в шаблоне ) ... ... ... или атрибута style, которым не рекомендуется злоупотреблять, поскольку это усложняет поиск нужного фрагмента для корректировки и ведёт к повышению времени загрузки страницы в браузере, то есть стили желательно прописывать до контент

Стили выполняются в том же порядке, в котором читаются: сверху вниз, слева направо. Например,

Как использовать css div { color: green; color: red; /* если бы не был указан атрибут style, то цвет текста был бы красным, а не зелёным */ } синиц цвет текста

При одновременном использовании id и class, приоритет будет отдан id.

#demoID { color: red; } .demoCLASE { color: green; } содержимое Приоритет отдаётся более узкой записи
#demoID.demoCLASE { color: red; } #demoID { color: green; } содержимое

Отличия между ними очевидны. Первой строкой мы задаем красный цвет для всех div, второй - только для содержимого тега p в div.

содержимое содержимое

Содержимое

Есть ли различия между этими двумя вариантами? .demo { color: red; } p.demo { color: red; }

Первый ведёт к изменению в любых тегах, помеченных классом demo

содержимое

Содержимое

Второй будет применён только к тегу p с class="demo"

содержимое

Содержимое

Каковы различия между .demo p { color: red; } p.demo { color: red; }

В первом случае только теги p, содержащиеся в контейнере с классом demo, будут иметь красный цвет

Красная палитра

любого другого цвета

Красная палитра

Во втором для любого тега p с данным классом (см. выше).

Аналогично с псевдоклассом:hover (изменения производятся при наведении мышки). .demo { color: red; } .demo:hover { color: blue; }

Образец как использовать CSS текст в span и далее.

И второй способ.

.demo { color: red; } .demo:hover span { color: blue; }

Образец как пользоваться CSS текст в span и далее.

Между ними нет различия. .demo { background: red; } .raz { color: yellow; } .dva { color: white; } содержимое содержимое
.raz { color: yellow; background: red; } .dva { color: white; background: red; } содержимое содержимое Стили применяются только для тега с определённым атрибутом. p { color: red; }

Содержимое

Если свойство состоит из нескольких параметров, то разделять их должны пробелы. div { background: #AAA url() no-repeat left top; } Вот этот вариант не будет функционировать в IE, поскольку нет пробела между url()no-repeat:
div { background: #AAA url()no-repeat left top; }

Кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.

Информация: Что такое CSS

Каскадные таблицы стилей (Cascading Style Sheets = CSS) - это язык, который отвечает за визуальное представление документов пользователю.

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

А представление документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.

Примеры

Страница сайта, которую вы сейчас читаете - это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (HyperText Markup Language - Язык ГиперТекстовой Разметки)
Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (XML User Interface Language - XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.

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

Подробнее

Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.

Со страницей, которую вы сейчас читаете, дела обстоят немного сложнее. Когда ваш браузер запрашивает данную страницу, сервер обращается к базе данных и генерирует документ, собирая его по частям из нескольких документов, каждый из которых, в свою очередь, может располагаться в нескольких файлах. Однако в этом руководстве вы также сможете работать с документами, каждый из которых представлен одним файлом.

Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:

Во второй части данного руководства вы встретите примеры этих языков разметки.

Подробнее

В терминах CSS программа, которая выводит документ пользователю, так называемому user agent (UA ). Браузер - один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.

Прочие определения и термины, имеющие отношение к CSS, вы можете найти в Определениях спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.

К действию: Создание документа

Создайте новую папку на вашем компьютере для упражнений.

Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.

Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем doc1.html. Sample document

Cascading Style Sheets

Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл.

Вы должны увидеть строку, в которой заглавные буквы выделены полужирным начертанием:

C ascading S tyle S heets

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

Что дальше?

В документе, который вы создали, CSS пока что не использовался. В следующем разделе вы научитесь использовать CSS для стилизации документа.