Введение в CSS
Download
1 / 22

Введение в css - PowerPoint PPT Presentation


  • 59 Views
  • Uploaded on

Введение в css

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Введение в css' - Rusov


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Синтаксис СSS. Правила

селектор { свойство1: значение; свойство2: значение;}


Css html
Как подключить css к html файлу

  • Отдельным файлом

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

  • В теги <style></style>

    <style type="text/css">H1{ font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; color:#336; }</style>

  • Через атрибут элемента

    <h1 style="font-size: 20px; font-family: Verdana, Arial; color: #336;">Заголовок</h1>


Правила. Простые селекторы

Простейшие селекторы — это селекторы по именам тегов. С их помощью можно задать стили для всех абзацев на странице, для всех ссылок, заголовков первого уровня и так далее. Такие селекторы содержат имя тега без символов < и >. Например:

p { /* стили для абзацев */}h1 { /* стили для заголовков */}


Сложные селекторы

<p class="help"></p><p class="help error"></p>

В примере у первого абзаца задан класс help, у второго абзаца заданы классы help и error.

Селектор с использованием класса задаётся так: .имя_класса. Например:

.help { ... }.error { ... }


В CSS существует огромное количество свойств. Их можно разбить на следующие группы:

  • оформление текста;

  • работа с размерами и отступами;

  • позиционирование элементов;

  • создание сеток;

  • декоративные: цвета, фон, тени;

  • другие.


Пример CSS кода количество свойств. Их можно разбить на следующие группы:

body {

background: #F6F1F1; /* Цвет фона */

}

.main /*стили класса main*/{

background: #418be2;

border-radius: 5px; /* Округление углов блока*/

box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /*Задание тени*/

margin: 25px auto 25px; /*Внешние отступы*/

padding: 25px 50px; /* Внутренние отступы*/

text-align: left;

font-family: arial; /*Шрифт*/

width: 900px; /* Ширина блока */

}


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

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


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

/HMTL/

<p class="truth">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

<p>Веб-разработчик, не стремящийся постигнуть каскадность, станет королем программирования.</p>

/CSS/

p {

outline: 2px solid rgba(0, 0, 0, 0.1);

padding: 10px;

}

.truth {

background-color: #dff0d8;

}


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

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

  • CSS-правила в значении атрибута style самые приоритетные,

  • за ними идёт селектор с id,

  • затем селектор с классом,

  • затем селектор с именем тега.


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

p { padding: 10px; background-color: #dff0d8;} +.truth { background-color: #aaddff;} =стили второго абзаца { padding: 10px; background-color: #dff0d8; background-color: #aaddff;}


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

<p class="blue nice-box">Каскадность — это очень мощный механизм.</p>

<p class="green nice-box">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

<p class="blue nice-box">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

/CSS/

.green {

background-color: #dff0d8;

}

.blue {

background-color: #aaddff;

}

.nice-box {

padding: 10px;

border-radius: 5px;

box-shadow: 1px 1px 5px #CCC;

}


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

<p class="blue nice-box">Каскадность — это очень мощный механизм.</p>

<p class="green nice-box">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

<p class="blue nice-box">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

/CSS/

.green {

background-color: #dff0d8;

}

.blue {

background-color: #aaddff;

}

.nice-box {

padding: 10px;

border-radius: 5px;

box-shadow: 1px 1px 5px #CCC;

}


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

<p class="blue nice-box">Каскадность — это очень мощный механизм.</p>

<p class="green nice-box">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p>

<p class="blue nice-box">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p>

/CSS/

.green {

background-color: #dff0d8;

}

.blue {

background-color: #aaddff;

}

.nice-box {

padding: 10px;

border-radius: 5px;

box-shadow: 1px 1px 5px #CCC;

}


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

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

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

Ещё пример: тег ul является родительским по отношению к вложенным в него тегам li. Если задать для ul шрифт курсивом, то и внутри всех li шрифт станет курсивным.

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


Селекторы контекстные или вложенные

Селектор может состоять из нескольких частей, разделённых пробелом, например:

/* выбрать все теги strong внутри тегов p */

p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu, которые лежат внутри элементов с классом .footer */.footer .menu a { ... }


Дочерние селекторы вложенные

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

<ul> <li><span>...</span></li> <li><span>...</span></li></ul>

По отношению к <ul><li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

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

Для этого существует дочерний селектор, в котором используется символ >.

Например: ul > li или ul > li > span.


Псевдоклассы вложенные

Псевдоклассы — это дополнения к обычным селекторам, которые делают их ещё точнее и мощнее.

Псевдокласс добавляется к селектору c помощью символа :, вот так селектор:псевдокласс. Например:

a:visited { ... }li:last-child { ... }.alert:hover { ... }


Hover
Псевдоклассы hover вложенные

Псевдокласс hover позволяет обозначать стили элемента при наведении на него курсора.

.block{ ... }

.block:hover { ... } /* Эти свойства будут работать при наведении курсора*/


Селекторы атрибутов вложенные

Чаще всего такие селекторы используются при работе с формами, так как поля форм имеют атрибут type с разными значениями.

Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут]. Примеры селекторов:

1. input[checked] { ... }2. input[type="text"] { ... }

Первый селектор выберет поля формы, у которых есть атрибут checked, второй селектор выберет поля формы, у которых атрибут type имеет значение text


Селекторы по id вложенные

Существует ещё один HTML-атрибут, для которого существует специальный селектор. Этот атрибут id (идентификатор), а селектор записывается с помощью символа #, например, #some-id.

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

Использование селекторов по id при оформлении считается плохой практикой. Существуют редкие исключения из этого правила, например, при оживлении слайдера на чистом CSS


htmlbook.ru вложенные - справочник по HTML/CSS

www.w3.org - организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины

codepen.io - онлайн редактор кода, с возможностью делится своими исходниками

Полезные ссылки


ad