Anton.A
Компетентный
Всем привет! Сегодня я хочу открыть большую серию уроков CSS. Эти уроки будут посвящены от и до заданной теме. В каждом уроке я постараюсь расписывать всё как можно подробней. Данные уроки я буду стараться выпускать один раз в три-четыре дня. Надеюсь мой труд не станет напрасным и кому он окажется очень полезным! Давайте начинать...
[HR][/HR]
Для начала давайте проясним, что же такое это не понятное "CSS"?
Ну во-первых CSS это один из языков программирования. Эти три буквы расшифровываются вот так: "Каскадные таблицы стилей". А стилей чего, спросите вы. CSS - это файл стилей нашего web-документа/страницы сайта. Это было всё с моих слов как это знаю я. Теперь же обратимся к более профессиональному определению. (Позаимствовано с Wikipedia)
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Примечание: Начинать изучение CSS без базовых знаний HTML бессмысленно!
[HR][/HR]
И так с чего же мы начнём. Для начала мы создадим отдельную папку для наших файлов. Зайдём в нашу папку и там создадим файл "index.html". Далее в нашей отдельной папке создадим ещё одну папку и назовём её "Style". Заходим в эту папку и в ней создаём файл "style.css".
[HR][/HR]
[HR][/HR]
Теперь в наш HTML-файл давайте добавим стандартный код HTML-страницы:
После того как вы добавили код закройте файл и сохраните и затем снова зайдите. Это для того, чтобы файл принял текстовую кодировку UTF-8.
[HR][/HR]
В следующем шаге мы подойдем в плотную к CSS как ещё ни когда с вами не подходили. Сейчас мы подключим наши стили CSS к нашем HTML-файлу. Делается это очень просто:
Между тегами <head></head> добавим следующее:
Объясню что здесь к чему:
href="style/style.css" - Мы задаём путь файла стилей. В нашем случае это папка "Style" и сам наш стилевой файл - "style.css".
type="text/css" - Тип текстовой информации в нашем стилевом файле.
rel="StyleSheet" - Как соотносится подключаемый документ с тем документом к которому мы его подключаем. "StyleSheet" - Таблица стилей.
[HR][/HR]
Теперь давайте поговорим о том из чего же состоит стилевой файл. Если судить по названию, то не трудно догадаться, что стилевой файл состоит из стилей. Давайте разберём один из таких стилей на понятном для всех языке:
Давайте разбираться. Что же такое "Селектор"? Если переводить данное слово с английского то оно переводится как "выбранный". Значит на HTML-странице мы должны выбрать теги с какими хотим работать. Именно по-этому "селектор", потому что мы выбираем с чем нам работать. По-этому при создании селектора мы должны выбрать с каким элементом HTML-файла мы хотим работать. Думаю значения свойств объяснять не нужно...
[HR][/HR]
С этим разобрались и теперь перейдём к разбору трёх самым популярных "селекторов", которые используются при создании стилей.
Давайте изменим, например, фон наших абзацев. Для этого нам нужно добавить в наш стилевой файл следующий селектор:
Я сделал фон наших абзацев бледно-красным. Поясню:
"p" - это название нашего селектора.
"{...}" - Этими фигурными скобками мы открываем наш селектор и закрываем.
"background-color: #FF9999;" - Этот параметр задаёт фон объектов и указываем, что фон будет в виде "RGB" цвета.
Теперь, для закрепления материала давайте изменим цвет текста.
В этот же наш селектор добавляем следующий код:
Я взял тёмно-серый цвет. Вы же можете выбрать что угодно. Параметр "Color" в CSS меняет/указывает цвет текста.
[HR][/HR]
Для того чтобы опробовать ID Селектор давайте создадим на нашей странице заголовок. Сейчас внимательно рассматривайте мой код:
В нашем HTML-коде появилось что-то нам не известное, а именно: id="head". Это такой идентификатор, который присваивается любому тегу HTML. И если в стилях наше страницы мы будем изменять селектор под названием "Head", то изменятся будет только стиль нашего с вами заголовка.
Давайте также изменим цвет текста и фон нашего заголовка. Я надеюсь вы ещё не забыли как это делать. Но не спешите писать всё самостоятельно, а сперва посмотрите на мой код:
Главное на что стоит здесь обратить внимание это на, то, что перед именем идентификатора пишется символ "решётка".
[HR][/HR]
Для изучения третьего селектора для начала давайте создадим список на нашей WEB-странице.
На данном этапе моё воображение уже немного начало похрамывать т.к урок создаётся второй час и я не много подустал.
[HR][/HR]
В объяснение думаю всё понятно. Например нам нужно выделить несколько элементов из нашего списка. Самый простой способ это применить к ним "Селектор класса". Такую операцию конечно можно сделать и при помощи "ID Селектора" присвоим каждому пункту списка свой идентификатор, но данная операция будет не совсем правильной. Первое что мы сделаем это присвоим к нашим элементам списка название класса
В HTML-файле)
В данном случае мы будем выделять первый и последний пункты списка.
Как и в предыдущих работах с селекторами мы изменим фон пункта и цвет текста пункта. Как это делать вы знаете, но прежде посмотрите на мой код:
В стилевом файле перед названием класса ставится точка.
[HR][/HR]
На этом урок я могу с чистой совестью закончить. Всё что я хотел вам сегодня рассказать я рассказал. В уроке старался всё расписать как можно понятней. После создания этого урока я очень устал и надеюсь вам будет интересно просмотреть данный урок.
Автор: Anton.A
Время: ~1 час 40 минут
От +сов не откажусь
[HR][/HR]
Для начала давайте проясним, что же такое это не понятное "CSS"?
Ну во-первых CSS это один из языков программирования. Эти три буквы расшифровываются вот так: "Каскадные таблицы стилей". А стилей чего, спросите вы. CSS - это файл стилей нашего web-документа/страницы сайта. Это было всё с моих слов как это знаю я. Теперь же обратимся к более профессиональному определению. (Позаимствовано с Wikipedia)
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Примечание: Начинать изучение CSS без базовых знаний HTML бессмысленно!
[HR][/HR]
И так с чего же мы начнём. Для начала мы создадим отдельную папку для наших файлов. Зайдём в нашу папку и там создадим файл "index.html". Далее в нашей отдельной папке создадим ещё одну папку и назовём её "Style". Заходим в эту папку и в ней создаём файл "style.css".
[HR][/HR]
[HR][/HR]
Теперь в наш HTML-файл давайте добавим стандартный код HTML-страницы:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" href="style/style.css" type="text/css"/>
<title>[Ваше название]</title>
</head>
<body>
</body>
</html>[HR][/HR]
В следующем шаге мы подойдем в плотную к CSS как ещё ни когда с вами не подходили. Сейчас мы подключим наши стили CSS к нашем HTML-файлу. Делается это очень просто:
Между тегами <head></head> добавим следующее:
PHP:
<link href="style/style.css" type="text/css" rel="StyleSheet" />href="style/style.css" - Мы задаём путь файла стилей. В нашем случае это папка "Style" и сам наш стилевой файл - "style.css".
type="text/css" - Тип текстовой информации в нашем стилевом файле.
rel="StyleSheet" - Как соотносится подключаемый документ с тем документом к которому мы его подключаем. "StyleSheet" - Таблица стилей.
[HR][/HR]
Теперь давайте поговорим о том из чего же состоит стилевой файл. Если судить по названию, то не трудно догадаться, что стилевой файл состоит из стилей. Давайте разберём один из таких стилей на понятном для всех языке:
PHP:
СЕЛЕКТОР {
Свойство 1: значение;
Свойство 2: значение;
...
Свойство X: значение;
}[HR][/HR]
С этим разобрались и теперь перейдём к разбору трёх самым популярных "селекторов", которые используются при создании стилей.
СЕЛЕКТОР ТЕГОВ
Селектор тегов позволяет собрать с HTML страницы все теги одного типа. Самый частый пример это работа с абзацами (<p></p>). Давайте добавим в наш HTML-код три абзаца. Вы можете написать в свои абзацы любой текст. У меня же это будет выглядеть именно так:
PHP:
<p>Наша серия уроков будет довольно продолжительной. Для тех кто интересуется WEB-программированием эта серия уроков будет очень интересна!</p>
<p>В данный момент мы начали разбирать три самых популярных вида селекторов. Начали мы работать с "Селектором тегов".</p>
<p>Это очень удобный селектор. Если вам нужно быстро изменить стиль, например, всех абзацев на вашей WEB-странице, то "Селектор тегов", то, что вам нужно!</p>
PHP:
p {
background-color: #FF9999;
}"p" - это название нашего селектора.
"{...}" - Этими фигурными скобками мы открываем наш селектор и закрываем.
"background-color: #FF9999;" - Этот параметр задаёт фон объектов и указываем, что фон будет в виде "RGB" цвета.
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Теперь, для закрепления материала давайте изменим цвет текста.
В этот же наш селектор добавляем следующий код:
PHP:
color: #333333;
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
[HR][/HR]
ID СЕЛЕКТОРЫ
ID Селектор предназначен для изменения стиля одного, уникального элемента страницы. Что же значит? А значит, что есть например нам нужно изменить стиль только одного абзаца, а не всех, то ID Селектор - это, то, что вам нужно!Для того чтобы опробовать ID Селектор давайте создадим на нашей странице заголовок. Сейчас внимательно рассматривайте мой код:
PHP:
<h1 id="head">Добро пожаловать на серию уроков по CSS!</h1>Давайте также изменим цвет текста и фон нашего заголовка. Я надеюсь вы ещё не забыли как это делать. Но не спешите писать всё самостоятельно, а сперва посмотрите на мой код:
PHP:
#head {
background-color: #F5F5F5;
color: #555555;
}
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
[HR][/HR]
Для изучения третьего селектора для начала давайте создадим список на нашей WEB-странице.
PHP:
<ul>
<li>Пункт списка 1</li>
<li>Пункт списка 2</li>
<li>Пункт списка 3</li>
<li>Пункт списка 4</li>
</ul>[HR][/HR]
СЕЛЕКТОР КЛАССОВ
Если требуется одинаково оформить несколько элементов, можно присвоить каждому из этих элементов атрибут "class" с одним и тем же значением.В объяснение думаю всё понятно. Например нам нужно выделить несколько элементов из нашего списка. Самый простой способ это применить к ним "Селектор класса". Такую операцию конечно можно сделать и при помощи "ID Селектора" присвоим каждому пункту списка свой идентификатор, но данная операция будет не совсем правильной. Первое что мы сделаем это присвоим к нашим элементам списка название класса
В HTML-файле)
PHP:
<ul>
<li class="class1">Пункт списка 1</li>
<li>Пункт списка 2</li>
<li>Пункт списка 3</li>
<li class="class1">Пункт списка 4</li>
</ul>Как и в предыдущих работах с селекторами мы изменим фон пункта и цвет текста пункта. Как это делать вы знаете, но прежде посмотрите на мой код:
PHP:
.class1 {
background-color: #333333;
color: #777777;
}
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
[HR][/HR]
На этом урок я могу с чистой совестью закончить. Всё что я хотел вам сегодня рассказать я рассказал. В уроке старался всё расписать как можно понятней. После создания этого урока я очень устал и надеюсь вам будет интересно просмотреть данный урок.
Автор: Anton.A
Время: ~1 час 40 минут
От +сов не откажусь