Как изменить размер шрифта одного раздела в материализации css?

Question

Я пытаюсь разместить в одном разделе страницы большое количество текста. Я использую материализовать css framework на моем сайте, но я не знаю, как изменить размер шрифта в этом разделе.

Вот мой раздел:

#submissions {
  font-size: 10px !important;
}

<section id="submissions" class="white">
  <div class="row">
    <div class="col s12">
      <div class="section">
        <br/><br/>
        <h4 class="text-grey center-align">Submissions</h4>
        <div class="divider"></div>
        <div class="col s6">
          <!-- And here is a lot of content that I want to contain -->
          test test  test test  test test  test test  test test  test test 
        </div>
      </div>
    </div>
  </div>
</section>

Для этого я пытаюсь использовать стили. css примерно так:

#submissions {
    font-size: 10px !important;
}

Может кто-нибудь может мне посоветовать что-то?

Answer 1

materialize css не имеет встроенной поддержки для изменения размера шрифта, поэтому вам придется либо добавить отдельный идентификатор или класс, чтобы подключить ваш css.

, если вы только хотите изменить размер шрифта содержимого текста (добавьте #csshook в таблицу стилей):

<div class="col s6" id="csshook">
       <!-- And here is a lot of content that I want to contain -->
       test test  test test  test test  test test  test test  test test 
</div>

, если вы хотите использовать как заголовки, так и текст (добавьте .csshook в таблицу стилей):

h4 class="text-grey center-align csshook">Submissions</h4>
<div class="divider"></div>
   <div class="col s6 csshook">
      <!-- And here is a lot of content that I want to contain -->
      test test  test test  test test  test test  test test  test test 
   </div>

в зависимости от того, какой результат вы предпочитаете, используйте id или класс для изменения размера шрифта.

также убедитесь, что вы инициализируете свою таблицу стилей ПОСЛЕ материализация css таблица стилей на вашей странице.

Answer 2

Таблица стилей по умолчанию, которая материализует подачу, может быть настроена для вашего сердца с помощью Sass. (Вы все равно должны использовать Sass, потому что он потрясающий ).

Загрузите версию Sass , и внутри вы найдете файл css для каждого компонента. В _typography.s css глобальный размер шрифта устанавливается в начале:

html{
  line-height: 1.5;

  @media only screen and (min-width: 0) {
    font-size: 14px;
  }

  @media only screen and (min-width: $medium-screen) {
    font-size: 14.5px;
  }

  @media only screen and (min-width: $large-screen) {
    font-size: 15px;
  }

  font-family: $font-stack;
  font-weight: normal;
  color: $off-black;
}

Здесь вы можете видеть, что мы начинаем с 14px и двигаемся до 15px соответственно. Если вы измените это и сохраните, sass автоматически перекомпилирует материализацию. css с обновленными значениями. Обратите внимание, что если вы хотите изменить глобальные настройки для тегов заголовка, вы можете сделать это в _variables.s css:

$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
$off-black: rgba(0, 0, 0, 0.87) !default;
// Header Styles
$h1-fontsize: 4.2rem !default;
$h2-fontsize: 3.56rem !default;
$h3-fontsize: 2.92rem !default;
$h4-fontsize: 2.28rem !default;
$h5-fontsize: 1.64rem !default;
$h6-fontsize: 1.15rem !default;

И наконец, не очень хорошо, чтобы текст свободно перемещался в элементе div. Я бы добавил тег ap:

<div class="col s6">
          <!-- And here is a lot of content that I want to contain -->
          <p>test test  test test  test test  test test  test test  test test</p>
        </div>

И, наконец, наконец, вы всегда можете переопределить базовый размер шрифта в файле css следующим образом:

body {
    font-size: 16px;
}

Answer 3

Если вы хотите, чтобы оба текста большого размера, просто добавьте один и тот же класс в <section class="something"> и <div class="col s6 domething">

.submissions {
  font-size: 25px !important;
}

<section class="white submissions">
  <div class="row">
    <div class="col s12">
      <div class="section">
        <br/><br/>
        <h4 class="text-grey center-align">Submissions</h4>
        <div class="divider"></div>
        <div class="col s6 submissions">
          <!-- And here is a lot of content that I want to contain -->
          test test test test test test test test test test test test
        </div>
      </div>
    </div>
  </div>
</section>

или

Попробуйте два класса сравнения ..

.submissions {
  font-size: 25px !important;
}

.submis {
  font-size: 18px !important;
}

<section class="white submissions">
  <div class="row">
    <div class="col s12">
      <div class="section">
        <br/><br/>
        <h4 class="text-grey center-align">Submissions</h4>
        <div class="divider"></div>
        <div class="col s6 submis">
          <!-- And here is a lot of content that I want to contain -->
          test test test test test test test test test test test test
        </div>
      </div>
    </div>
  </div>
</section>

Answer 4

Вы используете "id" и "class" для определения элемента, который не является правильным.

Попробуйте, как показано ниже.

<section id="submissions">