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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 75 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография Developer
    #6

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Алексей111
    #8

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 27 Вне конкурса за определение пользователя месяца

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


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

#1 Agasfer

Agasfer
  • Неактивные
  • 14 сообщений
  • Репутация: 1
0

Отправлено 20 August 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

#2 surfer

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

Отправлено 20 August 2012 - 15:43

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

#3 Agasfer

Agasfer
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 1

Отправлено 20 August 2012 - 16:00

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


  • 0

#4 surfer

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

Отправлено 20 August 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 August 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
  • Заблокированные
  • 1956 сообщений
  • Репутация: 71

Отправлено 20 August 2012 - 16:44

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

#7 matroskin8

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

Отправлено 20 August 2012 - 16:46

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


#8 Agasfer

Agasfer
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 1

Отправлено 20 August 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
  • Заблокированные
  • 1956 сообщений
  • Репутация: 71

Отправлено 20 August 2012 - 17:40

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

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

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

#10 Agasfer

Agasfer
    Topic Starter
  • Неактивные
  • 14 сообщений
  • Репутация: 1

Отправлено 20 August 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
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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