| |
|
|
| | например, я присваиваю h1 какой-то стиль 1
а можно после этого присвоить стиль 2 так, чтобы действовал только он? | |
| |
|
|
| |
|
|
| |
для: kb_nn
(08.04.2009 в 18:06)
| | | да.пишете тот же селектор ниже в коде и перекрываете стили | |
| |
|
|
| |
|
|
| |
для: AlexSol
(08.04.2009 в 20:33)
| | | так мне нужны они оба.
в своем месте и в свое время. | |
| |
|
|
| |
|
|
| |
для: kb_nn
(08.04.2009 в 18:06)
| | | В CSS как в армии - выполняется последний приказ, и все предыдущие приказы,
противоречащие первому, - отменяются.
Например, надо вашему H1 присвоить следующий стиль:
левый, верхний и правый бордеры - красного цвета, а нижний - голубого:
Млжно это оформить так:
h1 {border-left: 1px solid red; border-top: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid blue}
|
А можно сделать эту запись покороче, учитывая, что последний приказ отменит предыдущие:
h1 {border: 1px solid red; border-bottom-color: blue}
|
т.е. поначалу "приказали", чтобы все бордеры были красными, а потом ТОЛЬКО для нижнего бордера отдали другой "приказ". Именно для нижнего бордера браузер изменит цвет на голубой, а к трём остальным применит предыдущий приказ - сделает их красными. Толщину и стиль для нижнего бордера браузер сформирует, основываясь на первом "приказе", так как последний ни толщину, ни стиль бордера не меняет.
Соответственно, можно изменять правила не только в пределах одной записи для одного селектора,
а можно для одного селектора указать несколько записей. Для вышеописанного случая так:
h1 {border: 1px solid red}
/* ... */
/* какие-то иные правила для других селекторов */
/* ... */
h1 {border-bottom-color: b]blue[/b]}
|
Ну и, наконец, прописанные в CSS стили можно изменять в процессе работы страницы при помощи Javascript'a - это и есть тот самый DHTML (динамический язык разметки). Javascript тоже действует по-"уставному", как в армии.
А вот товарищи, создавшие сам HTML, в этом деле поступили как раз наоборот - первый приказ исполняется, а все последующие - игнорируются. У таблицы бордер БУДЕТ, несмотря на то, что он сразу же отменён:
<table border="1" border="0">
<tr>
<td>cell</td>
</tr>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(08.04.2009 в 22:57)
| | | тогда так- я могу вернуть элементу стили, действующие по умолчанию в HTML? | |
| |
|
|
| |
|
|
| |
для: kb_nn
(09.04.2009 в 09:51)
| | | Не очень грамотно выразились: стили - это именно стили, к HTML стили никакого отношения не имеют.
Значится, так.
"По жизни" имеем следующее:
1. Далеко не ВСЕ свойства тегов, кои можно устанавливать таблицами стилей, имеют
определённые дефолтные значения. В RTFM так и пишется - "The property has no default value".
Поэтому "вернуть то, чего нет и не было" - это задачка для Федота-стрельца, который может "пойти
туда не знаю куда и принести то не знаю что". Прочим смертным это не доступно. :-)
[Строго говоря, ИНОГДА это значение всё же имеется, и именуется оно inherit. НО ДАЛЕКО НЕ
ВСЕГДА.]
2. А предустановленные в разных браузерах дефолтные значения именуются по-разному.
Например, свойство position в MSIE по умолчанию имеет значение static, а в прочих
браузерах дефолтное значение этого свойства стиля - relative (а про static они вовсе нечего
не знают). Так что по уму надо будет перелопатить туеву хучу документации (RTFM), чтобы узнать -
что и для какого браузера возвращать (если есть, что возвращать, конечно).
А вот "по-уму" имеется возможность вернуть и дефолтное. И даже можно вернуть то, "чего нет и не
было". Научитесь - станете именовать себя "Федотом-стрельцом" :-)).
В RTFM этой фичи, по-моему, не описано - я, по крайней мере, не встречал.
Но сразу ПРЕДУПРЕЖДАЮ: если какое-то значение стиля прописано в блоке <STYLE></STYLE>
(или во "внедряемом" внешнем файле CSS), то этот способ НЕ РАБОТАЕТ.
А вот если у тега непосредственно в атрибуте STYLE этого тега указано какое-то значение стиля (или
же если значение стиля установлено скриптом) то тогда можно вернуть и дефолтное и даже "то, чего
не было". Способ заключается в присвоении свойству стиля ПУСТОГО значения. Вот вам пример,
где показаны все 3 случая:
<style>
p {color: red}
div, p {border: 1px solid black; margin: 0}
input {width: 100%}
li {margin-top: 5px}
hr {margin: 20px 0}
</style>
<hr>
<div id="obj1" style="padding-left: 20px">
1. ДИВ - значение свойства padding-left прописано в самом теге.
</div>
<li><a href="#" onclick="document.getElementById ('obj1').style.paddingLeft = ''; return false">
МОЖНО вернуть как бы "дефолтное значение" внутреннего отступа (которого на самом деле нет)</a>
<hr>
<input id="obj2" value="2. ИНПУТ - значение свойства border-color устанавливается скриптом.">
<script>document.getElementById ('obj2').style.borderColor = 'red';</script>
<li><a href="#" onclick="document.getElementById ('obj2').style.borderColor = ''; return false">
МОЖНО вернуть дефолтный цвет бордера</a>
<hr>
<p id="obj3">3. ПАРАГРАФ - значение свойства color установлено в стилевом блоке</p>
<li><a href="#" onclick="document.getElementById ('obj3').style.color = ''; return false">
Вернуть исходный цвет шрифта НЕЛЬЗЯ</a>
<br>PS. Строго говоря, вернуть в этом случае вообще-то МОЖНО, но не во всех браузерах - надо как
бы "зачеркнуть" написанное в скриптовом блоке. Браузер MSIE это поддерживает. В других - нельзя.
<hr>
|
| |
| |
|
|
