CSS: An Overview. What's CSS? #6

PS: самозакрывающиесятеги

Вот мы и подошли к концепции самозакрывающихся тегов.

Вы никогда не увидите <link></link> и это нормально использовать единый набор <>, в котором тег одновременно и открывается и закрывается. Вы делали это следующим образом:

< link type="text/css" rel="stylesheet" href="адрес css файла"/>

Возможно вы заметили сходство с тегом <img>:

<img src=”веб-адрес”/>

Большинство тегов не самозакрывающиеся, но не надо забывать и про самозакрывающиеся, это поможет сохранить вам время и силы.

Если все в понятно, то нажмите “Сохранить и отправить код” чтобы продолжить наше изучение css синтаксиса. 

CSS: An Overview. What's CSS? #5

Свяжите его!

Есть лучший способ.

Вы знаете, что ваш css храниться в отдельном фале. Но как донести эту информацию до вашего html файла?

Это можно сделать при помощи тега <link> (вы уже могли видеть его в первом упражнении этого курса) написанного внутри тега <head></head> вашей html страницы. Тег <link> должен содержать следующие три атрибута:

1. атрибут type который всегда должен быть равен “text/css”
2. атрибут rel который всегда равен “stylesheet”
3. и атрибут href который должен указывать на веб-адрес где расположен ваш css файл

В редакторе справа вы можете увидеть два файла: index.html и stylesheet.css

задание

Вставьте тег <link> указывающий на ваш stylesheet.css файл в ваш index.html. Воспользуйтесь советом, если вам необходима помощь.

подсказка

Полный синтаксис выглядит так:
< link type="text/css" rel="stylesheet" href="stylesheet.css"/>
Если вы получаете ошибку “font size (like 44.6363)” попробуйте сбросить настройки зумирования вашего браузера Ctrl+0 или Cmd+0

решение index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <p>I want to be SIZE 44 font!</p>
    </body>
</html>

CSS: An Overview. What's CSS? #4

Если он не во вне!

Ранее мы показали вам, как создается встроенный дизайн в html выглядело это так:

<p style=”color:red”>красный фон</p>

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

Существует два способа задать css один из них мы уже рассматривали (создание отдельного файла).Второй создать код css прямо на вашей html страницы для этого надо меду тегами <head></head> поместить тег <style></style>  внутри которого разместить ваши параметры css. Пример такого создания css вы можете увидеть в редакторе.

Все понятно? Отлично! Нажимаем “Сохранить и отправить код” и продолжаем курс

CSS: An Overview. What's CSS? #3

Зачем создавать отдельную форму из функций?

Отличная работа! Взгляните на себя. Вы уже пишете css.

Существует две основные причины для создания отдельного файла форматирования (css) для вашего html.

1. Вы можете применять одно и тоже форматирование к нескольким  html элементам не переписывая код (например: style=”color:red”) снова и снова.
2. Вы можете применить одно и тоже форматирование, и внешний вид к разным страницам при помощи одного и того же css файла.

Взгляните на html код в index.html. В нем много тегов <span></span>! Все слова в них написаны обычным шрифтом, но мы хотим, чтобы они выглядели интереснее.

задание

Перейдите на вкладку stylesheet.css и задайте тегу span значение font-family со значением шрифта cursive. Воспользуйтесь подсказкой если вам нужна помощь!

подсказка

Давайте посмотрим, когда нам надо было сделать шрифт красным мы писали:
span{
color:red;
}
Поэтому, если мы хотим чтобы задать значение font-family:cursive; мы напишем его вместо color:red и получим желаемое изменение шрифта.

решение stylesheet.css

span {
    font-family: cursive;
}


CSS: An Overview. What's CSS? #2

Что такое css?

CSS (расшифровывается как Cascading Style Sheets (пер. Каскадные Таблицы Стилей)) – это язык для  описания внешнего вида и форматирования html.

Таблицы стилей - это файл, который описывает, как должен выглядеть html файл. Вот и все!

Мы называем их каскадными таблицами стилей, потому что при форматировании можно использовать больше чем один стиль. Например, вы можете указать, что все абзацы должны быть синим шрифтом, но при этом выделить один из них красным, css поможет нам и в этом! (Мы поговорим об этом в четвертом разделе.)

задание

Выберите вкладку stylesheet.css (она находиться справа от вкладки index.html). Мы заполнили css так, чтобы текст абзацев был красным, вам надо дополнить текст css так чтобы сделать текст между тегами <span> </span> синего цвета. После заполнения нажмите “Сохранить и отправить код”!

подсказка

Воспользуйтесь:
color:red
как основой для написания вашего кода css если вы застряли.

решение stylesheet.css

p {
    color: red;
}
 
span {
    color: blue;
}


CSS: An Overview. What's CSS? #1

Пока не увижу не поверю

Взгляните на html файл index.html. Он выглядит довольно стандартно, не так ли? Вам знакомы все эти вещи: заголовки, абзацы, картинки, списки и таблицы. Посмотрите на вкладку с результатами, там тоже никаких сюрпризов. (На самом деле все это выглядит довольно уродливо) 

Мы закомментировали очень важную строку в файле index.html. Если удалить комментарий (“<!-“ сначала четвертой строки и “->” в конце строки кода), вы сможете увидеть волшебство, которое творит css. Не удаляйте тег <link> и его содержимое. 

задание

Снимите комментарий с тега <link> и посмотрите на результат, все это вы скоро сможете сделать самостоятельно при помощи css.

решение

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <div id="header">
            <div id="navbar">
                <ul>
                    <li>Home</li>
                    <li>About Me</li>
                    <li>Plans for World Domination</li>
                    <li>Contact</li>
                </ul>
            </div>
            <h2>About Me</h2>
        </div>
        <div id="left">
        <img src="http://bit.ly/Vw049i"/>
        <p>I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p>
        </div>
        <div id="right">
        <table>
            <th colspan="3">My Bros</th>
            <tr>
                <td><img src="http://bit.ly/W3UhKC"/></td>
                <td><img src="http://bit.ly/UIfMiC"/></td>
                <td><img src="http://bit.ly/Xpnc74"/></td>
            </tr>
            <tr>
                <td><img src="http://bit.ly/ZgRBGF"/></td>
                <td><img src="http://bit.ly/Xl6A3o"/></td>
                <td><img src="http://bit.ly/12N3dGl"/></td>
            </tr>
            <tr>
                <td><img id="bottom_left" src="http://bit.ly/Vw0EDW"/></td>
                <td><img src="http://bit.ly/XMRTlU"></td>
                <td><img id="bottom_right" src="http://bit.ly/134HLww"/></td>
            </tr>
        </table>
        </div>
        <div id="footer">
            <div id="button">
                <p>Send me an <span class="bold">e-mail</span>!</p>
            </div>
        </div>
    </body>
</html>