Jump to content

Recommended Posts

Как правильно подключать css в html? 

Я делаю так 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
   img { 
   vspace="10px"
   }
  </style>
<head> 
                                
<div><p align="center">

<a href="/"><img alt="" src="{THEME}/images/lol/champion/Aatrox.png" width="80" height="80"></a>  
Link to post
Share on other sites

1) Вы не подключаете стили, а прописываете их в индексе.

2) <link rel="stylesheet" href="style.css">

3) Все это нужно делать в <head></head> а у Вас вообще код кусками.

4) После такого я вообще сомневаюсь что Вы когда то работали с кодом.

Link to post
Share on other sites

1) Вы не подключаете стили, а прописываете их в индексе.

2) <link rel="stylesheet" href="style.css">

3) Все это нужно делать в <head></head> а у Вас вообще код кусками.

4) После такого я вообще сомневаюсь что Вы когда то работали с кодом.

Ну все с чего-то начинают, главное что есть интерес и желание  учиться и развиваться.

Link to post
Share on other sites

1) Вы не подключаете стили, а прописываете их в индексе.

2) <link rel="stylesheet" href="style.css">

3) Все это нужно делать в <head></head> а у Вас вообще код кусками.

4) После такого я вообще сомневаюсь что Вы когда то работали с кодом.

Работал, но года 2-3 назад :) Сейчас появилось свободное время и решил попробовать :)

Если я прописываю так: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
   .img { 
   vspace="10px"
   }
  </style>    
   
	
	 
                                
<div><p align="center">

<a href="/">123<img vspace="10px" alt="" src="{THEME}/images/lol/champion/Aatrox.png" width="80" height="80"></a>  
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Ahri.png" width="80" height="80"></a> 

То результата все равно ноль

У меня 120+ картинок и не хочется все делать вот так: 

<a href="/"><img vspace="10px" alt="" src="{THEME}/images/lol/champion/Aatrox.png" width="80" height="80"></a> 

Да и в css еще не мало придется добавлять в будущем 

Link to post
Share on other sites

Работал, но года 2-3 назад :) Сейчас появилось свободное время и решил попробовать :)

Если я прописываю так: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
   .img { 
   vspace="10px"
   }
  </style>    
   
	
	 
                                
<div><p align="center">

<a href="/">123<img vspace="10px" alt="" src="{THEME}/images/lol/champion/Aatrox.png" width="80" height="80"></a>  
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Ahri.png" width="80" height="80"></a> 

То результата все равно ноль

У меня 120+ картинок и не хочется все делать вот так: 

<a href="/"><img vspace="10px" alt="" src="{THEME}/images/lol/champion/Aatrox.png" width="80" height="80"></a> 

Да и в css еще не мало придется добавлять в будущем 

 

у Вас нарушенна структура документа - не хватает тегов, в стилях Вы обращаетесь к не существующему классу и если Вы прописываете vspace, то не надо добавлять пиксели:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>


<style type="text/css"> 
   img { vspace:10; } 
</style>


   
</head>
<body>
	 
                                
<div><p align="center">

<a href="/">123<img vspace="10" alt="" src="{THEME}/images/lol/champion/Aatrox.png" width="80" height="80"></a>  
<a href="/"><img alt="" src="{THEME}/images/lol/champion/Ahri.png" width="80" height="80"></a> 
</body>
</html>

но атрибут vspace считается не валидным, поэтому лучше заменить его на margin:

<style type="text/css">
   img { 
   margin:10px 0px;
   }
  </style> 
Link to post
Share on other sites

Сейчас для более правильной оптимизации сайта (быстрой загрузки) рекомендуется основной код стилей для формировании структуры шаблона выносить именно в шаблон между тегами head, а всякие кнопочки, менюшки и прочее подгружать ссылками после футера, ну или в футере, главное чтобы в конце страницы было все это.

</footer>
</body>
<link rel="stylesheet" href="/style/other_classes_css.css">
</html>
Link to post
Share on other sites

 

Сейчас для более правильной оптимизации сайта (быстрой загрузки) рекомендуется основной код стилей для формировании структуры шаблона выносить именно в шаблон между тегами head, а всякие кнопочки, менюшки и прочее подгружать ссылками после футера, ну или в футере, главное чтобы в конце страницы было все это.

</footer>
</body>
<link rel="stylesheet" href="/style/other_classes_css.css">
</html>

кто рекомендует?

Link to post
Share on other sites

Все))

Это для того, чтобы основная часть сайта подгружалась первой, если я правильно понял.

Совершенно верно. А рекомендуют это в основном для обеспечения быстрой загрузки сайта на мобильных устройствах, которые сейчас бурно набирают обороты.

valentino,

и все JS файлы тоже в падвал надо определять

Link to post
Share on other sites
</footer>
</body>
<link rel="stylesheet" href="/style/other_classes_css.css">
</html>

Всему есть предел...

 

Может все таки, вот так:

</footer>
<link rel="stylesheet" href="/style/other_classes_css.css">
</body>
</html>

Код либо между тегом <body>, либо <head>, нету понятия кода, подключение стилей и прочего в <html> теге, лишь в 2х дочерних тегах HTML'а.

 

Если даже конструкция работает, это потому-что браузеры слишком умные у Вас. А мобильные браузеры, не такие умные, некоторые могут не понять такое.

Link to post
Share on other sites
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<link href="css.css" type="text/css">
	</head>
	<body>
		{kontent}
		<script src="js.js"></script>
	</body>
</html>

Я считаю такую структуру построения документа наиболее оптимальной, с одной стороны стили может и увеличат загрузку, но на доли секунды, зато с другой стороны пользователь увидит сразу оформленный сайт

Link to post
Share on other sites
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<link href="css.css" type="text/css">
	</head>
	<body>
		{kontent}
		<script src="js.js"></script>
	</body>
</html>

Я считаю такую структуру построения документа наиболее оптимальной, с одной стороны стили может и увеличат загрузку, но на доли секунды, зато с другой стороны пользователь увидит сразу оформленный сайт

 

 

Всё зависит какие у вас стили, если у вас портянка на 200-300кб то разумнее будет в подвал ее определить, если говорить о крупных проектах, так у них вобще бывает 500кб+ вес стилей, даже после оптимизации и если не брать в учет подключенные плагины типа селекторов, галерей и прочего.

 

Я обычно когда пишу сайт создаю файлы со стилями для определенных участков, для меню свой файл, для хедера и все что в нем тоже свой, для страницы авторизации свой и т.д., это очень удобно, можно что то подключать именно на определенных страницах тем самым уменьшить вес страниц, да и редактировать удобно в будущем, только надо либу писать для их объединения. Ну и + совмещать удобно стили о один глобальный сжатый файл, а структуру шаблона можно вынести в хедер.

Link to post
Share on other sites

 

Сейчас для более правильной оптимизации сайта (быстрой загрузки) рекомендуется основной код стилей для формировании структуры шаблона выносить именно в шаблон между тегами head, а всякие кнопочки, менюшки и прочее подгружать ссылками после футера, ну или в футере, главное чтобы в конце страницы было все это.

</footer>
</body>
<link rel="stylesheet" href="/style/other_classes_css.css">
</html>

link в html теге, да Вы прям юморист !!!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...