Учебник CSS3. Статья «создание первой таблицы стилей»
В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.
Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.
Создание внутренней таблицы стилей
Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.
Шаг 1: Откройте текстовый редактор
Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.
Перед Вами откроется основное окно программы:
Рис. 2 Текстовый редактор Notepad++.Шаг 2: Создайте структуру документа
Скопируйте или впишите в редактор следующий HTML код:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <!-- указываем кодировку документа --> <title>Внутренняя таблица стилей</title> <style> </style> </head> <body> <h2>Как хорошо, что я занимаюсь саморазвитием.</h2> <p>Я выучу CSS за месяц, а то и быстрее</p> </body> </html>
В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!— … —>, текст внутри такого элемента не отображается браузером. В CSS коде для добавления комментария необходимо текст комментария поместить в следующую конструкцию: /* текст комментария */. Комментарии в CSS коде вы можете делать как внутри встроенных стилей, так и во внешних (в отдельном файле).
Шаг 3: Добавьте встроенные стили
Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color: red), а для абзацев голубой (color: blue). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align: center). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Внутренняя таблица стилей</title>
<style>
h2 {
text-align: center; /* горизонтальное выравнивание текста по центру */
color: red; /* изменяем цвет текста */
}
p {
color: blue; /* изменяем цвет текста */
}
</style>
</head>
<body>
<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
<p>Я выучу CSS за месяц, а то и быстрее</p>
</body>
</html>
Шаг 4: Просмотр HTML страницы в браузере
Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:
Подключение внешней таблицы стилей
Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.
- В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css) в той же папке, где вы создавали HTML документ.
- Перенесите из предыдущего примера код CSS (содержимое тега <style>) в файл, который мы создали. Обратите внимание, что сам тег <style> необходимо удалить из документа (зачем нам пустые неиспользуемые теги в документе). Файл css у Вас должен содержать следующий код:
- Добавьте к вашей таблице стилей следующий CSS код для элемента <body>, который определяет видимое содержимое страницы:
- Нам осталось только элементом <link> определить связь между документом и внешним ресурсом (таблицами стилей). Обратите внимание, что тег <link> необходимо разместить перед закрывающим элементом </head>:
- Сохраните ваши файлы и проверьте результат в браузере.
h2 {
text-align: center;
color: red;
}
p {
color: blue;
}
body {
margin-top: 50px;
border: 5px solid green;
font-family: courier;
}
Для элемента <body> мы указали следующие новые для Вас CSS свойства:
margin-top: 50px – это CSS свойство отвечает за внешний отступ от верхнего края элемента, его мы указали равным 50 пикселям.border: 5px solid green — это универсальное CSS свойство, которое позволяет установить все свойства границ элемента в одном объявлении (в нашем случае задаем сплошной тип границы (solid) равной 5 пикселям зеленого цвета.
font-family: courier — задаем шрифт «Courier» для элемента.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Внутренняя таблица стилей</title> <link href = "page.css" rel = "stylesheet"> <!-- подключаем нашу таблицу стилей --> </head> <body> <h2>Как хорошо, что я занимаюсь саморазвитием.</h2> <p>Я выучу CSS за месяц, а то и быстрее.</p> </body> </html>
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
- Составьте следующую HTML страницу, в которой CSS стили, отвечающие за заголовки страницы будут подключаться отдельным файлом, а все остальные используемые стили, будут содержаться во внутренней таблице стилей:
Практическое задание № 1.
Подсказка: на странице использованы цвета: dimgray, gray, aliceblue, orange.
Обращаю Ваше внимание, что готовые практические примеры будут доступны для открытия в новом окне, но старайтесь выполнять их самостоятельно. Подглядеть код готовой страницы можно, используя инструменты разработчика, как правило, в любом браузере достаточно кликнуть правой кнопкой по странице и нажать на просмотр кода страницы, либо элемента.
Учебник HTML 5. Статья «Стили»
В этой статье мы с Вами познакомимся еще с одним глобальным атрибутом style, узнаем что такое каскадные таблицы стилей, что такое CSS стиль и научимся задавать его для HTML элементов.
К этой статье у вас уже есть четкое понимание, что язык гипертекстовой разметки используется, чтобы описать содержимое веб-страницы. Путешествуя по сети интернет, мы замечаем, что страницы выглядят по разному: цветовая гамма, шрифты, различный междустрочный интервал, фоновые изображения и даже анимация. Не откладывая в дальний ящик сразу хочу Вам объяснить, что на то как эти страницы будут выглядеть, влияют, используемые
Что такое стиль? Стиль устанавливает внешний вид какого-либо элемента страницы, т.е. грубо говоря, это правило, которое сообщает браузеру как форматировать определенный элемент (например, измененить фон или цвет шрифта).
Каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть произведено с использованием глобального атрибута style. Атрибут задает встроенный (inline) CSS стиль для элемента. Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента. В рамках изучения HTML мы рассмотрим только использование встроенного CSS.
Глобальный атрибут style имеет следующий синтаксис:
style = "property:value", где property это CSS свойство, а value его значение.
Допускается использование нескольких CSS свойств и значений, при этом их необходимо разделять между собой точкой с запятой.
style = "property:value; property:value; property:value"
В этой статье мы подробно рассмотрим только один пример, но от Вас потребуется максимально внимательно к нему отнестись.
В следующем примере мы используем целых пять новых для вас CSS свойств и с ипользованием глобального атрибута style применим их к различным, уже знакомым нам HTML элементам:
<!DOCTYPE html> <html style = "text-align: center"> <!-- выравниваем текст по центру во всем документе --> <head> <title>Пример использования глобального атрибута style</title> </head> <body style = "background-color: khaki"> <!-- задаем цвет заднего фона для элемента --> <p style = "color: brown; font-size: 26px">А.С. Пушкин</p> <!-- задаем цвет текста коричневый, размер шрифта 26 пикселей --> <pre style = "font-family: courier"> <!-- задаем шрифт для элемента --> Я помню чудное мгновенье: Передо мной явилась ты, Как мимолетное виденье, Как гений чистой красоты. </pre> </body> </html>
Давайте разберем, какие стили к чему были добавлены:
- Для тега <html> установили выравнивание текста по центру, для этого мы использовали CSS свойство text-align со значением center. Обращаю внимание, что выравнивание по центру распостраняется на все элементы в документе, аналогичный эффект можно было достичь задав этот стиль для элемента <body>. Изменяя значения свойства text-align вы можете также выровнять текст как по левому (left) и правому (right) краю, так и по ширине (justify).
- Для всего видимого содержимого (тег <body>) с использованием CSS свойства background-color мы задали цвет заднего фона khaki. Цвет khaki является одним из предопределенных цветов (стандартное имя цвета). Более подробную информацию по использованию цветов вы получите в следующей статье «HTML цвета».
- Для абзаца (тег <p>), который содержит имя автора стихотворения, мы применили два CSS свойства, первое color задает цвет текста (стандартное имя цвета brown — коричневый), второе font-size устанавливает размер текста. Мы установили размер текста равный 26 пикселям. Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя.
- Для элемента <pre>, который определяет предварительно отформатированный текст, мы, с использованием CSS свойства font-family установили шрифт содержимого — Courier (компьютерный шрифт, относящийся к классу моноширинных, все знаки (кегельные площадки), которого имеют одинаковую ширину).
Рис 16a Пример использования встроенных стилей.
Не расстраивайтесь если Вам на данном этапе, не понятны какие-то моменты, мы более подробно рассмотрим данный материал в следующих статьях и при изучении CSS. Главное не бросать начатое и как говорил известный в наше время экспонат: «Учиться, учиться и ещё раз учиться».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив с текстовым файлом:
- Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 10.
Подсказка: в этом примере используются следующие цвета: white (белый), khaki (хаки), gray (серый). Для текста стихотворения используется шрифт Verdana.
Если у Вас есть затруднения в выполнении задания, то проинспектируйте код страницы, открыв пример в отдельном окне кликнув по изображению.
Язык CSS — Как создать сайт
CSS — язык форматирования
W3C — логотип консорциума, всемирной паутины. Создателя языка CSS.В этой статье о CSS, дан небольшой обзор языку, его структуре, характеристике, истории. Данная статья о языке CSS предназначена к чтению для общего развития и на начальном этапе изучения CSS вы можете её пропустить и вернуться к ней позже, после прочтения учебника по CSS.
CSS (Cascading Style Sheets) — каскадные таблицы стилей. CSS — это язык форматирования, благодаря которому можно изменять внешний вид HTML-тегов, управлять их цветом, размерами, отступами, положением и т.д.
Форматирование — это изменение внешнего вида.
Созданием и развитием языка CSS занимается W3C (World Wide Web Consortium) — консорциум всемирной паутины.
Для чего создан язык CSS?
Язык CSS создан для того, чтобы вебмастера при создании веб-страниц, разделяли их логику (HTML-теги: абзацы, изображения, таблицы) и описание их внешнего вида (CSS-свойства).
Что по-сути является очень удобным, ибо для того чтобы изменить внешний вид какого-нибудь HTML-тега (например изменить цвет у всех заголовков), на всех страницах сайта, нужно всего лишь подправить одну строчку в CSS-файле. А раньше, до изобретения CSS, вам пришлось бы вносить изменения в заголовки (или любой другой тег) на каждой странице отдельно. Что естественно занямало бы очень много времени, особенно если сайт состоял из сотен или даже тысяч страниц.
Преимущества использования CSS:
- Быстрота разработки сайта;
- Удобство обслуживания сайта;
- Множество возможностей изменения внешнего вида HTML-тегов;
Читать далее: Учебник CSS
Дата публикации поста: 15 июля 2019
Дата обновления поста: 16 октября 2014
Навигация по записям
Учебник CSS. Стиль текста.
Глава 2
В этой главе пойдет речь о том, что можно сделать с текстом, применяя к элементам HTML содержащие в себе некий текст те или иные свойства CSS.
Ну поехали..
Если Вы помните, из курса HTML, для того что бы выровнять текст, например по центру экрана, мы применяли к тегу содержащему в себе текст атрибут align(выравнивание) и одно из его возможных значений center(по центру)
Запись имела такой вид:
<p align=»center»>текст по центру</p>В CSS данную задачу берет на себя свойство text-align, которое выравнивает текстовое содержание относительно элемента родителя (например, блока div) или же окна браузера.
text-align (так же как и htmlловский атрибут align) имеет следующие значения:- left — Выровнять текст по левому краю элемента (по умолчанию).
- right — Выровнять текст по правому краю.
- center — Выровнять текст по центру.
- justify — Выровнять текст по обоим краям.
Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:
<p>текст по центру </p>— это в этом случае если мы, с помощью атрибута style, внедряем CSS непосредственно в HTML тег.
А вот в примере ниже используется тег <style> в заголовке документа:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Выравнивание текста</title>
<style type=»text/css»>
h2 { text-align: center }
p { text-align: justify }
</style>
</head>
<body>
<h2>Всё о слонах</h2>
<p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p>
</body>
</html>
Свойство text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста.
Возможные значения:
- blink — Текст будет мигать.
- line-through — Делает текст перечеркнутым.
- overline — Надчёркивание текста.
- underline — Подчеркивание текста.
- none — Текст без оформления.
Пишется так:
<a href=»index.html»>Ссылка без подчёркивания</a>Пример:
Файл mystyle.cssh2 {text-align: center}
h4 {text-align: left; text-decoration: underline}
a {text-decoration: underline}
a:hover {text-decoration:none}
p {text-align: justify}
Файл index.html
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Оформление текста</title>
<link rel=»stylesheet» href=»mystyle.css» type=»text/css»>
</head>
<body>
<h4>Меню:</h4>
<a href=»index.html»>Всё о слонах.</a><br>
<a href=»elephant.html»>Купить слона.</a>
<hr>
<h2>Всё о слонах</h2>
<p> Слон — самое крупное … … …</p>
<p>Слоны являются … … …</p>
</body>
</html>
Обратите внимание на внешний файл CSS в нем мы «декорировали» ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}
Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться «живым».
Впрочем, мы немного забежали вперёд.. о псевдоклассах речь пойдёт в отдельной главе.
Свойство text-indent — задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает «красную строку».
Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS.
В примере ниже расстояние отступа от левого края задаётся в пикселях (px):
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Красная строка</title>
<style type=»text/css»>
h2 {text-align: center}
p {text-align: justify; text-indent: 20px}
</style>
</head>
<body>
<h2>Всё о слонах</h2>
<p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p>
</body>
</html>
Своийство text-transform трансформирует символы в указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.
Значения:
- none — Текст отображается без каких-либо изменений.(по умолчанию)
- capitalize — Каждое слово в тексте отображается с заглавного символа.
- lowercase — Все символы преобразуются в нижний регистр.
- uppercase — Все символы преобразуются в верхний регистр.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Трансформация текста</title>
</head>
<body>
<p>союз советских социалистических республик</p>
<p>СССР ссср</p>
<p>ссср СССР</p>
</body>
</html>
Вертикальное выравнивание текста в строке устанавливает свойство vertical-align
Возможные значения свойства vertical-align:
- baseline — Выравнивает базовую линию элемента по базовой линии родителя.
- bottom — Выравнивает элемент по нижней части строки.
- middle — Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
- sub — Нижний индекс (размер шрифта не меняется).
- super — Верхний индекс (размер шрифта не меняется).
- text-bottom — Нижняя граница элемента выравнивается по нижнему краю строки.
- text-top — Верхняя граница элемента выравнивается по верхнему краю строки.
- top — Выравнивает элемент по верхней части строки.
Базовая линия — это линия, на которой располагаются «сидят» символы в текстовой строке, Например буква «А» сидит прямо на этой линии, а вот строчная буква «у» сидит на ней же, но свесив ноги..
Взгляните на рисунок с разметкой строки:
Так же вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Вертикальное выравнивание текста</title>
</head>
<body>
<font size=»+3″>А и Б </font>
<span>сидели на трубе </span>
<span>А упало </span>
<span>Б пропало.. </span>
<span>что осталось на трубе?</span>
<hr>
формула воды: H<span>2</span>O
<hr>
<span>н</span>
<span>а</span>
<span>и</span>
<span>с</span>
<span>к</span>
<span>о</span>
<span>с</span>
<span>о</span>
<span>к</span>
</body>
</html>
Набранный текст, в каком либо текстовом редакторе браузерами по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами.
Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.
Может иметь следующие значения:
- normal — текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
- nowrap — запрещает автоматический перенос строки.
- pre — показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<p>
Слон.
Дали туфельки слону.
Взял он туфельку одну
И сказал: — Нужны пошире,
И не две, а все четыре!
</p>
<hr>
<p>
Это длинный предлинный текст, который вряд ли полностью поместится в одной строчке, по умолчанию в нужном месте, браузер перенес бы его на следующую строку, однако мы принудительно запретили это делать, с помощью значения nowrap свойства white-space. Так что теперь, по всей вероятности, в окне браузера появиться горизонтальная полоса прокрутки.. и зачем, спрашивается, мы это сделали?
</p>
</body>
</html>
При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег <br>
Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.
Значения:
- normal — Нормальное расстояние. (по умолчанию)
- px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Расстояние между словами</title>
</head>
<body>
<p align=»left»>Расстояние между словами равно десяти пикселям</p>
<p align=»left»>Расстояние между словами может иметь отрицательное значение</p>
</body>
</html>
А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:
- normal — Нормальное расстояние. (по умолчанию)
- px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Расстояние между символами</title>
</head>
<body>
<p>Расстояние между буковками равно пяти пикселям</p>
<p>А здесь буквы, из за отрицательного значения, будут наплывать друг на друга</p>
</body>
</html>
Интерлиньяж — это расстояние между строками текста.
Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:
- normal — Норма (по умолчанию).
- % — Проценты. за сто процентов берется высота шрифта
- 0.5 — Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 — двойному.
- px — Пиксели и любые другие единицы измерения, принятые в CSS.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Интерлиньяж</title>
</head>
<body>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
</body>
</html>
При декорировании текста, свойство — text-decoration, будьте благоразумны используя подчеркивание текста это может ввести в заблуждение посетителя страницы, он может подумать, что данный текст является ссылкой.
А Вам точно нужно использовать значение nowrap свойства white-space, запрет переноса строки? Появление горизонтальной полосы прокрутки мало кого вдохновляет..
Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.
введение в основы работы с языком стилей
От автора: я очень рад начать сегодня серию статей, посвященных LESS, динамическому языку, который значительно расширяет возможности CSS и добавляет в него много свойств. LESS позволяет вам использовать переменные, миксины, вложенные правила и даже функции внутри CSS. Он чрезвычайно эффективен и может значительно ускорить процесс разработки. Конечно, чтобы освоить эту тему, вам потребуется приложить усилия, но как только вы разберетесь в LESS CSS, вы точно никогда больше не захотите работать без него.
План статей серии
Введение
Использование переменных
Использование миксинов
Использование вложенных правил
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоИспользование функций
Разделяй и властвуй
Применение на практике
Как видите, впереди вас ожидает много чего интересного. Давайте же начнем.
Что такое LESS и зачем он нужен?
За то время, что я занимаюсь разработкой, я обнаружил, что, когда речь заходит о LESS (или любом другом препроцессоре CSS), люди делятся на три типа. Есть люди, типа Я никогда о нем не слышал, другой тип –Да, я пробовал, но это не моё, и третий тип – О, да! Я его обожаю!
Цель этой серии – сделать так, чтобы вы оказались в третьей категории.
Согласно Википедии, LESS: это динамический язык стилей, который разработал Алексис Селлье (Alexis Sellier). Он был создан на основе языка стилей Sass и, в свою очередь, оказал влияние на его новый синтаксис “SCSS”, в котором также использован синтаксис, являющийся расширением CSS.
LESS был представлен в 2009 и в последние месяцы получил широкое применение в больших и малых проектах, включая фреймворк Bootstrap от компании Twitter, самый популярный проект на веб-сервисе GitHub.
В ходе ознакомления со статьями этой серии вы сможете лучше уловить суть того, что же такое на самом деле LESS и как его можно использовать, и в скором времени вы будете в состоянии создать впечатляющую библиотеку переменных, быстрых эффектов CSS3 и многое другое.
Какие материалы есть по этой теме?
Существует множество источников, в которых вы можете прочитать про LESS, первым из них может быть http://lesscss.org, домашняя страница LESS. Этот ресурс поможет вам в установке, работе с кодом, обработке файлов LESS и во многих других вопросах.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоВеб-сайт Smashing Magazine тоже опубликовал введение в LESS и его сравнение с SASS, то есть с другим популярным препроцессором CSS.
Также благодаря простому поиску в Google по запросу «LESS» вы можете найти много разных ресурсов, советов и рекомендаций, но ничто не поможет вам лучше освоить LESS, чем если вы сами на практике возьметесь за работу с кодом и изучите все с самого начала.
LESS работает на стороне сервера или клиента?
Хороший вопрос, ответ на него таков: и на той, и на другой. Или же ни на одной из них. Чтобы применить LESS на стороне клиента, нужно сохранять все ваши файлы как type.less и включать их в документ точно так же, как бы вы делали это с файлом CSS.
<link rel=»stylesheet/less» type=»text/css» href=»type.less»>
<link rel=»stylesheet/less» type=»text/css» href=»type.less»> |
После того, как вы загрузили все файлы LESS, нужно обратится к файлу LESS JS, который компилирует все ваши файлы в одну таблицу стилей CSS.
<script src=»less.js» type=»text/javascript»></script>
<script src=»less.js» type=»text/javascript»></script> |
И это на стороне клиента! Не забывайте, что нужно обращаться к файлу the less.js после того, как вы добавите таблицу стилей .less.
Я не буду вдаваться в подробности того, как установить LESS на стороне сервере просто потому, что я не очень много работаю на стороне сервера и не хотел бы вводить вас в заблуждение. Вместо этого, я подробно рассмотрю третий метод, который я очень рекомендую. Работать ни на той, ни на другой стороне.
Использование LESS.APP для MAC OS X
Одним из наиболее авторитетных клиентов, используемых мною при написании кода в LESS, является приложение LESS.app для Mac OS X (Извините меня, пользователи Microsoft – просто попробуйте SimpLESS). С помощью LESS.app происходит компиляция файлов LESS в таблицу стилей CSS и даже появляется возможность выполнить минимизацию CSS, чтобы уменьшить размер файла. Это делает создание стилей неимоверно эффективным, потому что вы можете использовать десятки файлов LESS, компилировать их в одну таблицу стилей, выполнять минимизацию и публиковать их на сервере.
Для того, чтобы использовать LESS.app, просто перетащите свою папку с рабочим кодом в окно приложения и LESS.app автоматически найдет ваши файлы LESS. Потом можно уточнить, какие именно файлы вы хотите конвертировать в CSS, куда их нужно сохранить (в рабочей папке) и нужно ли выполнять минимизацию CSS. Крутая вещь, определенно.
Итак, уделите несколько минут сегодня и в будущем тому, чтобы разобраться в LESS и LESS.app, и изучить некоторые материалы по этой теме. Следующая статья этой серии будет посвящена Применению переменных. До скорого.
Автор: Alex Ball
Источник: http://www.developerdrive.com/
Редакция: Команда webformyself.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео