Css учебник онлайн: Самоучитель CSS | htmlbook.ru

Содержание

Виды классов селекторов, продолжение. Самоучитель CSS

7)Селекторы потомков:
<STYLE type=»text/css»>
h2, STRONG{ color: blue }
h2 STRONG { color: red }
</STYLE>
*****
<h2>синий цвет</h2>
<P> <strong>синий цвет </strong></P>
<h2>синий цвет <strong>красный цвет </strong></h2>
В моем примере я создал правило, которое тегу h2 и STRONG присваивает синий цвет текта, но если текст в теге STRONG помещен в h2, он будет красного цвета. Еще например в HTML картинке задают размер в пикселях, но в таблице мы можем задать width=100%, чтобы картинка расширилась на всю ячейку, то в CSS это будет выглядеть вот так:
TD IMG{width:100%}
Комбинации могут быть более сложными:
DIV P STRONG{color: blue}
DIV * STRONG{color: blue}
Т.е. можно составлять с двух и более селекторов, оба эти примера имеют одинаковое значение, если тег DIV будет содержать в себе P, а тот в свою очередь STRONG, то текст в последнем станет синим. Второй пример вместо P содержит звездочку, она может заменить любой селектор или даже комбинацию селекторов.

8)Дочерние селекторы тегов.
<html>
<head>
<title>ВВедение в CSS</title>
</head>
<body>
<body>
<h2>Текст по центру</h2>
<b> жирный и <i>наклонный</i> текст</b>
</body>
</html>
Дочерние селекторы отличаются от потомков, тем что они идут сразу за родителями, например теги BODY и HEAD для HTML являются дочерними , в свою очередь, тег title для head и теги h2 и B для BODY так-же являются дочерними, но теги TITLE, h2 и B для HTML являются потомками(внуки, правнуки и т.д.), а не дочерними.
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type=»text/css»>
P, DIV { color: blue }
DIV>P { color: red }
</STYLE>
</head>
<body>
<body>
<DIV>текст синего цвета</DIV>
<DIV>текст синего цвета
<P>текст красного цвета</P>
</DIV>
<P>текст синего цвета</P>
</body>
</html>
Для того чтобы упрявлять только дочерними тегами используется символ «>«.

9) Смежные селекторы(родственники) , это селекторы у которых общий родитель:
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type=»text/css»>
STRONG + EM { color: red }
</STYLE>
</head>
<body>
<body>
<P>текст черного цвета
<em> текст черного цвета </em>
<strong> текст черного цвета </strong>
<em> текст красного цвета </em>
</P>
</body>
</html>
Такие правила выполняются только если оба тега идут друг за другом.

деревянный багет для картин

CSS

Обычно файл со стилями хранится в корневой папке сайта и к странице подключается единственной строчкой кода:

Т.е. данная строка кода ссылается на внешний файл с описанием стилей под именем style.css, в котором прописаны все параметры оформления используемых на странице тегов <body>, <h2>, <p> и т.д. При этом сами теги в коде HTML пишутся как обычно, ссылка лишь указывает браузеру, что он должен использовать правила отображения данного HTML-документа из указанного CSS-файла.

Одновременно несколько HTML-документов могут ссылаться на одну таблицу стилей, т.е. один CSS-файл можно использовать для управления отображением множества HTML-документов, что очень удобно при верстке сайта.

Главные преимущества CSS:

— более чистый код, который быстрее загружается, оптимизирован под поисковые системы и который легче поддерживать;

— управление отображением множества документов с помощью одной таблицы стилей, общий дизайн для всех страниц;

— возможность создания респонсивных сайтов, которые адаптивно отображаются на мониторе и мобильных гаджетах;

— более точный контроль над внешним видом страниц (позиционирование, размер, поля и т.д.) ;

— дополнительные возможности оформления, например, CSS позволяет убрать подчеркивание у ссылок или создать «липкое» меню, которое следует за скроллингом.

Синтаксис CSS

У CSS достаточно простой синтаксис. Таблица любых стилей состоит из набора правил, каждое из которых состоит из одного или нескольких селекторов, разделенных запятыми и блока определений. Блок определений обрамляется фигурными скобками и состоит из набора свойств и их значений.

Например:

p {

font-family: «Compact», sans-serif;

}

h3 {

font-size: 110 %;

color: blue;

background: gray;

}

p#paragraph2 {

margin: 0;

}

a:hover {

text-decoration: none;

}

Выше приведено четыре правила с селекторами p, h3, p#paragraph2, a:hover. Согласно первому правилу элементы p (параграфы) будут отображаться шрифтом Compact, или каким-либо другим шрифтом с засечками из серии sans-serif, если Compact недоступен.

Второе правило задает стиль для заголовков h3,исходя из которого заголовок второго уровня будет отображаться синим цветом на сером фоне с увеличенным кеглем.

Третье правило будет применяться только к элементам p, атрибут id (идентификатор) которых равен paragraph2. Такие элементы не будут иметь внешних отступов (margin).

Четвертое правило определяет стиль hover для элементов a. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило убирает подчеркивание, когда курсор мыши находится над этими элементами.

Чтобы знать, какие правила задавать элементам на странице сайта, следует изучить CSS-учебник, который можно скачать ниже. С его помощью вы освоите или хотя бы ознакомитесь с возможностями форматирования веб-страницы с помощью CSS и сможете управлять исходным кодом в соответствии со своими потребностями.

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

10 полезных ресурсов для изучения CSS для новичков ⭐ Блог TemplateMonster

Современное развитие информационных технологий и интернета, сделали возможным получить практически любое образование удаленно. Обучение онлайн позволяет в индивидуальном свободном графике освоить ту или иную науку, и для этого достаточно иметь доступ к интернету и компьютер под рукой. С каждым днем в сети появляется все больше сервисов, которые помогут любому желающему получить новые знания.

Например, сегодня можно самостоятельно освоить основы веб-программирования и верстки, которые сложно представить без знания HTML и CSS. А в сети в свободном доступе находится множество книг и уроков, а также форумов с полезными статьями и комментариями.

www.w3.org/Style/CSS/learning.ru

Сборник статей и руководств по работы с CSS. Здесь собраны пошаговые уроки и практические занятие, которые будут полезны новичкам.

* * *

Далее будет представлен небольшая подборка веб-ресурсов, которые помогут обучиться основам работы с СSS.

webmasterwiki.ru

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

* * *

css.manual.ru

Крутой подробный справочник, в котором можно найти массу полезной информации о CSS и HTML.

* * *

htmlbook.ru

Один из самых популярных и полезных сайтов о HTML и CSS. Пошаговые и очень подробные уроки, которые будут понятны для начинающих программистов.

* * *

webremeslo.ru

Интересный онлайн-учебник с широким набором сведений и информации, которая будет полезна как начинающим программистам, так и уже более опытным специалистам. В каждом уроке пошагово раскрывается много полезных приемов.

* * *

stroemvmeste.ru

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

* * *

stepbystep.htmlbook.ru

Блог профессионального веб-марстера Андрея Морковкина. Множество полезной информации, уроков и советов, в том числе и видео-уроки.

* * *

habrahabr.ru

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

* * *

dimox.name

Популярный блог Димокса, на страницах которого можно найти множество полезной и понятной для новичков информации по продвинутому использованию CSS, верстки и другим актуальным темам.

* * *

eltisbook.ru

Полное руководство о том, как создавать сайт самому. Ресурс будет полезен для начинающих веб-разработчиков и откроет все основы, необходимые для старта карьеры.

Списки

Подкаст CSS — 030: Списки

Аудиоверсия этого модуля

Представьте, что у вас есть набор товаров, которые вы планируете купить во время следующего похода за продуктами. Один из распространенных способов визуального представления этого — список, но как добавить стиль в свой список покупок?

   
  овсяное молоко 
 
  ревень 
 
  хлопья 
 
  тесто для пирога

Создание списка #

Предыдущий список начинался с семантического элемента, или

элементов) в качестве дочерних.Если вы проверите каждый элемент
, вы увидите, что все они имеют display: list-item , поэтому браузер по умолчанию отображает :: marker .
```
  li {
 дисплей: элемент списка; 
}  
```
Есть еще два типа списков.
Упорядоченные списки могут быть созданы с помощью

Category Css