Sign in to follow this  
Followers 0
andstr

css в html

17 posts in this topic

Как правильно подключать 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>  

Share this post


Link to post
Share on other sites

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

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

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

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

BITbOK and PizzaHut like this

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


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 еще не мало придется добавлять в будущем 

Share this post


Link to post
Share on other sites

Меня смутил вот этот кусок

img { 
   vspace="10px"
   }

:)))

x-game likes this

Share this post


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> 
andstr likes this

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

 

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

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

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

Share this post


Link to post
Share on other sites

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

Все))

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

Share this post


Link to post
Share on other sites

Все))

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

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

valentino,

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

BITbOK likes this

Share this post


Link to post
Share on other sites

Да да. И все js тоже в футер утащить. С css еще не все проделал, а вот с js да. В вп радует, шустрее все пашет теперь. 

Share this post


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'а.

 

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

valentino likes this

Share this post


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>

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

rafonets likes this

Share this post


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кб+ вес стилей, даже после оптимизации и если не брать в учет подключенные плагины типа селекторов, галерей и прочего.

 

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

Share this post


Link to post
Share on other sites

 

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

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.