Перейти к содержимому

Реферальная программа Мегаплана


Как подключить таблицу стилей в HTML 5

#1 Agasfer

Agasfer
  • Пользователь
  • 14 сообщений
  • Репутация: 1
0

Отправлено 20 Август 2012 - 15:38

Плиз, подскажите как в HTML5 подключается внешняя таблица стилей?
Есть следующий код:

<!doctype html>
<html>
<head>
<title>Заголовок</title>
<link rel="stylesheet" href="menu/css.css">
</head>
<body>
<div class=header>проверка валидности</div>
</body>
</html>

Файл css.css выглядит как:

/*новые стили*/
.header {
	background: none repeat scroll 0 0 #434141;
	width: 1000px; height: 93px;
	margin: 0 auto;
}


В IE8 всё работает корректно, в Мозиле и Хроме стили не работают.
Если убрать строку "<!doctype html>" всё работает как надо, но мне-то надо html5.
В чём может быть проблема?

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Не работают стили CSS в wordpress
  2. Что такое стили CSS и с чем их едят
  3. Как подключить новый стиль css к шаблону WP
  4. Добавление стиля CSS
  5. HTML5 и непарные теги

#2 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 20 Август 2012 - 15:43

так же как и в других стандартах <link rel="stylesheet" href="lion.css">
проверь путь
  • 0

#3 Agasfer

Agasfer
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 1

Отправлено 20 Август 2012 - 16:00

Путь соответствует.
Если убрать строку "<!doctype html>" всё работает.
Вот живой пример на сайте: http://test.injournal.ru/test1.html


  • 0

#4 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 20 Август 2012 - 16:21

Семен Семеныч, не рано перешли на html5 вы знаете, что не все браузеры поддерживают его, например IE8 и ниже нет,
для этого надо в <head> перед подключением таблицы стилей необходимо сделать следующее, вставить код:
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

http://htmlbook.ru/s...tml5/novye-tegi

а новым тегам присвоить свойство display:block;

а что должно получиться, я и в других браузерах ничего не увидел, что это? background: none repeat scroll 00#434141;
не пойму зачем этому коду необходим html5 тут нет ничего из него, кроме doctype он то и топит тебя
  • 0

#5 Agasfer

Agasfer
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 1

Отправлено 20 Август 2012 - 16:31

Я полагал Хром последней версии его поддерживает. И мозила тоже.

Вот как корректно работают стили http://test.injournal.ru/test2.html .

Файл идентичен http://test.injournal.ru/test1.html за исключением первой строчки с объявлением html5.

Вопрос: почему? Исследуемые браузеры Хром и Фаерфокс, ИЕ8 я привёл всего лишь в качестве примера корректного отображения.

а новым тегам присвоить свойство display:block;


div блоковый по умолчанию, я уже упростил до безумия, не в том дело. :)

Прикрепленные изображения

  • test.jpg

  • 0

#6 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 20 Август 2012 - 16:44

что ты хочешь, я тебе написал как решить проблему?
  • 0

#7 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 20 Август 2012 - 16:46

Agasfer, Вас в коде документа не смущает этот момент?:
<!doctype html>
<html>
...
Мне кажется, что один тег HTML - лишний.
  • 0


#8 Agasfer

Agasfer
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 1

Отправлено 20 Август 2012 - 17:01

Нет, нифига не работает :)
http://test.injournal.ru/test1.html

<!doctype html>
<html>
<head>
<title>Заголовок</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="menu/css.css">
</head>
<body>
<div class="header">проверка валидности</div>
</body>
</html>





Agasfer, Вас в коде документа не смущает этот момент?:



...
Мне кажется, что один тег HTML - лишний.


первый тег объявляет html 5, второй открывает тело документа

http://htmlbook.ru/s.../struktura-koda
  • 0

#9 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 20 Август 2012 - 17:40

убери /*новые стили*/ и поставь <!DOCTYPE html> вместо <!doctype html>, ну и кодировка не помешает

вот смотри я сделал:
Прикрепленный файл  Desktop1.zip   800байт   Количество загрузок: 106Прикрепленный файл  Desktop2.zip   804байт   Количество загрузок: 100

все работает
первый как у тебя, второй чистый html5
  • 0

#10 Agasfer

Agasfer
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 1

Отправлено 20 Август 2012 - 19:28

Спасибо, вложение помогло.
Когда один и тот же код в архиве работал, а на сервере нет - стал в настройках разбираться.
Проблему вызывало, что расширение .css было прописано в AddType application/x-httpd-php в .htaccess
У меня изначально таблица стилей через php генерировалась. и он, соответственно Content-typy: text/html для таблицы стилей отдавал. В старом html всё работало, в пятом перестало.

вылечилось добавлением php-кода и заголовка text/css в таблицу стилей.

<!--?php
header('Content-Type: text/css');
print'
.header {
	background: none repeat scroll 0 0 #434141;
	width: 1000px; height: 93px;
	margin: 0 auto;
}';
?-->

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru