November 4, 2018
Верстка. Часть 2: чистый css
Мы закончили на том, что прописали структуру чата с помощью html. Пришло время добавить дизайн.
Создадим файл chat.css, в котором будем хранить стили нашего компонента. Добавим на него ссылку в <head> нашей станицы.
<head>
<meta charset="UTF-8">
<title>Chat</title>
<link rel="stylesheet" type="text/css" href="chat.css">
</head>
Теперь дизайн, который мы запишем в chat.css, будет влиять на нашу страницу.
//как писать на css
Для начала, добавим к нашим элементам фоны, чтобы было легко определять занимаемое ими пространство.
.chat{
background-color: royalblue;
display: inline-block;
}
.message-zone{
background-color: white;
}
.message-zone .message.to{
background-color: green;
}
.message-zone .message.from{
background-color: greenyellow;
}
.event{
background-color: gray;
}
.ip{
background-color: azure;
}
Про селекторы
Еще раз про блоки и обтекание
Про то, как посмотреть границы в браузере и изменить налету
Белвые полосы потому, что chat-zone занимает все горизонтальное простанство. Добавим внутреннюю границу.
.chat{
background-color: royalblue;
display: inline-block;
padding: 40px;
}
Результат:
Добавим аналогичную границу области чата.
fin