Создание сайта-визитки. Подключение шрифтов на сайт
В этом уроке мы начнем создавать сайт-визитку. Начнем мы с шапки сайта, которая будет для всех страниц. Так же в этом уроке я покажу, как подключить сторонние шрифты на сайт, используя google fonts и webfont.ru
Следует отметить, что есть список стандартных шрифтов:
1. Arial
2. Verdana
3. Times
4. Times New Roman
5. Georgia
6. Trebuchet MS
7. Sans
8. Sans
9. Comic Sans MS
10. Courier New
11. Webdings
12. Garamond
13. Helvetica
1. Arial
2. Verdana
3. Times
4. Times New Roman
5. Georgia
6. Trebuchet MS
7. Sans
8. Sans
9. Comic Sans MS
10. Courier New
11. Webdings
12. Garamond
13. Helvetica
Еще есть стандартные шрифты, которые могут быть недоступны в некоторых ОС.
1. Palatino Linotype / Palatino
2. Tahoma
3. Impact
4. Century Gothic
5. Arial Black
6. Arial Narrow
7. Copperplate / Copperplate Gothic Light
8. Gill Sans / Gill Sans MT
Еще в этом уроке я рассказал как убрать отступы браузера по умолчанию. Для этого следует использовать специальный css файл, который сбрасывает правила для тэгов, приводя вид документа всех браузеров «к общему знаменателю» — normalize.css
Код урока (HTML)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<!--<link href='https://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>-->
</head>
<body>
<header>
<div class="wrapperHeader">
<div class="logo">
<img src="http://kamil-abzalov.ru/wp-content/themes/milleniumSecond/img/logo.png" alt="">
</div>
<div class="phone">
<p>123-45-67</p>
</div>
<div class="search">
<form>
<input type="text"/>
<input type="submit">
</form>
</div>
</div>
</header>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus facilis est nam, expedita eaque. Ipsum vero sapiente, tenetur voluptas aliquid accusantium. Molestiae distinctio ratione commodi! Vel officiis laborum temporibus nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est maxime vel molestias reprehenderit. Nihil hic reprehenderit asperiores omnis assumenda voluptatibus modi saepe, tenetur necessitatibus error placeat, fugit, odio impedit. Eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quae sunt, laboriosam molestias deleniti nam! Enim exercitationem dicta maxime perferendis sit accusamus aliquid quisquam debitis facilis velit, dolorem libero, fugiat.
</div>
<footer>
</footer>
</body>
</html>Код урока (CSS)
@import url("anahit/anahit.css");
body {
font-family: "AMG Anahit", "Arial", sans-serif;
font-size: 16px;
}
header{
background-color: #7c4dff;
overflow: hidden;
}
.logo, .phone, .search {
float: left;
width: 33%;
}
.phone p {
color: #fff;
font-size: 25px;
margin-top: 20px;
}
.search form {
margin-top: 25px;
}
0 Comments