• Страница 1 из 1
  • 1
Внедрение CSS в HTML документ
L@xel Дата: Вторник, 21.09.2010, 22:33 | Сообщение # 1
L@xel
Статус не установлен
Сообщений:72
Награды:3
Репутация:81
Статус:Оффлайн
Внедрение CSS в HTML теги.

Способ линейного внедрения CSS был рассмотрен в HTML уроках:

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

Результат:

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

Внедрение CSS в секцию <head> </head>.

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

Code
<html>
<head>
<title> </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>

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

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

Ссылка на внешний файл с расширением .css

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

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

Code
@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.

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

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

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

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

Code
<html>
<head>
<title> </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>

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

Сообщение отредактировал L@xel - Вторник, 21.09.2010, 22:34
ls2011 Дата: Вторник, 21.09.2010, 22:38 | Сообщение # 2
ls2011
Сообщений:2141
Награды:192
Репутация:2585
Статус:Оффлайн
Спсибо очинь в будешем всем поможет и не тока навечкам. grin grin


Судить меня дано лишь Богу, другим я укажу дорогу...
Общайся с нами о вебмани Dowm.Ru
Solid Дата: Вторник, 21.09.2010, 23:44 | Сообщение # 3
Статус не установлен
Сообщений:464
Награды:11
Репутация:384
Статус:Оффлайн
L@xel,
кстате очень полезно на уроках информатике
когда задают собственный сайт сделать


  • Страница 1 из 1
  • 1
Поиск: