cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

Введение в CSS

Теги:
Дата: 20.09.2008

Первая статья на сайте и логично было бы начать ее с определения и рассказать как и для чего используют CSS. Итак начнем…

Определение.

Сам сочинять не буду, все уже давно придумано. Просто процитирую великую и всезнающую Википедию.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

Для чего нужен CSS?

CSS используется веб-разработчиками для задания внешнего вида (шрифтов, цветов, отступов, расположения и др.) веб-страниц. CSS разработан для отделения основного содержимого документа (написанного на языке разметки, например HTML) от оформления этого содержимого (написанного на CSS). Такое отделение предоставляет веб-разработчикам большую гибкость, упрощает задание внешнего вида документов и оформление повторяющихся элементов разметки.

Синтаксис CSS

Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми и блока определений. Любой HTML элемент может быть селектором. Блок определений обрамляется фигурными скобками, и состоит из набора свойств и их значений.

Селектор {
Свойство: Значение; 
Свойство: Значение;
}

Подключение к веб-странице

CSS может подключаться к веб-странице четыремя способами:

1. Стили выносятся в отдельный файл с расширением .css, а в веб-страницу вставляется ссылка на подключаемый файл:

<link rel="stylesheet" type="text/css" href="style.css">

2. Так же как и в первом варианте стили выносятся в отдельный файл, только ссылка на веб-странице немного видоизменена:

<style type="text/css" media="all">@import "style.css";</style>

3. Непосредственно на веб-странице между тегами <head></head> :

<style type="text/css">
    p { 
        color: black;
        font-size:18px;
    }
 </style>

4. Задание стиля непосредственно в элементе разметки:

<p style="font-size: 12px; color: red;">Текст</p>

Самый распространенный, и он же более предпочтительный 1 способ.

Пример использования

Теперь время продемонстрировать небольшой пример использования CSS. Покажу на примере наипростейшей HTML страницы.

HTML:

<html>
<head> 
<title> Введение в CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head> 
<body>
<p>Пример использования CSS</p>
</body>
</html>

CSS (содержимое файла style.css, подключаемого к HTML странице):

p {
color: green;
font-size: 15px;
}

В данном примере на странице имеется элемент разметки – тег <p>, он же и является селектором в подключаемом CSS файле style.css. Этому селектору (тегу <p>) мы присвоили два свойства: 1. Свойство “color”, это свойство определяет цвет текста элемента. Этому свойству мы присвоили значение “green”, то есть зеленый. Проще говоря мы задали тексту находящемуся между элементов <p> </p> зеленый цвет. 2. Свойство “font-size”, определяет размер шрифта элемента. Этому свойству мы присвоили значение “15px”. Проще говоря мы задали тексту находящемуся между элементов <p> </p> размер шифта в 15 пикселей.

Заключение

Это только немного теории и практики для новичков. Хотелось бы повторно отметить что при использовании CSS правильнее всего подключать CSS стили к веб-странице отдельным файлом. Думаю эти “прописные истины” помогут в изучении CSS.

29.09.2008

мне понравилось. пешы исчо ;)

30.09.2008

Автору 5-у за работу!

30.09.2008

) спасибо, щас дневник дам.

26.10.2008

Не хватает для полного счастья экскурса в историю цсс. Резюмируя можно сказать что основная задача каскадных таблиц - отдельить структуру документа от визуального форматирования, к этому всем и нужно стремиться.

09.11.2008

Очень понравилось как написано. Понятно и доступно. Думаю именно с этого поста я и начну изучать css и html. Спасибо.

30.11.2008

Большой респект автору за то, что он взялся за такой труд, как разьяснение принципов и правил верстки. У меня самого руки никак не дойдут до этого. Хочу бросить одну ссылочку. Начинающим, думаю, она будет полезна
http://habrahabr.ru/blogs/webdev/25680/

06.02.2009

Почаще пишите в ключе "для чайников", неплохо получается. Прочитал с интересом.

24.02.2009

доброе время суток.
Смотрел много сайтов и находил вот такие кнопки с названием (версия для печати) и (версия для PDA)какие ньюансы здесь подстерегаются.Если можно то в крадце раскажите пожалуста что можно сделать в CSS и стоит что-то мне менять в HTML-страницах.
За ранее благодарен с уважением Алексей

28.02.2009

Круто круто :) поставила закладку, напиши про php плиз. Начала что то искать сама глаза на лоб полезли, а так хочется разобраться

28.02.2009

К сожалению php выходит за рамки этого блога. По php лучше книгу купите.

14.03.2009

Главное понятно написано

14.03.2009

Может вы книжку напишите

14.03.2009

Да на блоге уже на брошурку наберёться)

28.03.2009

Доброе время суток Администратор.
Раскажите пожалуста как посредством Стилевых таблиц зделать версию для печати.Или нужно делать для этих целей ссылку на файлы для печати.
За ранее благодарен с уважением Алексей.

28.03.2009

Здравствуйте Alexey.
"Версия для печати" это такая же страница сайта, только с минимальным оформлением и только нужным содержимым. Как вы и сказали нужно делать ссылку на файлы для печати.

31.03.2009

Доброе время суток Администратор.
Тоесть.Версия для печати подготавливается в удобном мне текстовом редакторе и сохраняется как текстовый файл.Далее заносится в каталог сайта и в папку "Версии для печати".Потом я должен сделать ссылочку на тот или иной файл.Правильно я Вас понял.
За ранее благодарен с уважением Алексей

31.03.2009

Alexey, вы меня "убиваете" такими вопросами. Я рекомендую прочитать повнимательнее мой предыдущий коммент и если непонятно, посмотрите как это сделано на других сайтах.

02.04.2009

Доброе время суток Всем.
Попробую еще раз объяснить свою проблему.Возможно для кого-то из Вас покажется пустяком.А возможно подскажет какие ошибки делаю.
Итак имеется файл назовем условно "А" в нем я прописываю стили для монитора тоесть для посещения.Делаю ссылку "Версия для печати" и привязываю её к файлу "В".В файле "В" делаю обратную привязку на файл "А" и прописываю новые правила для CSS а именно.Делаю отсятуп от левого края,фон белый,каринки вообще отключаю если это необходимо,шрифт устанавливаю Ариэль и Вердану с размером 10 пикселей.Наверное все.Может есть варианты проще.А может это ошибки начинающего.
За ранее благодарен с уважением Алексей

02.04.2009

Alexey, хватит спамить этот топик. Во первых вы спрашиваете не по теме, тут не обсуждается "версия для печати". Во вторых вы не до конца понимаете то о чем спрашиваете.
У "версии для печати" нет четких правил по которым она делается, вы делаете для пользователей, вот сделайте так чтобы им было удобно этим пользоваться, а как вы это сделаете и че куда линковать будете - это уже ваше дело.

03.04.2009

Доброе время суток.
Все ясно...
Без комента...
С уважением

30.04.2009

Спасибо за статью.
Для меня, новичка, отличный материал!

08.07.2009

Очень доступно.

23.07.2009

Я так понимаю это не язык програмимирования,а разновидность языков разметки гипертекста

25.07.2009

Каскадные страницы стилей очень удобн в верстке, в этом убедился на собственном опыте

08.08.2009

Во! И никаких толстенных бумажных или электронных книг по CSS не надо - всё кратко, ёмко, понятно. Если Вы продолжите серию статей на эту тему, то получится очень хороший учебник для новичков, который (главное!) не отобьёт охоту к изучению с первых же страниц, как это бывает с толстыми серьёзными руководствами в бумажном или электронном виде!

27.10.2009

Я хоть немного начал понимать css, очень доступно написано! У меня к вам вопрос если в теме для движка есть элементы, которые не нужны, можно ли их просто удалить или сайт накроется?

28.10.2009

Vita
Бездумно удалять не стоит. Нужно понимать что можно удалять, а что нельзя.

13.12.2009

Согласен с admin. Я тоже однажды пробовал, удалил думал ненужный код, а потом неделю восстаСогласен с admin. Я тоже однажды пробовал, удалил думал ненужный код, а потом неделю восстанавливал все)))навливал все)))

13.12.2009

Прочитав введение, сразу охото css изучать) Автор сумел заставить полюбить css))

06.07.2010

Хороший пост
Надо бы подучить, но все то время нет, то лень

14.02.2011

Ребята помогите плиз вот не как не пойму HTML книгу прочёл щас учусь CSS что мне сделать куда вписать и что вписать чтобы у меня открылся в браузере CSS код непойму некак помогите

14.02.2011

дошёл дошёл до определённого урока мне пишут потренируйтесь на практике а потом дальше проходите изучение а я немогу :
BODY {
background-color : #FFEE8C ;
}
H1 {
color: red ;
background-color :blue ;
}
P {
color: green ;
}
вот код я делаю так его в блокнод потом что писать html или css на концэ в название файла, помогите

11.05.2011

для качественной работы с материалом плиточный клей эластичный нужно внимательно посмотреть технические характеристики и подобрать для определенной работы

08.07.2011

смотрите вот тут http://films.mysamp.ru/ мегалайн фильм* мой личный блог http://timetosay.ru

01.08.2011

Надо бы подучить

05.08.2011

С каждым годом методы seo продвижение сайтов становятся все изобретательней, как же за всем этим поспеть...

17.12.2011

а я тоже давно разбираюсь с css и кое что полезное делать уже научился, в принципе ничего сложного, как это выглядит изначально. гораздо сложнее на мой взгляд использовать javascript