Заявление об авторских правах: авторские права на эту статью принадлежат оригинальному автору. Перевод предназначен только для справки отечественных читателей
. Краткое содержание этой статьи: Наиболее часто используемые приемы CSS, такие как закругленные углы, буквицы и т. д.
В предыдущем переводе «8 трюков CSS, состоящих из одного предложения», были представлены 8 очень полезных трюков CSS, состоящих из одного предложения. На этой неделе я представлю вам аналогичную статью, в которой представлены некоторые из наиболее часто используемых трюков CSS, или она называется «a». CSS-трюк. Конечно, я считаю, что у каждого дизайнера есть какие-то личные предпочтения. Лично мне некоторые приемы в статье не слишком нравятся.
1. Не используйте эффект закругленных углов изображения
<div id="container">
<b класс="rtop">
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</б>
<!–здесь находится контент -->
<b class="rbottom">
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</б>
</div>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: высота блока: 1 пиксель: скрыто};
.r1{поле: 0 5 пикселей}
.r2{поле: 0 3 пикселя}
.r3{поле: 0 2 пикселя}
.r4{margin: 0 1px; height: 2px}
(Многим нравится использовать этот прием закругления, но лично мне он не очень нравится. Хотя мне не нужно делать картинки со скругленными углами, эти дополнительные теги всегда чувствую себя лишним)
2. Стилизованный список
<ol>
<ли>
<p>Это первая строка</p>
</li>
<ли>
<p>Вот вторая строка</p>
</li>
<ли>
<p>И последняя строка</p>
</li>
</ol>
ол {
шрифт: курсив 1em Georgia, Times, с засечками;
цвет: #999999;
}
ол п {
шрифт: обычный .8em Arial, Helvetica, без засечек;
цвет: #000000;
}
Мне тоже очень нравится этот эффект. К серийным номерам можно применять разные шрифты.
3. Форма без таблицы
4. Техника двойных кавычек
5. Градиентный эффект слова
6. Вертикальное центрирование.
Для получения дополнительной информации см. исходный текст
10. Буквица
<p class="introduction"> Этот абзац имеет класс «introduction». ваш браузер поддерживает псевдокласс «первая буква», первая буква будет буквицей </p>
p.introduction:first-letter {.
размер шрифта: 300%;
начертание шрифта: жирный;
плавать: влево;
ширина: 1эм;
}