В данной статье я немного расскажу о возможностях CSS.
Для того чтобы ваш сайт имел более достойный вид вам нужно использовать Cascading Style Sheets (CSS)/каскадные таблицы стилей. В данном уроке я дам краткое описание CSS.
CSS можно смело называть одной из лучших сторон HTML. Так как HTML в основном предназначен для общего представления передаваемой информации, а CSS предназначен для более тонкой настройки внешнего вида сайта.
|
1 2 3 4 5 |
<html> <p style="font-size:31px;">Данный текст напечатан размером 31</p> <p style="font-family:gabriola;">Данный текст напечатан шрифтом Gabriola</p> <p style="font-size:31px; font-family:gabriola">Данный текст напечатан шрифтом Gabriola размером 31</p> </html> |
Данный текст напечатан размером 31
Данный текст напечатан шрифтом Gabriola
Данный текст напечатан шрифтом Gabriola размером 31
В данном примере мы использовали атрибут style для задания типа шрифта с помощью команды font-family и размер шрифта с помощью команды font-size. Обратите внимание на то, как в последнем из параграфов мы установили тип и размер шрифта, разделяя при этом параметры с помощью точки с запятой.
Одной из лучших особенностей CSS можно считать, централизованное управление внешним видом страниц сайта. При использовании CSS вам больше не придется использовать атрибут style в каждом тэге. Теперь вам нужно указать браузеру всего один раз то как будет выглядеть текст вашей страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <title>Моя первая CSS страница</title> <style type="text/css"> h1 {font-size: 41px; font-family: constantia} h2 {font-size: 25px; font-family: georgia} p {font-size: 15px; font-family: buxton sketch} </style> </head> <body> <h1>Моя первая CSS страница</h1> <h2>Добро пожаловать на мою первую CSS страницу</h2> <p>В данной статье я немного расскажу о возможностях CSS.</p> </body> </html> |
Моя первая CSS страница
Моя первая CSS страница
Добро пожаловать на мою первую CSS страницу
В данной статье я немного расскажу о возможностях CSS.
В данном примере правила CSS выставлены в разделе head и применяются ко всей странице. Для этого мы используем тэг <style type=»text/css»>, который даёт соответствующее указание браузеру.
В этом примере заголовки будут выделены шрифтом Constantia размером 41px. А все подзаголовки будут выделены шрифтом Georgia размером 25px. А весь текст в
параграфах будет выделен шрифтом Buxton Sketch размером 15px.
Так же у вас имеется возможность задать правила CSS с помощью отдельного документа. Тогда данные правила CSS можно будет применить ко всем страницам. Это очень удобно так как если вам вдруг понадобится изменить тип или размер шрифта для большого сайта с сотнями страниц. Сейчас я покажу ещё несколько возможностей CSS, но вы можете изучить всё в рубрике Уроки CSS данного сайта.
Что ещё можно сделать с помощью CSS?
CSS может не только изменять тип и размер шрифта. Например, вы можете с помощью него установить цвет и фон. Вот вам несколько примеров, попробуйте с ними по экспериментировать:
|
1 2 3 |
<p style="color:red;">Красный текст</p> <h1 style="background-color: orange;">Заголовок на оранжевом фоне<h1> <body style="background-image: XXX;"> |
Ещё немного о CSS.
Также с помощью CSS вы можете управлять полями, выравниванием, шириной, высотой и т.д.
Например,
|
1 |
<p style="padding:40px;border:15px solid blue;">Моя первая CSS страница</p> |
Моя первая CSS страница
С помощью position вы сможете задать точное место элементу на странице:
Например,
|
1 2 |
<img src="wolf.jpg" alt="Волк" style="position:absolute;bottom:45px;right:25px;" /> |
В данном примере картинка помещается на 45 пикселей снизу и на 25 пикселей справа в окне браузера. Таким же образом вы можете поместить в другое место.
Понравилось?
Вам не удастся выучить CSS всего за пару минут. Поэтому для полного его изучения вы можете перейти в рубрику Уроки CSS.