10 интересных примеров по CSS
1. Как сделать, чтобы текст ссылки был одного цвета, а подчеркивание другого?
<html>
<head>
<style type="text/css">
a {color:red;}
a span {color: blue;}
</style>
</head>
<body>
<a href="#"><span>Текст ссылки</span></a>
</body>
</html>
2. Как убрать вокруг формы отбивку по умолчанию?
form {margin: 0;}
3. Как убрать рамку картинки, на которой стоит ссылка?
a img {border: none;}
4. Как выравнять картинку вертикально по центру в строке?
img.middle {vertical-align: middle;}
5. Как задать цвет для hr, чтобы работало во всех браузерах?
hr {
color:blue;
background-color:blue; /* для Opera и Mozilla */
height: 1px;
border-width:0px; /* убирает рамки вокруг разделителя */
}
6. Как увеличить расстояние между элементами списка?
li {margin-bottom: 1em;}
7. Как сделать отступ первой строки в параграфе?
p {text-indent: 20px;}
8. Как сделать выступ первой строки в параграфе?
p {
padding-left: 40px;
text-indent: -20px;
}
9. Как настроить cellspacing и cellpadding с помощью CSS?
table {border-collapse: collapse; /* cellspacing=0 */}
table td {padding: 0px; /* cellpadding=0 */}
table {border-collapse: separate; border-spacing: 5px; /* cellspacing=5 */}
table td {padding: 3px; /* cellpadding=3 */}
10. Как выравнять маркеры (”пули”) списка по вертикали по центру?
ul {list-style: none;}
li {padding-left:15px; background: url (bullet.gif) no-repeat left center;}
Аналогичный образом мы уже ранее оформляли древовидный список.
22 мая 2009 в 12:31
1. Как сделать, чтобы текст ссылки был одного цвета, а подчеркивание другого?
Ну не надо заниматься копипастом, пример - полная лажа. Всё делается проще - в роли подчёркивания выступает нижняя граница ссылки:
a{text-decoration:none; color: red; border-bottom: 1px blue solid}
И не надо париться со span’ом
[Ответить]
ArtShok:
мая 23, 2009 в 13:14
Ну.. solid так себе, если уж используете нижнюю границу, то уж сделайте dashed для красоты.
А span’ом вы зря принебрегаете, если знать как использовать, то можно лишний раз код страницы не загружать.
[Ответить]
4 июня 2009 в 8:53
Хм. Искал прикольные примеры по СSS, на всех сайтах один и тот же текст в разных оформлениях.
[Ответить]
ArtShok:
июня 5, 2009 в 21:28
Прикольные примеры это хорошо. Но что Вас именно интересует? Оформление списков, параграфов, ссылок..?
[Ответить]