Создание веб - сайта с нуля Часть II. Добавление стилей (CSS).
Что мы будем делать
В этой главе мы будем:
- Создание таблицы стилей CSS для сайта
- Добавить ссылку на таблицу стилей в наших страницах
Создание CSS стилей
В папке demoweb, создайте новый файл с именем site.css.
Поместите следующий код внутри файла CSS:
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}Файл CSS выше определяет стили, которые будут использоваться для:
- HTML тело элемента <тело>
- HTML элемент с идентификатором = "основной"
- HTML элемент заголовка <h1>
Изменение домашней страницы
В папке demoweb, отредактируйте файл index.html.
Измените содержимое файла на следующее:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
Попробуй сам " Домашняя страница выше, является копией домашней страницы из предыдущей главы.
Мы добавили ссылку на таблицу стилей, и <DIV ID = "основной"> элемент для определения "раздел", в содержании.
Изменения помечены красным цветом.
Редактировать О странице
Для того, чтобы завершить свою работу, делать те же самые изменения в about.html.
1. Добавить ссылку на таблицу стилей.
2. Добавьте <ID = "основной" div> элемент.
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
Попробуй сам " Прочитайте больше
Подробнее о CSS в нашем CSS Учебник .