Добавление CSS в веб-страницу

На самом деле существует три способа добавления CSS на веб-страницу, и каждый из них имеет очень специфическую цель и использует.

  • Просмотров |

На самом деле существует три способа добавления CSS на веб-страницу, и каждый из них имеет очень специфическую цель и использует.

Внешний лист стилей

Самый распространенный и самый полезный способ добавить таблицу стилей на вашу веб-страницу — через внешнюю таблицу стилей. Вы создадите отдельный документ, назовем его «style.css». «Стиль» не имеет значения, вы можете назвать его «sirHenry.css», если вы так выбрали; это важная часть .css.

На этой таблице стилей вы точно определите, какие шрифты, цвета, цвета фона или изображения, расстояние, расположение и т.д.. Ваша страница будет отображаться. Например:

body {
     background-color: #ffffff;
     color: #000000;
     font-family: Arial, sans-serif;
}
 
p {
     padding: 15px;
}
 
h1 {
     color: FF0000;
     font-family: "Wide Latin";
}

И вы вызовете этот документ style.css и сохраните его в том же каталоге, в котором находится ваш файл index.html.

Но если вы посмотрите на свою страницу index.html в своем браузере сейчас, вы не увидите ни одного цвета, который мы определили в style.css. Чтобы действительно увидеть красивые цвета, мы должны связать таблицу стилей с html-документом. И это делается с помощью этого кода:

<link href="style.css" rel="stylesheet" type="text/css">

И эта строка должна войти в раздел заголовка вашего HTML-документа — так вот:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>A Good Title for this Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Теперь убедитесь, что style.css и эта новая версия вашей HTML-страницы также загружены на вашу учетную запись хостинга, обновите страницу html, и вы увидите … Затем есть:

Внутренний стиль

Вместо того, чтобы использовать внешнюю таблицу стилей, вы можете добавить весь стиль непосредственно в раздел главы каждой страницы — это будет выглядеть так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>A Good Title for this Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <style type="text/css">
     body {
          background-color: #ffffff;
          color: #000000;
          font-family: Arial, sans-serif;
     }
 
     p {
          padding: 15px;
     }
 
     h1 {
          color: FF0000;
          font-family: "Wide Latin";
     }
   </style>
 
</head>

Это метод, который полезен для стилизации, который применяется только к самой странице, в которую он вставлен, — скорее всего, это не тот материал, который мы определили выше. Хорошим примером того, как будет выглядеть внутренняя стилизация, является страница контакта вашего сайта — стиль для контактной формы (скорее всего) больше не понадобится нигде на всем сайте, поэтому добавление частей, которые адресуют только те теги только на контактная форма имеет смысл.

Причина, заключающаяся в том, что использование внутреннего стиля для таких вещей, как теги body и h1, не очень хорошая идея. Допустим, вы использовали выше для своего нового сайта, и теперь, когда все 159 страниц сделаны, вы решили, что вам действительно нужно изменить цвет тегов h1. И теперь вам нужно будет открыть каждую из этих 159 страниц и внести изменения. Не очень эффективно, не так ли?

И, наконец, у нас есть:

Встроенный стиль

В дополнение к приведенной выше таблице стилей (для всех страниц на сайте) и внутреннему стилю (для всех стилей на одной странице) есть встроенный стиль. Это практично, если вы разрабатываете только одну вещь за один раз на своем сайте. Возможно, есть этот ОДИН пункт на той ОДНОЙ странице, которую вы хотите выставить, но только тот самый — на весь сайт. Тогда вы можете использовать наклонный стиль:

<p style="border: solid 5px #FFAA00;">
The very special paragraph that shows up only ONE time on this ONE page on the ENTIRE site
 - only here, nowhere else. Got it?
</p>
ТЕГИ:

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля