Css самостоятельно

Добавлено: 21.01.2018, 07:12 / Просмотров: 81394

Закрыть ... [X]

Как вставить CSS в HTML

Подключение CSS, вставка файла

или три способа подключить CSS самостоятельно

Будем рады познакомиться! – Каскадные таблицы стилей.

CSS разработан с целью манипулирования внешним видом элементов страницы.


Каскадные таблицы стилей не являются независимым инструментом — включаются в HTML тремя способами.

Содержание страницы

  1. Подключение CSS | Прямое включение в HTML теги
  2. Подключение CSS | Включение в <head> </head>
  3. Подключение CSS | Вставка ссылки на.css файл

Как вставить CSS в HTML, прямая вставка в теги

Как вставить CSS в теги мы разобрали в HTML уроках.

Пример подключения:

<p style="color:red; font-weight:bold">Текст красного цвета, полужирный</p>

Результат:

Текст красного цвета, полужирный

Подключение CSS в служебную секцию

Этот способ пригоден для оформления web-сайтов с небольшим количеством страниц, он также подходит для новичков, так как все манипуляции произходят в рамках одного документа:

<html>
<head>
<title>Подключение CSS файла</title>
<style type="text/css">
p {color:#006633}
.forexample {color:Yellow}
#ident {color:#ffffff; font-weight:bold}
body {background-color:#66cc66}
</style>
</head>
<body>
<p>Текст параграфов этого документа темно-зеленого цвета</p>
<p>Текст</p>
<p class="forexample">А здесь текст желтый</p>
<p id="ident">Текст белого цвета, полужирный</p>
<h2 class="forexample">Заголовок</h2>
<p>Текст</p>
</body>
</html>

Результат: включение CSS в HTML документ

Атрибут со значениями type="text/css" внутри тега <style> сообщает, встроенному в браузер интерпретатору, что применены стилевые описания, то есть CSS. Обратите внимание на синтаксис: первым делом назван селектор (p, css самостоятельно body,.forexample, #ident), затем открыта фигурная скобка, прописан атрибут со значением, фигурная скобка закрыта. Атрибуты между собой разделяются точкой с запятой.

Свойства, назначенные селектору.forexample, распространяться на все элементы, которые содержат class="forexample", в пределах одного документа. Что касается селектора #ident, то он управляет всем, что содержит id="ident". Значения атрибутов class="" и id="" могут самостоятельно содержать цифры, но не должны начинаться с цифр.

Вставка ссылки на внешний.css файл

Попробуйте представить, что ваш сайт содержит несколько десятков страниц, а вы решили сменить цвет заголовков... Используя третий способ, достаточно изменить несколько значений во внешнем.css файле, чтобы добиться желанного результата.

В текстовом редакторе создайте файл следующего содержания:

@charset "windows-1251";
/ CSS Document /

body {background-color:#0000cc}
p {color:#222255}
.forexample {color:Orange}
#ident {color:#ffffff; font-weight:bold}

Сохраните его в папке, в которой находится файл index.html, но не с.html расширением, а с.css, например, как file.css.

Атрибуты и значения

  • @charset "windows-1251"; – определяет кириллистическую кодировку.
  • / CSS Document / – так вводятся комментарии в CSS.

CSS подключение из примера выше может быть представлено таким образом:

@charset "windows-1251";
/ CSS Document /

body {
background-color:#0000cc
}
p {
color:#222255
}
.forexample {
color:Orange
}
#ident {
color:#ffffff;
font-weight:bold
}

Приблизительная структура HTML документа:

<html>
<head>
<title>О том, как вставить CSS в HTML страницу</title>
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
<body>
<p>Текст параграфов этого документа темно-синего цвета</p>
<p>Текст</p>
<p class="forexample">А здесь текст оранжевый</p>
<p id="ident">Текст белого цвета, полужирный</p>
<h2 class="forexample">Заголовок</h2>
<p>Текст</p>
</body>
</html>

Результат: как вставить CSS в HTML страницу

Непарный тег <link /> определяет ссылку на внешний.css файл.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Знакомство с CSS   Вставка CSS в HTML документ   Урок 2. Виды шрифтов


Источник: http://ab-w.net/CSS/css_embed.php


Поделись с друзьями



Рекомендуем посмотреть ещё:



Для тех Охлажденные напитки в домашних условиях


Css самостоятельно Css самостоятельно Css самостоятельно Css самостоятельно Css самостоятельно Css самостоятельно Css самостоятельно Css самостоятельно

ШОКИРУЮЩИЕ НОВОСТИ


Back to Top