Все кто увлекается WEB технологиями, слышали про такую технологию как CSS . И они, наверное, хотят знать основы CSS, для того чтобы уметь изменять стили своих сайтов или страничек, или просто уметь читать и понимать CSS файлы. Сегодня мы с Вами и займемся рассмотрением основ CSS.

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

CSS (Cascading Style Sheets ) — каскадные таблицы стилей. В HTML существуют свои инструменты визуального оформления, но они во многом уступают возможностям CSS, да и если у Вас много страничек, то представьте себе, Вам вдруг захотелось поменять цвет всех заголовков, Вам придется вносить изменения во все HTML файлы, а на CSS это делается в одной строке. Я думаю, что хватит только этого аргумента, для того чтобы начать изучать CSS.

CSS кстати используется не только для визуального оформления страниц размеченных на HTML, но и тех страниц написанных с помощью языка разметки XHTML, также отлично подходит для оформления XML документов.

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

Ну что переходим к практике, и начнем мы с Вами с простого синтаксиса. Выглядит он примерно так:

Элемент оформления{ свойство: значение; }

Элемент оформления принято называть селектор, но для простоты я указал его именно так.

Чтобы был понятен синтаксис, приведем простейший пример:

P { color: red; }

• p – это тег абзаца;
• color – это свойство, т.е. в нашем случае это цвет;
• red – это значение, в нашем случае это красный.

И в итоге у Вас текст во всех абзацах станет красным цветом.

С синтаксисом немного разобрались, перейдем к тому моменту, где это все писать, т.е. подключать CSS к нашему HTML документу.

Способы подключения CSS

1. Непосредственно в самом элементе документа по средствам атрибута style, например, если перевести вышеуказанный пример в сам документ и описать его в самом элементе, то это будет выглядеть так:

Пример

Данный способ не удобен тем, что опять же если у Вас будет много документов, то Вам придется менять во всех этих документах, причем в каждом элементе.

2. Немного по удобней способ — это применение CSS, когда таблица стилей описана в самом документе. В разделе head применяется элемент style, в котором и описывается сама таблица стилей. Например, снова задействуем вышеуказанный пример, но уже с использованием этого способа:

Пример

Получится то же самое, что и было выше. Этот способ иногда используют, но он все равно не идеален.

3. В третьем способе используется импорт CSS документа, я редко встречал применение этого способа, может им и никто и не пользуется, но знать о нем нужно. Здесь таблица стилей уже описана в отдельном документе.

Пример

css-file.css – это файл CSS, где и описана таблица стилей, если он лежит в другой папке, то нужно писать путь к этому файлу.

4. Самый распространенный способ применений каскадной таблицы стилей — это подключение CSS файла к Вашему документу. Этим способом пользуются практически все, так как он самый удобный. Подключается CSS по средствам тега link в элементе head.

Пример

css-file.css – это файл, в котором описана таблица стилей, снова если файл лежит в папке отличной от расположения самого документа, то необходимо писать путь к нему.

Виды селекторов в CSS

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

С селекторами элементов (тегов ) мы уже познакомились вышеперечисленные примеры, применялись ко всем тегам:

P { color: red; }

p – это и есть селектор элемента, здесь могут быть практически любые теги HTML документа, такие как body, div, table, tr, td, h1 и много, много других.

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

Текст CSS будет таким:

#idred { color: red; } .black { color: black; }

Текст документа будет таким:

Пример красного абзаца

Пример черного абзаца

Для практики подключите сами любым из способов каскадную таблицу стилей к Вашему документу.

Наверное, Вы уже поняли, что идентификаторы в CSS обозначаются с помощью символа # (#idred), а классы с помощью точки и названия класса (.black).

В HTML документе они обозначаются с помощью соответствующих тегов: id для идентификатора и class для классов.

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

Текст CSS:

Текст HTML документа:

Теперь рассмотрим тоже популярный вид селекторов это — селекторы потомков. Другими словами, Вы указываете, что этот элемент, идентификатор или класс имеет вот таких потомков, т.е. он находится в том или ином элементе который, например, имеет тот или иной id или class. Пример:

Текст CSS:

P { color: red; } div p { color: green; }

Текст HTML документа:

Пример красного абзаца

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

Нужно отметить, что выделять потомков нужно с права налево, например, у нас сначала идет потомок (div), потом идет наш нужный элемент (p).

Как Вы видите, сегодня мы использовали всего два свойства: это font-size и color. На самом деле их очень много поэтому на сегодня я думаю достаточно, в следующих уроках продолжим рассмотрение других свойств и много чего еще! А пока рекомендую почитать книгу по CSS для начинающих , где более подробно описаны все возможности CSS и как их применять на практике.

Надеюсь, Вы хоть немного стали понимать суть этих самых каскадных таблиц стилей CSS . В дальнейшем будут уроки посложней! Чтобы Вы убедились, что CSS это очень прикольная вещь, вот пример кулинарного сайта , где главное меню реализовано только с использованием HTML и CSS, без всяких там java скриптов. Надеюсь, мы в дальнейшем тоже научимся так делать.

CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.

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

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

Объявление стиля состоит из двух частей: селектора и объявления . В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

Хотя приведенный пример пытается влиять только на пару свойств, необходимых для рендеринга HTML-документа, он сам по себе квалифицируется как таблица стилей. В сочетании с другими таблицами стилей (одна фундаментальная особенность CSS заключается в том, что таблицы стилей объединяются), правило будет определять окончательное представление документа.

Виды каскадных таблиц стилей и их специфика

1. Виды таблиц стилей

1.1. Внешняя таблица стилей

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

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

1.2. Внутренние стили

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

...

1.3. Встроенные стили

Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

Обратите внимание на этот текст.

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

1.4. Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

Правило @import также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Виды селекторов

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

2.1. Универсальный селектор

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

2.3. Селектор класса

Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег

и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.

Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами.

Инструкция пользования персональным компьютером

2.4. Селектор идентификатора

Селектор идентификатора позволяет форматировать один конкретный элемент. Значение id должно быть уникальным, на одной странице может встречаться только один раз и должно содержать хотя бы один символ. Значение не должно содержать пробелов.

Нет никаких других ограничений на то, какую форму может принимать id , в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, начинаться с подчеркивания, состоять только из знаков препинания и т. д.

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

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

2.6. Дочерний селектор

Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

2.7. Сестринский селектор

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

h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

, не затрагивая остальные абзацы;

h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

2.8. Селектор атрибута

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

2.9. Селектор псевдокласса

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

:hover — любой элемент, по которому проводят курсором мыши;

:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

:active — элемент, который был активизирован пользователем;

:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

:invalid — поля формы, содержимое которых не соответствует указанному типу данных;

:enabled — все активные поля форм;

:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

:in-range — поля формы, значения которых находятся в заданном диапазоне;

:out-of-range — поля формы, значения которых не входят в установленный диапазон;

:lang() — элементы с текстом на указанном языке;

:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

:target — элемент с символом # , на который ссылаются в документе;

:checked — выделенные (выбранные пользователем) элементы формы.

2.10. Селектор структурных псевдоклассов

Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

:nth-child(odd) — нечётные дочерние элементы;

:nth-child(even) — чётные дочерние элементы;

:nth-child(3n) — каждый третий элемент среди дочерних;

:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

:nth-child(n+2) — выбирает все элементы, начиная со второго;

:nth-child(3) — выбирает третий дочерний элемент;

:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

:first-child — позволяет оформить только самый первый дочерний элемент тега;

:last-child — позволяет форматировать последний дочерний элемент тега;

:only-child — выбирает элемент, являющийся единственным дочерним элементом;

:empty — выбирает элементы, у которых нет дочерних элементов;

:root — выбирает элемент, являющийся корневым в документе — элемент html .

2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

:first-of-type — выбирает первый дочерний элемент данного типа;

:last-of-type — выбирает последний элемент данного типа;

:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

2.12. Селектор псевдоэлемента

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

:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

:before — вставляет генерируемое содержимое перед элементом;

:after — добавляет генерируемое содержимое после элемента.

3. Комбинация селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

4. Группировка селекторов

Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:

H1, h2, p, span { color: tomato; background: white; }

5. Наследование и каскад

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

5.1. Наследование

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

Принудительное наследование

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

Как задаются и работают CSS-стили

1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

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

4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

5.2. Каскад

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

Правило!important

Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Специфичность

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

для id добавляется 0, 1, 0, 0 ;
для class добавляется 0, 0, 1, 0 ;
для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный селектор не имеет специфичности.

H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.

Порядок подключённых таблиц

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

Здравствуйте, дорогие читатели блога! Что-то давно я ничего не писал в рубрику о создании сайта. Так вот, в этой статье я расскажу о том, что же такое каскадные таблицы стилей и зачем они вообще нужны . Для начала советую прочесть предыдущие материалы из этой рубрики — и .

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

Целью создания CSS было разделение описания логической структуры документа (сейчас производится с помощью HTML) от описания его внешнего вида (сейчас производится с помощью CSS). Дело в том, что с развитием компьютерных технологий и интернета, люди старались сделать сайты более функциональными и яркими. Но все параметры внешнего вида представлялись в html тегах прямо в веб-документе.

Например, нам требуется изменить цвет букв в какой-либо части документа. Для этого можно воспользоваться тегом font и атрибутом color. Вот так будет выглядеть текст , которую требуется перекрасить, в html коде:

текст

Вроде и коротко, и не загрязняет код. Но если нам требуется изменить текст как-нибудь еще. Например, изменить и увеличить шрифт. Допустим вот так: пример . Вот так этот пример будет выглядеть в коде:

пример

Код становится больше. А если таких текстов на странице много? И у них есть еще какие-нибудь свойства? Если писать текст каждый раз посредством html тегов, то страница будет выглядеть как минимум не красиво. Вот для этих целей и создали язык CSS .

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

блоков).

Правила написания css стилей

А начнем мы с того, что создадим у себя на компьютере файл с расширением.html (советую кинуть его в отдельную папку). Добавим в него какой-нибудь текст. Добавим , заголовок и абзацы. Вот что у нас получилось:

Простой невзрачный текст. В коде получается следующее:

Стандартная страничка в интернете. Но надо ее как-нибудь украсить. Можно, конечно, добавить кучу тегов, но код будет выглядеть довольно мрачно. Мы поступим иначе. В той же папке создайте файл с расширением css, пускай это будет style.css. А теперь немного отвлечемся и я расскажу вам о правилах написания данного файла.

Как уже было сказано ранее, css — язык стилевой разметки, следовательно — у него есть свой синтаксис и особенности. Вообще, весь язык можно разделить на 2 пункта:

1. Правила — как должен выглядеть элемент в браузере (в фигурных скобках).
2. Селекторы — какой элемент должен так выглядеть (перед фигурной скобкой).

Вот небольшой поясняющий рисунок:

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

Теперь немного о правилах написания правил (тавтология получается). Слово перед двоеточием называется свойством, а после — значением свойства.

• Первое правило — значение всегда отделяется от свойства двоеточием.
• Второе правило — правила всегда разделяются точкой с запятой

Как видите, особо сложного здесь ничего нет, главное не запутаться. Кстати, пробелы роли не играют и то, что написано на скрине выше можно записать в одну строчку.

Как применить css свойства - подключение к html документу

А сейчас разберемся, как можно применить данные свойства к нашему документу. Существует три способа:

1. Прописывание свойств прямо в теге — используется атрибут style, который применим к любому html тегу. В атрибуте и прописываем все стили, которые хотим использовать.
2. Прописывание стилей в head — в шапке сайта (теги head) прописываем все стили, которые будем использовать, с помощью тега style.
3. Подключение отдельного файла — сначала создаем файл со всеми стилями, затем подключаем его к документу с помощью специальных тегов в head.

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

Классическое оригами

Классическое оригами

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

Второй способ подразумевает нахождение всех стилей в шапке сайта. Для этого нам потребуется тег style. Открываем наш файл и вносим вот такие изменения:

Основные правила тега style — находится между открывающим и закрывающим тегом head, внутри него прописываются все необходимые свойства. Также, для того чтобы браузер не принял стили за html код, необходимо прописать атрибут type со значением text/css. А вот как теперь выглядит страница:

Теперь во всех абзацах (тег

) текст стал зеленым, используется шрифт семейства cursive, а заголовок стал красным. Тег style мы добавили только в шапку сайта, основная часть страницы осталась без изменений . Очень удобный способ, но не лучший.

Самым популярным и оптимальным вариантом будет подключение отдельного стилевого файла. Сделать это можно двумя способами:

Большинство веб-мастеров используют первый вариант подключения файла. Преимущество подключаемого файла стилей, по сравнению с остальными, очевидно — ускорение загрузки сайта и уменьшение нагрузки на хостинг . Ведь браузеру будет достаточно лишь раз загрузить файл стилей, вместо постоянного чтения атрибута style. Да и код менее захламлен получается.

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

На этом пока остановимся — базовые знания получили, Советую файлы не удалять, мы их еще будем использовать в уроках и не один раз.!

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

При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это заметно сократит время — когда знаешь место нахождения таблицы стилей, всегда можно оперативно найти конкретный стиль и отредактировать. Файл стилей имеет расширение .css , название у него, как правило, style.css .

Подключение CSS файла

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

1. Связывание. Этот способ используется когда необходимо задать стили для всех страниц сайта в одном файле. Данный способ часто используется при создании сайта. Чтобы подключить таблицу стилей используется команда , которую необходимо разместить в теле тега .

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

2. Встраивание в теги документа. При этом способе стиль для конкретного элемента страницы задается непосредственно в HTML коде. Например:

Здесь мы прописали стили соответственно для контейнеров

и . Данные стили будут применяться исключительно для них.

Приведем пример таблицы стилей — создадим файл style.css и пропишем стили:

body { font-family: Arial, Verdana, Sans-serif; /* Семейство шрифтов */ font-size: 12pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #000000; /* Цвет основного текста */ } h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ }

Здесь мы задали стили для тела страницы и для заголовка

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

Теперь подключим нашу таблицу стилей к сайту:

Привет, Мир!

Это моя первая страница со стилями CSS

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

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

Содержание статьи

С помощью этого языка оформляются все html-страницы. Без него они выглядели бы страшно и убого. Так что css — это photoshop веб-разработчика, если можно так сказать.

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

Синтаксис

У css один из самых простых синтаксисов, разобраться с ним можно буквально за пару часов. Вся таблица стилей (то есть css-файл) состоит из селекторов и описания свойств и значений для них. Вот пример:

Селектор{ color: red; }

Чтобы вам было понятнее, смотрите на этот рисунок:

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

В фигурных скобках записывается все стили для элемента. Стили — это свойства и их значения. Все стили для одного конкретного селектора обычно называют стилевым правилом. Запись внутри фигурных скобок выглядит так:

Я подчеркнул два обязательных знака, которые присутствуют в синтаксисе. Это двоеточие — оно ставится между названием свойства и его значением, а также точка с запятой, которые обязательно нужно ставить после значения каждого свойства.

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

Подключение и пример использования

Чтобы css работал и с его помощью можно было стилизовать html-элементы, необходимо подключить этот файл к html-документу. Это делается с помощью тега link. Подробно останавливаться на этом я не буду, потому что у меня есть для вас . Ознакомьтесь с ней, если вы не знаете, как подключить css.

Ну и давайте рассмотрим пример взаимодействия двух языков. В html-документе создадим цитату. Она создается с помощью тегов blockquote . Отлично. Давайте посмотрим, как она будет выглядит без стилевого оформления:


Как никак она не выглядит, обыкновенный текст. И тут-то на помощь и приходят стили, которые помогают оформить любые элементы на веб-странице. Для начала я, естественно, подключу таблицу стилей к html-файлу. Пока в ней ничего нет. Чтобы обратиться к цитате можно использовать глобальный селектор blockquote . В таком случае стили будут применены ко всем цитатам. Пропишем такие правила для цитат:

Blockquote{ width: 300px; background: #333; border-left: 5px solid #ff3300; padding: 10px; color: #fff; font-style: italic; }

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

В общем, вот она работа css на примере. Я думаю, вы поняли цель этой технологии? Можете также попробовать открыть любой популярный сайт в браузерах Google Chrome или Яндекс.Браузер, после чего нажмите F12. Откроется так называемый отладчик. Попробуйте найти в исходном коде сайта подключение стилей (находится в теге head, стили подключаются с помощью). Попробуйте изменить путь к таблицам стилей, чтобы он был неправильным и посмотрите на сайт. Наверняка его внешний вид изменится в отрицательную сторону.

Все дело в том, что html не создан и не подходит для оформления страниц. Он предназначен именно для создание элементов, разметки, но никак не для внешнего вида. Если вы веб-дизайнер, то наверняка поймете сейчас мой пример. Очень часто перед рисованием макета сайта, дизайнер делает прототип (его еще называют mockup). Потом на основании этого прототипа легче сделать красивый макет, потому что четко видно структуру будущего сайта.

Также и с веб-технологиями, а именно с html и css. Они неразрывно связаны друг с другом.

История

Сегодня css, как и html активно развиваются. Еще в 2008—2009 годах многих свойств, которые есть сегодня, не существовало. Тогда веб-разработчики использовали CSS 2.1 (версия языка). Сегодня же активно используется CSS 3. И хотя до сих пор новые свойства поддерживаются не всеми браузерами, их все равно уже используют.

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

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

В общем, если отвечать на вопрос: «Что такое css и как его использовать ?» прямо, то это один из языков, которые используются при создании сайта. А использовать его нужно при оформлении элементов, создания различных эффектов и т.д.

Что ж, кажется я сказал все, что хотел, а если что-то забыл упомянуть, обязательно допишу в будущем. Ну и, собственно, главный вопрос: «Легко ли учиться css и за сколько можно выучить ?». Могу с уверенностью заявить, что легко, а если найти хорошие видеоуроки, то можно изучить буквально за месяц. Естественно, у вас должно быть большое желание, должны гореть глаза, без этого процесс будет идти медленнее.

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