Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Парень не может оторваться от компьютера. Родители вызвали доктора. Доктор осмотрел его и сказал:
— Его придётся лечить!
Родители:
— Как?
— Сигаретами, выпивкой, девочками...

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Один программист — другому:
— Вот представь: у тебя есть 1000 рублей... Или, для круглого счета, пусть у тебя 1024...

  Моя группа в контакте:



Создание внешней таблицы стилей

Для начала мы создадим файл, куда будем прописывать стили для элементов HTML. Назовем наш файл «cascadе.css» обязательно с расширением «.css» потом привязываем к нему те страницы нашего сайта на которые мы хотим чтобы распространялись наши стили. А делается это следующим образом:

1. Открываем файл «html» на который будет распространятся «css»
2. Вставляем между тэгами <head> </head> следующий код:
<link href="cascadе.css" rel="stylesheet" type="text/css">

Данный код говорит браузеру что ему необходимо учитывать стили которые мы задали тому или иному элементу которые прописаны в файле по указанному адресу (href="cascadе.css") как прописывается адрес (путь) написано здесь и читать данный файл он должен на языке «css». Теперь открываем наш файл «cascadе.css» и прописываем в нем следующий код:

body
{background-color: #AAFFFF;}

a
{color:#B619FF; font-weight: bold;}

a:hover
{color:#ff0000; font-weight: bold; text-decoration:none;}

h1
{color: #0000ff; font-size:18px;}

h2
{color: #9E0037; font-size:16px;}

p
{color: green; font-size:14px;}

Сохраняем

Создаем две страницы «primer1.html»
<html>
<head>
<title>Пример №1</title>
<link href="cascadе.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="primer2.html">Переход не вторую страницу</a> <br/>
<h1>Мы рады вас видеть!!!</h1><br/>
<h2>Здесь вы найдете все что искали!!!</h2><br/>
<p>На этом сайте Вы найдёте любую информацию, которую вы так долго искали на просторах интернета.</p>
</body>
</html>
посмотреть
и «primer2.html»
<html>
<head>
<title>Пример №2</title>
<link href="cascadе.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="primer1.html">Переход не первую страницу</a> <br/>
<h1>Мы рады вас видеть!!! Это вторая страница! </h1><br/>
<h2>Здесь вы найдете все что искали!!!</h2><br/>
<p>На этом сайте Вы найдёте любую информацию, которую вы так долго искали на просторах интернета.</p>
</body>
</html>
посмотреть

Ну вот собственно и всё. Мы можем создавать сколь угодно файлов html и привязывать их к одному файлу css и в дальнейшем если нам понадобиться изменить стиль всем параграфам, то для этого достаточно будет изменить, лишь одну строку в файле css.

1 2 3 4 5

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Александр
<a href="primer2.html">Переход не вторую страницу</a> <br/>
Опечатка в примере.
2014-07-07 19:49

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь