Обзор и конспект 3-его урока курса (CSS) " HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend" GOIT.
Ещё аж в прошлом месяце раздобыл на торренте курс HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend (по ссылке нужно переходить со включенным VPN).
Сайт авторов курса
Предыдущие уроки
1-ый урок (HTML)
2-ой урок (HTML)
После длительной паузы из-за сильной занятости вновь вернулся к изучению курса. Сегодня закончил 3-ий урок. Первые два были посвящены HTML, начиная с 3-его идёт изучение CSS. По опыту уже пройденных уроков, чтобы было легче делать домашнюю работу по ходу занятия максимально подробно всё конспектировал. Получился достаточно сумбурный, но мне понятный конспект. Если хотите изучить CSS – советую его проглядеть, чтобы оценить примерное содержание. В конце поста (если конечно дочитаете его до конца) выложил ссылки на решенные и недорешённые задания. Урок длится 2 часа, и кажется что за это время объясняется много материала, но чтобы решить д/з рассказанного на занятии недостаточно, и для его выполнения пришлось очень активно пользоваться гуглом и много эксперементировать...
Урок 3. Знакомство с CSS.
CSS (Cascading Style Sheets) - Каскадные листы стилей.
План занятия:
• Знакомство с CSS
• Типы стилей
• Синтаксис свойств
• Селекторы
• Специфичность
• Наследование
Знакомство с CSS
CSS позволяют кардинально менять вид страницы, не меняя при этом HTML код.
Пример:
http://www.csszengarden.com/
Веб страница без CSS
Тот же код с CSS
С помощью CSS можно сделать бесчисленное множество различных видов дизайна страницы.
Типы стилей.
Атрибут style=""
C помощью этого атрибута можно задать стиль прямо внутри элемента.
Стили которые написаны внутри строки называются «внутренние стили» (inline styles)"
Если выделить зелёным нужно много абзацев на странице, то что бы сделать это используя внутренние стили придётся много "копипастить". Как говорит наставник этого проекта: "от копипасты руки волосатые…". Поэтому лучше этого не делать. А воспользоваться "глобальными стилями".
"Глобальные стили"
"Глобальные стили" прописываются в теге "style" и вставляются исключительно в теге "head"
Селектор
Один раз указав атрибуты стиля в "head" с помощью селектора, мы изменим подобные элементы на странице.
Применять свойства селектора можно для нескольких элементов, напрмер:
p, div, h1{….} – заданные свойства в {…} будут применены к p, div, h1.
Вариант использования CSS непосредственно в самой странице хорошо подходит, если на нашем сайте она одна. Если страниц много, то намного удобнее будет вынести CSS в отдельный файл и затем подключать его к тем страницам, где он нужен. Для этого применяется "link" - связанные стили.
Подключаются файлы CSS к странице таким образом:
Подключаются связанные стили только "head"
Путь к файлу может быть как относительным, так и абсолютным. Возможно даже подключение файла CSS с другого сайта.
Если CSS прописан в "head" то он работает быстрее чем из внешнего файла.
#id
Если в глобальном стиле задан один цвет всех подобных элементов, но нам нужно сделать один абзац другого цвета, для этого применяют #id. #id может отработать только один раз, он уникальный как паспорт.
Ведущий курса настоятельно не рекомендует использовать в своих работах атрибуты #id
.class
Для того что бы задать нескольким абзацам определённые свойства применяется атрибут .class
При создании класса можно устанавливать условия соответствования сразу нескольким .class
Например:
#myid3.myclass.mysuperclass{ font-style: italic; } – шрифт будет подчёркнут (italic) если у элемента будет присутствовать и myid3 и myclass и mysuperclass. В коде это будет выглядеть так:
<div id=”myid3” class=”myclass mysuperclass”>текст</div>
Селекторы
Логика выполнения кода в CSS идёт с права на лево
Символ “ * ” задаёт стиль для любого эелемента (“p”, “ul” и т.д.)
Использовать универсальный селектор ведущий курса крайне не рекомендует.
Каскад заключается в том, что мы можем указывать вложенность элементов и тем самым навешивать различные стилил.
Предикат “[]”
Будут обработаны все атрибуты “div” у которых есть элемент “id”
div[class=”myclass mysuperclass”] – будут обработаны все атрибуты “div” у которых есть “class” и он равен “mysuperclass” . Сравнение идёт по сотроке, стока которая указана в селекторе должна точно совпадать со строкой к которой будет применён этот селектор.
Предикатов может быть несколько
div[id][class=”myclass”] – будут обработаны “div” у которых есть “id”, у которых есть “class” и он равен “myclass”
Можно добавлять условия выбора строки
div[id][class~=”myclass”] – будут обработаны “div” у которых есть “id” у которых есть “class” и он в значении чему он равняется есть кусок текста “myclass” в начале, середине или конче текста значения.
На месте “id”, “class” могут быть другие атрибуты.
Селекторы потомков
Самые распространенные - .parent .child
/* самый распространенный: все потомки */
.parent .child
{
border: 1px solid red;
}
/*
все селекторы можно уточнять
именами элементов ol.parent li.child
*/
ol.parent li.child
{
border: 1px solid red;
}
/* только child */
.parent > .child
{
border: 1px solid red;
}
/* следующий за */
.child04 + .child
{
border: 1px solid red;
}
/* после */
.child01 ~ .child
{
border: 1px solid red;
}
Указанные выше CSS применяются к коду HTML:
<li class="child child01">child</li>
<li class="child child02">
child
<div class="descendant">descendant</div>
<div class="child">fake child</div>
<ul>
<li>sublist</li>
<li>sublist</li>
</ul>
</li>
<li class="child child03">child</li>
<li class="child child04">child</li>
<li class="child child05">child</li>
<li class="child child06">child</li>
<li class="child child07">child</li>
<li class="child child08">child</li>
<li class="child child09">child</li>
<li class="child child10">child</li>
<li class="child child11">child</li>
«pseudo-class :nth-child()» -когда необходимо выделить строки по определённой логике
nth-child
Другие варианты формул:
(3n+1) – выделить первую строчку и каждую 3-ю последующую
(2n+3) – выделить каждую вторую строчку начиная с 3-ей
(even) – выделить все чётные строки
(odd) – выделить все нечётные строки
(5) – выделить 5-ую строчку
:nth-of-type – работает так же как и :nth-child, но считает элементы указанного типа
Псевдоклассы
любые стили для :visited отключены в webkit по соображениям безопастности
link {color: green;} - задаёт цвет всем ссылкам на странице (в данном случае делает их зелёными).
:link:hover в случае если :hover будет один без :link , то он сработает на всех элементах страницы.
:hover – применяется для изменения цвета элемента на который наведён курсор мыши, но клик еще не сделан.
:link реагирует на все непосещенные ссылки
:visited только на посещенные и перестает обрабатывать правила :hover
link:active – та ссылка по которой сделан клик мыши
:link:focus - та ссылка по который был сделан клик, но мышь убрана с неё
«псевдоклассы :enabled :disabled :checked» - чекбоксы
Код:
<form>
<input type="checkbox" id="cbox">
<label for="cbox">клик</label>
</form>
input + label{color: green;} – чек бокс с невыбранной голочкой, цвет зелёный
input:checked + label{color: red;} – чек бокс с выбранной галочкой, становится красным
Псевдоэелементы
p:first-line,
span:first-line {…} – Выделяет первую строку по заданным правилам (не работает у строчных элементов).
Чтобы применить к строчным элементам можно воспользоваться следующей командой:
span{display: inline-block;} – тогда строчный элемент станет отображаться как блочный.
:first-lette – Выделяет первую букву по заданным правилам (не работает у строчных элементов).
Псевдо HTML элементы
Код в HTML:
<div class="i">me</div>
Код CSS:
.i:before{content: 'before '; color: green;} – добавляет перед “i” – текст “content” цвета “color”
.i:after{content: ' after'; color: red;} - добавляет после “i” – текст “content” цвета “color”
Отображается в браузере:
Д/з
Д/з к уроку состоит из 6 заданий. Увы, но я так и не смог выполнить задания на 100%
Первые 3 выполнил достаточно быстро, это были обычные CSS разукрашивания и небольшая модификация стилей.
Выполненное задание 1
4-ое задание было не сложным, но как убрать подчёркивание у значка юникода в конце гиперссылки я так и не понял. Убил на этом много времени, но не смог этого сделать. Посчитав что оно того не стоит пошёл дальше. Стрелка в вебшторме развернулась (свойство etransform: rotate(90dg)) на гитхабе почему то не захотела…
Выполненное задание 4
Больше всего провозился с 6-ым заданием, на мой взгляд оно было самым сложным. Вот тут я гуглил и экспериментировал много времени, но всё же полностью выполнил его . Нажимая на надпись нужно было добиться исчезновения и появления определённого текста текста.