CSS уроки — основы обучения для начинающих
Представляем вам курс по изучению языка стилей CSS. CSS стили способны полностью изменить отображения сайта, изменив отображение как простых элементов, так и вид самого веб-сайта. За курс мы изучим CSS3 и научимся прописывать все необходимые стили для HTML.
Информация про CSS
CSS является языком, что отвечает за оформление вида страницы. Он позволяет указать стилевое оформление каждого из HTML элементов. Также за счёт CSS можно указывать стили для файлов с XML-разметок: XUL
, SVG
и прочие.
Чистый HTML-документ выглядит ужасно без использования стилей. Каскадные таблицы стилей или же CSS помогает указать всё оформление для веб сайта. Используя лишь HTML и CSS можно создать любой дизайн сайта, какой вам только будет нужен.
Написание CSS
CSS-стиль – это определённое правило, что подсказывает веб-обозревателю правила форматирования для каждого элемента. Под форматированием подразумевается: изменение цвета текста, фона элемента, шрифта, теней, позиции на экране и тому прочее.
Чтобы создать рабочий CSS-стиль, нужно правильно указать 2 основные части:
- Селектор – указывает целевой элемент, которому назначается стиль;
- Блок стилей – подсказывает браузеру нужные правила форматирования.
Пример:
div{ background-color:red; width: 100px; height: 60px; }
В примере селектором выступает тег div. Это означает, что все стили в блоке будут применены к каждому div-элементу на странице.
В фигурных скобках всегда указываются стили. Они должны стоять строго в скобках, а не за их пределами. В представленном примере на выходе получится div блок c красным фоном, шириной 100 и высотой 60 пикселей.
Все команды имеют свойство, а за ним идёт значение. Иллюстрация на основании того же примера:
background-color:red, где
background-color – это свойство;
red – значение.
Свойство задаёт определённый стиль. Подобных свойств очень много, в нашем случае – это цвет фона. Значение всегда указывается после двоеточия. По примеру, свойству background-color установлено значение red. Таким образом перекрашивается цвет фона в красный.
По завершению команды всегда ставится точка с запятой. Этот символ является делителем, который отделяет между собой команды.
Список различных стилей принято называть таблицей стилей или CSS. Есть несколько разных методов указания стилей.
Атрибуты html и стили css
Большинство HTML-элементов поддерживают установку стилей посредством атрибутов. Пример, отдельным элементам есть возможность указать атрибуты width и height (ширина с высотой). Атрибуты указываются прямо в HTML-файле. С ними нужно быть осторожными.
С одной стороны – это удобный способ указать стили для конкретного блока (значения в атрибутах имеют высший приоритет), все прочие теги, подпадающие под общие селекторы, будут иметь стили с CSS-файла.
С другой стороны – это портит HTML-код, он перестаёт быть чистым. В случае редактирования неудобно находить и менять стили по разным файлам, появляется излишняя путаница.
Проверка валидности
Во время создания стилей нередко появляются неясности в отношении правильности их указания и корректности. В данном случае на помощь приходит валидатор CSS, доступный по этой ссылке.
30 лучших техник CSS для начинающих
CSS — это язык, который использует почти каждый разработчик. Хотя это язык, который мы подчас воспринимаем как должное, он мощный и имеет множество нюансов, которые могут помочь (или повредить) Вашим проектам. Вот тридцать лучших техник, CSS, которые позволят вам корректно использовать CSS и избежать некоторых дорогостоящих ошибок.
Читаемость вашего CSS кода невероятно важна, хотя большинство людей не понимают, почему это важно. В основном читаемость вашего CSS кода позволяет гораздо быстрее и легче найти нужные элементы в будущем. Кроме того, вы никогда не знаете, когда, возможно, понадобиться взглянуть на ваш код позже.
При написании CSS, большинство разработчиков, относятся к одной из двух групп.
Обе эти практики являются вполне приемлемыми, хотя в целом считается, что вторая группа презирает первую! Просто помните — выбирайте метод, который выглядит лучше ДЛЯ ВАС. Это все, что имеет значение.
Убедитесь, что CSS является последовательным. Вы должны начать разрабатывать собственный «суб-язык» CSS, что позволяет быстро давать имена. Есть определенные классы, которые я создаю почти в каждой теме, и использую то же имя каждый раз, при создании новой работы. Я, например, использую » .caption-right» Float изображения, которые содержат подпись с правой стороны.
Подумайте о таких вещах, как использовать или нет подчеркивания и тире в вашем ID и именах классов, и в каких случаях их использовать. Когда вы начнете создание своих собственных стандартов CSS, вы станете гораздо более опытными.
Некоторые дизайн — пуристы, решив поиздеваться, начали использовать Framework CSS в каждом дизайне, но я считаю, что если кто-то уже создал инструмент, который ускоряет производство, то зачем изобретать колесо? Я знаю, Framework, не должны использоваться в каждом конкретном случае, но в большинстве случаев они могут помочь.
Многие дизайнеры имеют свои собственные Framework’и, которые они создали с течением времени, и это тоже отличная идея. Это помогает сохранить последовательность в Framework проектах.
Я не согласен. CSS Framework — фантастический инструмент… для тех, кто умеет им пользоваться.
Это не вопрос изобретения колеса, а скорее вопрос понимания, как работает колесо.
Если вы только знакомитесь с CSS, я лично рекомендую, чтобы вы оставались в стороне от этих Framework по меньшей мере год. В противном случае, вы будете только путать себя. Учиться CSS … затем срезать углы!
Большинство CSS основ имеют встроенный сброс, но если вы не собираетесь использовать что-то одно, то, по крайней мере, рассмотрите вопрос об использовании сброса. Сброс по существу устраняет несоответствия браузера, такие как высота, размеры шрифта, поля, заголовки и т.д. сброс макета позволяет смотреть последовательно во всех браузерах.
MeyerWeb является популярным сбросом вместе с разработчиком сбросов Yahoo. Или вы всегда можете создать собственный сброс.
Всегда имеет смысл заложить ваш стиль в виде, который позволяет вам быстро найти части вашего кода. Я рекомендую форматом сверху вниз, который охватывает стили, как они указаны в исходном коде. Таким образом, пример стиля может быть сделан следующим образом:
Элементы стиля иногда имеют одинаковые свойства. Вместо переписывания предыдущего кода, почему бы не объединить их? Например, ваш h2, h3 и Н3 элементы имеют одни и те же шрифт и цвет:
Мы могли бы добавить уникальные характеристики каждому из этих заголовков стилями, если мы хотим (т.е. h2 { size: 2.1em}) в конце таблицы стилей.
Многие дизайнеры создают свои CSS и в то же время создают HTML. Представляется логичным создать их одновременно, но на самом деле вы сэкономите еще больше времени, если вы сначала создадите HTML макет. Смысл этого метода состоит в том, что вы знаете все элементы макета вашего сайта, но вы не знаете, какой CSS вам нужно применить с вашим дизайном. Создание первым макета HTML позволяет наглядно представить всю страницу в целом, и позволяет вам думать о своем CSS в более целостном аспекте, сверху вниз.
Иногда бывает полезно добавить несколько классов для одного элемента. Давайте предположим, что у вас есть
«контейнер», в котором Вы хотите сделать обтекание справа, и у вас уже есть класс .right в CSS, который располагает что-либо с правой стороны. Вы можете просто добавить дополнительный класс в декларации, вот так:<div class="box right"></div>
<div class="box right"></div> |
Вы можете добавить сколько угодно классов (разделенных пробелами) в любой декларации.
Будьте очень осторожны при использовании имен классов «right» и «left». Я буду их использовать, но только для таких вещей, как блог. Как же так? Давайте представим, что дальше вы решите, что лучше видеть поле всплывающим слева. В этом случае, вам придется вернуться на HTML и изменить имя класса — все для того, чтобы изменить дизайн на этой странице. Это бессмысленно. Помните — HTML для разметки и содержания. CSS — для оформления.
Если вам необходимо вернуться к HTML, чтобы изменить дизайн на этой странице, то Вы делаете ошибку!
9. Используйте правильный тип документа
Декларация типа документа (doctype) имеет значение в вопросах наличия или отсутствия разметки и CSS. В самом деле, весь внешний вид вашего сайта может сильно измениться в зависимости от DOCTYPE, который вы заявляете.
Узнайте больше о том, какие типы документа используются на List Apart.
10. Используйте сокращения
Вы можете уменьшить ваш код с помощью Значительных сокращений. Для таких элементов, как padding, margin, font и некоторых других, вы можете сочетать стили в одной строке. Например, Div этих стилей:
#crayon { margin-left: 5px; margin-right: 7px; margin-top: 8px; }
#crayon { margin-left: 5px; margin-right: 7px; margin-top: 8px; } |
Вы можете комбинировать эти стили в одной строке, например так:
#crayon { margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively. }
#crayon { margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively. } |
Если вам нужна дополнительная помощь, вот всеобъемлющее руководство по свойствам CSS сокращений.
11. Оставляйте Ваши комментарии в CSS коде.
Как в любом другом языке, это замечательная идея комментировать свой код в секции. Чтобы добавить комментарий, просто добавьте / * комментарий, и * /, чтобы закрыть его, вот так:
/* Here’s how you comment CSS */
/* Here’s how you comment CSS */ |
12. Понимайте разницу между блочными и строчными элементами
Блочные элементы являются элементами, которые четко занимают каждую строку после их объявления, охватывают всю ширину свободного пространства. Строчные элементы занимают лишь столько места, сколько им нужно, и не перескакивают на новую строку после использования.
Вот списки элементов, которые могут быть строчными или блочными:
span, a, strong, em, img, br, input, abbr, acronym
span, a, strong, em, img, br, input, abbr, acronym |
И блочные элементы:
div, h2…h6, p, ul, li, table, blockquote, pre, form
div, h2…h6, p, ul, li, table, blockquote, pre, form |
13. Отсортируйте свойства в алфавитном порядке.
Хотя это скорее легкомысленный отзыв, он может пригодиться для быстрого сканирования.
#cotton-candy { color: #fff; float: left; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; }
#cotton-candy { color: #fff; float: left; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; } |
Э-эх … жертвовать скоростью для лучшей читабельности? Я бы не стал- но решайте сами!
14. Используйте CSS Компрессоры
CSS компрессоры с помощью CSS уменьшают размер файла путем удаления строк, пробелов и сочетания элементов. Эта комбинация может значительно уменьшить размер файлов, что ускоряет загрузку браузером. Оптимизатор CSS и CSS компрессор — два отличных онлайн инструмента, которые могут уменьшить CSS.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееСледует отметить, что сокращение вашего CSS может обеспечить увеличение производительности, но вы потеряете часть читаемости вашего CSS.
15. Исползуйте классы Generic
Вы обнаружите, что существуют определенные стили, которые Вы применяете снова и снова. Вместо того, чтобы добавлять особый стиль для каждого ID, Вы можете создать общие классы и добавить их идентификаторы или другие классы CSS (с использованием совета № 8).
Например, я считаю, что я использую Float: right и Float:left снова и снова в моей конструкции. Поэтому я просто добавляю классы .left и .right в мой стиль, и ссылаюсь на них в элементах.
.left {float:left} .right {float:right} <div id="coolbox" class="left">…</div>
.left {float:left} .right {float:right} <div id="coolbox" class="left">…</div> |
Таким образом, вам не нужно постоянно добавлять «float: left», чтобы все элементы, которые необходимы, всплыли.
16. Используйте «Margin: 0 auto» для центрирования
Многие новички в CSS не могут понять, почему вы не можете просто использовать Float: center для достижения центра влияния на блочные элементы. Если бы все было так просто! К сожалению, вы должны будете использовать
margin: 0 auto; // top, bottom — and left, right values, respectively.
margin: 0 auto; // top, bottom — and left, right values, respectively. |
для центровки Div-а абзацев и других элементов в макете.
17. Не всегда оборачивайте элементы в DIV
Когда вы начинаете, есть соблазн обернуть элемент в Div, создать для него стиль
<div class="header-text"><h2>Header Text</h2></div>
<div class="header-text"><h2>Header Text</h2></div> |
Иногда может показаться, что легче просто создать уникальные стили элементов, как в примере выше, но вы начнете наводить беспорядок в вашем CSS. Это бы прекрасно работало:
<h2>Header Text</h2>
<h2>Header Text</h2> |
Тогда вы сможете легко добавлять стиле h2, вместо родительского Div.
18. Используйте Firebug
Если вы еще не загрузили Firebug, то остановитесь и сделайте это. Серьезно. Это небольшой инструмент, который должен иметь любой веб-разработчик. Среди многих функций, которые поставляются с расширениями Firefox (отладки JavaScript, HTML проверить, найти ошибки), можно также визуально проверить, изменять и редактировать CSS в режиме реального времени. Вы можете узнать больше о том, что делает Firebug на официальном сайте Firebug.
19. Меньше Hack
Избегайте использования хаков, если это возможно. Конечно, дизайн должен выглядеть одинаково во всех браузерах, но использование только хаков делает ваши дизайны трудно поддерживаемыми в будущем. Кроме того, использование сброса файла (см. № 4) может устранить почти все неровности между браузерами.
20. Умеренно используйте абсолютное позиционирование
Абсолютное позиционирование является удобным аспектом CSS, который позволяет вам определить, где именно элемент должен быть расположен на странице в точном пикселе. Однако из-за игнорирования абсолютного позиционирования другими элементами на странице, макеты могут получить довольно “корявыми”, если есть несколько абсолютно позиционируемых бегающих элементов в макете.
21. Используйте Text-transform
Text-transform является весьма полезным свойством-CSS, что помогает «стандартизированно» форматировать текст на вашем сайте. Например, Вы желаете создать некоторые заголовки, которые прописываются только строчными буквами. Просто добавьте text-transform в заголовок стиля вот так:
text-transform: lowercase;
text-transform: lowercase; |
Теперь все буквы в заголовке будут строчными по умолчанию. text-transform позволяет вам изменить ваш текст (первая буква заглавной, все буквы заглавной или строчными буквами).
22. Не используйте отрицательные поля, чтобы скрыть h2
Часто люди используют свое изображение для текста заголовка, а затем используют display:none или отрицательный margin для выравниванияh2 на странице. Matt Cutts, глава Webspam команды Google, официально заявил, что это плохая идея, Так как Google может подумать, что это спам.
г-Cutts прямо просит избегать скрытия текста Вашего логотипа из CSS. Просто используйте Alt тега. Хотя многие утверждают, что вы все еще можете использовать CSS, чтобы скрыть тег h2 пока h2 тоже, что и текст логотипа, я предпочитаю подстраховаться на всякий случай.
23. Проверьте Ваш CSS и XHTML
Проверка Вашего CSS и XHTML поможет вам быстро найти место ошибки в коде. Если вы работаете над дизайном, и почему-то некоторые вещи не выглядят так, как нужно, попробуйте HTML и CSS валидатор и посмотрите, какие ошибки всплывают. Как правило, вы обнаружите, что вы забыли закрыть Div где-нибудь или пропустили запятую в свойстве CSS.
24. Ems против Пикселей
Всегда были упорные обсуждения, будет ли лучше использовать пиксели (px) или емы (em) при определении размеров шрифта. Пиксели — более статичный способ определения размеров шрифта, емы более масштабируемое, с различными размерами. С появлением различных типов просмотра веб-страниц (ноутбук, мобильный и т.д.), емы, все чаще становятся по умолчанию для измерения размера шрифта, поскольку они допускают наибольшую гибкость формы. Вы можете узнать больше о том, почему вы должны использовать em для размеров шрифта в этой ветке форума вдумчиво. About.com также имеет большую статью о различиях между измерениями размеров.
25. Не стоит недооценивать Список
Списки являются отличным способом представления данных в структурированном формате, в которых легко изменить стиль. Благодаря свойству дисплея, вы не должны просто использовать список в виде текстовых атрибутов. Списки также отлично подходят для создания навигационных меню и всего в этом роде.
Многие начинающие используют Div-ы, чтобы каждый элемент находился в списке, потому что они не понимают, как правильно их использовать.
Вы часто будете видеть навигационные ссылки так:
<a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a>
<a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> |
Хотя технически это будет прекрасно работать после небольшой доработки CSS, но код небрежен. Если вы хотите добавить список ссылок, используй маркированный список, глупый гусь!
26. Избегайте дополнительных Селекторов
Можно легко добавить дополнительные неосознанные селекторы в CSS, что мешает нашим стилям. Один общий пример добавления дополнительных селекторов со списками.
body #container .someclass ul li {….}
body #container .someclass ul li {….} |
В этом случае, просто .someclass li работали бы нормально.
Добавление дополнительных селекторов не принесет Армагеддона или что-нибудь в этом роде, но они сохранят ваш CSS таким простым и чистым, насколько это возможно.
27. Добавьте Поля и отступы для всего
Различные браузеры представляют элементы по-разному. IE делает определенные элементы иначе, чем Firefox. IE 6 представляет элементы иначе, чем IE 7 и IE 8. Хотя браузеры начинают более четко соблюдать стандарты W3C, они все еще не совершенны.
Одно из основных различий между версиями браузеров, какими предоставляются padding и margin. Если вы не используете сброс, вы можете определить поля и отступы для всех элементов на странице, чтобы быть на безопасной стороне. Вы можете сделать это быстро, глобально сбросить, вот так:
Теперь для всех элементов padding и margin нуль, если не определен другой стиль в таблице стилей.
Проблемой является то, что, поскольку все обнуляется с помощью этого метода, вы потенциально причините себе больше вреда, чем пользы. Вы уверены, что вы хотите обнулить поля и каждый элемент обивки? Если это так — это вполне приемлемо. Но, по крайней мере, нужно это рассмотреть.
28. Когда все готово, попробуйте объектно-ориентировать CSS
Объектно-ориентированное программирование является разделением элементов в коде, так что их проще поддерживать повторным использованием. Объектно-ориентированное CSS следует тому же принципу разделения различных аспектов стилей в более логических разделах, делая ваш CSS более модульным и многоразовым.
Если вы новичок в CSS / XHTML играх, OOCSS может быть немного сложным в начале. Но необходимо больше понять принципы для объектно-ориентированного программирования в целом.
29. Используйте несколько таблиц стилей
В зависимости от сложности конструкции и размера участка, иногда проще сделать несколько меньших CSS-файлов вместо одного гигантского.
Например, у меня могла быть избирательная программа, которая будет иметь уникальный набор стилей. Вместо того, чтобы, в том числе, делать опрос основных стилей, я мог бы просто создать poll.css стилей только для страниц, которые показывают опрос.
Однако, будьте уверены, что рассмотрение вопроса о числе запросов HTTP, предпринимаются. Многие дизайнеры предпочитают развивать несколько стилей, а затем объединить их в один файл. Это позволяет сократить количество запросов HTTP до одного. Кроме того, весь файл будет храниться в кэше на компьютере пользователя.
30. Проверьте, Закрыты ли Элементы перед началом отладки
Если вы заметили, что ваш проект выглядит немного шатким, есть вероятность, что это потому, что вы забыли закрыть тег div>. Вы можете воспользоваться XHTML валидатором, для нахождения всяких ошибок.
Вы также можете прочитать…
Перевод и редакция: Рог Виктор и Андрей Бернацкий.
Автор: Glen Stansberry.
Источник: http://net.tutsplus.com
E-mail:[email protected]
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьИзучаем CSS. Урок 1
Время чтения: 2 мин.Здравствуй, уважаемый читатель.
Это первый урок изучения CSS. Я уверен что данная технология вам очень понравится. Благодаря ей, можно раскрасить html страницу, придать ей привлекательный вид. После изучения всех уроков по CSS вы будете хорошо понимать как задается оформление на странице, как создаются шаблоны, а также начнете понимать как верстаются шаблоны из простой картинки.
Перед изучением CSS обязательно необходимо знать и понимать что такое html. Без знания html в css не о чем разговаривать. Поэтому ОБЯЗАТЕЛЬНО пройдите уроки по html:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения
Урок 5. Ссылки. Часть 1
Урок 5. Ссылки. Часть 2
Урок 6. Атрибуты
Урок 7. Таблицы
Урок 8. Выделения текста
Урок 9. Формы. Часть 1
Урок 9. Формы. Часть 2
Урок 10. Метатеги
Урок 11. Комментарии
Урок 12. Теги div и span
Теория и практика
Что же такое CSS? CSS используется для задания цветов, шрифтов, расположения блоков и других аспектов представления внешнего вида веб-страниц. Как и в уроках HTML в CSS мы изучим только основные свойства. Потому что свойств очень много. Но для редактирования шаблонов, а также создания сайтов нет необходимости держать в памяти все свойства и тем более их значения. Мы рассмотрим только основные. Начнем с подключения CSS файла в HTML страницу:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Первый урок изучения CSS</p> </body> </html> |
Как вы заметили файл со стилями подключается с помощью тега <link>, который находится между тегами <head></head>. Атрибут rel=»stylesheet» определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Атрибут href=»style.css» определяет где находится файл с таблицей стилей. Ну и атрибут type=»text/css» определяет тип данных.
Также в той же директории с html страницей создайте файл с расширением CSS. Рекомендую также для редактирования CSS использовать редактор Notepad++. Скачать его можно по ссылке Скачать Notepad++
1 2 3 | body{ background-color:#C1BAFF; } |
Создайте эти два файла. Они будут необходимы для следующих уроков. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.
Больше практикуйтесь!
Уроки по CSS, CSS3 для начинающих, примеры работы
Главная / Уроки по CSS, CSS3
Очень часто страницы сайта делают с фоном в виде картинки. Существует три основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение. Рассмотрим все эти варианты по порядку…
Любая нормальная статья состоит из множества абзацев, причем первая строка каждого из них содержит небольшой отступ. В данном небольшом уроке мы покажем, как можно сделать отступ у абзаца с помощью CSS…
Иногда при работе с сайтом или блогом стоит задача выделить первую букву абзаца, к примеру, определенным шрифтом или цветом. это можно сделать с помощью HTML, задав вручную стиль отображения первой буквы в абзаце…
Безусловно, у вебмастера есть много задач, которые он постоянно решает. Сегодня мы поговорим о смене картинки при наведении на нее курсора мыши. Допустим, что есть картинка и нужно, чтобы при наведении на нее…
В данной статье мы расскажем о том, как адаптировать изображения сайта под Retina-экран. На таких экранах часть графики большинства сайтов расплывается, качество изображений падает. Существует несколько способов…
CSS3 — это новая версия каскадных таблиц стилей CSS. В CSS3 появилась масса новых возможностей, которые в несколько раз упрощают огромное количество задач. Краткий список возможностей этой технологии смотрите…
При создании сайта, а также при наполнении его контентом необходимо знать, как работать со ссылками. В этом уроке вы узнаете какие стили ссылок используются в CSS и на примерах научимся с ними работать…
Единицы измерения в CSS необходимы при создании любого блога или сайта. К примеру, нам нужно задать размер шрифта, сделать отступы. Не зная размерности мы вряд ли сможем это сделать. В CSS применяется несколько…
В каскадных таблицах стилей CSS предусмотрено множество возможностей для того, чтобы придать шрифту определенные значения. Стиль шрифта в CSS формируется с помощью свойств и значений. Основные свойства шрифтов…
Часто стоит задача сделать выравнивание текста на сайте по вертикали или горизонтали. В CSS это реализуется с помощью соответствующих атрибутов и их значений. Что это за атрибуты и какие у них есть значения мы и рассмотрим…
В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. CSS позволяет указать свои собственные селекторы. К примеру, можно присвоить класс всем ссылкам в блоке навигации…
Технология CSS3 позволяет легко и просто создавать закругленные углы у блоков. Это делается с помощью свойства border-radius. Таким образом, закругленные углы можно делать для любых блочных элементов на странице…
Основы работы с языком CSS для новичков
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Блок . Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.
CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте покрасим все абзацы в красный цвет:
Это HTML код:
<p>
Абзац с текстом.
</p>
Это CSS код:
p {
color: red;
}
Так код будет выглядеть в браузере:
Абзац с текстом.
А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:
<p>
Абзац с текстом.
</p>
p {
color: red;
font-size: 25px;
}
Так код будет выглядеть в браузере:
Абзац с текстом.
Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.
Блок . Способы подключения CSS к HTML коду
Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему HTML коду. Это можно сделать тремя способами.
Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.
Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.
Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа.
Давайте разберемся с этими способами более подробно.
Способ 1. Отдельный CSS файл
Самый распространенный способ подключения CSS — это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel=»stylesheet» href=»путь к CSS файлу»>.
Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.
В следующем примере к нашему HTML файлу подключается CSS файл style.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>
Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>
Способ 2. CSS внутри тега style
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл </title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>
Недостаток этого способа в том, что CSS код применяется только к одной странице сайта, а не ко многим. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных, и, в общем случае, к употреблению не рекомендуется.
Правило такое: если что-то можно сделать первым способом, то использовать второй способ — дурной тон.
Способ 3. CSS внутри атрибута style
Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>
Третий способ, так же, как и второй, не сильно рекомендуется к использованию, потому что он захламляет HTML код. В настоящее время общепринято то, что языки нужно разделять по отдельным файлам — в одном файле мы пишем на языке HTML, а в другом — на CSS.
Впрочем, иногда без второго и третьего способа не обойтись.
Блок . Комментарии CSS
Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария, потом звездочка и слеш */. Смотрите пример:
p {
/*
Тут находится
комментарий CSS.
*/
color: red;
font-size: 27px;
}
Видео про CSS
Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке. Там я рассказываю про подключение CSS, а также демонстрирую работу с некоторыми свойствами (эти знания пригодятся вам в следующем уроке).
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.