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