Пятница, 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

You have no rights to post comments

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