Вредоносное ПО (malware) - это назойливые или опасные программы,...
Один из самых частых вопросов в процессе знакомства с новыми стандартами - в чем разница между атрибутами HTML-элементов "id" и "class". Ведь эффект, вроде бы, одинаковый.
Одинаковый эффект у них только в самых простых случаях использования в CSS. На самом деле отличий полно.
Суть
id уникальное собственное имя элемента на странице, то есть на странице не должно быть нескольких элементов с одним id. Например блоку с шапкой сайта можно дать id="title" . class вольный признак, который дается обычно нескольким элементам, чтобы отличать их от других. Например, картинкам, которые просто сопровождают текст, можно дать class="decor" , а картинкам, которые важны для понимания текста - class="content" .Следствия
Из этой сути прямо или косвенно вытекают остальные отличия, которые видны и в HTML, и в CSS, и в скриптах.
Якорные ссылки Если нужно поставить ссылку на какой-то элемент в странице, то ему достаточно дать id (
...
) и ссылаться на него якорем (http://site/path/#about). Это, кстати, предпочтительный способ взамен старого . Множественные признакиЭлементу можно задавать несколько классов через пробелы: . Причем их можно использовать и по отдельности:
/* все important элементы */ .important {color:red;}
И в сочетании:
/* элементы с important и centered одновременно */ .important.centered {border:solid black 1px;}
Обратите внимание, что между классами в CSS-правиле нет пробела.
Разный вес в CSS
У каждого правила в CSS есть "вес", по которому определяется порядок их применений. У id этот вес больше. Поэтому если у элемента задан и id, и class:
...
То из двух правил
#about {color:green;} .important {color:red;}
Выиграет первое, цвет заголовка будет зеленым. (Веса правил - это отдельная песня, о ней будет статья в свое время.)
Поиск в скрипте Элемент с "id" можно легко найти в скрипте с помощью функции document.getElementById() . Для классов такой функции нет.
Эта статья - часть находящегося в процессе написания цикла под рабочим названием "Учебник". Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории "Учебник ", где они сейчас собраны в обратном хронологическом порядке.
А чем CSS отличается от HTML ?
Дело в том, что изначально html использовался исключительно для разметки содержимого документа. Т.е. с его помощью указывалось мол это параграф, а это таблица, а это - картинка.
Что было дальше? С каждым месяцем количество пользователей интернет росло. Выдвигались все более серьезные требования к дизайну, т.е. внешнему оформлению страниц. Вскоре разработчиками были изобретены новые теги, такие как , ,
Вот еще пример отличия css от html:
Допустим перед нами стоит задача сделать сайт о природе из 100 страниц. Как вы понимаете, по правилам хорошего тона, весь сайт необходимо выполнить в одном стиле, к примеру, зеленый фон, шрифт Verdana 14 размера, ссылки красного цвета.
Если мы делаем такой сайт на чистом html, то на каждой новой странице нужно указывать зеленый фон, указывать чтобы ссылки были красного цвета, каждому новому параграфу указывать шрифт 14 размера. Т.е. каждой странице нужно как-бы заново создавать стиль. Теперь сделаем тоже самое на CSS . В отдельном файле создаем стиль одинаковый для всех страниц. И в каждой странице пропишем единственную строчку подключающую этот стиль. Вот и все!
Ну и чем же это круче? А Вы представьте, что в один прекрасный день вы захотели поменять дизайн всего сайта. В случае с чистым html , Вам придется заходить на каждую страницу и менять все параметры на другие, представьте сколько это займет времени. Но в случае использования CSS вы просто поменяли эти параметры в файле стилей и на всех 100 страницах дизайн обновился! чувствуете разницу?
Тем более с помощью CSS можно делать такие вещи, которые на html сделать вообще нереально. По ходу обучения Вы сами увидите это.
Для того чтобы понять какая же между CSS и HTML разница, необходимо разобраться, что же такое CSS, а что такое HTML.
В переводе с английского CSS означает «Каскадные таблицы стилей». CSS является технологией управления дизайном веб-страницы, он предоставляет множество возможностей для описания внешнего вида страницы, также позволяет значительно упростить вид HTML страницы с помощью переноса оформления для элементов страницы в CSS файл. CSS дает возможность использования одного оформления для неограниченного количества элементов HTML страниц. Это позволяет на всех страницах, которые используют один класс для оформления, изменять оформление на всех страницах сайта, изменив его 1 раз в CSS файле, это очень удобно, если на сайте больше 50 страниц, не нужно в каждой из них изменять оформление элемента.
Что же такое HTML
? В переводе с английского HTML означает «Язык разметки гипертекста». HTML является стандартным языком разметки HTML документов. Язык разметки гипертекста используется непосредственно для структурирования содержимого HTML страницы. С его помощью можно создавать таблицы, оформлять их, создавать оформление для текстов и .
HTML страницы без использования CSS
становятся сложными и запутанными, так как оформление для каждого элемента прописывается заново, что значительного увеличивает объем текста. Например, есть HTML страница, на которой размещено 3 части текста, которые необходимо оформить одинаково (размер, цвет), но использовать HTML теги для оформления всех трех сразу не получается, так как эти фрагменты находятся в разных местах HTML страницы. Для оформления таких текстов будет необходимо использовать код каждый раз, для каждого фрагмента в отдельности.
При использовании же CSS, мы один раз создадим оформление для класса, а потом в коде HTML-страницы просто пропишем этот класс каждому из трех фрагментов. Теперь HTML код теперь выглядит менее объемно, не так ли? Изменив лишь один элемент CSS, мы можем поменять оформление сразу всех страниц сайта. А этих страниц могут быть тысячи.
Выводы сайт
- HTML является языком, на котором создается веб-страница. CSS является технологией управления дизайном этой веб-страницы.
- С точки зрения дизайна страницы, CSS более удобен, чем прописывание оформления в HTML, т.к. позволяет добиться существенного уменьшения размера кода и задавать оформление сразу для множества страниц.
Цель создания CSS
ПРИВЕСТИ НЕСКОЛЬКО САЙТОВ
Верстка при помощи CSS.
Все мы знаем, что такое интернет, сайты и веб страницы. Половина из этих людей в курсе от куда берутся и что же это такое - веб страница. И ещё меньше народа понимает, как строится веб страница на сегодняшний день, по каким технологиям, правилам и стандартам. Я не буду рассказывать всю цепь запроса страниц с сервера. Моей задачей является рассказать, как страницы получаются такими красочными и интересными в плане графики и исполнения, что на них хочется заходить и заходить.
Технология, которая позволяет достичь такое красочное отображение сайтов в ваших браузерах называется CSS.
CSS - это сокращение от Cascading Style Sheets - в переводе Каскадные таблицы стилей. Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML.
Уникальное изобретение человечества, значительно облегчающее создание веб-сайтов. CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html.
Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
Дело в том, что изначально html использовался исключительно для разметки содержимого документа. Т.е. с его помощью указывалось, мол, это параграф, а это таблица, а это - картинка.
С каждым месяцем количество пользователей интернет росло. Выдвигались все более серьезные требования к дизайну, т.е. внешнему оформлению страниц. Вскоре разработчиками были изобретены новые теги, такие как:
представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
На первый взгляд нет никакой разницы что использовать: id или class . Ведь присвоив одинаковые параметры CSS стилей для id и class - результат будет идентичен. На самом деле, отличий между id и class в CSS практичесски нет, за исключением приоритета их обработки. Но в некоторых других случаях, которые весьма часто используются в web-разработке, разница весьма ощутима. Эта статья как раз и выделяет все отличия class и id .
Id
Id - это уникальный идентификатор элемента. На одной странице один идентификатор применяется только единожды, хотя можно применять и несколько одинаковых идентификаторов в пределах одной страницы, но это может вызвать проблемы при использовании HTML-якорей и JS. Если попытаться присвоить одному элементу (HTML-тегу) два различных ID, то сработает только правила из первого (самого левого) ID
Пример 1: как не желательно использовать идентификаторы (ID)
<p
id
=
"my_id_r7t"
>
Блок выделенного текста</
p
>
<p
id
=
"my_id_r7t"
>
Блок выделенного текста</
p
>
Пример 2: как нельзя использовать идентификаторы (ID)
<p id = "my_id_r7t" id = "my_id_r9t" > Присвоение двух или более id 1-му элементу не допускается</ p >
В случае одновременного применения к одному элементу id и class, приоритет у ID будет выше, чем у class:
Определение стилей CSS
#my_id_r7t
{
color
:
green
;
font-weight
:
bold
;
}
Этому абзацу присвоены класс my_class и идентификатор my_id.
Как видно, цвет приобрел значения, записанные в идентификаторе. Но если присмотрется внимательнее, то id и class могут с успехом дополнять друг-друга: жирный шрифт, заданный в идентификаторе сочетается с курсивным начертанием, записанным в class.
Если же дописать дескриптору <p > еще и стиль: <p class = "my_class_r7t" style = "color: grey" id = "my_id_r7t" > , то результат будет таким:
Самым высоким приоритетом обладает стиль, присвоенный дискриптору с помощью style="...".
Хороший пример приоритетов, приведен в официальной документации по CSS (eng) . В кратце, приоритеты в порядке убывания таковы: style, id, class, стиль тега.
Элемент id может быть применён в качестве HTML-якоря, вместо более древней конструкции <a name = "imya_jakorya" > , для того, чтобы можно было сослаться на определенную часть страницы, без ее перезагрузки с попомщью <a href = "#imya_jakorya" > Наверх</ a > . Если на странице окажется несколько идентичных id, возникнет неоднозначная ситуация.
При программировании страниц с помощью JS, зачастую используется функция getElementById() , которая также "рассчитывает" на то, что идентификатор должен быть уникальным. В противном случае могут возникнуть ошибки в коде.
Class
При использовании class , одному HTML-дескриптору можно назначить стили из нескольких классов одновременно:
My_class_r7t
{
color
:
blue
;
font-style
:
italic
;
}
.my_class_ffR5
{
color
:
black
;
background-color
:
#fafafa
;
padding
:
3px
;
border
:
1px
solid
#757575
;
margin-left
:
30px
;
}
Имена различных классов записываются через пробел:
<p class = "my_class_ffR5 my_class_r7t" > Пример применения 2-ух различных классов для 1-го HTML-тега.</ p >
Результат применения двух различных классов для 1-го дескриптора HTML.
Классы my_class_r7t и my_class_ffR5 устанавливают различные цвета содержимому HTML-тега. Использован будет тот цвет, который определен в файле стилей позже (в данном случае class my_class_ffR5 записан после my_class_r7t). Порядок применения классов в самом HTML-дескрипторе значения не имеет.
Чтобы назначить составным классам уникальное стилевое оформление, они записываются вместе, без проблеов:
My_class_bbbb755
{
font-weight
:
bold
;
}
.my_class_ffR5
.my_class_bbbb755
{
text-align
:
right
;
}
Выравнивание по правому краю, будет применено только в случае, когда одному HTML-дескриптору присвоено сразу 2 класса:
"my_class_ffR5 my_class_bbbb755" > Пример применения стилей для составных классов
Как это выглядит, смотрите ниже:
Пример применения стилей для составных классов
Один и тот же class, в отличае от id, можно без проблем присваивать не ограниченному кол-ву различных элементов:
<div
class
=
"my_class_ffR5"
>
...</
div
>
<p
class
=
"my_class_ffR5"
>
...</
p
>
<h5
class
=
"my_class_ffR5"
>
...</
h5
>
<div
class
=
"my_class_ffR5"
>
...</
div
>
<p
class
=
"my_class_ffR5"
>
...</
p
>
Class или id - что использовать?
На самом деле, нельзя выбирать, что использовать: class или id. Это на подобии, как выбирать, что лучше: есть или пить? Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы нечаяно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS и др.
