Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).
Спонсор выпуска — Нетология: http://netolo.gy/cSU (Промо-код на 2000 руб.: wdm_prog).
Часть 1. Основы CSS
Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.
Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.
Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).
1.1 Использование CSS в HTML документах
CSS довольно просто использовать в HTML документах. Его можно:
-
Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег <link rel=»stylesheet» href=»путь/до/файла.css»> в теге <head>. Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.
-
Прописать стили в самом документе, используя тег <style>.
Это менее популярный способ внутренней стилизации, который применяется в особых случаях, когда: А. Базовые стили должны быть моментально интерпретированы браузером до загрузки основных CSS файлов; Б. Когда стили должны быть опционально изменены в процессе работы над веб-сайтом, например, опциональный размер шрифта и другие опции оформления при работе сайта на какой-либо CMS, поддерживающей создание параметров в админ. панели или в других случаях, когда это действительно необходимо.
Пример вывода опции из админки в тело документа:
<style> .class { background-color: <?php echo $bgc_option; ?> } </style> -
Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.
Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.
Пример инлайнового вывода фонового изображения секции из админ. панели сайта:
<section style="background-image: url(<?php echo $bgi_option; ?>)">
Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.
Это довольно топорный способ стилизации элементов на странице, который не стоит использовать в повседневной работе. Только в исключительных случаях, когда это действительно необходимо. Инлайновая стилизация (от слова inline — встроенный) работает только в том элементе, в котором она прописана. Инлайновые стили имеют наибольший приоритет. То-есть если во внешнем файле у вас указана одна картинка для фона, а в инлайновых стилях другая — сработает вторая.
1.2 CSS синтаксис
Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.
Правила объявлений настолько просты, что их можно описать в одном предложении. Сначала пишется селектор, который выбирает конкретный элемент на странице, после фигурных скобок пишутся свойства со значениями после двоеточия, а сами свойства отделяются друг от друга точкой с запятой. Это всё.
Просто, не правда ли?
Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.
Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:
//HTML: <div class="my-class"></div> //CSS: .my-class { background-color: #999; }
Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.
1.3 Каскадирование, наследование и приоритет
Понять принцип каскадирования несложно. Давайте взглянем на пример:
//HTML <div class="parent"> Далеко-далеко за словесными горами в стране. <div class="children"> Далеко-далеко за словесными горами. </div> </div> //CSS .parent .children { color: #666; } .parent { padding: 10px; color: #999; }
Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.
Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;
Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.
- Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
Пример использования !important:.my-class { background-color: #999!important; } - Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее: <section style=»background-color: #eee;»>
- Стили, заданные в теге style в самом документе имеют меньший приоритет;
- Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега <link>
- Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
//HTML <div class="my-class"> <p>Далеко-далеко за словесными горами.</p> </div> //CSS .my-class { margin: 10px; } будет иметь меньший приоритет для дочернего p, чем: .my-class p { margin: 15px; }В результате тег <p>, находящийся в теге с классом .my-class получит значение свойства margin: 15px.
Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:
.my-class.class-2 { margin: 10px; } будет иметь больший приоритет, чем: .my-class { margin: 15px; }
И т.д. по логической цепочке.
И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:
.my-class { margin: 10px; } будет иметь меньший приоритет, чем идущий после него точно такой-же селектор: .my-class { margin: 15px; }
В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.
Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.
Часть 2. CSS свойства
Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.
Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.
CSS Свойство |
Частота использования |
Описание |
| color | 960 раз | Цвет текста элемента: |
| background-color | 755 раз | Цвет фона элемента: |
| font-size | 524 раза | Размер шрифта: |
| opacity | 435 раз | Уровень прозрачности элемента:
|
| padding | 372 раза | Размер полей внутри элемента: |
| width | 356 раз | Ширина блочного элемента, не включая размеры границ и полей: |
| margin | 311 раз | Внешние отступы элемента: |
| height | 305 раз | Высота блочного элемента, не включая размеры границ и полей: |
| font-weight | 280 раз | Насыщенность шрифта: |
| text-align | 245 раз | Горизонтальное выравнивание текста: |
Часть 3. Медиа-запросы
Медиа-запросы в CSS — это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос — это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.
В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.
Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:
Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.
Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:
Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.
Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.
Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа, либо загружать тегом link внешний CSS файл с медиа-запросами после загрузки основных стилей сайта для правильного переопределения последних на разных разрешениях или на различных устройствах.
Часть 4. Рекомендации
Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.
- Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
- Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через id=»решетку» и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
- Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов. Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной — это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
- Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews, otzivy и т.д. Лучше назвать carousel-once, если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
- Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: Sass для самых маленьких — подробное руководство;
- Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css, который входит в состав CSS фреймворка Bootstrap;
- Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки — переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по-умолчанию также радует;
- Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.
А на сегодня всё, спасибо за внимание 🙂
webdesign-master.ru
Что такое CSS?
Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки — HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.
После формирования содержания сайта, на следующем этапе, мы переходим на стадию оформления его внешнего вида, дабы он был красивым и приятным. А также чтобы он хорошо смотрелся на разных разрешениях дисплеев. Как раз-таки для этого мы используем каскадные таблицы стилей CSS.
Значит, для изучения и эффективного использования CSS необходимо знать основы HTML. Без этого постижение каскадных таблиц стилей не имеет практического смысла. Если вы все еще не знакомы с основами языка гипертекста — пройдите мои уроки по HTML.
Наглядный пример
Образно говоря, создание сайтов можно сравнить с рисованием. Перед тем как мы начнем ловко управляться кисточкой и холстом, нам стоит определиться с тем, что именно будет изображено на нашей картине. Представим, что мы решили нарисовать пейзаж, на котором будет изображена птица на фоне деревьев и гор. Можно сказать, что на этом этапе мы определили само содержимое картины.
Следующим шагом мы решаем, каких цветов и размеров будут деревья, горы, птицы и также то, как они будут располагаться относительно друг друга.
Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.
Далее, при помощи CSS мы определяем цвета, размеры и расположение элементов на веб-странице, то есть занимаемся внешним оформлением сайта.
Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com. Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper. Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке «Установить».
У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.
То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.
Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.
Как работает CSS?
Все правила оформления сайта хранятся в файле с расширением css, который в свою очередь загружается на веб-страницу через тег <link>.
Во время загрузки html страницы, через тег <link> загружается и CSS файл, после чего браузер начинает его обработку и сайт отображается согласно правилам, заданным в этом файле. В нем описаны свойства отображения элементов веб-страницы.
Например, через селектор ‘p’ мы задаем тип, размер и цвета шрифтов в абзацах. Для настройки шрифтов заголовка первого уровня мы используем селектор ‘h1’.
Думаю, общий принцип работы довольно прост и понятен, посему не будем вдаваться в детали. Если какие-то моменты у вас вызывают затруднения — ничего страшного, в последующих уроках на практике все будет очень легко и понятно.
Зачем изучать CSS?
Не думаю что в наше время можно найти хоть один более или менее «приличный» сайт без использования CSS. Данная технология очень хорошо зарекомендовала себя и на сегодняшний день очень трудно представить себе верстку сайта без использования каскадных таблиц стилей.
С ее актуализацией многие теги HTML 4 уже не используются. В основном это теги, которые отвечали за оформление веб-страниц. И здесь нет ничего удивительного, ведь за это теперь уже отвечают CSS свойства. Если вы уже владеете азами HTML, следующим логическим шагом будет изучение CSS. Это тот этап, который не получится перепрыгнуть, если вы хотите научиться верстке сайтов. Тем более что это не займет много времени.
Плюсы CSS
- С использованием CSS стилей, код HTML значительно сокращается. Порой в несколько раз. Это положительно влияет на скорость загрузки сайта, что в свою очередь облегчает его продвижение в поисковых системах;
- При обновлении дизайна сайта, больше нет необходимости править каждый тег отдельно на всех веб-страницах. Достаточно изменить пару строк в таблице стилей;
- CSS открывает перед вами широкие возможности в оформлении и разметке ваших сайтов;
- Отпадает необходимость использовать устаревшие теги. Многие поисковики не любят их, и использование устаревших тегов считается моветоном;
- Используя CSS вы идете в ногу с временем.
site4business.net
HTML задаёт структуру. CSS задаёт оформление.
CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.
CSS расшифровывается как Cascading Style Sheets. Сейчас мы разберемся, как задавать стили и причём тут слово «каскад».
Допустим, у нас есть такой HTML:
<p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> Это всё — один абзац, но я добавил переводы строк чтобы текст просто удобнее было читать на этой странице. В HTML перевод строки не транслируется в реальный перевод строки в итоговой странице. Вместо этого он превратится в один пробел. Несколько переводов строки также превратятся в лишь один пробел. Ну, и несколько пробелов тоже превратятся в один пробел.
Все варианты ниже приведут к одному результату:
<p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> Для реального перевода строки можно использовать одиночный тег <br>.
Мы отвлеклись. Итак, мы хотим добавить к нашему HTML’у стиль. С помощью CSS-кода ниже мы сделаем так, что у всех элементов p текст внутри будет красным, а размер шрифта будет 20 пикселей:
p { color: red; font-size: 20px; } Вот живой пример:
See the Pen Basic CSS by Hexlet (@hexlet) on CodePen.
- Первая часть — это селектор (selector). Им мы выбираем то, к чему применять стиль.
- Набор стилей указан после селектора в фигурных (
{,}) скобках. - Набор состоит из пар свойство: значение (property: value).
Классы и id
Но что если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).
<p class="red">На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>Это подтверждают находки наконечников стрел и других артефактов в районах города, не застроенных зданиями, например, Инвуд-Хилл-парк и Риверсайд-парк. </p> <p class="red">Европейские поселения появились здесь в 1624 году.</p> Мы указали класс у двух абзацев. Теперь нам нужно обновить CSS, потому что сейчас он не учитывает класс и применяет стили ко всем абзацам. Укажем класс:
p.red { color: red; font-size: 20px; } Селектор p.red означает «все элементы типа p с классом red».
То есть если мы добавим класс red к элементу другого типа, например, <a class="red" href="https://goo.gl">Goo</a>, то такой элемент не станет красным: стиль работает строго для p.
Можно освободить стиль от такого ограничения:
.red { color: red; font-size: 20px; } Селектор .red означает «все элементы любого типа с классом red».
Допустим, визуальный стиль нашей страницы изменился, и важные куски текста теперь выделяются не красным цветом с увеличенным шрифтом, а зеленым цветом и курсивом.
.red { color: green; font-style: italic; } Отлично, но название класса теперь не имеет особого смысла. Это больше не red на самом деле. Придется поменять его на green и изменить класс в HTML у всех соответствующих элементов.
Но идея лучше — изначально использовать в названиях классов семантический смысл, а не особенность реализации. Например, если таким образом мы выделяли более важные части текста, то стоило назвать класс important:
.important { color: green; font-style: italic; } Теперь при изменении цветов или любых других деталей этого стиля нам не нужно волноваться о названии: смысл не поменяется, поменяется лишь конкретная реализация.
Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи.
Другой пример — логотип сайта где-нибудь наверху.
Для уникальных «разовых» элементов стоит использовать id:
<h1 id="article-title">История города Нью-Йорк</h1> <p class="red">На территории, где ныне расположен Нью-Йорк, задолго до появления здесь европейцев жили индейские племена Манахаттоу и Канарси.</p> <p>Это подтверждают находки наконечников стрел и других артефактов в районах города, не застроенных зданиями, например, Инвуд-Хилл-парк и Риверсайд-парк. </p> А так можно указать стиль:
h1#article-title { font-family: Georgia, serif; color: #2d0606; } Структура и идея такие же, как с классами, но вместо точки . используется решётка #. В этом стиле мы задали шрифт с засечками Georgia и тёмно-бордовый цвет в HEX-формате. Введите в гугле «color picker» чтобы поработать с интерактивной палитрой, где можно сгенерировать коды для разных цветов.
Последний пример немного избыточен, потому что по правилам (спецификации HTML) элемент с идентификатором должен быть уникальным на странице. То есть нет необходимости выбирать именно h1, достаточно сделать так:
#article-title { font-family: Georgia, serif; color: #2d0606; } Но следить за тем, чтобы идентификаторы были уникальными и не повторялись — ваша задача. Браузер никак не «пожалуется» на нарушение этого правила.
ru.hexlet.io
Свойства CSS.
Введение
Cascading Style Sheets (Каскадные таблицы стилей — CSS) — это специальный язык описания стилей, который обладает гораздо более богатым и функциональным, по сравнению с HTML, набором средств форматирования и управления стилями элементов документа.
С момента разработки CSS, было принято две его спецификации: CSS 1 и CSS 2 (в настоящее время W3C ведет работы над проектом CSS 3). Мы не будем здесь подробно рассматривать язык CSS (для этого у меня нет ни времени, ни полноты знаний), а рассмотрим лишь его основные и часто применяемые элементы.
Первоначально рассмотрим основные свойства CSS, используемые для управления стилями элементов HTML документов.
Свойства CSS
CSS позволяет манипулировать следующими свойствами элементов:
Свойства шрифта
font-family — определяет используемый элементом шрифт. Если указать URL(file), то шрифт автоматически установится на компьютер пользователя;
font-style — стиль шрифта (normal, italic);
font-variant — варианты отображения шрифта (normal, small-caps);
font-weight — жирность шрифта (normal, bold, bolder, lighter, значение от 100 до 900);
font-size — размер шрифта (размер, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger);
font — обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);
Свойства текста
word-spacing — расстояние между словами (значение, normal);
text-decoration — декорация текста (none, underline, overline, line-through, blink);
letter-spacing — расстояние между буквами (значение, normal);
vertical-align — позиционирование по отношению к другим элементам стоящим в одном ряду (baseline, sub, super, top-text, top, middle, bottom, bottom-text, %);
text-transform — изменение текста (none, Capitalize, UPPERCASE, lowercase);
text-align — положение текста (left, right, center, justify);
text-indent — отступ (значение, %);
line-height — отступ сверху (normal, значение, %);
Свойства фон и цвет
color — цвет элемента (значение);
backgroung-color — цвет фона элемента (значение);
background-image — изображение фон (none, URL);
background-repeat — варианты повторения фонового изображения (repeat, repeat-x, repeat-y, no-repeat);
background-attachment — возможность прокрутки фонового изображения (scroll, fixed);
background-position — положение фонового изображения (%ширины%высоты, top, middle, bottom, left, center, right);
background — обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);
Свойства блока
margin-top — определяет отступ сверху (значение, %, auto);
margin-right — определяет отступ справа (значение, %, auto);
margin-bottom — определяет отступ снизу (значение, %, auto);
margin-left — определяет отступ слева (значение, %, auto);
margin — обобщает все вышеперечисленные свойства;
padding-top — отступ от верхнего border’а (значение, %);
padding-right — отступ от правого border’а (значение, %);
padding-bottom — отступ от нижнего border’а (значение, %);
padding-left — отступ от левого border’а (значение, %);
padding — обобщает все вышеперечисленные свойства;
border-top-width — толщина верхнего border’а (значение, thin, medium, thick);
border-right-width — толщина правого border’а (значение, thin, medium, thick);
border-bottom-width — толщина нижнего border’а (значение, thin, medium, thick);
border-left-width — толщина левого border’а (значение, thin, medium, thick);
border-width — обобщает все вышеперечисленные свойства;
border-color — Цвет border’а. (значение);
border-style — стиль border’ов (none, dotted, dashed, solid, double, groove, ridge, inset, outset);
border-top — обобщает вышеперечисленные свойства для верхнего border’а;
border-right -обобщает вышеперечисленные свойства для правого border’а;
border-left — обобщает вышеперечисленные свойства для левого border’а;
border-bottom — обобщает вышеперечисленные свойства для нижнего border’а;
border — обобщает все вышеперечисленные свойства;
width — ширина элемента (значение, %);
height — высота элемента (значение, %);
float — расположение элемента (left, right, none);
clear — расположение других элементов вокруг данного (left, right, both, none);
Классификационные свойства
display — определяет, как будет отображаться элемент (none, block, inline, list-item);
white-space — определяет, как будут отображаться пробелы между элементами (normal, pre, nowrap);
list-style-type — определяет вид list-item маркера в списках (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none);
list-style-image — задает вид list-item маркера из картинки (none, URL);
list-style-position — определяет положение маркера в зависимости от list item элемента (inside, outside);
list-style — обобщает вышеперечисленные свойства;
Свойства элемента
position — определяет, как будет отображаться элемент по отношению к другим элементам документа (relative, absolute);
top — определяет позицию элемента TOP относительно элемента родителя (значение, %);
left — определяет позицию элемента LEFT относительно элемента родителя (значение,%);
width — определяет ширину элемента (значение, %, auto);
height — определяет высоту элемента (значение, %, auto);
overflow — режим отображения содержимого элемента, при несоответствии размера элемента, размеру содержимого (non, clip, scroll);
visibility — управление видимостью элемента в документе (hidden, » «);
html.svoymaster.com
Теория по CSS
Как я считаю, основу языка CSS должен знать каждый блоггер (по крайней мере, ниже перечислю то, что я часто использую при изменении внешнего вида блога).
Шрифт
font-size — размер шрифта (font-size: размер шрифта в пикселях (px), в процентах (%) и т. д.)
font-size: 14 px;
font-family – шрифт для элемента (font-family: имя_шрифта)
font-family: Tahoma;
font-weight – толщина шрифта (font-weight: bold или normal и т. п.)
font-weight: bold;
font-style – стиль шрифта (font-style: normal (нормальный) или italic (курсив) и т. п.)
font-style: normal;
font – объединение всех свойств для шрифта (font: стиль_шрифта (необязательно) размер семейство)
p { font: bold italic 12px verdana; }
Размер
width – ширина элемента (width: значение в пикселях, процентах и т.п.)
width: 333px;
height – высота элемента (аналогично width)
height: 333px;
max-width – максимальная ширина элемента (по аналогии)
max-width: 333px;
min-width – минимальная ширина элемента (так же как и width)
min-width: 333px;
max-height – максимальная высота элемента;
max-height: 333px;
min-height – минимальная высота;
min-height : 333px;
Свойства текста
text-align – горизонтальное выравнивание (text-align: по центру (center) или по ширине (justify) или по левому краю (left) и т. д.)
text-align: center;
vertical-align – вертикальное выравнивание;
vertical-align: justify;
line-height – высота строки (line-height: в пикселях (px), в процентах (%) и т.д.) Также можете использовать множитель: например, значение 1.5 означает полуторный интервал между строками:
line-height: 1.5;
color – цвет текста (color: цвет). Цвета могут задавать по-разному:
- используя название (red, green, white и т.д.);
- по шестнадцатеричному значению, перед кодом не забудьте ставить символ решетки – #
color: #000000;
Тут я задал цвет черного цвета. Узнать какой код соответствует цвету, Вы можете скачав программу HTMLCol. Она очень удобна, я давно ею пользуюсь и Вам советую ее скачать, так как в будущем она нам еще пригодится.
letter-spacing – увеличение / уменьшение расстояния между буквами (letter-spacing: значение (в пикселях и т.п.) | normal – нормальный интервал):
letter-spacing: 7px; 
text-transform – выбор написания слова заглавными/строчными буквами (text-transform: lowercase (все буквы будут строчными) | uppercase (все символы будут заглавными)
text-transform: uppercase; 
Фон
background – фон страницы (background: [background-attachment || background-color || background-image || background-position || background-repeat], ни одно свойство не обязательное, поэтому можно использовать лишь то, что необходимо):
background: #000 url('images/wpnew.png') repeat-y;
Выше приведен пример, где задан цвет фона, затем идет путь к фоновому изображению и по вертикали.
background-position – стартовая позиция фона страницы (background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение]):
background-position: left top;
background-color – цвет фона (background-color: цвет);
background-color: #333333;
background-attachment – фон страницы фиксированное или прокручивается вместе с “ползунком” (background-attachment: fixed | scroll)
background-attachment: scroll;
background-image – изображение фона (background-image: url(путь к файлу)):
background-image: url('images/wpnew.gif');
background-repeat – повторение фонового изображения (background-repeat: no-repeat | repeat | repeat-x | repeat-y )
background-repeat: repeat-y;
Позиции
float — определение выравнивания объекта (float: left | right)
float: left;
Выше приведен пример обтекания по правому краю.
visibility – возможность сделать любой объект видимым или невидимым (visibility: visible | hidden):
visibility: hidden
Границы
border – рамка (граница) элемента (толщина стиль цвет_рамки):
border: 1px solid black;
- solid – сплошная рамка
- dotted – точечная
- dashed – пунктирная
Остальные виды рамок, которые перечислены ниже, работают аналогичным способом.
border-top – верхняя рамка
border-right – правая рамка
border-bottom – нижняя рамка
border-left – левая рамка
Отступы
margin – величина отступа (сверху, справа, снизу и слева соответственно);
margin: 3px 3px 3px 3px;
margin-top – верхний отступ;
margin-top: 3px;
margin-right – правый отступ;
margin-bottom – нижний отступ;
margin-left – левый отступ;
Поля
padding – свойства поля (сверху, справа, снизу и слева соответственно);
padding: 3px 3px 3px 3px;
padding-top – верхнее поле
padding-top: 3px;
padding-right – правое поле
padding-bottom – нижнее поле
padding-left – левое поле
Псевдоклассы
:hover – стиль объекта при наведении мышкой (элемент:hover { … })
a:hover { background: #333333; color: #333333;}
:visited – стиль посещенной ссылки (A:visited { … })
a:visited {color: #333333;}
Более подробно изучить язык CSS Вы можете на htmlbook.ru
wpnew.ru
Способы подключения CSS
1. Непосредственно в самом элементе документа по средствам атрибута style, например, если перевести вышеуказанный пример в сам документ и описать его в самом элементе, то это будет выглядеть так:
<p style = "color: red;">Пример</p>
Данный способ не удобен тем, что опять же если у Вас будет много документов, то Вам придется менять во всех этих документах, причем в каждом элементе.
2. Немного по удобней способ — это применение CSS, когда таблица стилей описана в самом документе. В разделе head применяется элемент style, в котором и описывается сама таблица стилей. Например, снова задействуем вышеуказанный пример, но уже с использованием этого способа:
<head> <style type="text/css"> p { color: red; } </style> </head> <body> <p >Пример </p> </body>
Получится то же самое, что и было выше. Этот способ иногда используют, но он все равно не идеален.
3. В третьем способе используется импорт CSS документа, я редко встречал применение этого способа, может им и никто и не пользуется, но знать о нем нужно. Здесь таблица стилей уже описана в отдельном документе.
<head> <style type="text/css" media="all"> @import url(css-file.css); </style> </head> <body> <p>Пример</p> </body>
где,
css-file.css – это файл CSS, где и описана таблица стилей, если он лежит в другой папке, то нужно писать путь к этому файлу.
4. Самый распространенный способ применений каскадной таблицы стилей — это подключение CSS файла к Вашему документу. Этим способом пользуются практически все, так как он самый удобный. Подключается CSS по средствам тега link в элементе head.
<head> <link rel="stylesheet" type="text/css" href="/css-file.css"> </head> <body> <p>Пример</p> </body>
где,
css-file.css – это файл, в котором описана таблица стилей, снова если файл лежит в папке отличной от расположения самого документа, то необходимо писать путь к нему.
Виды селекторов в CSS
Так с подключением CSS разобрались теперь перейдем к селекторам, т.е. способам поиска этих самых элементов в Вашем документе, другими словами, если Вам не нужно, что все абзацы были красным цветом как в вышеуказанном примере, а например, у одних абзацев он был черным, а у других он был красный. На самом деле их девять видов, но мы пока рассмотрим самые популярные.
С селекторами элементов (тегов) мы уже познакомились вышеперечисленные примеры, применялись ко всем тегам:
p { color: red; }
p – это и есть селектор элемента, здесь могут быть практически любые теги HTML документа, такие как body, div, table, tr, td, h1 и много, много других.
На мой взгляд, самые популярные виды селекторов это с использованием классов и идентификаторов. Другими словами, при разметке своего документа Вы помечаете элементы документа с помощью идентификаторов (которые являются уникальными во всем документе) или приводите их к одному классу (он может повторяться в документе). Чтобы было понятней, приведем пример, в котором у нас будет два абзаца, один из которых будет красным цветом, а другой черным.
Текст CSS будет таким:
#idred { color: red; } .black { color: black; }
Текст документа будет таким:
<p id = "idred">Пример красного абзаца </p> <p class = "black">Пример черного абзаца </p>
Для практики подключите сами любым из способов каскадную таблицу стилей к Вашему документу.
Наверное, Вы уже поняли, что идентификаторы в CSS обозначаются с помощью символа # (#idred), а классы с помощью точки и названия класса (.black).
В HTML документе они обозначаются с помощью соответствующих тегов: id для идентификатора и class для классов.
Также есть селекторы атрибутов, например, Вы хотите что бы конкретная ссылка отображалась в том виде в котором Вам надо, при этом все остальные ссылки были неизменны, то тогда можно использовать селектор атрибутов.
Текст CSS:
a[href="/ваша нужная ссылка"]{ font-size: 20px;
Текст HTML документа:
<p><a href = "ваша нужная ссылка">ссылка</a></p> <p><a href = "обычная ссылка">ссылка</a></p>
Как Вы видите у нужной нам ссылки, шрифт стал 20 пикселей.
Теперь рассмотрим тоже популярный вид селекторов это — селекторы потомков. Другими словами, Вы указываете, что этот элемент, идентификатор или класс имеет вот таких потомков, т.е. он находится в том или ином элементе который, например, имеет тот или иной id или class. Пример:
Текст CSS:
p { color: red; } div p { color: green; }
Текст HTML документа:
<p>Пример красного абзаца </p> <div><p>Пример абзаца, который имеет потомка элемент div</p></div>
Вы здесь видите что абзац, который находится в элементе div стал зеленым, а все абзацы, которые не находятся в элементе div, станут красным.
Нужно отметить, что выделять потомков нужно с права налево, например, у нас сначала идет потомок (div), потом идет наш нужный элемент (p).
Как Вы видите, сегодня мы использовали всего два свойства: это font-size и color. На самом деле их очень много поэтому на сегодня я думаю достаточно, в следующих уроках продолжим рассмотрение других свойств и много чего еще! А пока рекомендую почитать книгу по CSS для начинающих, где более подробно описаны все возможности CSS и как их применять на практике.
Надеюсь, Вы хоть немного стали понимать суть этих самых каскадных таблиц стилей CSS. В дальнейшем будут уроки посложней! Чтобы Вы убедились, что CSS это очень прикольная вещь, вот пример кулинарного сайта, где главное меню реализовано только с использованием HTML и CSS, без всяких там java скриптов. Надеюсь, мы в дальнейшем тоже научимся так делать.
info-comp.ru
Синтаксис CSS.
Синтаксис каскадных таблиц стилей состоит из трех основных частей: селектора, свойства и значения, как это показано на примере ниже:
селектор {свойство: значение}
- Селектор – определяемый элемент
- Свойство – изменяемый атрибут
- Значение – присваиваемое атрибуту значение
Далее предлагаю вам разобраться с основными особенностями синтаксиса в CSS:
- Свойство элемента и значение, присваиваемое ему должны располагаться внутри фигурных скобок и разделяться двоеточием:
p{font–size: 75%}
- Значения, состоящие более, чем из одного слова должны быть помещены в кавычки:
h1 {font – family: «lucida calligraphy»}
- Если для одного селектора определяется одновременно несколько свойств, то они должны быть разделены точкой с запятой. После последнего свойства не обязательно ставить точку с запятой, хотя их присутствие не вызовет никакой ошибки:
table { font – family: arial, «sans serif»; border – style: dotted}
- Если несколько одинаковых свойств должны быть применены одновременно к нескольким селекторам, то селекторы перечисляются через запятую:
p,table,li { font – family: «sans serif»; }
Сегодня мы разобрались с CSS основами, а именно поговорили о синтаксисе CSS. Синтаксис этого языка крайне прост и понятен, даже если вы никогда раньше не занимались программированием.
В следующем уроке мы начнем заниматься по-настоящему серьезными вещами, а именно форматированием текстов средствами CSS. В отличие от HTML, CSS имеет очень серьезный арсенал инструментов форматирования текста, поэтому советую вам серьезно отнестись к следующему уроку.
www.eltisbook.ru
Базовые понятия и основы CSS
Каскадные таблицы стилей или просто CSS продолжают активно использоваться для визуального оформления HTML страничек, позволяя преображать и придавать уникальность веб-сайтам. CSS позволяет изменять цвета и шрифты, менять фон сайта, создавать функциональное меню, задавать расположение различных блоков и многое другое, речь о которых пойдет в данной статье.
Сам код CSS пишется на весьма формальном языке с использованием небольшого количества правил оформления и с понятными словами на английском языке, как width (ширина), background (фон), red (красный) и многими другими.
Процесс реализации кода для создания необходимого визуального отображения, часто задаваемого заранее по дизайнерскому макету, называется верстка. Человек, который реализует заранее заданные макеты из графических редакторов в реальные сайты и другие веб-продукты – это верстальщик.
Во многом именно от грамотного оформления веб-страницы будет зависеть то, насколько приятно и удобно будет пользоваться сайтом, то есть речь идет про такой важный параметр, как юзабилити. Данное направление постоянно развивается и добавляются новые функциональные возможности, так что полноценно познакомиться с функционалом CSS можно только при практическом применении.
Начинаем погружение
Основной синтаксис состоит из селекторов и свойств. Селектор представляет собой формальное описание элемента, для которого нам нужно задать внешний вид, что мы делаем через свойства. Могут быть селекторы блоков (элементов страницы), абзацев, шрифтов, таблиц и всего, что обычно можно встретить на веб-страницах.
С помощью селекторов и их свойств мы указываем непосредственно браузеру, какие элементы и как нам нужно отобразить. Допустим, у нас есть HTML, и мы хотим сделать его оформление. Чтобы начать, следует подключить каскадные таблицы стилей к нашему документу, которые по сути являются обычным текстовым документом с перечнем правил оформления и комментариями к ним.
Способы подключения стилей к документу
Прежде всего, код CSS можно вписать в сам HTML документ, для чего его помещают в тегвнутри тегов. Однако хорошей практикой считается максимальное структурирование кода, чтобы HTML был отдельно, CSS в другом файле и при необходимости код на каком-то другом языке программирования тоже отделен. Каждый элемент хранится в отдельном документе и подключается специальным образом.
В таком случае ссылка на каскадные таблицы стилей помещается в HTML коде в тегеи, для чего используется тег . Пример: . В этом примере мы указываем, что это таблица стилей – stylesheet. И даем ссылку на название файла с ними – style.css (файл должен при таком указании храниться в одной папке с HTML страницей).
Синтаксические правила
Все представление кода CSS состоит из повторения блоков селекторов и указания к ним свойств. Выглядит это таким образом:
селектор {
свойство1: значение;
свойство2: значение;
}
Пример кода, в котором мы подключаем каскадную таблицу стилей и реализуем простой домик. Сначала создаем html документ под именем index.html в текстовом редакторе Notepad ++
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <title>Домик</title> </head> <body> <div class="scene"> <div class="roof"></div> <div class="house"> <div class="door"></div> </div> </div> </body> </html>
Каждый из структурных элементов домика обозначаются блоками (тег «div») – это удобные функциональные компоненты в CSS, дающие большую гибкость в управлении визуальным отображением на веб-странице. Каждому из них даем название (roof – рисуем крышу, house – сам домик, door – двери). В программе Notepad ++ создаем новый файл под именем style.css.Теперь можно воплотить наш домик в жизнь:
.roof { width: 0; margin: 0 auto; margin-top: -50px; border: 150px solid white; border-bottom-color: red; } .house { width: 200px; height: 200px; margin: 0 auto; background-color: blue; overflow: hidden; } .door { height: 100px; width: 50px; margin-top: 100px; margin-left: 50px; background-color: red; }Открываем файл index.html в любом браузере, например, Яндекс-браузер.
Несмотря на всю простоту, CSS дает огромные возможности для воплощения любого веб-дизайна. Чтобы лучше познакомиться на практике со всеми видами селекторов и их свойствами, стоит попробовать сверстать хотя-бы простые веб-страницы и постепенно усложнять задачу. Только используя регулярно на практике новоприобретенные знания, можно запомнить и научиться их применять на должном уровне.
Популярный фреймверк для верстки Bootstrap
Фреймворк – это набор программного обеспечения или среда разработки, существенно облегчающая процесс написания кода. Для CSS активно используется во всем мире Twitter Bootstrap – фреймворк с широкими возможностями для верстки и не только.
Он позволяет создавать такие странички и динамическое отображение контента на сайтах, которые будут отлично отображаться на любых устройствах (это важнейшая задача для верстальщика, чтобы сайт хорошо и корректно смотрелся, как на компьютере, так и на мобильном телефоне). Уже есть готовые решения для различных кнопок, форм, блоков и прочих компонентов. Также здесь есть множество «фич» – дополнений, позволяющих создавать действительно современные и потрясающие сайты.
amlesson.ru