Последние учебники веб-разработки
 

Web Building - Добавление стиля (CSS)


Создание веб - сайта с нуля Часть 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 Учебник .