Css это – 12 классных функций CSS3, которые вы наконец-то можете использовать

Что такое HTML и CSS и как это выучить?

Привет. Пора бы что-то по теме написать. Из заголовка понятно, о чем этот пост, но я бы хотел внести немного ясности.

Я не буду из своего блога делать учебник по основам языков, не буду рассказывать о том, что такое класс, селектор, кавычки и точечки. В Сети уже столько материала пережевано, что мне просто нет смысла это повторять. Вести свой блог по пути переписывания статей других сайтов своими словами (как это делает бОльшая часть «блоггеров») я не хочу.

А вот делиться интересными фишками, хитростями да и вообще полезными приемами, которые использую в работе, с удовольствием буду!

Ближе к делу

Возьму определения с Википедии:

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»;) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

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

Вроде бы и так понятно, что такое HTML и CSS, но все равно скажу своими словами.

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

CSS — облицовочный материал, который делает всю красоту.

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

Немного моей истории

То, что я сейчас напишу уже есть на странице Об авторе, но я все равно еще раз напишу и дополню:)

Первый свой сайт я создал в 2008 году. Работает он на системе Ucoz. Не помню точно как, но один мой одноклассник рассказал мне о Ucoz и о том, как легко там можно сделать свой сайт. Мне стало интересно. Не знаю почему, но было типа «прикольно» сделать свой сайт. Вот тогда я и узнал про HTML. Но именно узнал, а не научился:) Кажется, это был 9-й класс школы. Применяя базовые знания по фотошопу и Ucoz, я все же смог сделать сайт.

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

Второе в жизни упоминание о тэгах было на первом курсе по информатике. Да, по этому предмету было много абсурдных заданий и лучше бы мы изучали Автокад вместо MS Access (градостроители все же), но за задание сделать сайт из пары страниц HTML я все же благодарен. Поначалу очень плевался на такое, но мне понравилось, когда сел делать.

Взял конспект лекций и начал писать структуру страницы по тегам, что переписал с доски, но…Понял, что ничего того, что я придумал у меня не получается и начал читать в интернете подробнее о html (я тогда еще и не подозревал о css). В итоге моя работа была лучшей в группе, но увы этого почти никто не оценил, так как ставили оценки за наличие работы, а вот если бы был рейтинг по работам…

Ну да ладно, я все равно был доволен собой. Передо мной стала задача разместить элементы на странице так, как я хочу, а не так, как получалось по конспекту лекций. Вся проблема в том, что в HTML нету такой функциональности, благодаря которой можно разместить элемент с отступом в 20 пикселей от правого края окна браузера. И тогда я подумал….а что если я необходимый элемент помещу в таблицу, которую помещу в ячейку главной таблицы, грани которой не видно, но которая занимает всю страницу и задавая размеры ячейкам, я смогу поместить тот элемент с отступом в 20px от правого края??…Попробовал — получилось!

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

Что для этого нужно?

В октябре 2011 года я стал серьезно изучать все это дело, что плавно перетекло в основную деятельность моей жизни. Я хотел делать сайты. Я знал, что для этого нужен HTML. Потом наткнулся на упоминания о CSS. Решил чуток подробнее понять, что это и…это было очень туго! Те сайты, на которые я попадал, давали вроде бы и базовые знания, но не было того момента, который бы подвел полного чайника от незнания к базовым моментам. А потом я случайно наткнулся на бесплатные видео уроки от Евгения Попова. Первым делом меня смутила необходимость вводить свою почту и имя, чтобы получить бесплатный видеокурс. Ну блин, еще заспамят меня, а то и почту взломают, не хочу! Но все же решился)

Но…на мой почтовый ящик так ничего и не пришло (должна была прийти ссылка на скачивание бесплатных курсов по HTML и CSS). Поэтому я пошел на ex.ua и скачал их там:) Рассуждая геройски, подумал, что курс по HTML мне не нужен, я вроде немного знаю его, а вот CSS посмотрю. Посмотрел первый урок — понял, что нужно смотреть и учить HTML сначала.

Что вам сказать, ребята…это лучше, чем все сайты с уроками вместе взятые. Везде автор пишет максимально просто, так как он это видит, но все равно этого не достаточно для чайника. Просто автору даже в голову не может прийти, что «этого» можно не знать. А Е.Попов не только объясняет как для маленьких и тупых, но еще и показывает каждый свой шаг и это именно то, что нужно вам, если хотите научится HTML/CSS!

Так что вот вам ссылки (раз и два) на бесплатные видеокурсы, берите, качайте, не пожалеете.

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

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

После изучения тех курсов я создал свой первый настоящий сайт (в плане, что на личном хостинге и т.д.). Да, я еще не подозревал о том, что такое PHP и MySQL, и WordPress, и т.д…

НО это уже совсем другая история…

Есть много в интернете полезных сайтов с уроками, но когда нужно действительно хорошее решение вашего вопроса, то лучше всего искать на habrahabr.ru.

Вначале я часто пользовался шпаргалками: раз и два.

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

На этом все.

Свойства по группам | справочник CSS

СвойствоОписание
Chrome

Firefox

Opera

Safari

IExplorer

Edge
backgroundПозволяет установить все свойства фона в одном объявлении (универсальное свойство).1.01.03.51.04.012.0
background-attachmentУстанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы).1.01.03.51.04.012.0
background-blend-modeОпределяет режим смешивания слоя каждого фонового цвета ( и / или изображения).35.030.022.07.1*НетНет
background-colorОпределяет цвет фона элемента.1.01.03.51.04.012.0
background-imageЗадает одно или несколько фоновых изображений для элемента.1.01.03.51.04.012.0
background-positionЗадает положение (позицию) фонового изображения.1.01.03.51.04.012.0
background-repeatУстанавливает, как будет повторяться фоновое изображение.1.01.03.51.04.012.0
background-clip Определяет область элемента для которой будет задан задний фон.4.04.010.53.09.012.0
background-origin Определяет как позиционируется фоновое изображение/-я относительно элемента.4.04.010.53.09.012.0
background-size Определяет размер фонового изображения/-ий.4.0
1.0
-webkit-
4.0
3.6
-moz-
10.5
10.0
-o-
4.1
3.0
-webkit-
9.012.0
border Позволяет установить все свойства границ в одном объявлении.1.01.03.51.04.012.0
border-bottom Устанавливает все свойства нижней границы в одном объявлении.1.01.03.51.04.012.0
border-bottom-colorУстанавливает цвет нижней границы.1.01.03.51.04.012.0
border-bottom-left-radius Определяет форму границы нижнего левого угла.5.0
4.0
-webkit-
4.0
3.0
-moz-
10.55.0
3.1
-webkit-
9.012.0
border-bottom-right-radius Определяет форму границы нижнего п

Справочник CSS | PuzzleWeb.ru

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

Свойство Описание CSS
align-content Задаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым. 3
align-items Вертикальное выравнивание flex-элементов внутри flex-контейнера. 3
align-self Вертикальное выравнивание flex-элемента. 3
flex Определяет ширину, сжатие и растяжение для flex-элемента. 3
flex-basis Указывает ширину для flex-элемента. 3
flex-direction Направление расположения flex-элементов. 3
flex-flow Направление расположения и возможность переноса для flex-элементов. 3
flex-grow Определяет коэффициент растяжения flex-элемента. 3
flex-shrink Определяет коэффициент сжатия flex-элемента. 3
flex-wrap Определяет возможность переноса flex-элементов. 3
justify-content Горизонтальное выравнивание flex-элементов. 3
order Определяет порядок вывода flex-элементов. 3
Свойство Описание CSS
@keyframes Позволяет создавать анимацию. 3
animation Позволяет установить несколько или все значения свойств animation в одном объявлении. 3
animation-delay Определяет, когда запустится анимация. 3
animation-direction Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах. 3
animation-duration Определяет сколько понадобится времени, чтобы закончить 1 цикл анимации. 3
animation-fill-mode Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания).
По умолчанию CSS анимация не влияет на элемент до тех пор, пока анимация не запуститься, во время паузы и после её завершения. Это и позволяет переопределить свойство animation-fill-mode.
3
animation-iteration-count Определяет сколько раз анимация должна будет проигрываться. 3
animation-name Определяет имя для @keyframes. 3
animation-play-state Указывает будет анимация проигрываться или будет в режиме паузы. 3
animation-timing-function Определяет кривую скорости для анимации. 3
backface-visibility Определяет, должна ли быть видна задняя сторона элемента или нет. 3
Свойство Описание CSS
margin Задает внешние отступы для элемента. 1
margin-bottom Задает нижний внешний отступ для элемента. 1
margin-left Задает левый внешний отступ для элемента. 1
margin-right Задает правый внешний отступ для элемента. 1
margin-top Задает верхний внешний отступ для элемента. 1
padding Устанавливает внутренние отступы в элементе. 1
padding-bottom Задает нижний отступ(внутреннее поле) для элемента. 1
padding-left Задает левый отступ(внутреннее поле) для элемента. 1
padding-right Задает правый отступ(внутреннее поле) для элемента. 1
padding-top Задает верхний отступ(внутреннее поле) для элемента. 1
Свойство Описание CSS
bottom Указывает направление смещения позиционированного элемента от нижнего края. 2
clear Указывает с какой стороны элемента не допускаются плавающие элементы. 1
clip Определяет видимую часть абсолютно позиционированных элементов. 2
display Указывает, как будет отображаться элемент в браузере. 1
float Определяет будет ли элемент плавающим. 1
left Указывает направление смещения позиционированного элемента от левого края. 2
position Определяет метод позиционирования элементов. 2
right Указывает направление смещения позиционированного элемента от правого края. 2
top Указывает направление смещения позиционированного элемента от верхнего края. 2
visibility Определяет, является ли элемент видимым. 2
z-index Указывает порядок расположения элементов по оси Z. 2
Свойство Описание CSS
height Устанавливает фиксированную высоту. 1
max-height Указывает максимальную фиксированную высоту. 2
max-width Указывает максимальную фиксированную ширину. 2
min-height Указывает минимальную фиксированную высоту. 2
min-width Указывает минимальную фиксированную ширину. 2
overflow Определяет, что предпринять, если содержимое элемента превосходит размер области элемента. 2
overflow-x Указывает, обрезать или нет левый/правый край содержимого — если оно переполняет доступную область элемента для его содержания. 3
overflow-y Указывает, обрезать или нет верхний/нижний край содержимого — если оно переполняет доступную область элемента для его содержания. 3
resize Указывает, может ли размер элемента изменяться пользователем. 3
width Устанавливает фиксированную ширину. 1
Свойство Описание CSS
border Позволяет использовать основные свойства границ в одном объявлении. 1
border-bottom Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении. 1
border-bottom-color Задает цвет для нижней границы рамки. 1
border-bottom-left-radius Позволяет сделать округлую границу нижнего левого угла. 3
border-bottom-right-radius Позволяет сделать округлую границу нижнего правого угла. 3
border-bottom-style Определяет стиль для нижней границы рамки. 1
border-bottom-width Определяет ширину для нижней границы рамки. 1
border-color Задает цвет для границ рамки элемента. 1
border-image Позволяет использовать изображение в качестве рамки. 3
border-left Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении. 1
border-left-color Задает цвет для левой границы рамки. 1
border-left-style Определяет стиль для левой границы рамки. 1
border-left-width Определяет ширину для левой границы рамки. 1
border-radius Позволяет изменить форму углов. 3
border-right Меняет внешний вид правой границы рамки. 1
border-right-color Задает цвет для правой границы рамки. 1
border-right-style Определяет стиль для правой границы рамки. 1
border-right-width Задает ширину для правой границы рамки. 1
border-style Задает стиль для границ рамки элемента. 1
border-top Меняет внешний вид верхней границы рамки. 1
border-top-color Задает цвет для верхней границы рамки. 1
border-top-left-radius Позволяет сделать округлую границу верхнего левого угла. 3
border-top-right-radius Позволяет сделать округлую границу верхнего правого угла. 3
border-top-style Определяет стиль для верхней границы рамки. 1
border-top-width Определяет ширину для верхней границы рамки. 1
border-width Задает ширину для границ рамки элемента. 1
outline Создает внешнюю границу вокруг элемента. 2
outline-color Определяет цвет внешней границы. 2
outline-offset Сдвигает внешнюю границу на заданное расстояние от края элемента. 3
outline-style Указывает стиль для внешней границы. 2
outline-width Указывает ширину для внешней границы. 2
Свойство Описание CSS
border-collapse Определяет будут ли границы рамки объединены в одну. 2
border-spacing Определяет расстояние между границами смежных ячеек и общей рамкой таблицы. 2
caption-side Указывает расположение заголовка таблицы. 2
empty-cells Регулирует видимость пустых ячеек в таблице. 2
table-layout Задает алгоритм использования макета таблицы. 2
Свойство Описание CSS
color Изменяет цвет текста. 1
direction Определяет направление написания текста. 2
letter-spacing Контролирует расстояние между символами в тексте. 1
line-height Определяет межстрочный интервал(интерлиньяж). 1
quotes Определяет тип кавычек для встроенных цитат. 2
text-align Указывает способ выравнивания содержимого по горизонтали. 1
text-decoration Добавляет некоторые элементы декорирования к тексту. 1
text-indent Определяет отступ первой строки в тексте элемента. 1
text-overflow Указывает, что должно произойти, когда текст переполняет содержащий элемент. 3
text-transform Контролирует использование строчных и прописных букв в тексте. 1
vertical-align Определяет вертикальное выравнивание в элементе. 1
white-space Определяет способ обработки пробелов внутри элемента. 1
word-break Определяет правила переноса для не-CJK сценариев. 3
word-spacing Определяет ширину пробелов между словами. 1
word-wrap Позволяет прерывать длинные слова для переноса на другую строку. 3
Свойство Описание CSS
perspective Определяет, на сколько пикселей удален 3D элемент от точки обзора. 3
perspective-origin Определяет, где располагается 3D элемент на осях x и y. 3
transform Применяет 2D или 3D преобразование к элементу. 3
transform-origin Позволяет изменить позицию преобразованных элементов. 3
transform-style Определяет, как вложенные элементы будут отображаться в трехмерном пространстве. 3
transition Управляет эффектом трансформации. 3
transition-delay Указывает, когда должен начаться эффект трансформации. 3
transition-duration Указывает продолжительность трансформации. 3
transition-property Указывает название CSS свойства, для которого будет применен эффект трансформации. 3
transition-timing-function Задает кривую скорости для эффекта трансформации. 3
Свойство Описание CSS
background Устанавливает несколько или все значения свойств фона в одном объявлении. 1
background-attachment Указывает будет ли фоновое изображение фиксированным. 1
background-clip Определяет область в элементе, для которой задается фон. 3
background-color Устанавливает цвет фона для элемента. 1
background-image Устанавливает фоновое изображение в элементе. 1
background-origin Указывает область позиционирования для фонового изображения. 3
background-position Устанавливает начальное место для фонового изображения. 1
background-repeat Задает, как фоновое изображение будет повторяться на экране. 1
background-size Указывает размер для фонового изображения. 3
Свойство Описание CSS
font Изменяет стандартный вид текста. 1
@font-face Позволяет использование любого шрифта на странице. 3
font-family Указывает шрифт или семейство шрифтов для текста. 1
font-size Указывает размер для шрифта. 1
font-size-adjust Контролирует размер неосновных шрифтов. 3
font-stretch Регулирует ширину текста. 3
font-style Позволяет изменять стиль текста. 1
font-variant Конвертирует строчные буквы в прописные уменьшенного размера. 1
font-weight Задает ширину символов текста. 1
Свойство Описание CSS
box-sizing Позволяет заставить определенные элементы заполнять область определенным способом. 3
column-count Разделяет элемент на колонки. 3
column-gap Задает расстояние между колонками элемента. 3
column-rule Свойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении. 3
column-rule-color Определяет цвет границы между колонками. 3
column-rule-style Определяет стиль границы между колонками. 3
column-rule-width Указывает ширину границы между колонками. 3
columns Позволяет использовать значения свойств column-width и column-count в одном объявлении. 3
column-span Указывает элементу количество колонок для обхвата. 3
column-width Определяет ширину колонок. 3
content Определяет содержимое для псевдо-элементов ::before и ::after. 2
counter-increment Увеличивает значение счетчика. 2
counter-reset Устанавливает начальное значение счетчика. 2
cursor Изменяет вид курсора мыши. 2
page-break-after Определяет наличие или отсутствие разрыва страницы после заданного элемента. 2
page-break-before Определяет наличие или отсутствие разрыва страницы перед заданным элементом. 2
page-break-inside Определяет наличие или отсутствие разрыва страницы внутри элемента. 2

CSS — Вікіпедія

CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) — це спеціальна мова стилю сторінок[en], що використовується для опису їх зовнішнього вигляду. Самі ж сторінки написані мовами розмітки даних.

CSS є основною технологією всесвітньої павутини, поряд із HTML та JavaScript[1].

Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої мережі.

CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже наявні функції. Рівні позначаються як CSS1, CSS2 та CSS3. Профілі — сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.

CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їхньої візуальної презентації.

CSS використовується авторами та відвідувачами веб-сторінок, щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).

Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори тощо. CSS також дозволяє адаптувати контент до різних умов відображення (на екрані монітора, мобільного пристрою (КПК), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкою шрифту Брайля або голосових браузерах та ін.).

Один і той самий HTML або XML документ може бути відображений по-різному залежно від використаного CSS. Стилі для відображення сторінки можуть бути:

  • Стилі автора (інформація надана автором сторінки):
    • зовнішні таблиці стилів (англ. stylesheet), найчастіше окремий файл або файли .css
    • внутрішні таблиці стилів, включені як частина документу або блоку
    • стилі для окремого елементу
  • Стилі користувача
    • локальний .css-файл, вказаний користувачем для використання на сторінках і вказаний в налаштуваннях браузера (наприклад Opera)
  • Стилі переглядача (браузера)
    • стандартний стиль переглядача, наприклад стандартні стилі для елементів, визначені браузером, використовуються коли немає інформації про стиль елемента або вона неповна.

Стандарт CSS визначає порядок та діапазон застосування стилів, тобто, в якій послідовності і для яких елементів застосовуються стилі. Таким чином, використовується принцип каскадності, коли для елементів вказується лише та інформація про стилі, що змінилася або не визначена загальнішими стилями.

Переваги[ред. | ред. код]

  • Інформація про стиль для усього сайту або його частин може міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;
  • Різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на принтер, стиль для мобільних пристроїв;
  • Сторінки зменшуються в об’ємі та стають більш структурованими, оскільки інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з урахуванням їх;
  • Прискорення завантаження сторінок і зменшення обсягів інформації, що передається, навантаження на сервер та канал передачі. Досягається за рахунок того, що сучасні браузери здатні кешувати (запам’ятовувати) інформацію про стилі і використовувати для всіх сторінок, а не завантажувати для кожної.

Синтаксис[ред. | ред. код]

CSS має порівняно простий синтаксис і використовує небагато англійських слів для найменування різних складових стилю.

Стилі складаються зі списку правил. Кожне правило має один або більше селектор (англ. selector) та блок визначення (англ. declaration block). Блок визначення складається із оточеного фігурними дужками списку властивостей.

Властивості в списку оформлюються у вигляді назва властивості, двокрапка (:), значення, крапка з комою (;).

Приклад:

 p {
   font-family: Verdana, sans-serif;
 }
 h3 {
   font-size: 110%;
   color: red;
   background: white;
 }
 .note {
   color: red;
   background: yellow;
   font-weight: bold;
 }
 p.warning {
   background: url(warning.png) no-repeat fixed top;
 }
 #paragraph2 {
   margin: 0;
 }
 a:hover {
   text-decoration: none;
 }
 #news p {
   color: red;
 }

В прикладі використано 7 правил, селектори p, h3, .note, p.warning, #paragraph2, a:hover та #news p. Приклад властивості: color: red, де властивості з назвою color присвоєно значення red.

В перших двох правилах визначаються властивості HTML-елементів p (абзац, скорочення від англ. paragraph) та h3 (Заголовок другого рівня, скорочення від англ. header). Абзац буде відображено шрифтом Verdana або, у разі відсутності Verdana, іншим шрифтом sans-serif. Заголовок другого рівня буде відображено червоним кольором на білому тлі.

Третє правило буде застосовано до всіх елементів, властивість class визначена як ‘note’. Наприклад:

<p>Абзац буде відображено червоним жирним шрифтом на жовтому тлі.</p>

Третє правило також можна записати як *.note.
Щоб третє правило застосовувалося лише до абзаців, його слід переписати як:

 p.note {
   color: red;
   background: yellow;
   font-weight: bold;
 }

Четверте правило стосується тих елементів рівня абзацу (p), що мають властивість class рівну ‘warning’. Такі абзаци матимуть фонове зображення warning.png згори.

Властивість .class може мати не лише порівняння, але й перелік. Коли властивість class містить перелік значень, розділених пробілом, то до цього елементу застосовуються правила усіх перелічених класів. Наприклад, до <p> будуть застосовані правила note та warning.

П’яте правило застосовується лише до одного елементу в документі HTML, що має ідентифікатор id рівний paragraph2. Цей елемент не буде мати межі навколо, тому що властивість margin дорівнює 0. Наприклад:

<p>Цей абзац не має межі тому що межа 
 дорівнює 0. На сторінці може бути лише один такий елемент.
 </p>  

Шосте правило визначає стиль наведення мишкою (hover) для a (anchor) елементів. Стандартно більшість браузерів підкреслюють елементи a (посилання в межах одного документа або на інші HTML-документи). Це правило прибирає підкреслювання з посилань, коли користувач наводить на них мишкою.

Останнє правило застосовується до тих абзаців, що знаходяться всередині (мають батьківський елемент) з ідентифікатором news. Це приклад наслідування властивостей.

Завдяки каскадній структурі CSS, ці абзаци (p) будуть наслідувати font-family: Verdana, sans-serif; як і всі елементи p (абзаци). Ті з них, що мають class рівний warning будуть мати також і фонове зображення.

CSS може також містити коментарі. Синтаксис коментарів подібний до синтаксису, що використовується в багатьох мовах програмування (наприклад C, PHP). Слід звернути увагу на те, щоб в коментарях CSS-файлів не використовувалися кириличні літери (деякі браузери некоректно обробляють CSS-файли з українськими літерами[2]).

Селектори та Псевдо-класи[ред. | ред. код]

CSS має спеціальні позначення (селектори, від англ. selector) для визначення діапазону застосування правила.

Всі елементи
використовується селектор * (часто не пишеться, наприклад *.p та p — рівнозначні)
За назвою елементу
наприклад для всіх p або h3
Наслідування
наприклад для всіх a елементів які містяться в li елементах (посилання всередині списків), селектор матиме вигляд li a
Властивості class та id
наприклад .class або #id для елементів class="class" або id="id"
Суміжні елементи
наприклад для всіх елементів p, попереднім до яких є елемент h3 (перший абзац після заголовка), селектор буде h3 + p
Пряме наслідування
наприклад для всіх span елементів всередині p, але не глибших за перший рівень наслідування span, селектор буде p > span
За атрибутами
наприклад для всіх <input type="text"> селектор буде input[type="text"]

Для точнішого визначення стилю можуть використовуватися псевдо-класи (англ. pseudo-classes). Мабуть найвідомішим є псевдо-клас :hover, що застосовується коли користувач вкаже на елемент, зазвичай наведенням курсору. Стиль визначається для a:hover або #elementid:hover. Інші псевдо-класи, наприклад, :first-line (перший рядок тексту), :first-letter (перша літера) :visited (посилання, що вже відкривалось) або :before (визначає стиль перед елементом). Спеціальний псевдо-клас :lang(c) буде застосовано до елементів якщо їхня мова (англ. language) «c».

Підтримка псевдо-класів залежить від браузеру, наприклад Internet Explorer 6 підтримує псевдо-клас :hover лише для посилань.

Селектори можуть поєднуватися й іншим чином для досягнення більшої гнучкості (див. визначення селекторів на сайті W3C). В наступному прикладі кілька селекторів об’єднуються через кому[3]. Правило встановлює шрифт для HTML-заголовків всіх рівнів.

 h2, h3, h4, h5, h5, h6 {
   font-family: "Arial", sans-serif;
 }

Приєднання до сторінки[ред. | ред. код]

Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у файл (це можна зробити будь-яким текстовим редактором), наприклад example.css, і потім включити або імпортувати його в HTML або XHTML-сторінку.

Включення CSS-файлу до сторінки (XHTML):

 <link rel="stylesheet" href="example.css" type="text/css" />

Включення CSS-файлу до сторінки (HTML):

 <link rel="stylesheet" href="example.css" type="text/css">

Імпорт CSS-файлів до HTML та XHTML-сторінок:

 <style type="text/css">
 @import "example.css";
 </style>

CSS може бути визначений в <head> частині сторінки або для елементу сторінки через style.

Включення CSS-файлу до XML-сторінки:

 <?xml-stylesheet type="text/css" href="example.css"?>

Таблиці стилів в тому чи іншому вигляді існували з зародження SGML в 1970-тих. Каскадні таблиці стилів розроблялися для спрощення процедури додавання інформації про стилі для веб-сторінок.

З розвитком HTML з’явилася можливість використовувати різні механізми для додавання стилів до елементів сторінки. Еволюція HTML дала веб-дизайнерам більше можливостей для створення вигляду сайту, але HTML-код ставав складнішим для написання та зміни. Через різницю у відображення сторінки в різних браузерах збереження стилю сторінки було складним, користувачі мали менше контролю над відображенням контенту.

На розгляд W3C було запропоновано дев’ять різних варіантів таблиць стилів. Після обговорення в спеціальному списку розсилки було обрано два, вони створили основу для того, що стало CSS: англ. Cascading HTML Style Sheets (CHSS) та англ. Stream-based Style Sheet Proposal (SSP). Спочатку в жовтні 1994, Håkon Wium Lie (зараз генеральний технічний директор Opera Software) запропонував Cascading HTML Style Sheets (CHSS), що дещо подібний до сучасного CSS. Bert Bos працював над браузером Argo, що використовував власний варіант таблиць стилів, Stream-based Style Sheet Proposal (SSP). Lie і Bos почали співпрацювати для вироблення стандарту CSS (літера ‘H’ була виключена з назви, оскільки таблиці стилів могли застосовуватися до інших мов розмітки, не лише HTML).

На відміну від наявних тоді таблиць стилів, таких як DSSSL та FOSI, CSS дозволяв застосування різних таблиць стилів до документу (сторінки). Таблиці стилів могли наслідувати правила з інших (тобто створювати каскади), що дозволило контролювати використання стилів як дизайнером сайту так і користувачем (наприклад в браузері Opera).

Пропозиції до стандарту CSS обговорювалися на конференціях в 1994 та 1995 роках.

В 1994 році було створено World Wide Web Consortium W3C, серед інших питань W3C займався також і CSS. Робочу групу очолив Steven Pemberton, як провідні технічні спеціалісти до неї входили Håkon Wium Lie та Bert Bos.

В грудні 1996 було опубліковано CSS рівня 1 — CSS level 1 Recommendation. В квітні 2016, опубліковано CSS рівня 2 — Cascading Style Sheets Level 2 Revision 2 (CSS 2.2), робота над яким ще продовжується.

  1. ↑ Flanagan, David. JavaScript — The definitive guide (вид. 6). с. 1. «JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages.» 
  2. ↑ CSS, UTF и Интернет эксплорер, 2006(рос.)
  3. ↑ contextual-selectors
В іншому мовному розділі є повніша стаття Cascading Style Sheets (англ.). Ви можете допомогти проєкту, розширивши поточну статтю за допомогою перекладу з англійської.
  • Не перекладайте текст, який видається недостовірним або низької якості. Якщо можливо, перевірте текст за посиланнями, поданими в іншомовній статті.
  • Докладні рекомендації: див. Вікіпедія:Переклад.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *