Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Заключение учебника по CSS

Урок №10
Заключение учебника по CSS, для начинающих
Заключение учебника по основам языка CSS.

За девять прошедших уроков:
1. Внедряем CSS в HTML-документ
2. Разбираем CSS-код
3. Основные CSS-свойства
4. Значения CSS-свойств
5. Способы внедрения CSS-кода в HTML-документ
6. Внедрение CSS-кода с помощью тега <style>
7. Внедрение CSS-кода с помощью атрибута style=" "
8. Внедрение CSS-кода с помощью тега <link>
9. Селекторы основы

Мы познакомились с языком CSS и рассмотрели как с помощью него, можно изменять внешний вид HTML-тегов. В этом, десятом уроке, мы обощим полученные знания.

Что мы научились делать?

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

б) Внедрять CSS-код в HTML-страницу можно тремя способами:
С помощью тегов <style> </style>, влияет на внешний вид тегов одной страницы.
С помощью атрибута style=" ", влияет на внешний вид одного тега.
С помощью тега <link>, влияет на внешний вид тегов всего сайта.

в) Немного затронули тему селекторов (выборки) и выяснили, что селекторы бывают трёх видов:
Имя тега: p, h1, a и т.д.
Атрибут класс: class="имяКласса"
Атрибут уникального идентификатора: id="имяУникальногоИдентификатора"

В CSS-коде селекторы выглядят так:
имяТега { }
.имяКласса { }
#имяУникальногоИдентификатора { }

г) Схема CSS-кода, выглядит следующим образом:

селектор { CSS-свойство: значение; }

Дополнительные знания

Помимо записи в столбик:

p { 
color: blue; 
font-size: 19px; 
font-family: Monospace; }

CSS-свойства можно записывать в строку:

p { color: blue; font-size: 19px; font-family: Monospace; }

И даже без пробелов:

p{color:blue;font-size:19px;font-family:Monospace;}

Главное, не забывайте ставить двоеточие : после CSS-свойства и точку с запятой ; после значения.

Комментарии в CSS-коде записываются между символами /* и */, пример:

/* Здесь располагают комментарии */

Это интересно знать

По-умолчанию, цвет шрифта у абзацев, заголовков и т.д. чёрный (black). Размер шрифта у абзаца равен 16 пикселям (16px), размер заголовка h1 равен 32 пикселя (32px). Имя шрифта по-умолчанию ‘Times New Roman’.

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

Что изучать дальше?

Чтобы хорошо освоить язык CSS, вам нужно:
1. Изучить все CSS-свойства, поищите в интернете Справочник CSS-свойств.
2. Более детально рассмотреть тему о селекторах CSS (на этом сайте есть специальный раздел посвящённый им).
3. Изучить псевдоклассы и псевдоэлементы.
4. Почитать различные статьи о CSS, которые освещают ту или иную тему о языке.

На данном этапе вы уже можете приступить к чтению учебника по языку программирования JavaScript.

По идее, после прочтения учебников по HTML и CSS, приступают к изучению вёрстки сайтов, но пока по этой теме я учебника ещё не написал, поэтому если вы всё же хотите изучить верстку, то можете поискать в интернете следующую информацию:
— блочная вёрстка сайтов (дивовая вёрстка сайтов),
— резиноввя вёрстка сайтов,
— адаптивная вёрстка сайтов (современная верстка).

Читать далее: Селекторы в CSS

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

5 комментариев на «“Заключение учебника по CSS”»

  1. Cпасибо за проделанную работу.
    Получилась хорошая альтернатива книгам серии «Для чайников» или «Head first».
    Добавил в закладки.

  2. Ну это просто отлично!
    Так всё понятно расписано. Если кто-то из этого сайта не поймёт, то уже и непонятно как ему помочь 😉

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget