Что такое CSS презентация

Что такое CSS
CSS (Cascading Style Sheets) - каскадные таблицы стилей.
Стиль - набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня (теги
) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.
Каждый элемент на странице может иметь свой стиль. Набор стилей всех элементов называют таблицей стилей.
Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.
CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила: CSS состоит из селектора и блока объявления стилей,
Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:

пример селектора
p.title { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: maroon; font-weight: bold }
пример селектора
p#title { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: maroon; font-weight: bold }
В примере используется селектор с именем (id) title для которого задано определение стиля. Определение состоит из свойства и его значения разделенных двоеточием. Определения разделяются точкой с запятой.
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}

Селекторы
Классы (.myclass)
ID (#myid)
Элементы (div)
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.
Приоритеты рассчитываются от большего к меньшему:
1. свойство задано при помощи !important;
2. стиль прописан инлайново в теге в html через атрибут style=””;
3. количество идентификаторов (#id) в селекторе;
4. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе;
5. количество имён тегов в селекторе;

Кроме того, имеет значение относительный порядок расположения свойств – свойство, указанное позже, имеет приоритет.
Также следует помнить о наследовании — это перенос правил форматирования для элементов, находящихся внутри других.
Например, если для тега
задан красный цвет текста, а для курсива
, который находится внутри абзаца, нет, то в этом случае вложенный элемент наследует свойства своего родителя и курсивный текст также будет красным.

У блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого
есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.
Затем идет граница блока (border), которая может быть как видимой, так и невидимой.
Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента.
Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.
Элементы могут быть блочными и строчными По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а
и
- строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство множество значений.

Border , Padding , Margin
Текст в параграфе.
Текст в параграфе.
Универсальное свойство border позволяет одновременно
установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left,border-right.

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style.
Для
того, чтобы увидеть отступы, поля и границы, зададим границу
p{ border:1px solid red;}
Отступы от границы задаются свойством padding, оно позволяет задать величину внутреннего отступа сразу для всех сторон элемента или определить ее только для указанных сторон.
Добавляем к нашему свойству p{ padding:10px;}

Далее задаем внешние отступы – Margin . Отступом является пространство
от границы текущего элемента до внутренней границы его родительского элемента
Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора равное нулю.
Свойство margin позволяет задать величину (рх или %) отступа сразу для всех сторон элемента или определить ее только для указанных сторон.
Auto Указывает, что размер отступов будет автоматически рассчитан браузером.
Inherit Наследует значение родителя.
И снова добавляем свойства к нашему параграфу p{ margin:50px;}
А теперь добавляем ширину и высоту нашим блокам
p{ width:100px; height:50px;}

box-sizing
За долгое время, люди осознали, что обременять себя изнурительными вычислениями
не очень весело, поэтому было создано новое свойство CSS под названием box-sizing. Когда вы устанавливаете box-sizing: border-box; для элемента, поля и границы самого элемента больше не увеличат его ширину.
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Это гарантирует, что размеры всех элементов могут быть определены более интуитивно.
Поскольку box-sizing достаточно новое свойство, вы должны использовать -webkit- и -moz- префиксы, как я в этих примерах. Эта техника позволяет реализовывать экспериментальные возможности в конкретных браузерах. Кроме того, имейте в виду, что один из них это IE8 и старше.

Многослойность
Представьте себе множество листков бумаги, на каждом из которых что-то написано
или нарисовано. Мы видим только содержание верхнего листа, но если мы его снимем, то увидим содержание следующего листа и т.д.
Также и в CSS, мы можем создать несколько слоев, на каждом разместить необходимые элементы и пронумеровать слои с помощью свойства z-index. Чем больше номер, тем выше слой находится в стопке слоев. Например, если сделать 6 слоев, то пользователь сначала увидит именно слой z-index:6.
Чтобы было визуально понятно давайте изменим нашему блоку контент цвет фона
#menu {Position: relative; z-index:1;}
#content{ Left;0;background: green; z-index:2}
body{background: blue;}
Теперь, давайте сделаем текст на странице белым цветом:
body{background: blue;color: white;}
Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):
h1{color:red;}
h2{color:yellow;}

Стиль z-index может работать только в паре с position: relative\absolute\fixed
Группировка селекторов
Если стили для нескольких селекторов совпадают (например, заголовки первых трех уровней - зеленого цвета), то их можно сгруппировать. Для этого селекторы, нужно перечислить через запятую. Пример:
h1, h2, h3{ color:green;}
Если кроме цвета, мы хотим задать нашим заголовкам размер. Тогда мы можем просто дописать стили ниже:
h1, h2, h3{ color:green;}
h1{ font-size:18px;}
h2{ font-size:16px;}
h3{ font-size:14px;}

Color
в компьютерном дизайне чаще всего используют цветовую модель RGB. В ее
основе лежат три цвета: red - красный, green - зеленый, blue - синий. С помощью смешивания этих трех цветов можно получить почти весь видимый спектр.
Для указания RGB-цвета в HTML используется шестнадцатеричная система счисления. Начинается код цвета со спецсимвола # (что и указывает на шестнадцатеричный код), а далее следует шесть символов. Первые два отвечают за количество красного оттенка, третий и четвертый за насыщенность зеленого, а пятый и шестой - синего. Так, #FF0000 - красный цвет, #00FF00 - зеленый, #0000FF - синий, а #FFFFFF - белый.
Значениями свойства color могут быть именные цвета (red, blue...), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)).
Итак, задать цвет текста для элемента можно тремя способами:
body{ color:green;}
h1{ color:#FF0000;}
h2{ color:rgb(255,0,0);}

Фон - background
На самом деле это группа свойств, так или иначе
связанная с фоном. При помощи CSS, фон можно задать любому элементу. Пример:
Здесь содержимое документа
Рассмотрим группу свойств background:
background-color - задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit.
body{ background-color:#243CED; color: yellow; }
background-image - задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей.
body{
background-image:url(picture.gif);
background-color:#243CED;
color:yellow;
}

background-repeat - задает возможность повторения фонового изображения. В качестве фонового изображения
может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:
repeat - повторять изображение по горизонтали и вертикали.
repeat-x - повторять изображение только по горизонтали.
repeat-y - повторять изображение только по вертикали.
no-repeat - не повторять изображение.
По умолчанию используется значение repeat
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
color:yellow;
}

background-position - задает расположение элемента относительно окна браузера. Значения можно задавать
в процентах, в единицах длины и при помощи ключевых слов.
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:10% 30%;
color:yellow;
}
background-size свойство позволяет масштабировать фоновое изображение по вертикали и горизонтали (background-image). Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте. Не наследуется.
div {background-size: 300px 150px;}
div {background-size: 50% 30%;}
div {background-size: cover;}
div {background-size: contain;}

Сокращенная запись свойства background в CSS для многих свойств
существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в произвольном порядке.
body{ background:url(picture.gif) no-repeat #33CCFF center top;}

Псевдоэлементы
CSS применяется к элементам HTML. Но есть несколько элементов, которых не
существует в HTML, но они присутствуют на странице (первая буква слова и первая строка абзаца). Такие элементы и называют псевдоэлементами. Им можно задавать стиль, как и элементам HTML.
after - добавление контента ПОСЛЕ указанного элемента
before - добавление контента ДО указанного элемента
firstletter - стили для первой буквы в контенте элемента
firstline - стилевое оформление первой строки текста в элементе
selection - применение стилей при выделении текста в элементе
Одной из самых распространённых задач является добавление фразы до или после элемента , при помощи before и after
какой то текст
Как красиво, не правда ли? Пиши себе и пиши, первые буквы сами получатся большими !
А в этом самом абзаце первая строчка будет в 16 px; написана будет жирным шрифтом и красного цвета. А также можно выделять разными цветами первые строки и задавать отличительные стили при выделении текста

В css пишем :
.quote {display block; width:50%; margin: 50px auto
50px auto;}
p { display block; overflow:hidden; width:50%; margin: 50px auto 50px auto;}
div { display block; overflow:hidden; width:50%; margin: 50px auto 50px auto;}
.quote:before {content:”цитата”;}
.quote:after {content:”цитата после текста”;}
p:first-letter{ color:red; font-size:20pt; color:green }
p:first-line{ color:blue;}
div:first-line {font-size:16px;font-weight:bold; color:red}
first-line применяется только к блочным элементам !
Псевдоклассы
Псевдоклассы - это элементы, которые указывают определённый набор стилей, в случае различных событий и изменений состояния элемента. Например, как изменятся стили в случае наведения, клика и тд на элемент.
hover - при наведении курсора на элемент
focus - при клике на элемент, например поле для ввода данных
active - при активации элемента пользователем, то есть в момент клика
link - стиль для не посещённых ссылок
visited - стилевое оформление к посещенным ссылкам
firstchild - стиль для первого дочернего элемента селектора
lastchild - изменения в последнем элементе родителя

В CSS существуют псевдоклассы, которые работают со ссылками. У ссылок
есть четыре состояния: простая, активная, посещенная и та, на которую наведен курсор. Состояние ссылок зависит от действия пользователя, и браузер, в зависимости от этих действий может применять разные стили. Для описания этих стилей и существуют псевдоклассы.
a:active - задает стиль активной ссылки.
a:visited - задает стиль посещенной ссылки.
a:hover - задает стиль ссылки, на которую наведен курсор.
По умолчанию ссылки синего цвета и подчеркнуты. Пусть на нашей html-странице есть ссылка:
ссылка 1
ссылка 2
ссылка 3
ссылка 4

Давайте сделаем ссылку зеленой и уберем подчеркивание:
a{ color:green; text-decoration:none;}
Свойство text-decoration отвечает как
раз за подчеркивание, а его значение none указывает, что подчеркивать не надо.
Теперь, давайте зададим стиль для ссылки, на которую наведен курсор. Пусть она становится красного цвета:
a:hover{ color:red;}
a:active{ color: OldLace;}
a:visited{ color: NavyBlue;}
a:nth-child(2n) {background: #f0f0f0;}
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
last-child задает стилевое оформление последнего элемента своего родителя.
a: first-child { color:blue; }
a: last -child { color:yellow; }
Input {color:black}
Input:focus {color:red}

Селекторы и их комбинации
Мы уже с вами знаем как в цсс
записывать свойства для тега , ид , класса
заголовок
заголовок
заголовок
ссылка 1
ссылка 2
ссылка 3
ссылка 4
ссылка 5

Семантика
Семантика в HTML верстке - это использование HTML тегов по их
назначению, правильное их наименование и их группировка. Так, например, тег h1 описывает заголовок документа. Заголовков есть шесть видов h1-h6, которые отличаются размерами и значимостью (в стандартных стилях они отличаются размерами, а отличие на вашем сайте должны сделать вы сами). Думаю, с заголовком все понятно. Есть также ссылки
, списки
,
и
, таблицы и много других. Если есть задача сделать таблицу, то каждый, не задумываясь, будет использовать тег
. Но бывают и спорные моменты.
Если в контенте есть ссылка на другую страницу, то ее мы просто делаем тегом
. Это понятно. А вот, например, есть кнопка со стилями cursor:pointer, которая имеет состояния :hover и :active . Ее тоже делать ссылкой? Нет! Ведь при клике на нее мы не переходим на другую страницу. Потому для такого элемента нужно использовать какой-то нейтральный тег -
или
. А если кнопка , которая визуально похожа на ссылку , находится в форме то однозначно надо использовать
Слайд 24
Верстая форму, вам наверняка нужно будет делать подписи к полям
формы - "Ваше имя" или "Введите email". Эти подписи нужно делать при помощи тега
. Именно он предназначен для данного элемента. К тому же, помимо семантики, вы получите и правильный функционал. Например, подписи в элементам
и
, при клике на них, будут делать активными(выделенными) соответствующие элементы управления.
Возможности CSS позволяют из почти любого элемента сделать визуально другой вид, менять элементы местами, скрывать их и т.д. Для проверки правильности выбора тега, попробуйте отключить CSS. Если заголовок остался похожим на заголовок, список на список, а ссылка на ссылку, то вы идете в правильном направлении.
Слайд 25
Также семантика связана и с валидностью. Тег
не может
содержать другого тега
, в строчный элемент не может содержать блочный. Если ваша страница не прошла проверку на валидность https://validator.w3.org , то скорее всего у нее проблемы и с семантикой.
Разница между class(класс) и id(идентификатор) заключается в том, что идентификатор должен быть уникальным, то есть единственным на странице. Вообще, идентификаторами нужно пользоваться осторожно. Их чаще используют для обращения к ним из скриптов или при работе с формами.
Потому желательно не задавать элементам идентификаторы без особой необходимости. Скорее хорошим тоном будет еще задать идентификатор основным блокам - header, footer, content, breadcrumbs(хлебные крошки), search.
И так надо запомнить, что названия должны быть логичными и интуитивно понятными. Это также поможет ориентироваться в вашем коде другим людям и легче запоминать классы элементов.
Слайд 26
Слайд 27
HTML страница в общем случае должна быть поделена на блоки
- header, footer, menu, left, right. Эти блоки делятся не только для красоты, но и по функциональности. В шапке сайта обычно лого компании, девиз, контакты - вся самая важная информация сайта. В контентной части - статья. Это самая важная информация данной страницы. А в боковой части - дополнительная информация. Это может быть список категорий, материалы по теме, другая информация. Страница сайта не может быть построена из простого набора блоков, они должны быть в правильном порядке и иметь четкую и правильную структуру.
Также важно разделять контент страницы и ее оформление. Для этого достаточно просто вынести все CSS стили в отдельный CSS файл, а скрипты - в JavaScript файл. Картинки должны быть на странице только в роли картинок - в теге
с атрибутом alt. А все изображения, относящиеся к оформлению, стоит сделать в виде блоков с фоновым изображением.
Не стоит прописывать стилизацию элемента в теге style, если нет особой необходимости. Ведь теперь есть псевдоклассы, при помощи которых вы можете выбрать элементы по их порядковому номеру, четные и нечетные, первые и последние.
Ну а для раскрутки сайта польза семантики, думаю, ясна. Поисковый робот первым делом ищет на странице заголовок по тегу
. Ему будет сложно это сделать ,если ваш заголовок не находится в теге
! :-) Также важно правильное оформление меню, хлебных крошек. Очередной раз напомню, что не обойтись без атрибутов title для ссылок и alt для картинок. Это нужно и для семантики, и для валидности, и для юзабилити.
Слайд 28
Заголовки должны выделяться тегами H1, H2, H3, H4, но никак не
B и STRONG. Параграф - с помощью P тега, но никак не DIV. При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются вложенные списки, соответственно создаем внутри первичного LI элемента еще один UL список.
В HTML, тег IMG должен использоваться только для больших картинок и иконок. Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.
То же самое по поводу JavaScript.
Слайд 29
Слайд 30
Кроссбраузерность
Кроссбраузерность страницы – это верстка которая отображается одинаково во всех
основных браузеров : Opera, Firefox, Internet Explorer , Safari, Google Chrome
Если в не основном для вас браузере какой то блок отображается не так как нужно , проверяйте семантику блока , далее стили которыми описали элемент в CSS , скорее всего что то написано не верно или не написано не полностью! Стили «по умолчанию» в разных браузерах РАЗНЫЕ !
Вендорные префиксы — это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.
Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с "-" или "_" зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.
-o- Opera
-moz- Firefox
-ms- IE
-ms-filter: IE8
-webkit- Safari, Google Chrome
Имя файла: Что-такое-CSS.pptx
Количество просмотров: 24
Количество скачиваний: 0
Скачать
- Предыдущая
Агрегатные состояния вещества
Следующая -
Свойства материалов и их влияние на ткани зуба. Материаловедение. Лекция № 1. Тема 2
Похожие презентации
Логическое программирование (Prolog)
Организация ввода и вывода данных. Начала программирования
Техническое задание для создания сайта. Описание структуры
Материалы к обсуждению Искусственный интеллект: онтологический и социальный аспекты
разработка сети широкополосного доступа в селе Нылга, Увинского района по технологии GPON
Автоматизированные и автоматические системы управления
Персональный компьютер: устройство и принцип работы
Introduction to Java Web
Устав команды поддержки
Многоуровневые ИВС и эталонная модель взаимосвязи открытых систем. Занятие 05, 06
Онлайн-марафон Ты больше, чем ты думаешь
Программирование на алгоритмическом языке (7 класс)
Формирование информационной культуры школьника в рамках реализации концепции развития информационно-библиотечных центров
Сервис Личный кабинет. Федерация дзюдо
Списки в Python
Система коммунального автомониторинга управления и телеметрии. Фотопрезентация
Introduction of the ILS/VOR/DME
Глобальная сеть. Адресация в Интернете. Протоколы обмена и передачи данных
Обзор вариантов установки программ
Измерение информации
Информатикадан ашық сабақ
Основы программирования (ОП)
Библиотека. История библиотек
Cerberus Mouse FW update SOP
Объектно-ориентированное программирование. Механизмы рефлексии. (Занятие 9)
Антивирус Касперского
Правила безопасности в Интернете
Программирование на языке Python. Алгоритм и его свойства
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:331006,name:m,category:G,count:H,jpg:"jpg\u002F331006",hits:I,download:b,h1:"Что такое CSS презентация",meta:{h1:m,title:m,description:"Что такое CSS презентация на тему, доклад, Информатика",keywords:"Что такое CSS, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Что такое CSS из раздела Информатика. Презентация на заданную тему содержит 31 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EЧто такое CSS\r\n\u003Cbr\u003E\u003Cp\u003ECSS (Cascading Style Sheets) - каскадные таблицы стилей. \r\n\r\nСтиль - набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня (теги \u003Ch1\u003E) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.\r\nКаждый элемент на странице может иметь свой стиль. Набор стилей всех элементов называют таблицей стилей.\r\nЕсли для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.\u003Cbr\u003ECSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила: CSS состоит из селектора и блока объявления стилей, \u003Cbr\u003EСам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:\u003Cbr\u003E\u003Cbr\u003E\r\n\u003Cbr\u003E \u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cbr\u003E\u003Cp class=”title”\u003E пример селектора \u003C\u002Fp\u003E\u003Cbr\u003Ep.title { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: maroon; font-weight: bold }\u003Cbr\u003E\u003Cp id=”title”\u003E пример селектора \u003C\u002Fp\u003E\u003Cbr\u003Ep#title { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: maroon; font-weight: bold }\u003Cbr\u003EВ примере используется селектор с именем (id) title для которого задано определение стиля. Определение состоит из свойства и его значения разделенных двоеточием. Определения разделяются точкой с запятой.\u003Cbr\u003Eселектор {\u003Cbr\u003E\tсвойство: значение;\u003Cbr\u003E\tсвойство: значение;\u003Cbr\u003E\tсвойство: значение;\u003Cbr\u003E}\u003Cbr\u003E",file:"Что-такое-CSS.pptx",texts:["\u003Cp\u003ECSS\u003Cbr\u003E","\u003Cp\u003EЧто такое CSS\r\n\u003Cbr\u003E\u003Cp\u003ECSS (Cascading Style Sheets) - каскадные таблицы стилей. \r\n\r\nСтиль - набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня (теги \u003Ch1\u003E) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.\r\nКаждый элемент на странице может иметь свой стиль. Набор стилей всех элементов называют таблицей стилей.\r\nЕсли для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.\u003Cbr\u003ECSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила: CSS состоит из селектора и блока объявления стилей, \u003Cbr\u003EСам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:\u003Cbr\u003E\r\n\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp class=”title”\u003E пример селектора \u003C\u002Fp\u003E\u003Cbr\u003Ep.title { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: maroon; font-weight: bold }\u003Cbr\u003E\u003Cp id=”title”\u003E пример селектора \u003C\u002Fp\u003E\u003Cbr\u003Ep#title { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: maroon; font-weight: bold }\u003Cbr\u003EВ примере используется селектор с именем (id) title для которого задано определение стиля. Определение состоит из свойства и его значения разделенных двоеточием. Определения разделяются точкой с запятой.\u003Cbr\u003Eселектор {\u003Cbr\u003E\tсвойство: значение;\u003Cbr\u003E\tсвойство: значение;\u003Cbr\u003E\tсвойство: значение;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EСелекторы\t\u003Cbr\u003E\tКлассы (.myclass) \t\t\u003Cbr\u003E\tID (#myid) \t\t\u003Cbr\u003E\tЭлементы (div)\u003Cbr\u003EСтандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.\u003Cbr\u003EПриоритеты рассчитываются от большего к меньшему:\u003Cbr\u003E1. свойство задано при помощи !important;\u003Cbr\u003E2. стиль прописан инлайново в теге в html через атрибут style=””;\u003Cbr\u003E3. количество идентификаторов (#id) в селекторе;\u003Cbr\u003E4. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе;\u003Cbr\u003E5. количество имён тегов в селекторе;\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EКроме того, имеет значение относительный порядок расположения свойств – свойство, указанное позже, имеет приоритет.\u003Cbr\u003EТакже следует помнить о наследовании — это перенос правил форматирования для элементов, находящихся внутри других. \u003Cbr\u003EНапример, если для тега \u003Cp\u003E задан красный цвет текста, а для курсива \u003Cem\u003E, который находится внутри абзаца, нет, то в этом случае вложенный элемент наследует свойства своего родителя и курсивный текст также будет красным.\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EУ блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого. \u003Cbr\u003E\r\nЗатем идет граница блока (border), которая может быть как видимой, так и невидимой.\r\nТакже блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента. \u003Cbr\u003E\r\nРазмер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.\u003Cbr\u003EЭлементы могут быть блочными и строчными По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а \u003Cspan\u003E и \u003Ca\u003E - строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство множество значений. \u003Cbr\u003E\r\n\u003Cbr\u003E\r\n\u003Cbr\u003E","\u003Cp\u003EBorder , Padding , Margin\r\n\u003Cbr\u003E\u003Cp\u003E\u003Cbody\u003E\u003Cbr\u003E\t\u003Cp\u003EТекст в параграфе.\u003C\u002Fp\u003E\u003Cbr\u003E\t\u003Cp\u003EТекст в параграфе.\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003EУниверсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left,border-right.\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EЗначение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style.\u003Cbr\u003EДля того, чтобы увидеть отступы, поля и границы, зададим границу\u003Cbr\u003Ep{ border:1px solid red;}\u003Cbr\u003E\u003Cbr\u003EОтступы от границы задаются свойством padding, оно позволяет задать величину внутреннего отступа сразу для всех сторон элемента или определить ее только для указанных сторон.\u003Cbr\u003EДобавляем к нашему свойству p{ padding:10px;}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EДалее задаем внешние отступы – Margin . Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента\u003Cbr\u003EЕсли у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора \u003Cbody\u003E равное нулю.\u003Cbr\u003EСвойство margin позволяет задать величину (рх или %) отступа сразу для всех сторон элемента или определить ее только для указанных сторон.\u003Cbr\u003EAuto Указывает, что размер отступов будет автоматически рассчитан браузером.\u003Cbr\u003EInherit Наследует значение родителя.\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003EИ снова добавляем свойства к нашему параграфу p{ margin:50px;}\u003Cbr\u003EА теперь добавляем ширину и высоту нашим блокам \u003Cbr\u003Ep{ width:100px; height:50px;} \u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Ebox-sizing\u003Cbr\u003EЗа долгое время, люди осознали, что обременять себя изнурительными вычислениями не очень весело, поэтому было создано новое свойство CSS под названием box-sizing. Когда вы устанавливаете box-sizing: border-box; для элемента, поля и границы самого элемента больше не увеличат его ширину.\u003Cbr\u003E.simple { \u003Cbr\u003E\twidth: 500px; \u003Cbr\u003E\tmargin: 20px auto; \u003Cbr\u003E\t-webkit-box-sizing: border-box; \u003Cbr\u003E\t-moz-box-sizing: border-box; \u003Cbr\u003E\tbox-sizing: border-box; } \u003Cbr\u003E.fancy { \u003Cbr\u003E\twidth: 500px; \u003Cbr\u003E\tmargin: 20px auto; \u003Cbr\u003E\tpadding: 50px; \u003Cbr\u003E\tborder: solid blue 10px; \u003Cbr\u003E\t-webkit-box-sizing: border-box; \u003Cbr\u003E\t-moz-box-sizing: border-box; \u003Cbr\u003E\tbox-sizing: border-box; }\u003Cbr\u003E{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }\u003Cbr\u003EЭто гарантирует, что размеры всех элементов могут быть определены более интуитивно.\u003Cbr\u003EПоскольку box-sizing достаточно новое свойство, вы должны использовать -webkit- и -moz- префиксы, как я в этих примерах. Эта техника позволяет реализовывать экспериментальные возможности в конкретных браузерах. Кроме того, имейте в виду, что один из них это IE8 и старше.\u003Cbr\u003E","\u003Cp\u003EМногослойность\u003Cbr\u003E\u003Cp\u003EПредставьте себе множество листков бумаги, на каждом из которых что-то написано или нарисовано. Мы видим только содержание верхнего листа, но если мы его снимем, то увидим содержание следующего листа и т.д. \r\nТакже и в CSS, мы можем создать несколько слоев, на каждом разместить необходимые элементы и пронумеровать слои с помощью свойства z-index. Чем больше номер, тем выше слой находится в стопке слоев. Например, если сделать 6 слоев, то пользователь сначала увидит именно слой z-index:6. \u003Cbr\u003EЧтобы было визуально понятно давайте изменим нашему блоку контент цвет фона\u003Cbr\u003E#menu {Position: relative; z-index:1;}\u003Cbr\u003E#content{ Left;0;background: green; z-index:2}\u003Cbr\u003Ebody{background: blue;}\u003Cbr\u003EТеперь, давайте сделаем текст на странице белым цветом:\u003Cbr\u003Ebody{background: blue;color: white;}\u003Cbr\u003EТеперь сделаем цвета заголовков красным (для h1) и желтым (для h2):\u003Cbr\u003Eh1{color:red;}\u003Cbr\u003Eh2{color:yellow;}\u003Cbr\u003E \u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EСтиль z-index может работать только в паре с position: relative\\absolute\\fixed \u003Cbr\u003EГруппировка селекторов\r\nЕсли стили для нескольких селекторов совпадают (например, заголовки первых трех уровней - зеленого цвета), то их можно сгруппировать. Для этого селекторы, нужно перечислить через запятую. Пример:\u003Cbr\u003Eh1, h2, h3{ color:green;}\u003Cbr\u003EЕсли кроме цвета, мы хотим задать нашим заголовкам размер. Тогда мы можем просто дописать стили ниже:\u003Cbr\u003Eh1, h2, h3{ color:green;}\u003Cbr\u003Eh1{ font-size:18px;}\u003Cbr\u003Eh2{ font-size:16px;}\u003Cbr\u003Eh3{ font-size:14px;}\u003Cbr\u003E","\u003Cp\u003EColor\r\n\u003Cbr\u003E\u003Cp\u003Eв компьютерном дизайне чаще всего используют цветовую модель RGB. В ее основе лежат три цвета: red - красный, green - зеленый, blue - синий. С помощью смешивания этих трех цветов можно получить почти весь видимый спектр.\r\nДля указания RGB-цвета в HTML используется шестнадцатеричная система счисления. Начинается код цвета со спецсимвола # (что и указывает на шестнадцатеричный код), а далее следует шесть символов. Первые два отвечают за количество красного оттенка, третий и четвертый за насыщенность зеленого, а пятый и шестой - синего. Так, #FF0000 - красный цвет, #00FF00 - зеленый, #0000FF - синий, а #FFFFFF - белый.\u003Cbr\u003EЗначениями свойства color могут быть именные цвета (red, blue...), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)). \r\nИтак, задать цвет текста для элемента можно тремя способами:\u003Cbr\u003Ebody{ color:green;}\u003Cbr\u003Eh1{ color:#FF0000;}\u003Cbr\u003Eh2{ color:rgb(255,0,0);}\u003Cbr\u003E","\u003Cp\u003EФон - background\r\n\u003Cbr\u003E\u003Cp\u003EНа самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS, фон можно задать любому элементу. Пример:\u003Cbr\u003E \u003Cbody\u003E Здесь содержимое документа \u003C\u002Fbody\u003E\u003Cbr\u003EРассмотрим группу свойств background:\u003Cbr\u003Ebackground-color - задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit. \r\nbody{ background-color:#243CED; color: yellow; }\u003Cbr\u003Ebackground-image - задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей.\r\nbody{\u003Cbr\u003E background-image:url(picture.gif);\u003Cbr\u003E background-color:#243CED;\u003Cbr\u003E color:yellow;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Ebackground-repeat - задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:\u003Cbr\u003Erepeat - повторять изображение по горизонтали и вертикали.\u003Cbr\u003Erepeat-x - повторять изображение только по горизонтали.\u003Cbr\u003Erepeat-y - повторять изображение только по вертикали.\u003Cbr\u003Eno-repeat - не повторять изображение.\u003Cbr\u003EПо умолчанию используется значение repeat\u003Cbr\u003Ebody{\u003Cbr\u003E background-image:url(picture.gif);\u003Cbr\u003E background-repeat:no-repeat;\u003Cbr\u003E background-color:#243CED;\u003Cbr\u003E color:yellow;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Ebackground-position - задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. \u003Cbr\u003Ebody{\u003Cbr\u003E background-image:url(picture.gif);\u003Cbr\u003E background-repeat:no-repeat;\u003Cbr\u003E background-color:#243CED;\u003Cbr\u003E background-position:10% 30%;\u003Cbr\u003E color:yellow;\u003Cbr\u003E}\u003Cbr\u003Ebackground-size свойство позволяет масштабировать фоновое изображение по вертикали и горизонтали (background-image). Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте. Не наследуется.\u003Cbr\u003Ediv {background-size: 300px 150px;} \u003Cbr\u003Ediv {background-size: 50% 30%;} \u003Cbr\u003Ediv {background-size: cover;} \u003Cbr\u003Ediv {background-size: contain;}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003EСокращенная запись свойства background в CSS для многих свойств существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в произвольном порядке. \u003Cbr\u003Ebody{ background:url(picture.gif) no-repeat #33CCFF center top;}\u003Cbr\u003E","\u003Cp\u003EПсевдоэлементы\r\n\u003Cbr\u003E\u003Cp\u003ECSS применяется к элементам HTML. Но есть несколько элементов, которых не существует в HTML, но они присутствуют на странице (первая буква слова и первая строка абзаца). Такие элементы и называют псевдоэлементами. Им можно задавать стиль, как и элементам HTML.\r\nafter - добавление контента ПОСЛЕ указанного элемента\r\nbefore - добавление контента ДО указанного элемента\r\nfirstletter - стили для первой буквы в контенте элемента\r\nfirstline - стилевое оформление первой строки текста в элементе\r\nselection - применение стилей при выделении текста в элементе\r\nОдной из самых распространённых задач является добавление фразы до или после элемента , при помощи before и after \u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\t\u003Cdiv class=”quote”\u003Eкакой то текст \u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003Cp\u003EКак красиво, не правда ли? Пиши себе и пиши, первые буквы сами получатся большими ! \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv\u003EА в этом самом абзаце первая строчка будет в 16 px; написана будет жирным шрифтом и красного цвета. А также можно выделять разными цветами первые строки и задавать отличительные стили при выделении текста \u003C\u002Fdiv\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \r\n\u003Cbr\u003E\u003Cp\u003EВ css пишем :\u003Cbr\u003E.quote {display block; width:50%; margin: 50px auto 50px auto;}\u003Cbr\u003Ep { display block; overflow:hidden; width:50%; margin: 50px auto 50px auto;}\u003Cbr\u003Ediv { display block; overflow:hidden; width:50%; margin: 50px auto 50px auto;}\u003Cbr\u003E.quote:before {content:”цитата”;}\u003Cbr\u003E.quote:after {content:”цитата после текста”;}\u003Cbr\u003Ep:first-letter{ color:red; font-size:20pt; color:green }\u003Cbr\u003Ep:first-line{ color:blue;}\u003Cbr\u003Ediv:first-line {font-size:16px;font-weight:bold; color:red}\u003Cbr\u003Efirst-line применяется только к блочным элементам !\u003Cbr\u003EПсевдоклассы\r\nПсевдоклассы - это элементы, которые указывают определённый набор стилей, в случае различных событий и изменений состояния элемента. Например, как изменятся стили в случае наведения, клика и тд на элемент.\r\nhover - при наведении курсора на элемент\r\nfocus - при клике на элемент, например поле для ввода данных\r\nactive - при активации элемента пользователем, то есть в момент клика\r\nlink - стиль для не посещённых ссылок\r\nvisited - стилевое оформление к посещенным ссылкам \r\nfirstchild - стиль для первого дочернего элемента селектора\r\nlastchild - изменения в последнем элементе родителя\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EВ CSS существуют псевдоклассы, которые работают со ссылками. У ссылок есть четыре состояния: простая, активная, посещенная и та, на которую наведен курсор. Состояние ссылок зависит от действия пользователя, и браузер, в зависимости от этих действий может применять разные стили. Для описания этих стилей и существуют псевдоклассы.\r\na:active - задает стиль активной ссылки.\u003Cbr\u003Ea:visited - задает стиль посещенной ссылки.\u003Cbr\u003Ea:hover - задает стиль ссылки, на которую наведен курсор.\u003Cbr\u003EПо умолчанию ссылки синего цвета и подчеркнуты. Пусть на нашей html-странице есть ссылка:\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003Cdiv class=”exmpl”\u003E\u003Cbr\u003E\u003Cinput type=\"text\" value=\"Черный текст\"\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 1\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 2\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 3\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 4\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EДавайте сделаем ссылку зеленой и уберем подчеркивание:\u003Cbr\u003Ea{ color:green; text-decoration:none;}\u003Cbr\u003EСвойство text-decoration отвечает как раз за подчеркивание, а его значение none указывает, что подчеркивать не надо.\u003Cbr\u003EТеперь, давайте зададим стиль для ссылки, на которую наведен курсор. Пусть она становится красного цвета:\u003Cbr\u003Ea:hover{ color:red;}\u003Cbr\u003Ea:active{ color: OldLace;}\u003Cbr\u003Ea:visited{ color: NavyBlue;}\u003Cbr\u003Ea:nth-child(2n) {background: #f0f0f0;}\u003Cbr\u003EПсевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.\u003Cbr\u003Efirst-child применяет стилевое оформление к первому дочернему элементу своего родителя.\u003Cbr\u003Elast-child задает стилевое оформление последнего элемента своего родителя.\u003Cbr\u003Ea: first-child { color:blue; }\u003Cbr\u003Ea: last -child { color:yellow; }\u003Cbr\u003EInput {color:black}\u003Cbr\u003EInput:focus {color:red}\u003Cbr\u003E","\u003Cp\u003EСелекторы и их комбинации\r\n\u003Cbr\u003E\u003Cp\u003EМы уже с вами знаем как в цсс записывать свойства для тега , ид , класса \u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003Ch1 id=”first”\u003Eзаголовок \u003C\u002Fh1\u003E\u003Cbr\u003E\u003Ch2 class=”second”\u003Eзаголовок \u003C\u002Fh1\u003E\u003Cbr\u003E\u003Ch2 class=”second last”\u003Eзаголовок \u003C\u002Fh1\u003E\u003Cbr\u003E\u003Cdiv class=”exmpl”\u003E\u003Cbr\u003E\t\u003Cinput type=\"text\" value=\"Черный текст\"\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 1\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 2\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 3\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 4\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Ca href=\"#\"\u003Eссылка 5\u003C\u002Fa\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСемантика \r\n\u003Cbr\u003E\u003Cp\u003EСемантика в HTML верстке - это использование HTML тегов по их назначению, правильное их наименование и их группировка. Так, например, тег h1 описывает заголовок документа. Заголовков есть шесть видов h1-h6, которые отличаются размерами и значимостью (в стандартных стилях они отличаются размерами, а отличие на вашем сайте должны сделать вы сами). Думаю, с заголовком все понятно. Есть также ссылки \u003Ca\u003E, списки \u003Cdl\u003E, \u003Cul\u003E и \u003Col\u003E, таблицы \u003Ctable\u003E и много других. Если есть задача сделать таблицу, то каждый, не задумываясь, будет использовать тег \u003Ctable\u003E. Но бывают и спорные моменты. \u003Cbr\u003EЕсли в контенте есть ссылка на другую страницу, то ее мы просто делаем тегом \u003Ca\u003E. Это понятно. А вот, например, есть кнопка со стилями cursor:pointer, которая имеет состояния :hover и :active . Ее тоже делать ссылкой? Нет! Ведь при клике на нее мы не переходим на другую страницу. Потому для такого элемента нужно использовать какой-то нейтральный тег - \u003Cdiv\u003E или \u003Cspan\u003E. А если кнопка , которая визуально похожа на ссылку , находится в форме то однозначно надо использовать \u003Cbr\u003E\u003Cinput type=\" \"\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E Верстая форму, вам наверняка нужно будет делать подписи к полям формы - \"Ваше имя\" или \"Введите email\". Эти подписи нужно делать при помощи тега \u003Clabel\u003E. Именно он предназначен для данного элемента. К тому же, помимо семантики, вы получите и правильный функционал. Например, подписи в элементам \u003Cinput type=\"checkbox\"\u003E и \u003Cinput type=\"radio\"\u003E, при клике на них, будут делать активными(выделенными) соответствующие элементы управления.\u003Cbr\u003E Возможности CSS позволяют из почти любого элемента сделать визуально другой вид, менять элементы местами, скрывать их и т.д. Для проверки правильности выбора тега, попробуйте отключить CSS. Если заголовок остался похожим на заголовок, список на список, а ссылка на ссылку, то вы идете в правильном направлении. \u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EТакже семантика связана и с валидностью. Тег \u003Ca\u003E не может содержать другого тега \u003Ca\u003E, в строчный элемент не может содержать блочный. Если ваша страница не прошла проверку на валидность https:\u002F\u002Fvalidator.w3.org , то скорее всего у нее проблемы и с семантикой. \u003Cbr\u003EРазница между class(класс) и id(идентификатор) заключается в том, что идентификатор должен быть уникальным, то есть единственным на странице. Вообще, идентификаторами нужно пользоваться осторожно. Их чаще используют для обращения к ним из скриптов или при работе с формами.\u003Cbr\u003EПотому желательно не задавать элементам идентификаторы без особой необходимости. Скорее хорошим тоном будет еще задать идентификатор основным блокам - header, footer, content, breadcrumbs(хлебные крошки), search. \u003Cbr\u003EИ так надо запомнить, что названия должны быть логичными и интуитивно понятными. Это также поможет ориентироваться в вашем коде другим людям и легче запоминать классы элементов. \u003Cbr\u003E\u003Cbr\u003E \u003Cbr\u003E",J,"\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EHTML страница в общем случае должна быть поделена на блоки - header, footer, menu, left, right. Эти блоки делятся не только для красоты, но и по функциональности. В шапке сайта обычно лого компании, девиз, контакты - вся самая важная информация сайта. В контентной части - статья. Это самая важная информация данной страницы. А в боковой части - дополнительная информация. Это может быть список категорий, материалы по теме, другая информация. Страница сайта не может быть построена из простого набора блоков, они должны быть в правильном порядке и иметь четкую и правильную структуру.\u003Cbr\u003EТакже важно разделять контент страницы и ее оформление. Для этого достаточно просто вынести все CSS стили в отдельный CSS файл, а скрипты - в JavaScript файл. Картинки должны быть на странице только в роли картинок - в теге \u003Cimg\u003E с атрибутом alt. А все изображения, относящиеся к оформлению, стоит сделать в виде блоков с фоновым изображением.\u003Cbr\u003EНе стоит прописывать стилизацию элемента в теге style, если нет особой необходимости. Ведь теперь есть псевдоклассы, при помощи которых вы можете выбрать элементы по их порядковому номеру, четные и нечетные, первые и последние. \u003Cbr\u003EНу а для раскрутки сайта польза семантики, думаю, ясна. Поисковый робот первым делом ищет на странице заголовок по тегу \u003Ch1\u003E. Ему будет сложно это сделать ,если ваш заголовок не находится в теге \u003Ch1\u003E! :-) Также важно правильное оформление меню, хлебных крошек. Очередной раз напомню, что не обойтись без атрибутов title для ссылок и alt для картинок. Это нужно и для семантики, и для валидности, и для юзабилити.\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E \u003Cbr\u003E","\u003Cp\u003EЗаголовки должны выделяться тегами H1, H2, H3, H4, но никак не B и STRONG. Параграф - с помощью P тега, но никак не DIV. При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются вложенные списки, соответственно создаем внутри первичного LI элемента еще один UL список.\u003Cbr\u003EВ HTML, тег IMG должен использоваться только для больших картинок и иконок. Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.\u003Cbr\u003EТо же самое по поводу JavaScript.\u003Cbr\u003E\u003Cbr\u003E",J,"\u003Cp\u003E Кроссбраузерность\u003Cbr\u003E\u003Cp\u003EКроссбраузерность страницы – это верстка которая отображается одинаково во всех основных браузеров : Opera, Firefox, Internet Explorer , Safari, Google Chrome\u003Cbr\u003EЕсли в не основном для вас браузере какой то блок отображается не так как нужно , проверяйте семантику блока , далее стили которыми описали элемент в CSS , скорее всего что то написано не верно или не написано не полностью! Стили «по умолчанию» в разных браузерах РАЗНЫЕ !\u003Cbr\u003EВендорные префиксы — это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.\u003Cbr\u003EСогласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с \"-\" или \"_\" зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.\u003Cbr\u003E-o-\t\t\tOpera\u003Cbr\u003E-moz-\t\t\tFirefox\u003Cbr\u003E-ms-\t\t\tIE\u003Cbr\u003E-ms-filter:\t\t\tIE8\u003Cbr\u003E-webkit-\t\t\tSafari, Google Chrome\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EНапример, CSS свойство opacity, отвечающее за прозрачность элемента, кроссбраузерно используется так:\u003Cbr\u003E-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";\u002F* IE 8*\u002F\u003Cbr\u003E-moz-opacity:0.5;\u002F* Mozilla 1.6 *\u002F\u003Cbr\u003E-webkit-opacity:0.5\u002F* Safari 2.0+ , Chrome, *\u002F\u003Cbr\u003E-o-opacity:0.5\u002F* Opera, *\u002F\u003Cbr\u003Eopacity:0.5\u003Cbr\u003E Вендорные приставки упрощают кроссбраузерную верстку но к ним следует обращаться в последнюю очередь! \u003Cbr\u003E"],href:"\u002Finformatika\u002Fchto-takoe-css-1",href_category:"\u002Finformatika",date:1659134823,related:[{id:124381,name:"Логическое программирование (Prolog)",href:"\u002Finformatika\u002Flogicheskoe-programmirovanie-prolog",jpg:"jpg\u002F124381"},{id:372844,name:"Организация ввода и вывода данных. Начала программирования",href:"\u002Finformatika\u002Forganizatsiya-vvoda-i-vyvoda-dannyh-nachala-6",jpg:"jpg\u002F372844"},{id:436557,name:"Техническое задание для создания сайта. Описание структуры",href:"\u002Finformatika\u002Ftehnicheskoe-zadanie-dlya-sozdaniya-sayta-opisanie",jpg:"jpg\u002F436557"},{id:605983,name:"Материалы к обсуждению Искусственный интеллект: онтологический и социальный аспекты",href:"\u002Finformatika\u002Fmaterialy-k-obsuzhdeniyu-iskusstvennyy-intellekt-ontologicheskiy",jpg:"jpg\u002F605983"},{id:429467,name:"разработка сети широкополосного доступа в селе Нылга, Увинского района по технологии GPON",href:"\u002Finformatika\u002Frazrabotka-seti-shirokopolosnogo-dostupa-v-sele",jpg:"jpg\u002F429467"},{id:370637,name:"Автоматизированные и автоматические системы управления",href:"\u002Finformatika\u002Favtomatizirovannye-i-avtomaticheskie-sistemy-upravleniya-2",jpg:"jpg\u002F370637"},{id:222030,name:"Персональный компьютер: устройство и принцип работы",href:"\u002Finformatika\u002Fpersonalnyy-kompyuter-ustroystvo-i-printsip-raboty-1",jpg:"jpg\u002F222030"},{id:213557,name:"Introduction to Java Web",href:"\u002Finformatika\u002Fintroduction-to-java-web",jpg:"jpg\u002F213557"},{id:303084,name:"Устав команды поддержки",href:"\u002Finformatika\u002Fustav-komandy-podderzhki",jpg:"jpg\u002F303084"},{id:253296,name:"Многоуровневые ИВС и эталонная модель взаимосвязи открытых систем. Занятие 05, 06",href:"\u002Finformatika\u002Fmnogourovnevye-ivs-i-etalonnaya-model-vzaimosvyazi",jpg:"jpg\u002F253296"},{id:188530,name:"Онлайн-марафон Ты больше, чем ты думаешь",href:"\u002Finformatika\u002Fonlayn-marafon-ty-bolshe-chem-ty",jpg:"jpg\u002F188530"},{id:360419,name:"Программирование на алгоритмическом языке (7 класс)",href:"\u002Finformatika\u002Fprogrammirovanie-na-algoritmicheskom-yazyke-7-klass",jpg:"jpg\u002F360419"},{id:127173,name:"Формирование информационной культуры школьника в рамках реализации концепции развития информационно-библиотечных центров",href:"\u002Finformatika\u002Fformirovanie-informatsionnoy-kultury-shkolnika-v-ramkah",jpg:"jpg\u002F127173"},{id:439407,name:"Сервис Личный кабинет. Федерация дзюдо",href:"\u002Finformatika\u002Fservis-lichnyy-kabinet-federatsiya-dzyudo",jpg:"jpg\u002F439407"},{id:604012,name:"Списки в Python",href:"\u002Finformatika\u002Fspiski-v-python-4",jpg:"jpg\u002F604012"},{id:391279,name:"Система коммунального автомониторинга управления и телеметрии. Фотопрезентация",href:"\u002Finformatika\u002Fsistema-kommunalnogo-avtomonitoringa-upravleniya-i-telemetrii",jpg:"jpg\u002F391279"},{id:383792,name:"Introduction of the ILS\u002FVOR\u002FDME",href:"\u002Finformatika\u002Fintroduction-of-the-ilsvordme",jpg:"jpg\u002F383792"},{id:128471,name:"Глобальная сеть. Адресация в Интернете. Протоколы обмена и передачи данных",href:"\u002Finformatika\u002Fglobalnaya-set-adresatsiya-v-internete-protokoly",jpg:"jpg\u002F128471"},{id:273240,name:"Обзор вариантов установки программ",href:"\u002Finformatika\u002Fobzor-variantov-ustanovki-programm",jpg:"jpg\u002F273240"},{id:234352,name:"Измерение информации",href:"\u002Finformatika\u002Fizmerenie-informatsii-9",jpg:"jpg\u002F234352"},{id:111357,name:"Информатикадан ашық сабақ",href:"\u002Finformatika\u002Finformatikadan-ashy-saba",jpg:"jpg\u002F111357"},{id:233511,name:"Основы программирования (ОП)",href:"\u002Finformatika\u002Fosnovy-programmirovaniya-op",jpg:"jpg\u002F233511"},{id:306315,name:"Библиотека. История библиотек",href:"\u002Finformatika\u002Fbiblioteka-istoriya-bibliotek-1",jpg:"jpg\u002F306315"},{id:318643,name:"Cerberus Mouse FW update SOP",href:"\u002Finformatika\u002Fcerberus-mouse-fw-update-sop-1",jpg:"jpg\u002F318643"},{id:203197,name:"Объектно-ориентированное программирование. Механизмы рефлексии. (Занятие 9)",href:"\u002Finformatika\u002Fobektno-orientirovannoe-programmirovanie-mehanizmy-refleksii-zanyatie",jpg:"jpg\u002F203197"},{id:327293,name:"Антивирус Касперского",href:"\u002Finformatika\u002Fantivirus-kasperskogo-1",jpg:"jpg\u002F327293"},{id:344378,name:"Правила безопасности в Интернете",href:"\u002Finformatika\u002Fpravila-bezopasnosti-v-internete-1",jpg:"jpg\u002F344378"},{id:583503,name:"Программирование на языке Python. Алгоритм и его свойства",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-python-algoritm-i-2",jpg:"jpg\u002F583503"}],navigation:{next:"\u002Fmedetsina\u002Fsvoystva-materialov-i-ih-vliyanie-na",next_name:"Свойства материалов и их влияние на ткани зуба. Материаловедение. Лекция № 1. Тема 2",prev:"\u002Ffizika\u002Fagregatnye-sostoyaniya-veshchestva-4",prev_name:"Агрегатные состояния вещества"}}},categories:{result:[{id:K,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:K,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:I,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:H,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:L,SITE_HOST:"mypreza.com",SITE_LANG:M,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:L,short_name:a,description:a,lang:M,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:T,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Что такое CSS","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",31,24,"\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Верстая форму, вам наверняка нужно будет делать подписи к полям формы - "Ваше имя" или "Введите email". Эти подписи нужно делать при помощи тега
. Именно он предназначен для данного элемента. К тому же, помимо семантики, вы получите и правильный функционал. Например, подписи в элементам
и
, при клике на них, будут делать активными(выделенными) соответствующие элементы управления.
Возможности CSS позволяют из почти любого элемента сделать визуально другой вид, менять элементы местами, скрывать их и т.д. Для проверки правильности выбора тега, попробуйте отключить CSS. Если заголовок остался похожим на заголовок, список на список, а ссылка на ссылку, то вы идете в правильном направлении.

Также семантика связана и с валидностью. Тег
не может
содержать другого тега
, в строчный элемент не может содержать блочный. Если ваша страница не прошла проверку на валидность https://validator.w3.org , то скорее всего у нее проблемы и с семантикой.
Разница между class(класс) и id(идентификатор) заключается в том, что идентификатор должен быть уникальным, то есть единственным на странице. Вообще, идентификаторами нужно пользоваться осторожно. Их чаще используют для обращения к ним из скриптов или при работе с формами.
Потому желательно не задавать элементам идентификаторы без особой необходимости. Скорее хорошим тоном будет еще задать идентификатор основным блокам - header, footer, content, breadcrumbs(хлебные крошки), search.
И так надо запомнить, что названия должны быть логичными и интуитивно понятными. Это также поможет ориентироваться в вашем коде другим людям и легче запоминать классы элементов.

HTML страница в общем случае должна быть поделена на блоки
- header, footer, menu, left, right. Эти блоки делятся не только для красоты, но и по функциональности. В шапке сайта обычно лого компании, девиз, контакты - вся самая важная информация сайта. В контентной части - статья. Это самая важная информация данной страницы. А в боковой части - дополнительная информация. Это может быть список категорий, материалы по теме, другая информация. Страница сайта не может быть построена из простого набора блоков, они должны быть в правильном порядке и иметь четкую и правильную структуру.
Также важно разделять контент страницы и ее оформление. Для этого достаточно просто вынести все CSS стили в отдельный CSS файл, а скрипты - в JavaScript файл. Картинки должны быть на странице только в роли картинок - в теге
с атрибутом alt. А все изображения, относящиеся к оформлению, стоит сделать в виде блоков с фоновым изображением.
Не стоит прописывать стилизацию элемента в теге style, если нет особой необходимости. Ведь теперь есть псевдоклассы, при помощи которых вы можете выбрать элементы по их порядковому номеру, четные и нечетные, первые и последние.
Ну а для раскрутки сайта польза семантики, думаю, ясна. Поисковый робот первым делом ищет на странице заголовок по тегу
. Ему будет сложно это сделать ,если ваш заголовок не находится в теге
! :-) Также важно правильное оформление меню, хлебных крошек. Очередной раз напомню, что не обойтись без атрибутов title для ссылок и alt для картинок. Это нужно и для семантики, и для валидности, и для юзабилити.

Заголовки должны выделяться тегами H1, H2, H3, H4, но никак не
B и STRONG. Параграф - с помощью P тега, но никак не DIV. При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются вложенные списки, соответственно создаем внутри первичного LI элемента еще один UL список.
В HTML, тег IMG должен использоваться только для больших картинок и иконок. Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.
То же самое по поводу JavaScript.

Кроссбраузерность
Кроссбраузерность страницы – это верстка которая отображается одинаково во всех
основных браузеров : Opera, Firefox, Internet Explorer , Safari, Google Chrome
Если в не основном для вас браузере какой то блок отображается не так как нужно , проверяйте семантику блока , далее стили которыми описали элемент в CSS , скорее всего что то написано не верно или не написано не полностью! Стили «по умолчанию» в разных браузерах РАЗНЫЕ !
Вендорные префиксы — это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.
Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с "-" или "_" зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.
-o- Opera
-moz- Firefox
-ms- IE
-ms-filter: IE8
-webkit- Safari, Google Chrome