Пятница, 22 Марта 2013 14:17

Прописать CSS в HTML

Written by 
Оцени эту запись
(8 Голоса)

Иногда хочется вернуться к истокам. Не разбирать сложные темы по верстке, а начать с нуля. Когда я только училась верстать, я не интересовалась анимациями, интересными эффектами и прочим. Потому, думаю, что поисковикам простые вопросы больше людей задают простые вопросы. В этой статье я повторю о связи HTML и CSS и о том, как прописать CSS в HTML.

 

Я не хочу останавливаться на вопросах о том, что такое HTML и что такое CSS. Это можно подробно узнать, перейдя по следующим ссылкам:

 

 

CSS лучше не прописывать в HTML, а вынести в отдельный CSS файл - Как подключить css-файл к html-странице.

 

Прописать CSS в HTML

 

Все, что отображается в браузере - это HTML+CSS или языки программирования (серверные или фронтенд), которые генерируют HTML+CSS. Программисты не знают не должны знать CSS, но иногда им нужно что-то подправить. И тогда они должны уметь добавить простой CSS в сгенерированный или написанный HTML код.

 

Простой пример:

 

<div style="color: red;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>

 

В атрибуте style элемента можно прописывать любые стили для этого элемента - поменять цвет(color), шрифт(font-family), фон(background). Но не получится добавлять стили для потомков элемента.

 

Другой вариант - использовать тег style, который, конечно, лучше добавить в head страницы, но можно и в body.

 

<style>

div {

color: red;

}

</style>

 

В таком случае можно прописывать стили и к потомкам элемента:

 

<style>

div span {

color: blue;

}

</style>

 

Если у вашего элемента div в потомках есть много элементов span, то прописать в теге style стили для всех них будет удобнее, чем для каждого в атрибуте style.

 

 

Замечания

 

1. Не используйте тег center в HTML, он устарел. И это будет лишний тег в разметке.

Вместо него используйте:

а) "text-align: center", примененный к родителю,  для центрирования строчных элементов;

б) "margin: 0 auto", примененный к дочернему, для центрирования блочных элементов

 

2. Не ставьте тег <br />, если вам нужно перенести что-то на новую строку. Для этого можно использовать блочные элементы:

 

вместо:

<div>Kate-land - блог верстальщика и для верстальщика<br />Kate-land - блог верстальщика и для верстальщика</div>

 

нужно:

<p>Kate-land - блог верстальщика и для верстальщика</p><p>Kate-land - блог верстальщика и для верстальщика</p>

 

 

 

 

 

 

 

 

Additional Info

Комментарии  

 
+1 #1 getecash 27.08.2014 09:46
I loved as much aas you will receive carried out right here.

The sketch is attractive, your authored subject matter stylish.
nonetheless, you command get got an shakiness over thast you wish be
delivering the following. unwell unquestionably come further
formerly again since exactly the same nearly very ofteen inside case you shield
this hike.

Feel free to surf to my web-site; getecash: http://www.getecash.com
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов