Форум Сайтостроение Веб-строительство

Не могу разобраться в CSS

12 3
[Удален]
1570

Всем привет. Не могу разобраться в элементарном, помогите пожалуйста.

Собственно сайт http://nametle.com

На нём забацал кнопку "читать далее" таким образом: 

<div class="continue">

<a href="">Читать далее...</a>

</div>

Стиль кнопки: 

.continue {

	background: transparent url('images/read_more.png') 0 0 no-repeat;

	float: right;

	color:#fff;

	width: 140px;

	height: 31px;

	font-size:14px;

	padding-top: 6px;

	padding-left: 15px;

	margin-top: 0px;

	font: normal 14px Georgia;

	font-weight:normal;

	text-decoration:none;

	text-transform:none;

}



.continue:hover{

	background: transparent url('images/read_more.png') 0 0 no-repeat;

	float: right;

	color:#fff;

	width: 140px;

	height: 31px;

	font-size:14px;

	padding-top: 6px;

	padding-left: 15px;

	margin-top: 0px;

	font: normal 14px Georgia;

	text-decoration:underline;

	text-transform:none;

}

Я указал свойству color значение #fff, не значит ли это то, что текст в блоке должен быть белым? Знаю что не значит, т.к. ни к каким изменениям не приводит :crazy: Стиль ссылки наследуется отсюда: 

		#content .post .post-entry a {

			color: #999;

			text-decoration: underline;

		}

		

		#content .post .post-entry a:hover {

			color: #ccc;

			text-decoration: underline;

		}

Я пробовал указать: 

.continue a{

	color: #fff;

}

и даже: 

<div class="continue">

<a class="morelink" href="">Читать далее...</a>

</div>



a.morelink {

	color: #fff;

}

Но так же ничего не происходит. Я понимаю, что очень мало понимаю в CSS, но пытаюсь разобраться в нём. Подскажите решение пожалуйста и если не трудно прокомментируйте почему делать надо именно так.

Angelo
На сайте с 01.01.2007
Offline
125
Angelo
#1

как вариант !important добавить

color: #fff !important;

ParserYa
На сайте с 04.10.2010
Offline
29
ParserYa
#2

Наследуется из свойства "#content .post .post-entry a" потому, что здесь больше уровень вложений, а значит это приоритетные. Если бы вы написали 


#content .post .post-entry .continue a {color:#fff}

То это было бы приоритетнее. Псевдо-класс !important - предложенный Angelo как раз решение.

Вывод на КредитЕвропаБанк Упал доход яндекс выгода?
[Удален]
#3

ParserYa, Angelo, спасибо вам. !important тоже пробовал кстати, но выходит неправильно пробовал.

Теперь мне понятны эти пункты 3 и 4:

Приоритеты рассчитываются таким образом (от большего к меньшему):

1. свойство задано при помощи !important;
2. стиль прописан напрямую в теге;
3. количество идентификаторов (#id) в селекторе (чем больше, тем больше приоритет);
4. количество классов (.class) и псевдоклассов (: pseudoclass) в селекторе;
5. количество имён тегов в селекторе.

Как полезно бывает спросить совета)). Ещё раз спасибо.

DZ
На сайте с 03.02.2011
Offline
2
DoctorZlo
#4

На будущее: используй FireFox + FireBug. Тогда сможешь легко и непринуждённо посмотреть какие CSS-свойства откуда применяются и, соответственно, в какой последовательности.

(Взять FireBug можно по официальной ссылке getfirebug.com)

S
На сайте с 10.03.2008
Offline
94
Steepler
#5

Я указал свойству color значение #fff, не значит ли это то, что текст в блоке должен быть белым? ..

Неправильно указали цвет. Значение цвета 6 знаков: #ffffff.

Разрабатываем сайты (http://www.rclsoft.ru/)
C
На сайте с 28.01.2010
Offline
70
Counselor
#6
Steepler:

Неправильно указали цвет. Значение цвета 6 знаков: #ffffff.

И давно так?

Это - личная подпись. Здесь обычно ставят ссылки на всякие кривые сайты, надеясь получить "жирный бек".
S
На сайте с 10.03.2008
Offline
94
Steepler
#7
Counselor:
И давно так?

Так было всегда: два для красного, два для зеленого и два для синего.

T
На сайте с 20.03.2007
Offline
67
Toy
#8
Неправильно указали цвет. Значение цвета 6 знаков: #ffffff.

Сразу видно вы знаток.

The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

http://www.w3.org/TR/css3-color/

S
На сайте с 10.03.2008
Offline
94
Steepler
#9

Спасибо Toy за то что он меня поправил. Напишите так:

.continue a {

....

}

правило ".continue" - применяется для текста внутри "<div>", но не для текста внутри дочерних элементов. Если нужно чтобы текст дочернего элемента "<a>" стал белым примените правило ".continue a"

Пример:

<html>

<head>

<style type="text/css">

body {

background-color: black;

}

.continue {

color: green;

}

.continue a {

color: #ffffff;

}

</style>

</head>

<body>

<div class="continue">

Текст до ссылки<a href="#">Читать далее...</a>текст после ссылки.

</div>

</body>

</html>

ParserYa
На сайте с 04.10.2010
Offline
29
ParserYa
#10
Steepler:
применяется для текста внутри "<div>", но не для текста внутри дочерних элементов.

Бред.. свойство color спокойно наследуется для всех дочерних элементов. Другое дело, что ссылка <a> имеет, по умолчанию, имеет определенный цвет, который, скорее всего, будет отличаться от остального текста.

Ссылке без разницы, что весь текст серо-буро-малиновый до тех пор, пока вы не скажете 

div /*родительский блок*/ a {color:серо-буро-малиновый}
12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий