LINUX.ORG.RU

Нубские вопросы по CSS о наследовании и таблицах

 


0

1

1. Хочется определить font-* свойства для всех элементов, к которым эти свойства применимы внутри определённого div-контейнера.

Пробовал так:

<div class="sample">
<h1>...</h1>
<table>
<tr>
<td>...</td>
</tr>
</table>
</div>
.sample {
 font- ... // перечисление нужных свойств
}

Не работает: текст внутри h1 и таблицы отображается по старому. Неужели придётся добавлять упоминание класса внутри каждого элемента, к которому я хочу применить описанный стиль?

2. Как правильно нарисовать классическую таблицу? Применение свойства border к тегу td приводит к появлению двойных границ между ячейками. Можно ли этого избежать без применеия border-top/bottom/left/right?

★★

Ответ на: комментарий от lampslave

1. Конкретный код мало отличается от примера:

<div class="report">
<pre>
<h3>ЗАГОЛОВОК ОТЧЁТА</h3>
<table>
<tr>
<th>Столбец 1</th>
...
</table>
</pre>
</div>

.report {
        font-size: medium;
        font-weight: normal;
}

Целью является вывод содержания отчёта моноширинным шрифтом одного размера, но с сохранением логической структуры.

2. За border-collapse спасибо.

dumka ★★
() автор топика
Последнее исправление: dumka (всего исправлений: 2)
Ответ на: комментарий от dumka

Целью является вывод содержания отчёта моноширинным шрифтом одного размера, но с сохранением логической структуры.

Вы забыли самое главное - доктайп. И, видимо, не понимаете сути элемента pre. Если в ячейках будет преформатированный текст, добавьте им white-space: pre или pre-wrap.

<!DOCTYPE html>

<meta charset="utf-8">

<style>
    .report {
        font-family: monospace;
        font-size: 12px;
    }
    .report-header {
        font-size: 12px;
        font-weight: normal;
        text-transform: uppercase;
    }
    .report-table {
        border-collapse: collapse;
    }
    .report-table th {
        border: 1px solid #000;
        font-weight: normal;
    }
    .report-table td {
        border: 1px solid #000;
    }
</style>

<div class="report">
    <h3 class="report-header">Заголовок отчёта</h3>
    <table class="report-table">
        <tr>
            <th>Столбец</th>
            <th>Столбец</th>
        </tr>
        <tr>
            <td>Текст</td>
            <td>Текст</td>
        </tr>
    </table>
</div>
lampslave ★★
()
Ответ на: комментарий от lampslave

Ещё бы тег font предложили использовать.

А чем плох способ предложенный drake?
Вообще, каким версиям CSS удовлетворяет такая нотация?

dumka ★★
() автор топика
Ответ на: комментарий от lampslave

Вы забыли самое главное - доктайп.

Да есть там доктайп. Это XHTML 1.0 Strict. Я привёл только фрагменты кода страницы.

И, видимо, не понимаете сути элемента pre.

За monospace спасибо. Я надеялся, что кто-нибудь исправит мои неуклюжие pre.

Всё же очень жаль, что свойства font-* не наследуются в h3 и th/td.

Спасибо.

dumka ★★
() автор топика
Ответ на: комментарий от dumka

А вот теперь попробуйте доктайп убрать и посмотрите, что будет. Доктайп обязательно нужно прописывать везде, в том числе в примерах.

Свойства font* наследуются, если они не переопределены, внимательнее смотрите мой пример.

lampslave ★★
()
Ответ на: комментарий от lampslave

Тем, что так писать нельзя, вот и всё :) Примите как данность.

Принимаю.

Ликбез: в какой версии CSS появилась возможность обозначения селекторов в виде ".class tag" вместо «tag.class»?

dumka ★★
() автор топика
Последнее исправление: dumka (всего исправлений: 1)
Ответ на: комментарий от lampslave

Свойства font* наследуются, если они не переопределены, внимательнее смотрите мой пример.

Ну font-weight, например, удобно сразу определить в .report, а вместо этого вы определяете его в подчинённых .report-header и .report-table, из чего я делаю вывод, что это свойство не наследуется.

dumka ★★
() автор топика
Последнее исправление: dumka (всего исправлений: 1)
Ответ на: комментарий от dumka

Ликбез: в какой версии CSS появилась возможность обозначения селекторов в виде ".class tag" вместо «tag.class»?

Это разные селекторы, не путайте их:

<div class="class"><tag></tag></div>

<tag class="class"></tag>

Без разницы, в какой версии, главное, что оба селектора сейчас поддерживаются.

lampslave ★★
()
Ответ на: комментарий от dumka

Совсем даже не удобно, потому что если потом нужно будет что-то выделить жирным внутри .report, то жирности не будет ни у одного элемента (h, b, strong), придётся её прописывать через css, а бухи этого делать не умеют и вообще это маразм.

Читайте внимательно спецификацию CSS, там всё про наследование есть. Для уверенного понимания надо помнить следующее: первоначально ни один элемент не имеет ни одного свойства отображения. HTML - это только логическая разметка. После того, как она обработана, браузер отображает её с использованием собственной таблицы стилей. Т.е. как будто у вас в самом начале кода появляется ещё одна таблица стилей. Потом уже вы эту таблицу начинаете переопределять своими стилями.

lampslave ★★
()
Ответ на: комментарий от dumka

th - тег для ячеек-заголовков страниц, так сложилось что в большинстве браузеров они выделяются жирным, font-weight: normal; это переопределяет. Всё всегда наследуется, но может переопределятся.

lampslave уже двинут ынтерпрайзом, делай проще пока учишься. Вообще-то всегда надо делать проще.

table.report {
    font-family: monospace;
    border-collapse: collapse;
}
<table class="report">
	<tr>
		<th>...</th>
		<td>...</td>
	</tr>
</table>

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

Я не двинутый ынтерпрайзом, просто надо с самого начала делать нормально, чтобы не переучиваться потом. В частности, table перед .report писать не нужно, это лишнее. И monospace в принципе для таблицы указывать не обязательно, шрифт и так наследоваться будет.

lampslave ★★
()
Последнее исправление: lampslave (всего исправлений: 1)
Ответ на: комментарий от lampslave

После того, как она обработана, браузер отображает её с использованием собственной таблицы стилей.

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

Спасибо, очень помогли.

dumka ★★
() автор топика
Ответ на: комментарий от Kalashnikov

Всё всегда наследуется, но может переопределяться.

Это меня, по всей видимости, и смутило.

А можно посмотреть как выглядит таблица стилей того или иного браузера, чтобы заранее узнать, что переопределяется, а что нет? Или это выясняется только эмпирически?

dumka ★★
() автор топика
Ответ на: комментарий от dumka

ты уверен, что хочешь создать глобальное правило?

перевод названия CSS говорит о иерархии

правильно делать специфичные указатели:

.report pre h3 {

.report pre table tr th {

или, например

.report pre h3, .report pre table {

способ drake не плох

можно вообще написать

* {

enjoy

moonglow
()
Ответ на: комментарий от dumka

А можно посмотреть как выглядит таблица стилей того или иного браузера, чтобы заранее узнать, что переопределяется, а что нет? Или это выясняется только эмпирически?

можно, но это специфично, а потому бесполезно

например, гугл явно задают белый цвет фона и черный - текста

это не просто так, потому что неизвестно, какие цвета по-умолчанию у фона и у текста

по-этому, лучше не «таблицы стилей» искать (/usr/lib/firefox), а делать как гугл

moonglow
()

Они наследуются, фишка в дефолтных стилях браузера. Если тебе такая самодеятельность не нужна, можешь начать стиль с:

* { font: inherit; }
Правда придётся потом выставить font-weight и font-style для всяких i, em, b, strong, th и т.п. вручную (что логично).

Можно пойти дальше и сбросить ещё и margin/padding:

* { margin: 0; padding: 0; }
но тоже придётся выставлять везде вручную, в т.ч. в параграфах и кнопках.

Deleted
()
Ответ на: комментарий от dumka

Ну, обычно они минималичстичны и вполне логичны (типа жирный для b, отступы слева для li) и более-менее одинаковы у всех нормальных браузеров. В любом инспекторе можно проследить всю иерархию, в т.ч. и браузерные таблицы.

Kalashnikov ★★★
()
Ответ на: комментарий от dumka

У тебя слишком простые вопросы, ответы на них есть в любой книжке по css. Вангую кучу костылей в том что ты делаешь. Прочти хотя бы одну книжку по css, легче будет.

Мне нравится «CSS: Missing manual» (Большая книга CSS) Макфарланда. За пару дней освоишь.

zekka
()
Ответ на: комментарий от zekka

Про костыли всё правда. Задача заключалась в том, чтобы автоматизировать составление несложного отчёта для внутреннего использования. Требования соответствующие. Заниматься web-разработкой всерьёз я не намерен, но, на всякий поворот судьбы, книжку возьму на заметку. Спасибо!

dumka ★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.