Что такое CSS и для чего они предназначены
В данном уроке мы рассмотрим, что такое CSS и чем они могут быть для Вас полезны в плане создания сайта.
Однако перед тем как начать рассказ о назначении, функциях и возможностях CSS я бы хотел сделать небольшое отступление и сказать, что на современном этапе развития интернета создать профессионально оформленный сайт без применения CSS практически не возможно.
Материалы по теме:
Нет создать сайт при помощи HTML не прибегая к CSS вы конечно сможете но если вы хотите по настоящему красивый и профессионально оформленный сайт то без использования CSS это сделать не возможно.
Ну а теперь о том что такое CSS. CSS (Cascading Style Sheets) – каскадные таблицы стилей предназначены для отделения внешнего вида страницы т. е. дизайна от ее структуры и содержимого.
Если сказать проще то с помощью HTML вы создаете структуру странички, размещаете на ней текст, а то каким шрифтом, цветом и в какой части страницы будет отображаться ваш текст и графика, Вы определяете при помощи CSS. До того как появился CSS все оформление того же текста происходило с помощью HTML т. е. и дизайн и структура странички были совмещены.
Например, при определении абзаца цвет, фон, размер текста все задавалось в самом html коде при помощи тега <p> и его атрибутов. И всякий раз, когда на других страницах нужно было разместить такой же абзац, приходилось все эти значения, цвета, размера текста и т. д. переписывать. В результате все это нагружало html код, а когда необходимо было что, то поменять в оформлении текста то это приходилось делать на всех страницах сайта.
С появлением CSS появилась возможность назначить всем объектам, свой определенный стиль. Если возвращаться к нашему примеру с тегом <p>, то с помощью CSS мы можем назначить тегу <p> определенный шрифт, размер, цвет, т. е. назначить ему определенный стиль и везде где в html коде мы будем заключать текст в этот тег, он будет отображаться, так как мы это определили.
Таким образом, каждому тегу можно присвоить свои свойства и все эти свойства разместить в отдельном стилевом файле, на который будет специальной ссылкой ссылаться каждая ваша html страничка. В результате теперь вам не нужно прописывать различные свойства определяющие вид того же текста в html файле, просто ставьте теги, а текст будет выглядеть так как вы это задали в стилевом файле.
Более того если вы задумаете поменять оформление то для этого вам понадобится лишь изменить определенные значения в одном стилевом файле и все оформление автоматически меняется на всех html страницах которые связанны с этим стилевым файлом.
Если вам что-то не понятно смотрите урок основы CSS там, на примерах рассмотрено применение стилей.
CSS обладает большими возможностями по оформлению html страниц. При помощи CSS можно менять шрифт, размер текста, цвет текста, фон, CSS тень текста, устанавливать отступы, позиционировать различные элементы на странице и многое другое. При помощи CSS стали доступны новые способы верстки страниц. Это так называемая верстка слоями.
Материал подготовлен порталом: webmastermix.ru
Рекомендуем ознакомиться:
- Подробности
Опубликовано: 13 Январь 2010
Обновлено: 04 Сентябрь 2013
Просмотров: 8577
Типы носителей | htmlbook.ru
Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоёмко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определённого устройства. В табл. 4.1 перечислены некоторые типы носителей.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей. |
| handheld | Наладонные компьютеры и аналогичные им аппараты. |
| Печатающие устройства вроде принтера. | |
| projection | Проектор. |
| screen | Экран монитора. |
| tv | Телевизор. |
В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить стиль для элементов в зависимости от того, выводится документ на экран или на принтер.
Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается.
При импортировании стиля через команду @import тип носителя указывается после адреса файла. При этом допускается задавать сразу несколько типов, упоминая их через запятую, как показано в примере 4.1.
Пример 4.1. Импорт стилевого файла
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Импорт стиля</title>
<style>
@import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
@import "/style/smart.css" print, handheld; /* Стиль для печати и смартфона */
</style>
</head>
<body>
<p>...</p>
</body>
</html> В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и smart.css — при печати страницы и отображении на смартфоне.
Браузер Internet Explorer до седьмой версии включительно не поддерживает типы носителей при импорте стилевого файла.
Команда @media позволяет указать тип носителя для глобальных или связанных стилей и в общем случае имеет следующий синтаксис.
@media тип носителя 1 {
Описание стиля для типа носителя 1
}
@media тип носителя 2 {
Описание стиля для типа носителя 2
}После ключевого слова @media идёт один или несколько типов носителя, перечисленных в табл. 4.1, если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идёт обычное описание стилевых правил. В примере 4.2 показано, как задать разный стиль для печати и отображения на мониторе.
Пример 4.2. Стили для разных типов носителей
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Типы носителей</title>
<style>
@media screen { /* Стиль для отображения в браузере */
BODY {
font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
font-size: 90%; /* Размер шрифта */
color: #000080; /* Цвет текста */
}
h2 {
background: #faf0e6; /* Цвет фона */
border: 2px dashed maroon; /* Рамка вокруг заголовка */
color: #a0522d; /* Цвет текста */
padding: 7px; /* Поля вокруг текста */
}
h3 {
color: #556b2f; /* Цвет текста */
margin: 0; /* Убираем отступы */
}
P {
margin-top: 0.5em; /* Отступ сверху */
}
}
@media print { /* Стиль для печати */
BODY {
font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
}
h2, h3, P {
color: black; /* Чёрный цвет текста */
}
}
</style>
</head>
<body>
<h2>Как поймать льва в пустыне</h2>
<h3>Метод случайных чисел</h3>
<p>Разделим пустыню на ряд элементарных прямоугольников, размер
которых совпадает с размером клетки для льва. После чего
перебираем полученные прямоугольники, каждый раз выбирая заданную
область случайным образом. Если в данной области окажется лев,
то мы поймаем его, накрыв клеткой.</p>
</body>
</html> В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 4.1 и рис. 4.2.
Рис. 4.1. Страница для отображения в окне браузера
Рис. 4.2. Страница, предназначенная для печати
Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу или воспользовавшись предварительным просмотром в браузере (). Или пойти на хитрость и временно заменить print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 4.2.
Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <link> с атрибутом media, значением которого выступают все те же типы, перечисленные в табл. 4.1.
В примере 4.3 показано, как создавать ссылки на CSS-файлы, которые предназначены для разных типов носителей.
Пример 4.3. Подключение стилей для разных носителей
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Разные носители</title>
<link media="print, handheld" rel="stylesheet" href="print.css">
<link media="screen" rel="stylesheet" href="main.css">
</head>
<body>
<p>...</p>
</body>
</html>В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на смартфоне. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определённых устройств.
Аналогично можно использовать и глобальные стили, добавляя атрибут media к тегу <style> (пример 4.4).
Пример 4.4. Стиль для смартфона
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Разные носители</title> <style media="handheld"> BODY { width: 320px; /* Ширина страницы */ } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> </body> </html>
В данном примере ширина для устройств типа handheld ограничена размером 320 пикселов.
Вопросы для проверки
1. Паша решил для своего сайта сделать версию для печати. Какую строку ему следует использовать в коде?
- <link media=»printer» rel=»stylesheet» href=»print.css»>
- @import «palm.css» print;
- @import url(«printer.css») printer;
- @media «palm.css» print;
- <style media=»print»>
2. В какой момент подключается стиль для принтера?
- Во время печати документа.
- Сразу после загрузки страницы.
- Как только браузер найдёт в коде подходящий стиль или ссылку на стилевой файл.
- После обнаружения компьютером принтера.
- После того, как принтер сообщит браузеру о своем наличии.
3. В какой строке кода содержится ошибка?
@media hanheld {
BODY {
color: #080;
background: #ffe;
}- @media hanheld {
- BODY {
- color: #080;
- background: #ffe;
- }
Ответы
1. @import «palm.css» print;
2. Во время печати документа.
3. }
Зачем нужен CSS | Учебные курсы
По мере роста популярности веба в девяностых годах, также росло намерение применять к сайту определённый дизайн. Веб-разработчики полагались на конкретные теги HTML для улучшения веб-страниц:
- <basefont> определял шрифт всего HTML-документа;
- <font> определял гарнитуру, цвет и размер текста, который находится внутри;
- <center> выравнивал по центру всё своё содержимое;
- <big> увеличивал размер текста;
- <strike> отображал текст перечёркнутым.
Также могли быть использованы несколько атрибутов HTML:
- bgcolor определял цвет фона элемента;
- text определял цвет текста;
- атрибуты margin могли быть использованы для добавления пространства с любой стороны элемента.
Зачем избегать таблиц?
Но прежде всего, для создания колонок, визуального выравнивания элементов и, в целом, позиционирования элементов относительно друг друга, веб-разработчики использовали элемент <table> для дизайна своих веб-страниц, потому что он естественным образом обеспечивал визуальную сетку.
<table>
<thead>
<tr>
<th>Логотип</th>
<th colspan="2">Слоган</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">Copyright 2015</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Левое меню</td>
<td>Основное содержимое</td>
<td>Правый сайдбар</td>
</tr>
</tbody>
</table>Такой подход был громоздким по нескольким причинам:
- таблицы в 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:
<p>Это важный текст.</p>CSS в <head>
Вы можете использовать тег <style> внутри <head> вашего HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>Привет, мир</title>
<style>
p { color: red;}
</style>
</head>
<body>
<p>Этот абзац будет красным.</p>
</body>
</html>CSS в отдельном файле
Вы можете писать свой CSS в отдельном файле с расширением .css, а затем связать его с HTML с помощью тега <link>.
CSS
p { color: red; }HTML
<!DOCTYPE html>
<html>
<head>
<title>Привет, мир</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Этот абзац будет красным.</p>
</body>
</html>Данный HTML-документ, который «вызывает» файл CSS, в нашем случае файл с именем style.css, расположен в той же папке, что и CSS-файл.
Этот третий метод, использующий отдельный CSS-файл, является предпочтительным.
Почему бы не размещать стиль прямо в HTML?
Потому что мы хотим отделить содержимое (HTML) от его представления (CSS). Если вы хотите представить замысел этого различия, присмотритесь к замечательному CSS Zen Garden: каждый дизайн использует один и тот же HTML, но каждый раз другой CSS.
Это делает обслуживание проще: тот же CSS-файл может быть использован на всём сайте. А также обеспечивает гибкость: сосредоточьтесь на содержании с одной стороны и стилизации с другой.
Перейти к заданиям
Правила | CSS справочник
Правила | CSS справочник| Правило | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge | @charset | Задает кодировку символов, которая будет использоваться в таблице стилей. Правило должно быть указано самым первым элементом (запрещается использование любых символов до этого правила). Если указано несколько правил, которые определяют кодировку, то браузером будет использовано только первое. | Да | Да | Да | Да | Да | Да |
|---|---|---|---|---|---|---|---|
| @font-face | Правило, которое позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов». | 4.0* | 3.5* | 9.0* | 3.1* | 6.0* | 12.0* |
| @font-feature-values | Позволяет использовать общее название в font-variant-alternate (активируются по-разному в шрифтах OpenType). Это позволяет упростить CSS при использовании нескольких шрифтов. | Нет | 34.0 | Нет | Нет | Нет | Нет |
| @import | Используется для импорта содержимого CSS файла в текущую таблицу стилей. Это правило должно предшествовать всем другим видам правил, за исключением правила @charset. | Да | Да | Да | Да | Да | Да |
| @keyframes | Позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров (или точки) в процессе анимации. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
| @media | Правило, которое используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне. | 21.0 | 3.5 | 9.0 | 4.0 | 9.0 | 12.0 |
© 2016-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]