CSS

CSS

Уроки CSS предназначены  на тех, кто знает HTML. Здесь Вы найдете уроки о том как сделать Ваши сайты адаптивными, стильными, красивыми и добавить эффекты анимации и переходов на Ваши страницы.

Здравcтвуйте! Сегодня я хочу рассказать о таком полезном свойстве в CSS как позиционирование.  CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице. Основным свойством, которые управляют позиционированием в CSS, является свойство position. Это свойство может принимать одно из следующих значений:

  • static: стандартное позиционирование элемента, значение по умолчанию

  • absolute: элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static

  • relative: элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для абсолютного позиционированния вложенных в него элементов

  • fixed: элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).

Здравствуйте! В этой статье мы обобщим знания полученные из уроков Блочная верстка (2 колонки) и Блочная верстка (3 колонки) и создадим простейший макет страницы для сайта. Макет будет 3 колоночным с основным содержимым и 2 колонками по бокам.

Для начала определим базовую структуру веб-страницы:

Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float. При работе с плавающими элементами и свойством float довольно часто можно столкнуться с проблемой выпадения из страницы плавающих элементов. У этой проблемы есть различные аспекты и их решения. Рассмотрим эти аспекты.

 

Здравствуйте! В этом уроке рассмотрим как создать меню на CSS. Меню или панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы.  Фактически панель навигации - это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент <a>. Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент <a> является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.

Здравствуйте! Кроме свойства float, которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство - display. Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.

Это свойство может принимать следующие значения:

  • inline: элемент становится строчным, подобно словам в строке текста

  • block: элемент становится блочным, как параграф

  • inline-block: элемент располагается как строка текста

  • list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера

  • run-in: тип блока элемента зависит от окружающих элементов

  • flexbox: позволяет осуществлять гибкое позиционирование элментов

  • table, inline-table: позволяет расположить элементы в виде таблицы

  • none: элемент не виден и удален из разметки html

 

Здравствуйте! В продолжении темы Блочная верстка на CSS рассмотрим такой распространенный случай, когда надо сделать так чтобы колонки были одной высоты. Рассмотрим проблему на примере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            body, h2, p{
                margin:0;
                padding:0;
            }
            body{
                font-size: 18px;
            }
            #header{
                background-color: #eee;
                border-bottom: 1px solid #ccc;
                height: 80px;
            }
            #menu{
                background-color: #ddd;
                float: left;
                width: 150px;
            }
            #main{
                background-color: #f7f7f7;
                border-left: 1px solid #ccc;
                margin-left: 150px;
                padding: 10px;
            }
            #footer{
                border-top: 1px solid #ccc;
                background-color: #dedede;
            }
        </style>
    </head>
    <body>
        <div id="header"><h2>Сайт MySyte.com</h2></div>
        <div id="menu">
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Блог</a></li>
                <li><a href="#">Контакты</a></li>
                <li><a href="#">О сайте</a></li>
            </ul>
        </div>
        <div id="main">
            <h2>What is Lorem Ipsum?</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                has been the industry...</p>
        </div>
        <div id="footer">
            <p>Copyright © MySyte.com, 2016</p>
        </div>
    </body>
</html>

Просмотреть  пример

 

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

Здравствуйте! В прошлой статье я рассказвал о блочной верстке с двумя колонками. Подобным образом мы можем добавить на страницу и большее количество колонок и сделать более сложную структуру. Например, добавим на веб-страницу второй сайдбар то есть будет три колонки:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            div{
                margin: 10px;
                border: 1px solid black;
                font-size: 20px;
                height: 80px;
            }
            #header{
                background-color: #ccc;
            }
            #leftSidebar{
                background-color: #ddd;
            }
            #rightSidebar{
                background-color: #bbb;
            }
            #main{
                background-color: #eee;
                height: 200px;
            }
            #footer{
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div id="header">Шапка сайта</div>
        <div id="leftSidebar">Левый сайдбар</div>
        <div id="rightSidebar">Правый сайдбар</div>
        <div id="main">Основное содержимое</div>
        <div id="footer">Футер</div>
    </body>
</html>

Просмотреть  пример

 

Здравствуйте! В этой статье я хочу рассказть о блочной верстке. Как правило, веб-страница состоит из множества различных элементов, которые могут иметь сложную структуру. Поэтому при создании веб-страницы возникает необходимость нужным образом позиционировать эти элементы, стилизовать их так, чтобы они располагались на странице нужным образом. То есть возникает вопрос создания макета страницы, ее верстки. Существуют различные способы, стратегии и виды верстки. Изначально распространенной была верстка на основе таблиц. Так как таблицы позволяет при необходимости очень легко и просто разделить вcе пространство веб-страницы на строки и столбцы. Строками и столбцами довольно легко управлять, в них легко позиционировать любое содержимое. Именно это и определило популярность табличной верстки.

Здравствуйте! От линейных градиентов переходим к радиальным. Радиальные градиенты в отличие от линейных распространяются от центра наружу по круговой схеме. Для создания радиального градиента достаточно указать цвет, который будет в центре градиента, и цвет, который должен быть снаружи. Эти цвета передаются в функцию radial-gradient(). Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизация таблиц в CSS3</title>
        <style>
		div {
			width: 200px;
			height: 200px;
			border-radius: 100px;
			
			background-color: #eee;
			background-image: radial-gradient(white, black);
			background-image: -moz-radial-gradient(white, black);
			background-image: -webkit-radial-gradient(white, black);
		}
		p{
			margin: 0;
			padding-top: 60px;
			text-align: center;
			color: #eee;
		}
        </style>
    </head>
    <body>
		<div><p>Радиальный градиент</p></div>
	</body>
</html>

Просмотреть  пример