Основы HTML и CSS

CSS

Итак, в прошлом уроке вы изучили Html теги и атрибуты. Теперь давайте добавим в наш проект немножечко магии, такой визуализации и изучим для этого CSS – это новый язык, который идёт в ногу с Html. Он так же довольно-таки простой, нужно будет только изучить больше свойств. Структуру, самую главную логику CSS, мы изучим прямо сейчас.

Для этого давайте напишем тег «style», в котором будем писать CSS свойства. В дальнейшем я расскажу, как можно свойства подключать немножечко другим способом, точнее разными способами, но сейчас мы воспользуемся именно таким.

<style> 
.button{ 
  width:100px; 
  height:50px; 
  background:red; 
} 
</style>

И здесь я напишу сейчас такую заготовочку, а потом объясню, что же я написал и почему всё именно так. Давайте посмотрим результат работы этого кода, и, как видите, на странице появился прямоугольничек, который шириной 100px, высотой 50px и цветом красненьким. Хочу заметить, что мы и прописали все эти свойства  выше.

Давайте поподробнее разберёмся, как эта магия вообще происходит. Первое, что можно изучить – это селектор, а селектор – это вот этот кусочек кода: «.button». Первый символ в селекторе говорит нам, к какому тегу мы должны обращаться, точнее по какому атрибуту мы можем найти определённый тег, то есть точка ассоциируется с классом.

Вместо точки мы можем написать «#». Вот так:

<style> 
#button{ 
}
</style>

Это означает, что мы ищем тег по id.

Ещё одна небольшая магия – мы можем написать просто название тега:

<style>
div{
}
</style>

И тогда все теги, которые у нас есть на странице, точнее в конкретном случае «div», все «div’ы» станут красными прямоугольничками. То есть, если мы поставим кучу «div’ов», то у нас появится куча прямоугольничков, которые сливаются в один большой прямоугольник. 

Давайте продолжим дальше. После селектора мы пишем фигурные скобочки, мы их открываем и закрываем, а между ними начинаем прописывать свойства, которые хотим назначить нашему тегу. Итак, мы сейчас назначили ширину, равную 100px, высоту, равную 50px и фон («background») – красный. Свойства пишутся следующим образом: пишем название свойства (в данном случае «width»), двоеточие и потом значение этого свойства, то есть 100px, потом точку с запятой и на следующей строке начинаем писать следующее свойство.

Никогда не забывайте про точку с запятой – это очень важный момент, потому что некоторые забывают про нее, а потом думают: «Ай-йа-йай, почему не работает в CSS? Я, наверное, что-то неправильно сделал, а что неправильно сделал? Вообще CSS – гиблый язык, не буду писать, пойду пить чай.» Поэтому ставьте точки с запятой.

В минимальном формате можно вообще сделать следующим образом: просто взять и написать в одну строку. Такой код тоже будет работать. Иногда CSS-свойства для минимализации пишут в одну строку, чтобы CSS-файл весил меньше. Об этом мы ещё поговорим попозже, просто такой «закидончик» на будущее.

Собственно говоря, вот так вот работают CSS-свойства. Единственно мы с вами ещё чуть поподробнее в следующем уроки разберёмся с CSS-селекторами, но в целом основу вы уже изучили, можно сказать. Вам осталось только, как и с Html, изучить ещё много разных CSS-свойств, которые мы изучим после Html-тегов. И по сути всё, можно считать, что вы изучили Html и CSS. Единственное, потом придётся ещё изучить несколько приёмов использования Html и CSS, как их можно использовать вместе и какие техники использовать. И по сути, вы станете классным чуваком, который разрабатывает сайты и которому стоит ещё немножко набраться практики и вообще будет огонь. Прям закоренелый такой программист, разработчик, у которого всё получается. Поэтому, давайте, не медлите, переходите к следующему уроку, изучайте селекторы и начинайте изучать Html-теги и CSS-свойства.