Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

CSS

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

Итак, в прошлом уроке вы изучили 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-свойства.

Предыдущий урок Следующий урок
Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

Политика конфиденциальности   Пользовательское соглашение