1 Тема от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Тема: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

Имеем блок с ссылками:
<div class="share42init"> <a href="http://itpmr.ru/">сылка1</a>,  <a href="http://itpmr.ru/">сылка2</a> текст</div>

Применяем к нему стиль
<style>
.share42init {opacity: 1;} // полностью непрозрачый блок, по умолчанию
.share42init  a {opacity: 0.3;} // по умолчанию сылки с прозрачностью 0.3
.share42init:hover a {opacity: 0.6;} // при наведении на блок, ссылки прозрачны на 0.6
.share42init:hover {background: #DCDCDC;}// при наведении на блок, красим фон
.share42init:hover a:hover {opacity: 1;}// при наведении на блок, навели на сылку - непрозрачная ссылка
</style>

Поделиться

2 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

Подсказки по CSS!

Таблицы:
<table>
  <tr>    <td>элемент строки 1</td> <td>элемент строки 2</td>  </tr>
  <tr>    <td>элемент 2-й строки 1</td> <td>элемент 2-й строки 2</td>  </tr>
</table>

Поделиться

3 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

Классы:
В html код  <a href="" class="class1">текст</a>     .class -  применяется ко всем элементам.
a.class1 {color: #FFB;}

раскраска элементов класса по номерам:
.class1:nth-child(3) { background:red;}



В html код  <a href="" id="class2">текст</a>    #class2 - применяется 1 раз.
#class2 {color: red;}

Поделиться

4 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

Псевдоклассы   (htmlbook.ru/css/cat/pseudoclass)
a:link -  к ссылкам, которые еще не посещались пользователем
a:active - стиль активной ссылки
:hover - наведение мышкой


Таблица HTML кодов цветов:
stm.dp.ua/web-design/color-html.php

Поделиться

5 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

Пример с псевдоклассом nth-child:

<html>
<head>
<title>Пример</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <link rel="stylesheet" href="les.css" type="text/css" media="all" />
</head>
<body>
    <div class="whitewine">
  <strong>Виноград для белого вина:</strong>
<a href="/tutorials/css/lesson7_ex2.php">Рислинг</a>
<a href="/tutorials/css/lesson7_ex2.php">Шардонэ</a>
<a href="/tutorials/css/lesson7_ex2.php">Пино Блан</a>
123
</div>
    <p><strong>Виноград для красного вина:</strong></p>
    <ul>
    <li class="redwine"><a href="/tutorials/css/lesson7_ex2.php">Вино</a> <a href="/tutorials/css/lesson7_ex2.php">Кабернэ</a> <a href="/tutorials/css/lesson7_ex2.php">Совиньон</a></li>
    <li><a href="/tutorials/css/lesson7_ex2.php" class="redwine">Мерло</a></li>
    <li><a href="/tutorials/css/lesson7_ex2.php" class="redwine">Пино Нуар</a></li>
    <li class="redwine">456</li>
    </ul>
    <p><a href="dok.htm">ссылка без класса</a> - она остаётся синей.</p>
</body>
</html>

Post's attachments

Primer.jpg, 25.08 kb, 441 x 261
Primer.jpg 25.08 kb, 522 downloads since 2013-11-15 

Поделиться

6 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

les.css


a {color: blue;}

.whitewine a {color: #FFBB00;}

a.redwine {color: #800000;}


a.redwine:nth-child(1) {color:red;}
.redwine a:nth-child(3) {color:red;}

Поделиться

7 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

Синтаксис обращения к под-элементу li стиля pagelinks:
.pagelinks ul li

Поделиться

8 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

примеры display (css)

ruseller.com/shporacss.php?id=29
shpargalkablog.ru/2012/04/display-block-inline-css.html

Поделиться

9 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: CSS прозрачность opacity для блока с ссылками. Шпаргалка по CSS!

в css файле:
.class1.class2 - задаем стиль для элемента, у которого указаны сразу 2 класса.

Пример:
<div class="class1 class2">123</div>

Поделиться