» » Уроки по CSS/CSS3. Частина 3. Селектори

Уроки по CSS/CSS3. Частина 3. Селектори

В даному, 3 уроці, розповідається про селектори в CSS/CSS3


index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Уроки CSS. Часть 3</title>
<link rel="stylesheet" href="main.css">
<div id="main">
    <h1>Заголовок h1</h1>
    <h2 class="list">Заголовок h2</h2>
    <ul class="list">
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
    </ul>
    <ul class="list2">
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
    </ul>
    <table class="table-main">
        <tr>
        	<td>Table Cell 1</td>
        	<td>Table Cell 2</td>
        	<td>Table Cell 3</td>
        </tr>
        <tr>
        	<td>Table Cell 1</td>
        	<td>Table Cell 2</td>
        	<td>Table Cell 3</td>
        </tr>
        <tr>
        	<td>Table Cell 1</td>
        	<td>Table Cell 2</td>
        	<td>Table Cell 3</td>
        </tr>
    </table>
    <h2>Заголовок h2</h2>
    <table class="table-sec">
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
        </tr>
    </table>
    <p class="text">Magna sed ante euismod lobortis id et tellus. Nulla fermentum neque consectetur mi congue pellentesque dictum in nulla. Donec ante metus, sodales gravida pulvinar ut, accumsan nec turpis. Vestibulum rhoncus mi in nisl dictum semper. Nam neque tortor, accumsan a faucibus at, porta at diam. Duis congue sollicitudin augue, et aliquam turpis mollis a. Proin at adipiscing velit. Curabitur egestas interdum blandit. Fusce enim massa, commodo vitae fermentum vitae, venenatis in ante. Sed ut ipsum est. Donec sit amet turpis enim, sit amet adipiscing eros. Morbi vel sagittis erat. Ut sit amet molestie libero. Nulla facilisi. Fusce leo ipsum, scelerisque vitae pharetra nec, semper et sapien. Sed eu purus mi, eget ultrices nunc. Suspendisse non sapien enim. Morbi suscipit augue sed libero aliquam lobortis. Aliquam ante neque, hendrerit a eleifend vitae, porttitor a odio. Donec ut felis vitae ligula molestie interdum at ullamcorper neque. Aenean laoreet rutrum rhoncus. Aenean rutrum magna rhoncus lectus pellentesque id ultrices nisl semper. Maecenas hendrerit gravida pulvinar. Suspendisse imperdiet odio imperdiet enim semper quis accumsan dui consectetur. Morbi lacus purus, cursus non suscipit quis, tempus sit amet leo. Etiam nec nisi eros. Phasellus eros sapien, gravida vel sodales non, sollicitudin at ligula. Maecenas nec eros mi. Sed et dapibus lorem. Morbi et tortor ac ligula sagittis semper. Donec laoreet lacinia mauris id semper. Sed nec dui sed eros luctus consectetur id vitae erat. Quisque sapien felis, eleifend non pretium id, feugiat molestie velit. Nulla bibendum eros vitae diam fermentum a euismod dui pharetra. Donec bibendum posuere scelerisque. Aenean pulvinar blandit mi ac varius. Vivamus lobortis bibendum tincidunt. Mauris rhoncus lacus eget massa vulputate sodales eu non sem.</p>
    <p>
    	<a href="picture.jpg">Открыть изображение</a>
    </p>
    <p>
        <a href="picture.png">Открыть изображение 2</a>
    </p>
    <p>
        <a href="audio.mp3">Открыть звуковой файл</a>
    </p>
</div>


main.css
body {
    font-family: Verdana;
    font-size: 13px;
    color: #333;
    background: #f3f3f3;
}

a {
    color: #cb2c2c;
    text-decoration: none;
}

a[href$=".jpg"]::after {
    content: ' (jpg)';
    font-size: 10px;
    color: #888;
}

a[href$=".png"]::after {
    content: ' (png)';
    font-size: 10px;
    color: #888;
}

a[href$=".mp3"]::after {
    content: ' (mp3)';
    font-size: 10px;
    color: #888;
}



Текстові редактори для написання коду:
Aptana Studio 3 - використовує автор відео
Brackets
SubLime Text - рекомендує web.if.ua
Notepad++



css-lessons
558 05.01.15



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру