Интернет-магазин nachodki.ru

Специфика CSS3

Категория: Программирование Обновлено: 17.01.2019 Опубликовано: 09.11.2018 Печать

Селекторы CSS3

1. Селектор элементов (переопределение тега) - P {color: red } (<p>...</p>). Стиль будет применен ко всем абзацам документа. Т.е. весь текст, находящийся в рамках парного тега <p> будет выделен красным цветом.

2. Селектор классов (стилевой класс) - .classname {color: red} (<p class="classname">...</p>). Стиль может быть применен к любому тегу, содержащему атрибут class, значение которого совпадает с наименованием селектора класса.

3. Селектор идентификаторов (именованный стиль) - #clrRed { color: red } (<p id="clrRed">...</p>). Стиль будет применен к любому тегу, содержащему атрибут id, значение которого совпадает с наименованием селектора стиля. В рамках одной веб страницы значение атрибута id должно быть уникальным. Т.е., фактически, данный стиль может быть применен единовременно только к одному элементу веб - страницы.

4. Селектор дочерних элементов - #clrRed>strong { color: red} (<p id="clrRed"> <strong>...</strong> </p>). Стиль будет применен ко всем элементам <strong>, находящимся в дочерних отношениях с <p id="clrRed"> и только к ним.

5. Контекстный селектор (комбинированный стиль) - p strong {color : red} (<p><strong>...</strong></p>), p.classname {color: red} (<p class="classname">...</p>), p.classname <strong> { color: red} (<p class = "classname"> <strong>...</strong></p>)




Подключение

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

<style type = "text/css">
@import url(style.css)
</style>


Каскадность

1. Внешняя таблица стилей, ссылка на которую встречается в html - документе позже, имеет приоритет по отношению к внешней таблице стилей, ссылка на которую встречается раньше.
2. Внутренние таблицы стилей приоритетнее внешних.
3. Таблицы стилей, располагающиеся в рамках самого элемента (<p style="...">), имеют приоритет, по отношению ко всем остальным стилям.
4. Более конкретные стили имеют приоритет перед менее конкретными (к примеру, p.classname {...} приоритетнее p {..}), т.е. стилевой класс приоритетнее переопределения тега, комбинированный класс приоритетнее стилевого.
5. В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее.
6. Атрибуты стиля, объявленные как !important, имеют приоритет перед всеми другими значениями. Таким образом, стиль p {color: red !important} сделает весь текст в рамках тегов <p> красным вне зависимости от любых других переопределений стиля для <p>.



Селекторы псевдоклассов - позволяют применять различные стили к элементам, в зависимости от их состояния

active – стиль применяется к элементу, активированному пользователем;
link – стиль применяется к непосещенным ссылкам;
focus – стиль применяется к элементу при получении им фокуса;
hover – стиль активизируется, когда курсор находится в пределах элемента;
visited – стиль применяется к посещенным гиперссылкам;
first-child – стиль применяется к первому дочернему элементу селектора

a:link {color: red}



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

after – позволяет добавить контент после указанного элемента;
before – позволяет добавить контент до указанного элемента;
first-letter – задает стиль для первого символа в тексте элемента;
first-line – задает стиль первой строки текста элемента.

li: before {content: "some content"}



Работа с цветом и фоном

color – задает цвет переднего плана (color: #00FF00);
background-color – задает цвет фона элемента (background-color: brown);
background-image – задает фоновое изображения для элемента (background-image: url("image.gif"));
background-repeat – задает тип повторения изображения, установленного при помощи атрибута стиля background-image (background-repeat: no-repeat), может принимать следующие значения:
repeat-x – изображение повторяется по горизонтали;
repeat-y – изображение повторяется по вертикали;
repeat – изображение повторяется по горизонтали и вертикали;
no-repeat – изображение не повторяется (значение по - умолчанию).
background-attachment – определяет будет ли фоновое изображение прокручиваться вместе с элементом (background-attachment: fixed), может принимать следующие значения:
scroll – изображение будет прокручиваться вместе с элементом;
fixed – прокрутка изображения заблокирована.
background-position – определение координат позиционирования фонового изображения, содержит два значения: положение по горизонтали и положение по вертикали (background-position: 5cm 4cm). Помимо числовых, может принимать следующие значения:
left – горизонтальное позиционирование "по левому краю";
center – горизонтальное позиционирование "по центру";
right – горизонтальное позиционирование "по правому краю";
top – вертикальное позиционирование "сверху";
center – вертикальное позиционирование "по центру";
bottom – вертикально позиционирование "снизу".

background: #00FF00  url("image.gif") no-repeat fixed 5cm 4cm
table { background-image: url("image.gif")}



Работа со шрифтом

font-family – задает семейство используемого шрифта (font-family: arial) Для задания шрифта может быть использовано два типа имен: имя семейства (family-name) и родовое имя (generic family). К именам семейства относятся, собственно, названия шрифтов (Camria, Arial и т.д.) Количество родовых имен поскромнее:
serif – шрифты с засечками;
sans-serif – рубленые шрифты;
cursive – курсивные шрифты;
fantasy – декоративные шрифты;
monospace – моноширинные шрифты.
font-style – задает стиль шрифта (font-style: normal). Соответственно принимает значения:
normal – обычный шрифт;
italic – курсивный шрифт;
oblique – наклонный шрифт.
font-variant – задает тип представления строчных букв (font-variant: normal). Принимает следующие значения:
normal – строчные буквы представляются в исходном регистре;
small-caps – строчные буквы модифицируются в заглавные, но меньшего размера.
font-weight – определяет насыщенность шрифта (font-weight: bold). Принимает следующие значения:
normal – стандартная насыщенность шрифта;
bold – полужирное начертание.

thead { color: Chartreuse; font: normal small-caps 14pt Arial }


 

Работа с текстом

text-align – определяет горизонтальное выравнивание текста элемента (text-align: center). Может принимать следующие значения:
center – выравнивание по центру;
left – выравнивание по левому краю;
right – выравнивание по правому краю;
justify– выравнивание по ширине;
auto – тип выравнивания не изменяется;
start – в случае, если направление текста слева - направо, то выравнивает по левому краю; если направление текста справа - налево – по правому краю;
end – в случае, если направление текста слева - направо, то выравнивает по правому краю; если направление текста справа - налево – по левому краю;
text-align-last – задает тип выравнивания последней строки элемента, при условии что значение атрибута стиля text-align равно justify (text-align-last: left). Принимает значения аналогичные атрибуту text-align;
text-decoration – добавляет эффекты для текста (text-decoration: none). Может принимать следующие значения:
blink – мигающий текст;
line-through – зачеркнутый текст;
overline – линия над текстом;
underline – линия под текстом (подчеркивание);
none – эффектов нет.
text-indent – задает величину отступа для первой строки текста (text-indent: 10%). Могут быть указаны конкретные значения и процентные.
text-overflow – задание параметра видимости текста (text-overflow: clip). Может принимать два значения: clip – текст обрезается, если выходит за границы элемента; ellipsis – при выходе текста за границы добавляется многоточие;
text-shadow – добавляет тень тексту и определяет ее параметры (text-shadow: red 5 5). Могут быть заданы следующие параметры тени:
none – тени нет;
цвет – любой поддерживаемый цвет;
сдвиг по горизонтали – положительное значение сдвигает тень вправо, отрицательное – влево;
сдвиг по вертикали – положительное значение опускает тень относительно текста, отрицательное – поднимает;
радиус размытия – большее значение сглаживает тень, по - умолчанию параметр равен 0.
text-transform – преобразование текста в заглавные или прописные буквы (text-transform: lowercase). Принимает следующие значения:
none – символы не меняются;
capitalize – первая литера каждого слова становится заглавной;
lowercase – символы текста преобразовываются в нижний регистр;
uppercase – символы текста преобразовываются в верхний регистр.
baseline – выравнивание базовой линии по соответствующей линии родительского элемента, в случае с ячейкой таблицы происходит выравнивание по базовой линии первой текстовой строки;
bottom – выравнивание элемента по нижней части родительского элемента, в случае с ячейкой таблицы происходит выравнивание по нижнему краю;
middle – выравнивание по центру родительского элемента, в случае с ячейкой таблицы происходит выравнивание по середине;
sub – выравнивание базовой линии элемента по базовой линии нижнего индекса родительского элемента;
super – выравнивание базовой линии по базовой линии верхнего индекса родительского элемента;
text-bottom – выравнивание нижнего края фрагмента по нижнему краю текста родителя;
text-top – выравнивание верхнего края фрагмента текста по верхнему краю текста родителя;
top – выравнивание верхнего края фрагмента по верхнему краю текста родителя, в случае с ячейкой таблицы происходит выравнивание по верхнему краю.
white-space – задает способ отображения пробелов между словами (white-space: pre). Принимает следующие значения:
normal – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер самостоятельно разрывает текст и переводит его на новые строки;
nowrap – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер не осуществляет разрыв и перевод строк;
pre – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно не выполняет разрыв и перенос строк. Фактически, текст выглядит образом, определенным разработчиком, без каких - либо изменений;
pre-line – несколько пробелов преобразуются в один, символы перевода строк сохраняются, браузер самостоятельно разрывает текст и переводит его на новые строки;
pre-wrap – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно выполняет разрыв и перенос строк;
word-wrap – указывает места, где браузер может осуществить перевод строки (word-wrap: normal). Может принимать следующие значения:
normal – строки разрываются только по пробелам;
break-word – браузер может выполнять разрыв строк внутри слов.

Цитаты

<blockquote>
<p></p>
</blockquote>

Шрифт

<b>...</b>    Полужирное выделение текста
<i>...</i>    Курсивное выделение текста
<u>...</u>    Подчеркивание текста
<sup>...</sup>    Представление текста в виде верхнего индекса
<sub>...</sub>    Представление текста в виде нижнего индекса


 

Управление контейнерами <div>

min-height – задает минимальную высоту элемента;
height – задает высоту элемента;
max-height – задает максимально возможную высоту элемента;
min-width – задает минимальную ширину элемента;
width – задает ширину элемента
max-width – задает максимально возможную ширину элемента.
auto – размер устанавливается в зависимости от размеров контента;
inherit – значение наследуется от родителя.

атрибуты стиля float

left – элемент выравнивается по левому краю родителя, остальные элементы "обтекают" указанный по правой стороне;
right – элемент выравнивается по правому краю родителя, остальные элементы "обтекают" указанный по левой стороне;
none – обтекание элемента не указано;
inherit – значение наследуется от родителя.

Атрибуты clear

left – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно left;
right – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно right;
both – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно left или right;
none – отмена свойств атрибута clear;
inherit –значение наследуется от родителя.

атрибуты стиля overflow

visible – отображается весь контент даже за пределами контейнера;
hidden – отображается только область внутри контейнера, оставшаяся часть контента скрывается;
scroll – добавление полос прокрутки контейнеру, полосы будут отображаться даже если в них нет необходимости;
auto – полосы прокрутки появятся только в случае необходимости.
overflow-x и overflow-y

<div id="top">top</div>
<div id="left">left </div>
<div id="content">content</div>
<div id="right">right</div>
<div id="bottom">bottom</div>

#top { height: 20px; width:412px; border: 3px double black}
#left { height: 200px; width:50px; border: 3px double black; float: left}
#content { height: 200px; width:300px; border: 3px double black; float:left}
#right { height: 200px; width:50px; border: 3px double black; float:left}
#bottom { height: 20px; width:412px; border: 3px double black; clear: left}


 

Атрибуты <table>

align – задает тип выравнивания таблицы;
background – задает фоновый рисунок таблицы;
border – задает толщину рамки таблицы (в пикселях);
bordercolor –задает цвет рамки;
cellpadding – задает величину отступа от рамки до содержимого ячейки;
cellspacing – задает величину расстояния между ячейками;
cols – задает число колонок в таблице;
frame – задает отображение границ вокруг таблицы, может принимать значения:
void – не отображать границы;
border – отображать границу вокруг таблицы;
above – провести границу только по верхнему краю таблицы;
below – провести границу только по нижнему краю таблицы;
hsides – отрисовать только горизонтальные границы;
vsides – отрисовать только вертикальные границы;
rhs – провести границу только по правой стороне таблицы;
lhs – провести границу только по левой стороне таблицы;
height – задает высоту таблицы;
rules – задает отображение границ между ячейками, может принимать значения:
all – отображать границы вокруг каждой ячейки таблицы;
groups – отображать границы между группами, задаваемыми тегами <thead>, <tfoot>, <tbody>, <colgroup>, <col>;
cols - отображать границы между колонками;
none – скрыть все границы;
rows – отображать границы между строками таблицы;
summary – задает краткое описание таблицы;
width – задает ширину таблицы
colspan и rowspan.

Внутри тега <table> , помимо <tr> и <td> допускается использование тегов:

<caption> – задает заголовок таблицы;
<col> – задает характеристики одной, или нескольких колонок таблицы;
<colgroup> – задает стиль для группы колонок таблиц;
<tbody> – хранит одну, или несколько строк таблицы, допустимо применение только одного такого тега в рамках <table>;
<tfoot> – хранит одну, или несколько строк, отображаемых внизу таблицы;
<th> – задание ячейки таблицы, которая является заголовочной, т.е. текст ячейки отображает полужирным шрифтом с выравниванием по центру;
<thead> –хранит одну, или несколько строк, отображаемых вверху таблицы


Тег <a>

accesskey – позволяет активировать ссылку при помощи комбинации клавиш;
charset – указывает кодировку текста, на который ведет ссылка;
coords – задает координаты активной области ссылки;
href – задает адрес документа, на который необходимо перейти;
hreflang – идентификация языка текста по ссылке;
media – указывает тип носителя, на который ведет ссылка;
name – задает наименование якоря;
rel – задает отношение между ссылаемым и текущим документом;
shape – задает форму активной области ссылки для изображений;
tabindex – задаeт последовательность перехода между ссылками при нажатии кнопки Tab;
target – наименование окна, в которое будет загружаться документ;
title – задает всплывающую подсказку для ссылки;
type – указывает MIME-тип на который ведет ссылка.



Якорь

<a name = "part 1"> </a>
<a href="#part 1"> Часть 1 </a>
<a href="/document.htm#part1"> Часть 1</a>

 

Списки

Нумерованный список (<ol>).
Маркированный список (<ul>).
Список определений (<dl>).

<ol>
<li> Первый элемент нумерованного списка </li>
</ol>

<dl>
<dt> Термин №1 </dt>
<dd> Определение термина №1</dd>
</dl>

 

Правила для устройств

/*
   ... стандартные правила CSS ...
*/
@media (max-width:768px) {
   /*
     ... правила для планшетов ...
  */
}
@media (max-width:320px) {
   /*
     ... правила для смартфонов ...
  */
}

 

Для сайтов находящихся на тарифном обслуживании и администрировании работы проводятся без дополнительной оплаты, входят в стоимость тарифа

По всем вопросам обращаться по адресу: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. или по телефону (WhatsApp): +7-994-009-32-20

 

Поделиться страницей в социальных сетях:

Просмотров: 524

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

Защитный код
Обновить