Основы CSS - для новичка

Подключение таблицы стилей CSS

Теперь давайте рассмотрим как можно сделать подключение таблицы стилей к html документу.

Как мы знаем из прошлого урока, для этого служит специальный тег:

<link rel="stylesheet" type="text/css" hrеf="style.css">

который вставляется в раздел <head> html-файла и указывает на расположение файла таблицы стилей.

Пример:

<html>
<head>
<title>Сайт о шикарных автомобилях</title>
<link rel="stylesheet" type="text/css" hrеf="style.css">
</head>
<body>
<h2>Приветствую Вас на сайте о дорогих автомобилях</h2>
<p>В этих автомобилях сочетаются<br>
последние достижения высоких технологий<br>
и лучшие решения в инженерии</p>
</body>
</html> 

Так же существуют ещё два способа подключения стилей.

Это

  1. встроенные таблицы стилей
  2. внутренние стили для элементов

Встроеные таблицы стилей

Могут быть включены прямо в html-документ в раздел <head>
При этом стили должны быть обёрнуты тегом

<style type="text/css">
.....
</style>

Это делается для того чтобы браузер понял что это таблицы стилей.
Пример:

<html>
<head>
<title>Сайт о шикарных автомобилях</title>
<style type="text/css">
h2
{color:#F34B10;
font-size:32px; }
</style>

</head>
<body>
<h2>Приветствую Вас на сайте о дорогих автомобилях</h2>
<p>В этих автомобилях сочетаются<br>
последние достижения высоких технологий<br>
и лучшие решения в инженерии</p>
</body>
</html>

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

Внутренние стили для html элементов

Такое подключение мы уже затрагивали в одном из уроков по HTML.
Это когда для какого то тега сразу указывается стиль.
Пример:

<html>
<head>
<title>Сайт о шикарных автомобилях</title>
</head>
<body>
<h2>Приветствую Вас на сайте о дорогих автомобилях</h2>
<p style="color:#ccc; font-size:15px;">
В этих автомобилях сочетаются<br>
последние достижения высоких технологий<br>
и лучшие решения в инженерии</p>
</body>
</html>

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

Каждый способ подключения применяется индивидуально к каждому html документу.

В основном таблицы стилей выносятся в отдельный файл.

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

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

Может быть пока это ещё не совсем понятно, но уверен через некоторое время вы всё поймёте.
Главное делайте больше практических примеров.

Далее: цвет фона и текста в CSS

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

Блочная вёрстка DIV в CSS

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

Как вы знаете в HTML документе текст и другое содержимое можно разметить на странице двумя разными способами.

1. При помощи таблиц, теги <table>, <tr>, <td>.

2. При помощи блоков, тег <div>.

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

Блочная вёрстка в 98% используется для построения макетов сайтов (шаблонов) и разметки другого содержимого, например каталога товаров или услуг.
На примере каталога мы как раз её и рассмотрим. Каталог смартфонов и КПК.

Подробнее...

Свойство z-index CSS. Трёхмерные страницы

Трёхмерные страницы с помощью CSS.

Мы привыкли задавать координаты в двух осях X и Y, но с помощью CSS можно задать и третью координату, по оси Z. Поэтому я называю эти страницы трёхмерные. Это свойство z-index.

Свойство z-index схоже со слоями в графических редакторах. Так основной слой будет иметь координату 0. Слой номер 1, будет распологаться выше, слой 2 будет выше чем слой 1 и т.д.

Свойство z-index

С помощью этого свойства и задаются слои (координаты) на странице.

Вот так можно сделать с помощью z-index:

Вот так будет выглядеть CSS файл:

body{
background: #775B06;}


.dama{
position: absolute;
top: 150px;
left: 150px;
z-index: 1; }

.king{
position: absolute;
top: 200px;
left: 210px;
z-index: 2; }

.a{
position: absolute;
top: 250px;
left: 270px;
z-index: 3; }

А в HTML добавим :

<div><img src="/dama.jpg" class="dama"></div>
<div><img src="/king.jpg" class="king"></div>
<div><img src="/a.jpg" class="a"></div>

Ничего сложного. С помощью z-index можно накладывать текст на картинки или наоборот. Можно делать текст с эффектом тени, в общем на сколько хватит фантазии.

Наверное хватит. Тренируйтесь, делайте свои странички, применяйте знания по CSS.

Перейти к: Полезные советы по CSS

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

Полезные советы по CSS

Несколько советов по css.

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

Вот несколько советов:

Цвета в шестнадцатиричном значении можно сокращать вот так:

#000000  #000
#FFFFFF   #FFF
#333333  #333


Координаты c нулями:

Вместо top: 0px; можно так top:0;


Если у класса два или меньше свойства:

h1{
color: red;}

Лучше так

h1{color:red:}


В конце последнего свойства можно не писать точку с запятой:

p{
color:red;
font-size:18px}


Одинаковые стили можно группировать:

.primer1{
color: red;
font-size:14px}

.primer2{
color: red;
font-size:14px}

Вот так:

.primer1,.primer2{
color:red;
font-size:14px}


Так же сокращённые записи свойств:

BACKGROUND

BODY {
background-color:#ffee8c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right}

BODY {background: #ffee8c url('smile.png') no-repeat fixed top right }

 

BORDER

h1 {
border-width:30px;
border-style:solid;
border-color:#000;}

h1 {border:30px solid #000}

И так далее, сокращённые формы были на уроках.


Или свойства сторон рамок:

border-top:10px;
border-right:15px;
border-bottom:10px;
border-left:15px

Задаётся ПО ЧАСОВОЙ СТРЕЛКЕ начиная с 12.00

border:10px 15px 10px 15px;

Если значения право/лево , или верх/низ совпадают,можно ещё больше сократить:

border:10px 15px;

В данном случае, первое значение, это величина верх/низ, а второе - лево/право.

Желаю успехов в изучении!!!

На главную

Вернуться в Начало

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

Свойство Float CSS

Блоки - Поплавки - float CSS.

На этом уроке рассмотрим ещё один важный момент связанный
с блоками : "Поплавки".

Свойство float CSS 

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

Имеет значения :
left - блок будет прижиматься к левому краю, а текст и всё остальное будет его обтекать справа.
right - блок будет прижиматься к правому краю, обтекание его будет с левой стороны.
none - свойство float выключено.

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

.box1{
height: 100px;
width: 100px;
border: 2px solid blue;}

И так далее для .box2, .box3, и .box4

В HTML напишем:

<div class="box1">БЛОК 1<br>LEFT</div>
<div class="box2">БЛОК 2<br>LEFT</div>
<div class="box3">БЛОК 3<br>RIGHT</div>
<div class="box4">БЛОК 4<br>RIGHT</div>

В блоках напишем значения FLOAT которые зададим позже.
Для наглядности для первых двух напишем слева, а для двух последних справа.

Стрелками указаны места куда переместятся блоки, когда будет задано значение FLOAT.
В итоге получится вот так:

Если в HTML-документе после блоков добавить параграф с текстом, он займёт положение между блоками. Пример:

Что же делать если мы хотим ещё и внизу поставить блоки?

Для этого существует ещё одно свойство.

 

Свойство clear

Это хитрое свойство позволяет ставить блоки под блоками.
Имеет значения:
left - Отменяет обтекание с левого края элемента
right - Отменяет обтекание с правого края элемента
both - размещает блок ниже всех всплывающих блоков и полностью отменяет обтекание заданное свойством float.

Давйте создадим ещё два блока 200х200 пикселей. В CSS добавим стили:

.bigbox1{
height: 200px;
width: 200px;
border: 2px solid blue;
float: right;
clear: right;}


.bigbox2{
height: 200px;
width: 200px;
border: 2px solid blue;
float: left;
clear: left;}

А в HTML :

<div class="bigbox1">Большой БЛОК</div>
<div class="bigbox2">Большой БЛОК 2</div>


Получим вот что:

Структура уже становиться на что-то похожа, неправда ли?

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

Тренируйтесь, пробуйте, и всё у Вас получится.

Перейти к следующему уроку: Блочная вёрстка DIV

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!