Задачи на основные CSS свойства
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
На цвета
Для решения задач данного блока вам понадобятся следующие CSS свойства: color.Сделайте все абзацы <p> красного цвета.
Сделайте все <h2> зеленого цвета.
Сделайте все <h3> голубого цвета.
Сделайте все <h4> оранжевого цвета.
На style
Для решения задач данного блока вам понадобятся следующие HTML атрибуты: style.Сделайте первый на странице абзац <p> зеленого цвета.
Сделайте второй на странице абзац <p> красного цвета.
На ширину и высоту
Для решения задач данного блока вам понадобятся следующие CSS свойства: width, height.Сделайте все абзацы <h3> шириной 300px.
Сделайте все таблицы <table> шириной 400px, высотой 200px.
На выравнивание
Для решения задач данного блока вам понадобятся следующие CSS свойства: text-align.Поставьте все <h3> по правому краю.
Сделайте так, чтобы текст в абзацах <p> был выровнен одновременно и по правому и по левому краю.
Сделайте так, чтобы во втором абзаце <p> текст был выровнен по центру.
Поставьте все <th> по левому краю.
Поставьте все <td> по центру.
На жирность
Для решения задач данного блока вам понадобятся следующие CSS свойства: font-weight.Сделайте все <td> жирным.
Сделайте <h2> нежирным.
Сделайте одновременно <th>, <h2> и <h3> нежирным.
На курсив
Для решения задач данного блока вам понадобятся следующие CSS свойства: font-style.Сделайте все <h3> курсивом.
Сделайте все абзацы <p> курсивом, а первый абзац — нет.
На размер шрифта
Для решения задач данного блока вам понадобятся следующие CSS свойства: font-size.Сделайте все <h3> 20px.
Сделайте все абзацы <p> 15px.
На семейство
Для решения задач данного блока вам понадобятся следующие CSS свойства: font-family.Сделайте для абзацев <p> шрифт Arial.
Сделайте для <h3> шрифт Times New Roman.
Сделайте для <h4> любой шрифт без засечек.
На межстрочный интервал
Для решения задач данного блока вам понадобятся следующие CSS свойства: line-height.Сделайте межстрочный интервал для абзацев <p> в 30px.
На свойство-сокращение font
Для решения задач данного блока вам понадобятся следующие CSS свойства: font.Закомментируйте все стили для абзацев.
Для <p> сделайте шрифт Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.
Для <h2> сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.
На красную строку
Для решения задач данного блока вам понадобятся следующие CSS свойства: text-indent.Сделайте красную строку в абзацах 30px.
Для второго абзаца <p> уберите красную строку.
На вертикальное выравнивание
Для решения задач данного блока вам понадобятся следующие CSS свойства: vertical-align.Поставьте текст в таблице <table> по верхнему краю по вертикали.
Поставьте текст в <th> по центру по вертикали.
Повторите страницы по образцу
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Задачи на работу с продвинутыми свойствами CSS
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
На letter-spacing, word-spacing, font-variant, text-transform
Повторите страницу по данному по образцу:Вы можете открыть этот пример в отдельной вкладке браузера.
На работу с таблицами
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На text-align-last
Для решения задач данного блока вам понадобятся следующие CSS свойства: text-align-last.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На overflow, white-space — pre и nowrap
Для решения задач данного блока вам понадобятся следующие CSS свойства: overflow, white-space в значениях pre и nowrap.В примерах этого блока текст задач копируйте отсюда: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra risus erat, eu imperdiet felis suscipit at. Vivamus rhoncus vel neque non eleifend. Donec adipiscing eros quis molestie sodales. Proin vitae nulla ut sem lobortis scelerisque. Aliquam ultricies porta sem quis fringilla. Quisque pretium enim ut elit fringilla, in adipiscing ligula placerat. Integer id tortor tristique, facilisis lorem sit amet, porta ante. Nulla eget diam in erat hendrerit gravida.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На rgb, rgba, opacity
Для решения задач данного блока вам понадобятся следующие CSS свойства: opacity.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На тени
Для решения задач данного блока вам понадобятся следующие CSS свойства: text-shadow, box-shadow.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На cursor
Для решения задач данного блока вам понадобятся следующие CSS свойства: cursor. Повторите страницу по данному по образцу:Вы можете открыть этот пример в отдельной вкладке браузера.
На text-decoration новый
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На множественные фоны
Для решения задач данного блока вам понадобятся следующие CSS свойства: background.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На text-overflow
Для решения задач данного блока вам понадобятся следующие CSS свойства: text-overflow.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На white-space, tab-size
Для решения задач данного блока вам понадобятся следующие CSS свойства: white-space, tab-size.В примерах этого блока текст задач копируйте отсюда (со всеми отступами, переносами строк и пробелами):
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (везде стоит white-space: pre, вам нужно поставить правильный размер табуляции с помощью tab-size):
Вы можете открыть этот пример в отдельной вкладке браузера.
На word-break, word-wrap, overflow-wrap
Для решения задач данного блока вам понадобятся следующие CSS свойства: word-break, word-wrap. overflow-wrap.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На hyphens
Для решения задач данного блока вам понадобятся следующие CSS свойства: hyphens.Повторите страницу по данному по образцу (в этой задаче в тексте расставлены переносы слов по слогам, работает не во всех браузерах):
Вы можете открыть этот пример в отдельной вкладке браузера.
На user-select
Для решения задач данного блока вам понадобятся следующие CSS свойства: user-select.Повторите страницу по данному по образцу (в этой задаче текст нельзя выделить мышкой):
Вы можете открыть этот пример в отдельной вкладке браузера.
На градиенты
Повторите страницу по данному по образцу (линейный градиент):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (радиальный градиент):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (повторяющийся градиент):
Вы можете открыть этот пример в отдельной вкладке браузера.
На мультиколонки
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На font-face, google fonts
Для решения задач данного блока вам понадобятся следующие CSS свойства: font-face.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На картинку границы
Для решения задач данного блока вам понадобятся следующие CSS свойства: border-image.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На background-clip, background-origin
Для решения задач данного блока вам понадобятся следующие CSS свойства: background-clip, background-origin. Повторите страницу по данному по образцу:Вы можете открыть этот пример в отдельной вкладке браузера.
На filter
Для решения задач данного блока вам понадобятся следующие CSS свойства: filter.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Тривиальные задачи по вёрстке / Habr
Начинаю вести серию статей Это статья про вёрстку html css js, начинаю с самого простого, потом планирую описать более сложные вещи и всякие тонкости и этим видимо так и закончил
Начнем с самого простого.
Макет с одной колонкой по центру
Стандартная задача — разместить контент в середине экрана.
Контентная часть может быть фиксированной или тянущейся, а еще Надо вытянуть центральный блок в высоту на весь экран…
последний раз я использовал такую схему
html
<div>
<div>
Этот блок фиксированного или относительного размера всегда будет горизонтально отцентрован <br /><br />
А еще он растянут на всю высоту экрана
</div>
</div>* This source code was highlighted with Source Code Highlighter.
css
html, body {height:100%;}
.wrap {
/*центрируем*/
position:relative;
width:50%; /*могут быть и пиксели*/
margin: 0px auto ;
/*вытягиваем в высоту*/
height:auto !important;
height:100%;
min-height:100%;
/*украшательства*/
border-left:1px solid #69b401;
border-right:1px solid #69b401;
}
.contentdiv {padding:10px;}
* This source code was highlighted with Source Code Highlighter.тут два вложенных блока, наружний — обёртка, который позиционирует контентную часть, внутренний — сам контент
выдвигаем его на середину указываем ему отступ margin: 0px auto; и ширину width:50%; размеры могут быть и px и %
растягиваем по высоте: для ие и для всего остального, как обычно, разные способы, поэтому высоту указываем 4 раза — 3 раза в блоке и 1 раз в html, body
upd {
почему именно так?
что бы контент не проваливался в нормальных браузерах пишем height:auto!important, а ниже
height:100%
Нормальные браузеры понимают !important как более высокий приоритет и используют его, а
ие6 в следствии своей безумности переписывает «нижним значением» «важное значение»…
}
Для обёртки нельзя использовать вертикальные отступы, это даст ненужный скролл, поэтому все необходимые отступы используем во внутреннем блоке
пример
Футер
Футер, который находится всегда внизу, тоже одна из тривиальных задач, которая у многих вызывает ступор.
способ растягивания контента на всю страницу описаный вышу статье прекрасно дополняется правильным футером
вот пример
если посмотрим в исходный код заметим два новых блока
<div> </div>* This source code was highlighted with Source Code Highlighter.
внутри блока-обёртки wrap
и сам footer после этого блока
<div>
© Vilz 09
</div>* This source code was highlighted with Source Code Highlighter.
поскольку контентная часть у нас растянута на всю страницу в высоту, то футер будет сразу же после неё.Тогда появляется ненужный скролл
и мы сразу же от него избавляемся, отодвигая блок на верх на высоту футера
css
#footer {
position:relative;
height:20px;
margin-top:-21px; line-height: 20px;
vertical-align:middle;
border-top: 1px solid #e8e9e8;
width:100%;
text-align:right;
font-size:10px;
}
* This source code was highlighted with Source Code Highlighter.
Указываем высоту блока и поднимаем блок на эту высоту вверх с помощью верхнего отрицательного margin. В данном случае высота на единицу больше из-за бордера, так же если использовать для футера еще и паддинги, то они сплюсуются с высотой и в margin, соответственно, надо будет указывать общее значение.
upd {
Так же его можно поднять с помощью отрицательного нижнего margin для блока обёртки .wrap
перенести верхний отрицательный марджин из .footer в нижний отрицательный марджин в .wrap
margin:0 auto -21px;
пример
}
Смысл блока, который находится в контентной части, не дать, когда страница растянется, содержанию сайта залезть на футер, в нём мы просто указываем высоту нашего блока
.empty_inner {
height:20px;
}* This source code was highlighted with Source Code Highlighter.
Попап
довольно часто встречающийся вопрос, как разместить небольшой блок фиксированного размера по центру экрана
<div>какой контент </div>* This source code was highlighted with Source Code Highlighter.
вот такой css для блока
.popup {
position:absolute;
top:50%;
left:50%;
width:360px;
height:180px;
margin-left:-180px;
margin-top:-90px;
border:1px solid #69b401;
padding:5px;
}
* This source code was highlighted with Source Code Highlighter.пример
Что мы тут видим? позиционируем абсолютно, и отправляем в центральную точку экрана 50% 50%.
получается, что блок висит левым углом чётко по центру экрана. Естественно это нас не устроит.
Поскольку размеры блока нам известны, то мы просто отодвигаем его влево и вверх на нужное нам число пикселей. Для этого лучше всего подойдет margin, он может принимать отрицательные значения, которые нам и нужны
У этого решения есть один значительный минус. левая верхняя точка у нас получается по середине блока, а от неё ведется позиционирование. Поэтому, когда размеры браузера превышают размеры блока, то он прячется верхней и левой частью за границу экрана без прокрутки.
ну и напоследок
Стандартный шаблон
Вот такой шаблон я использую для начала работы над новой вёрсткой
что в него входит:
index.html со стандартной структурой, и уже подключенными css и js
папка css
reset.css — для сброса стандартных значений браузеров
main.css — основной css файл c описанием нескольких стандартных классов
папка js
jquery.js — мой любимый js фреймворк последней 1.3.1.min версии
app.js — основной файл для собственных js функций
тут же бонусом iepngfix.htc и iepngfix_tilebg.js для полноценной борьбы с неправильными png в ie6
и папка img — просто что бы не создавать каждый раз
ничего сложного, но ускоряет начало работы раз в несколько
скачать
Вот и всё в общем то.
Задачи на позиционирование элементов на CSS
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
На абсолютное позиционирование
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На z-index
Решите следующие задачи с помощью свойства z-index.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На relative
В следующих задачах основной блок стоит по центру с помощью margin: auto, а остальные позиционируются относительно него с помощью свойства position.Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На fixed
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Задачи на работу с продвинутыми селекторами CSS
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
Контекстный селектор
Сделайте селектор, который выберет все абзацы <p>.
Сделайте селектор, который выберет все абзацы <p> внутри дивов <div>.
Сделайте селектор, который выберет все <h3> внутри дивов <div>.
Группировка селекторов
Сделайте селектор, который выберет абзацы <p> и <h3> одновременно.
Сделайте селектор, который выберет все <h3> внутри дивов <div> и одновременно все абзацы <p>.
Сделайте селектор, который выберет все <h3> внутри дивов <div> и одновременно все абзацы <p> внутри дивов <div>.
На id
Сделайте селектор, который выберет все элементы из id=test.
Сделайте селектор, который выберет все абзацы <p> из id=test.
Сделайте селектор, который выберет все абзацы <p> из id=test и одновременно все <h3> (любые!).
На классы
Сделайте селектор, который выберет все элементы с классом test.
Сделайте селектор, который выберет все абзацы <p> с классом test.
Сделайте селектор, который выберет все элементы с классом test и одновременно все элементы с классом hello.
Сделайте селектор, который выберет все абзацы <p> с классом test и одновременно все <h3> с классом hello.
Сделайте селектор, который выберет все абзацы <p> с классом test и одновременно все элементы с классом hello.
На id и классы вместе
Сделайте селектор, который выберет все абзацы <p> с классом test из дива <div> с id=hello.
Сделайте селектор, который выберет все абзацы <p> с классом test из элементов с классом hello.
Сделайте селектор, который выберет все абзацы <p> с классом test из дивов <div> с классом hello.
Сделайте селектор, который выберет все <h3> из класса test.
На мультиклассы
Сделайте селектор, который выберет все элементы, которые имеют одновременно 2 класса: test и hello.
Сделайте селектор, который выберет все абзацы <p>, которые имеют одновременно 2 класса: test и hello.
Сделайте селектор, который выберет все <h3>, которые имеют одновременно 3 класса: test, hello и eee.
Дочерний селектор >
Сделайте селектор, который выберет все <i>, которые лежат непосредственно внутри <p>.
Пример HTML для проверки:
<p> test <i>это выберет</i> test <b><i>это не выберет</i></b></p>Сделайте селектор, который выберет все <li>, которые лежат непосредственно внутри <ul>.
Сделайте селектор, который выберет все <a>, которые лежат непосредственно внутри <p> и одновременно все <a> с классом test.
Соседний селектор +
Сделайте селектор, который выберет все <i>, которые лежат непосредственно после <b>.
Пример HTML для проверки:
<p> <b>test</b> test <i> это выберет </i> test <b> это не выберет </b></p>Сделайте селектор, который выберет все <i>, которые лежат непосредственно после <b> из элемента с id=test.
Пример HTML для проверки:
<p>
<b>test</b> test <i>это выберет</i> test <b>это не выберет</b>
</p>Сделайте каждый абзац, следующий сразу после элемента <ul>, красного цвета.
Родственный селектор ~
Сделайте селектор, который выберет все абзацы <p> идущие после <h2>.
Сделайте селектор, который выберет все абзацы <p> идущие после <h3> из элемента с id=test.
Универсальный селектор *
Сделайте селектор, который выберет все элементы на странице.
Сделайте селектор, который выберет все <i>, лежащие внутри любых элементов, лежащих внутри абзаца <p>.
Пример HTML для проверки:
<p><span><i> выберет </i></span></p>
<p><b><i> выберет </i></b></p>
<p><i> не выберет </i></p>Селекторы атрибутов
Сделайте селектор, который выберет все элементы с атрибутом title.
Сделайте селектор, который выберет все абзацы <p> с атрибутом title.
Сделайте селектор, который выберет все абзацы <p> с атрибутом title, который равен ‘привет’.
Сделайте селектор, который выберет все ссылки <a> с атрибутом href, значение которого начинается на ‘http://’.
Сделайте селектор, который выберет все ссылки <a> с атрибутом href, значение которого заканчивается на ‘.html’.
Сделайте селектор, который выберет все абзацы <p> с атрибутом title, в значении которого есть слово ‘привет’.
Сделайте селектор, который выберет все абзацы <p> с классом, который начинается на ‘top-‘.
Практика по селекторам
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Задания по HTML — htmllab
Задания по основам работы с HTML и CSS
Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML. Задачи по основам.
Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки. Задачи на гиперссылки.
Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения… Задачи по работе с изображениями в HTML.
Задания по углубленной работе с HTML и CSS
Задания по HTML с Emmet. Быстрая верстка, команды Emmet (так называемая шпаргалка Emmet). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Задания по Emmet.
Задания по CSS-селекторам. Селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов. Задания на CSS-селекторы.
Задания по float css. Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задания на CSS Float.
Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right. Задания по CSS-позиционированию.
Задания по верстке форм
- Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в панели навигации Bootstrap.
- Сверстайте форму диспетчера на сайте
- Подключить jQuery-плагин для выбора даты/месяца из поля
- Создайте чекбокс по аналогии с социальной сетью.
- Создайте форму регистрации посетителя сайта
- Создайте форму подобной той, что сортирует товары в Яндекс.Маркет
Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Задания на кроссбраузерность.
Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию.
Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Задания на media queries.
Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания по верстке psd макета.