CSS - как создается???
Автор темы WorkInNet, 03 июн 2006 04:21
Сообщений в теме: 14
#1
Отправлено 03 Июнь 2006 - 04:21
вот вроде многаю знаю по HTML, но до сих пор не могу до конца разобраться с CSS, в принципе я понимаю что это такое, если не правильно, то думаю поправите, CSS - это заложение стиля и дизайна сайта в одном файле, а затем в ходе написания html-кода для сайта просто делается ссылка на этот файл и все, отдельно ненужно каждый раз прописывать шрифты, цвета и т.д., и кстати сколько должно быть таких файлов как правило? И скажите как вообще правильно создавать такой файл, и вообще все нюансы, связанные с этим делом?
#2
Александр Соловьев
-
- Киберсанты
-
- 1 626 сообщений
Оптимизатор
177
Очень хороший
Очень хороший
-
Страна, Город:
Латвия, Резекне - Пол:Мужчина
Отправлено 03 Июнь 2006 - 07:06
На объяснение надо целую книгу писатьи вообще все нюансы, связанные с этим делом?
Хотя их уже и так много написано
пошурши в радимом Яндексе
Продвигаю сайты в топ10-топ1 в Яндексе
ICQ — 9947888
Советую владельцам сайтов с тИЦ от 40 зарабатывать по 40-50$ в месяц.
ICQ — 9947888
Советую владельцам сайтов с тИЦ от 40 зарабатывать по 40-50$ в месяц.
#3
Отправлено 03 Июнь 2006 - 09:46
Стили (CSS).
CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.
Описания стилей находятся в тегах <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>. Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом :
Описываем стили под именем Example :
<STYLE><!--
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
--></STYLE>
Здесь вызываем описания стилей :
<div class="Example"> Пример </div>
Если Вы распологаете стили в отдельном файле, тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указыватся теги <STYLE></STYLE>. Например:
У нас есть файл Example.css, содержажий такие параметры (подчеркиваем ссылки только при наведении на них курсором):
<!--
A { text-decoration: none; }
A:hover { color: #FF0000; text-decoration: underline; }
-->
Ссылка на него в HTML документе будет выглядить так:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Вы можете определить стиль для любого тега отдельно. Для этого нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.
<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Пример </H3>
В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.
Свойства шрифта:
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
Пример:
P {font-family: Verdana, sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter (обычный), bold (жирный), bolder (очень жирный)
Пример:
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах.
Примеры использования для тегов H1, H2, H3:
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}
Свойства текста:
text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста
Пример использования для тега Н4:
H4 {text-decoration: underline;} (подчеркивание)
H4 {text-decoration: line-through;} (зачеркивание)
text-align Определяет выравнивание элемента.
Пример:
P {text-align: left} (выравнивание по левому краю)
P {text-align: right} (выравнивание по правому краю)
P {text-align: justify} (выравнивание по ширине)
P {text-align: center} (выравнивание по центру)
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
Пример использования для тега H1:
H1 {text-indent: 60pt;}
line-height Управляет интервалами между строками текста.
Пример:
P {line-height: 50 %}
Цвет элемента и фона:
color Определяет цвет элемента I {color: yellow;}
Пример использования для тега H3:
H3 {color: #0000FF;}
background-color Устанавливает цвет фона для элемента.
Пример использования для тега H3:
<H3 style=”background-color:gold; color:brown;”> Пример </H3>
Пример
Свойства границ:
margin-left (слево)
margin-right (справо)
margin-top (сверху)
margin-bottom (снизу) Устанавливают значения отступов вокруг элемента.
Пример использования для рисунка:
IMG { margin-left: 20pt}
IMG { margin-right: 20pt}
IMG { margin-top: 20pt}
IMG { margin-bottom: 20pt}
Единицы измерения:
px Пиксели
cm Сантиметры
mm Миллиметры
pt или % проценты
--------------------------------------------------------------------------------
CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.
Описания стилей находятся в тегах <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>. Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом :
Описываем стили под именем Example :
<STYLE><!--
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
--></STYLE>
Здесь вызываем описания стилей :
<div class="Example"> Пример </div>
Если Вы распологаете стили в отдельном файле, тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указыватся теги <STYLE></STYLE>. Например:
У нас есть файл Example.css, содержажий такие параметры (подчеркиваем ссылки только при наведении на них курсором):
<!--
A { text-decoration: none; }
A:hover { color: #FF0000; text-decoration: underline; }
-->
Ссылка на него в HTML документе будет выглядить так:
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Вы можете определить стиль для любого тега отдельно. Для этого нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.
<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Пример </H3>
В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.
Свойства шрифта:
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
Пример:
P {font-family: Verdana, sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter (обычный), bold (жирный), bolder (очень жирный)
Пример:
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах.
Примеры использования для тегов H1, H2, H3:
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}
Свойства текста:
text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста
Пример использования для тега Н4:
H4 {text-decoration: underline;} (подчеркивание)
H4 {text-decoration: line-through;} (зачеркивание)
text-align Определяет выравнивание элемента.
Пример:
P {text-align: left} (выравнивание по левому краю)
P {text-align: right} (выравнивание по правому краю)
P {text-align: justify} (выравнивание по ширине)
P {text-align: center} (выравнивание по центру)
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
Пример использования для тега H1:
H1 {text-indent: 60pt;}
line-height Управляет интервалами между строками текста.
Пример:
P {line-height: 50 %}
Цвет элемента и фона:
color Определяет цвет элемента I {color: yellow;}
Пример использования для тега H3:
H3 {color: #0000FF;}
background-color Устанавливает цвет фона для элемента.
Пример использования для тега H3:
<H3 style=”background-color:gold; color:brown;”> Пример </H3>
Пример
Свойства границ:
margin-left (слево)
margin-right (справо)
margin-top (сверху)
margin-bottom (снизу) Устанавливают значения отступов вокруг элемента.
Пример использования для рисунка:
IMG { margin-left: 20pt}
IMG { margin-right: 20pt}
IMG { margin-top: 20pt}
IMG { margin-bottom: 20pt}
Единицы измерения:
px Пиксели
cm Сантиметры
mm Миллиметры
pt или % проценты
--------------------------------------------------------------------------------
#5
Отправлено 05 Июнь 2006 - 13:11
спасибо...теперь вроде более или менее все понятно)
а репка на форуме зачем?
Инфоклуб — это глобальное сообщество людей, обучающихся через интернет, обучающих через интернет и зарабатывающих на этом. Узнайте больше на infoclub.info
#7
Анатолий Белоусов
-
- Администрация
-
- 27 348 сообщений
Основатель форума
8 764
Очень хороший
Очень хороший
-
Страна, Город:
Россия, г. Ижевск - Пол:Мужчина
Отправлено 05 Июнь 2006 - 16:53
не понял ты это о чем?!
Речь шла о системе РЕПУТАЦИИ -- см. слева, внизу...
Там плюсик и минусик...
Хотите сделать хорошо человеку - жмите на плюс. Плохо - на минус...
Обучение ИНВЕСТИРОВАНИЮ и ТРЕЙДИНГУ - https://www.infoclub.info
Известнейшее мультимедийное ИЗДАТЕЛЬСТВО - http://www.info-dvd.ru
Авторский блог АНАТОЛИЯ БЕЛОУСОВА - http://www.cyberdengi.com
#8
Отправлено 05 Июнь 2006 - 16:56
вот именно!
workinnet писал (а):
спасибо...теперь вроде более или менее все понятно
А я обратил внимание на то, что отблагодарить участника, который вам помог, можно поставив ему + в репутацию ("репку" )
вот и всё
)оскорблять я никого не собирался, боже упаси
для этого и сущ-ет форум : для того, чтобы отвечать на овпросы, интересующихся
Инфоклуб — это глобальное сообщество людей, обучающихся через интернет, обучающих через интернет и зарабатывающих на этом. Узнайте больше на infoclub.info
#9
Отправлено 05 Июнь 2006 - 17:16
вот именно!
workinnet писал (а):
спасибо...теперь вроде более или менее все понятно
А я обратил внимание на то, что отблагодарить участника, который вам помог, можно поставив ему + в репутацию ("репку" )
вот и всё
оскорблять я никого не собирался, боже упаси
для этого и сущ-ет форум : для того, чтобы отвечать на овпросы, интересующихся
ок, тогда держите от меня "+"
#10
Отправлено 06 Июнь 2006 - 13:27
елы палы
да не мне + а cibersant'у !!!
да не мне + а cibersant'у !!!
Инфоклуб — это глобальное сообщество людей, обучающихся через интернет, обучающих через интернет и зарабатывающих на этом. Узнайте больше на infoclub.info
#11
Александр Соловьев
-
- Киберсанты
-
- 1 626 сообщений
Оптимизатор
177
Очень хороший
Очень хороший
-
Страна, Город:
Латвия, Резекне - Пол:Мужчина
Отправлено 06 Июнь 2006 - 13:55
А тебе что плюсик мешает? Ща исправимелы палы
да не мне + а cibersant'у !!!
шучу
Продвигаю сайты в топ10-топ1 в Яндексе
ICQ — 9947888
Советую владельцам сайтов с тИЦ от 40 зарабатывать по 40-50$ в месяц.
ICQ — 9947888
Советую владельцам сайтов с тИЦ от 40 зарабатывать по 40-50$ в месяц.
#12
Отправлено 06 Июнь 2006 - 15:08
просто я то не причем. а человек мне в репку пишеь "благодарность"получается, мол, выпросил
Инфоклуб — это глобальное сообщество людей, обучающихся через интернет, обучающих через интернет и зарабатывающих на этом. Узнайте больше на infoclub.info
#14
Отправлено 06 Июнь 2006 - 18:44
хм..чето я такого не слышал
Инфоклуб — это глобальное сообщество людей, обучающихся через интернет, обучающих через интернет и зарабатывающих на этом. Узнайте больше на infoclub.info
#15
Александр Соловьев
-
- Киберсанты
-
- 1 626 сообщений
Оптимизатор
177
Очень хороший
Очень хороший
-
Страна, Город:
Латвия, Резекне - Пол:Мужчина
Отправлено 06 Июнь 2006 - 19:14
Все такМожно создавать несколько файлов стилей и они будут распологатся в порядке важности. Таким образом будет создаватся так называемый каскад (от этого и название). Вот так если не ошибаюсь
Например создаете файл стиля для ссылок, таблиц, шрифтов и т.д.
Очень удобно, и ненадо все в один файл сувать
Продвигаю сайты в топ10-топ1 в Яндексе
ICQ — 9947888
Советую владельцам сайтов с тИЦ от 40 зарабатывать по 40-50$ в месяц.
ICQ — 9947888
Советую владельцам сайтов с тИЦ от 40 зарабатывать по 40-50$ в месяц.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 скрытых пользователей
