Четыре простых совета по CSS

У меня есть что-то вроде любви и ненависти к CSS. До того, как я переключился на компьютерное программирование, я много занимался графическим дизайном. Поэтому, когда я впервые начал создавать веб-страницы, меня очень расстраивало, что я не мог заставить их выглядеть так, как хотел. Мой опыт работы в графическом дизайне — это и подарок, и проклятие. Конечно, я узнал об интерлиньяже, кернинге, реках, вдовах, сиротах, рантах и типе оправданного против тряпочного. Знание этих деталей и знание того, что я могу манипулировать ими с помощью CSS, но еще не обладающее знаниями для этого, очень расстраивает. Пока я не изучу новый и полезный CSS. Затем я получаю тот «щелчок», о котором говорят программисты. Я хочу узнавать все больше и больше до такой степени, что буду часами просматривать страницу «О нас» на моем локальном хосте, пока она не станет идеальной. Даже если я единственный человек, который когда-либо увидит это о странице, процесс обучения является ключом. Я собираюсь дать вам пару советов по CSS, чтобы, когда кто-то увидит вашу веб-страницу, вы с гордостью показали ее.

Совет № 1: дочерний комбинатор

«Дочерний комбинатор» соответствует элементам второго селектора, которые являются прямыми дочерними элементами первого элемента, который вы ему передаете. Это может быть очень полезно, если вы хотите стилизовать все теги ‹p› внутри div (div › p). Еще одним полезным приложением может быть добавление тегов ‹a› в нижний колонтитул (#footer › a), что есть на многих веб-сайтах.

CSS

//format
element1 > element2 { 
  style properties 
}
span {
  font-weight: normal;
}

div > span {
  font-weight: bold;
}

HTML

<div>
  <span>Span #1, inside the div.
    <span>Span #2, inside the span that's inside the div.</span>
  </span>
</div>
<span>Span #3, outside of the div.</span>

Результат

Span #1, внутри div. Span #2, внутри диапазона, который находится внутри div.

Пролет № 3, за пределами div.

Совет № 2: выбор нескольких элементов

Последовательность дизайна может сделать вашу веб-страницу более целостной и целенаправленной. Не бойтесь использовать на одной странице как шрифты с засечками, так и шрифты без засечек, но постарайтесь ограничиться двумя взаимодополняющими шрифтами. Если вы собираетесь добавить границу к чему-либо, было бы неплохо, если бы несколько элементов, которые, возможно, уже имеют одинаковый шрифт, размер шрифта и цвет, также имели одинаковую границу. Знаете ли вы, что можете назначить все эти вещи одновременно? Вы можете использовать не только несколько селекторов, но и классы.

.article, img, .toolbar {
    border: 1px solid #78c5c5;
    font-family: Verdana;
    background-color #323232
}

Совет № 3: Бросьте заглавные буквы

p:first-letter {
  float: left;
  font-size: 3rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0;
  color:#60c0c0;
}

Совет № 4: Парение

Я знаю, о чем вы думаете, Голливуд солгал нам, у нас уже должны быть парящие доски, парящие автомобили и парящие города, и хотя они не кажутся осуществимыми при моей жизни, я могу использовать парящие эффекты в CSS. Сейчас. Это довольно просто сделать, но постарайтесь не слишком бросаться в глаза, как показано ниже.

CSS

img {
  border: 1px solid #000;
}
img {
  border: 1px solid #f00;
  filter: invert(100%);
}