HTML\CSS → Наследование и приоритеты в CSS

29 мая 2015HTML5

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

Приоритетность в CSS:

Правила !important
CSS-правила в тэге style самые приоритетные;
за ними идет селектор с id;
затем селектор с классом .class;
затем селектор с именем тэга h1.

HTML\CSS → Краткая запись свойств padding, margin

29 мая 2015HTML5

Существует несколько способов записи свойств padding и margin.

padding: 10px;
padding: 5px 10px;
padding: 5px 10px 15px;
padding: 5px 10px 15px 20px;

Одинаковые отступы со всех сторон.
Отступы сверху и снизу 5px, справа и слева 10px.
Отступ сверху 5px, слева и справа 10px, снизу 15px.
Разные отступы со всех сторон, в порядке верхний, правый, нижний, левый.

HTML\CSS → DIV по центру, текст по центру

29 мая 2015HTML5

Чтобы отцентрировать блочный элемент по горизонтали — указываем ему ширину меньше родителя и задаем отступы слева и справа auto.

div.center {
    width:100px;
    margin:0 auto;
}

Отцентрировать текст внутри блока по вертикали и горизонтали блока можно так:

.block{
    height:100px;
    line-height:100px;
    text-align:center;
    vertical-align:center;
}

HTML\CSS → Загрузка файлов через форму не работает

29 мая 2015HTML5

Поле для загрузки файлов — это тэг <input> с типом file. Для этого поля обязательным атрибутом является name. Если его не задать, то на сервере вы не сможете найти загруженный файл. Также, чтобы поле заработало и браузер смог передать выбранный файл, необходимо добавить форме атрибут enctypeсо значением multipart/form-data.

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
</form>

HTML\CSS → Выбор нескольких вариантов в выпадающем списке Select

28 мая 2015HTML5

В выпадающем списке <select> можно реализовать множественный выбор вариантов, для этого нужно добавить к тэгу<select> атрибут multiple, а также дописать символы [] к имени списка (это нужно для того, чтобы браузер отправлял все выбранные значения в виде массива).

Пример:

<select name="days[]" size="7" multiple>
    <option selected>Понедельник</option>
    <option>Вторник</option>
    <option selected>Среда</option>
    <option>Четверг</option> ...
</select>