Как создать файл css для html: Как создать файл стилей CSS?

Htaccess файл — как создать файл .htaccess? HTML, CSS, js

Прослушать статью

Htaccess файл — как создать файл .htaccess новичку? Файл .htaccess,  как правило, имеет только расширение под Unix – системы. И приносит пользу сайтам под управлением сервера Apache.

Htaccess имеет набор правил для определенного сайта на сервере. Файл управляет многими параметрами конфигурации веб-сервера Apache. Apache — широко используемое серверное программное обеспечение для кроссплатформенных операционных систем.

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

Содержание статьи:

• Инструкция для создания файла . htaccess
• Простой пример перенаправления страницы
• Пример создания документа об ошибках в .htaccess
• Пример защита паролем в .htaccess
• Как запретить посетителей по IP-адресу
• Примеры правил содержащихся в моем файле .htaccess
• Особенности настройки и распространенные ошибки
• Какое влияние оказывает на сайт

Инструкция для создания файла .htaccess

Htaccess широко известен как «точечный файл», поскольку он начинается с точки. Точечные файлы почти всегда представляют собой файл конфигурации. Такие файлы могут быть для операционной системы или части программного обеспечения. По умолчанию операционная система скрывает точечные файлы в окнах поиска или в любом системном файловом менеджере. Обычно вам нужно выбрать опцию «Показать скрытые файлы» в настройках вашей операционной системы. Или вы можете использовать команду для отображения всех файлов в командной строке. ls -a

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

1. Для того, чтобы создать этот файл, достаточно воспользоваться любым доступным текстовым редактором (к примеру блокнотом).
2. Название (.htaccess) — без кавычек и прочего.
3. Сохраняем файл.
4. Затем переносим его на Ваш сервер (хостинг) с помощью FTP клиента, обязательно в корневую директорию сайта. Вы должны передавать через ASCIIрежим. По умолчанию большинство FTP-клиентов будут передавать данные через режим, который неэффективен для передачи точечных файлов. В вашем FTP-клиенте должна быть возможность установить режим передачи. BINARY
5. Далее его можно редактировать как угодно, но обязательно обновлять версию файла на сервере (хостинге). Если по какой-то причине кажется, что правила не вступили в силу, это может быть связано с неправильными правами доступа к файлам. Права доступа к файлам .htaccess должны быть установлены на 755. В вашем FTP-клиенте должна быть опция «Права доступа к файлам». Кроме того, вы можете запустить команду в терминале .chmod 755 .htaccess (лучше указать полный адрес до файла).

Простой пример перенаправления страницы

Одно из основных популярных правил в  .htaccess — перенаправление страниц. Вы можете направлять с любого относительного пути в вашем директоре сайта. А также можете перенаправить страницу либо на абсолютный путь на вашем сайте, либо в любое другое место в Интернете. Основной синтаксис для использования в вашем файле:

Redirect /directory_to_redirect_from/ https://mysite.com/new_directory/index.html

Необходимо всегда  использовать относительный путь в качестве исходного каталога. Абсолютный путь должен быть каталогом для перенаправления.

Пример создания документа об ошибках в .htaccess

Создание пользовательских страниц ошибок очень полезно, так как позволяет показывать посетителям веб-сайта понятное сообщение об ошибке, например, если URL-адрес на вашем веб-сайте не работает. Это позволяет избежать недружественной ошибки «404 File Not Found» и позволяет отображать дружественную ошибку, объясняя возможные решения и направляя посетителя обратно к содержимому вашего веб-сайта, а не оставляя их разочарованными и потерянными.

Чтобы настроить пользовательские документы об ошибках, создайте файл .htaccess, следуя основным инструкциям и рекомендациям, которые включают следующий текст:

ErrorDocument 404 /error_pages/404.html

Приведенная выше строка указывает веб-серверу Apache отображать документ, расположенный по адресу /error_pages/404.html (под вашим доменным именем/адресом веб-сайта), всякий раз, когда возникает ошибка 404 (файл не найден).

В этом примере мы предположили, что вы создали документ об ошибке и назвали его «404.html» и поместили его в каталог с именем «error_pages» под своим доменным именем. Например, http://www.yourdomain.com/error_pages/404.html.

Документ 404.html представляет собой обычный HTML-документ, как и другие на вашем веб-сайте, и может отображать любое содержимое, которое вы хотите, однако мы рекомендуем включать сообщение «Файл не найден».

Чтобы настроить дополнительные документы об ошибках, например, для сообщений об ошибках «401 Unauthorized», «403 Forbidden» и «500 Internal Server», создайте файл (точка) htaccess, следуя основным инструкциям и рекомендациям, которые включают следующий текст:

ErrorDocument 401 /error_pages/401.html
ErrorDocument 404 /error_pages/404.html
ErrorDocument 500 /error_pages/500.html

Пример защита паролем в .htaccess

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

Для начала решите, какой каталог вы хотите защитить паролем (обратите внимание, что все файлы и подкаталоги в каталоге будут защищены паролем), затем создайте файл .htaccess, следуя основным инструкциям и рекомендациям, которые включают следующий текст:

AuthName “Member’s Area Name”
AuthUserFile /path/to/password/file/.htpasswd
AuthType Basic
Require valid-user

Первая строка сообщает веб-серверу Apache, что безопасный каталог называется «Имя пользовательской зоны», это будет отображаться при появлении всплывающего запроса на вход в систему. Во второй строке указывается расположение файла паролей. Третья строка указывает тип аутентификации, в этом примере мы используем «Базовый», потому что мы используем базовую HTTP-аутентификацию, и, наконец, четвертая строка указывает, что нам требуются действительные учетные данные для входа в систему, эта строка также может использоваться для указания определенного имени пользователя, например «требовать имя пользователя пользователя» потребует имя пользователя «имя пользователя».

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

Расположение файла паролей может быть где угодно на вашем веб-сервере, «/location/of/password/file/» необходимо заменить на полный/абсолютный путь к каталогу, содержащему файл паролей, и файл «.htpasswd». должно существовать, однако это можно назвать как угодно.

Мы используем имя файла «.htpasswd», потому что сервер распознает имя файла и скроет его от посетителей. Обратите внимание, что некоторые серверы требуют, чтобы файл паролей находился в том же каталоге, что и файл .htaccess. Также важно использовать полный/абсолютный путь к серверу для расположения файла паролей, относительный путь или любой вариант URL-адреса не будут работать.

Файл паролей будет содержать что-то похожее на следующий текст:

username:encryptedpassword
fred_smith:oCF9Pam/MXJg2

Теперь вы не можете просто придумать пароль, на серверах Unix/Linux они должны быть зашифрованы сервером, на серверах Windows вы просто используете простой текстовый пароль, поскольку Windows не предлагает никаких методов шифрования.  Вы можете иметь любое количество записей пользователей в файле паролей, по одной учетной записи в строке, разделяя имя пользователя и пароль двоеточием. Если у вас нет доступа к серверу, попросите вашего поставщика услуг включить эту функцию. Пожалуйста, панель управления имеет эту встроенную функцию.

Как запретить посетителей по IP-адресу

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

Чтобы настроить ограничения и блокировку посетителей, создайте файл .htaccess, следуя основным инструкциям и указаниям, которые включают следующий текст:

order allow,deny
deny from 255.0.0.0
deny from 123.45.6.
allow from all

Приведенные выше строки сообщают веб-серверу Apache о блокировке посетителей с IP-адресов «255. 0.0.0» и «123.45.6.», обратите внимание, что во втором IP-адресе отсутствует четвертый набор цифр, это означает любой IP-адрес, который соответствует первому. будут заблокированы три набора цифр, например, «123.45.6.10» и «123.45.6.255».

Чтобы настроить блокировку всех посетителей, кроме себя, создайте файл .htaccess, следуя основным инструкциям и указаниям, которые включают следующий текст:

order allow,deny
allow from 255.0.0.0
deny from all

Приведенные выше строки сообщают веб-серверу Apache о блокировке всех посетителей, кроме тех, у кого IP-адрес «255.0.0.0», который вы должны заменить своим собственным IP-адресом.

Вы можете добавить любое количество записей «запретить от» и «разрешить от» после «заказать разрешить, запретить». Обратите внимание на изменение с «разрешить от всех» на «запретить от всех» в нижней строке, это важно и должно быть изменено в зависимости от ваших требований. Если вы хотите разрешить своим посетителям доступ, вы должны использовать «разрешить от всех» и разместить строки «запретить от» выше.

Заблокированным посетителям будет показано сообщение об ошибке «403 Forbidden».

Примеры правил содержащихся в моем файле .htaccess

# AMPFORWPLBROWSERCSTART Browser Caching – amp хеширование на стороне браузера.

IfModule mod_expires.c обязательно заключаем в скобки “<>”
ExpiresActive On
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
ExpiresByType application/vnd.ms-fontobject “access 1 year”
ExpiresByType application/x-font-ttf “access 1 year”
ExpiresByType application/x-font-opentype “access 1 year”
ExpiresByType application/x-font-woff “access 1 year”
ExpiresByType image/svg+xml “access 1 year”
ExpiresByType image/webp “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType text/css “access 3 month”
ExpiresByType text/javascript “access 3 month”
ExpiresByType application/javascript “access 3 month”
ExpiresByType application/x-javascript “access 3 month”
ExpiresByType application/xhtml-xml “access 3 month”
ExpiresByType application/pdf “access 3 month”
ExpiresByType application/x-shockwave-flash “access 3 month”
/IfModule обязательно заключаем в скобки “<>”

# BEGIN GZIP COMPRESSION – сжатие gzip

IfModule mod_gzip. Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
IfModule mod_deflate.c обязательно заключаем в скобки “<>”

# Compress HTML, CSS, JavaScript, Text, XML and fonts сжатие – HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
/IfModule обязательно заключаем в скобки “<>”

# Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE

<IfModule mod_setenvif. wget” bad_bot

Я привел минимум правил которые содержатся в моем файле.

Особенности настройки файла .htaccess и распространенные ошибки

Именно так, этот файл чаще всего вызывает банальную серверную ошибку 500 Internal Server Error. Редактировать файл необходимо очень осторожно и следовать следующим правилам:

• Всегда перед началом редактирования .htaccess файла сохраняйте его работоспособную копию.
• Никогда не вносите новые правила на рабочий сайт без предварительной проверки файла.
• Кодировка, как правило UTF -8.
• Каждое правило нужно писать с новой строки.
• Исключаются те инструкции, которые не обрабатывает сервер Apache —  сразу вызывают серверную ошибку.
• Нельзя писать несколько инструкций в одной строке —  ошибка 500 будет Вам обеспечена.
• Будьте внимательны — лишний пробел или символ могут привести к ошибке.

Какое влияние оказывает .htaccess файл на сайт

Как правило благодаря этому файлу можно отлично оптимизировать сайт для поисковых систем. Вот что он может:

1. Настройка 301-го редиректа на сайте (самое распространенное правило). Может использоваться под необходимые задачи.
2. Настройки хеширования сайта на стороне сервера.
3. Включение сжатия gzip (сокращенно от GNU Zip) — сжатие файлов на стороне сервера.
4. Обеспечить защиту сайта: блокировка ip адресов, запреты и прочее.
5. Указать необходимый объем выделяемой памяти для сайта.

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

Спасибо, что читаешь Nicola Top

Насколько публикация полезна?

Нажмите на смайлик, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 29

Оценок пока нет. Поставьте оценку первым.

Как создать css файл для html

Создать css-файл так же легко, как и html. Достаточно зайти в любой текстовой редактор, например Блокнот, и там создать файл с расширением css. Дадим ему стандартное название — style.css.

Поздравляю! Ваш файл готов. Он пока пустой, но позже его можно будет наполнить соответствующим содержимым. Ниже мы рассмотрим азы — способы подключения css.

Внешние таблица стилей

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

В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и наш файл (например, index.html). Если расположение css-файла изменилось, то в атрибуте href надо внести соответствующие изменения. Например, часто бывает, что под CSS создают отдельную папку (что удобно и логично). Но тогда атрибут href будет выглядеть по-другому:

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

Иногда можно увидеть и другую конструкцию css, которая вставлена непосредственно в html-тег

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

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

Существует более простой способ вставки CSS. Если Вы не хотите создавать отдельный файл CSS, а использовать нужно только пару свойств, то подойдёт этот вариант. Начнём сразу с примера

Из примера видно, что стили мы прописали прямо перед закрывающим тегом head внутри открывающего и закрывающего тегов style. На самом деле тег style можно прописывать и в body, но если Вы хотите, чтобы Ваши записи выглядели структурировано, и чтобы человек, который после Вас увидит этот код не схватился за голову, то лучше писать стили в одном месте.

Недостаток встроенной таблицы стилей тоже очевиден — такие записи надо будет делать для каждой страницы отдельно.

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 15 человек(а).

Количество просмотров этой статьи: 23 096.

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

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

Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.

Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *. css.

Таким образом, можно сделать вывод, что создать файл стилей CSS мы можем просто изменив расширение текстового файла.

Для тех, кто любит видео:

Способ 1. Создание файла CSS меняя расширение текстового файла.

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.css.

Если у Вас не отображается расширение файлов, вот заметка:

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

Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.

После данной операции вы получите файл стилей css.

Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).

Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.

Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.

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

После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».

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

Как подключить CSS файл в файл HTML.

Для того чтобы настройки CSS вступили в силу нужно подключить файл с стилями к файлу HTML. Сделать это очень просто, нужно прописать команду для подключения файла. Я покажу этот процесс на примере простого кода который я использовал в статье невидимые теги HTML,HEAD и BODY и теперь мы применим на практике данный код.

Теперь в нашем коде появилась строчка <link rel= «stylesheet» href= «http://rabota-cms.ru/wp-content/themes/rabota/style.css» type= «text/css» /> и теперь нам нужно разобраться что мы написали в строчке. Начнем с link. Данная команда указывает что мы ссылаемся на внешний файл. Такая команда всегда указывавается в заголовке (между тегами <HEAD></HEAD>). Следующая команда rel= «stylesheet» указывает на тип сайта который мы ссылаемся. В данном случае код дает понять браузеру что подгружаемый файл это таблица стилей. В коде href= «http://rabota-cms.ru/wp-content/themes/rabota/style.css»

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

CSS селекторы и их применение для шаблона сайта.

Давайте для начала разберемся что собой представляет селектор. Селектор это метка к которой нужно будет применить свойство. Самым простым селектором является название тега. Для того чтобы показать на примере как это выполняется давайте добавим в код простой текст. Мне очень удобно редактировать файлы через программу Adobe Dreamweaver и в между тегами BODY вставим произвольный текст. Я просто добавлю простой текст с википедии. Вот как у меня это выглядит.

Я прописал для каждого абзаца тег р который будет разделять наш сплошной текст на два абзаца. Теперь давайте в файле стилей зададим цвет для тега р. В файле пишем p ; сохраняем и обновляем наши документы и наши абзацы будут выделены красным цветом.

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

Давайте теперь к каждому абзацу применим разные типы селекторов и увидим на практике их применение. Селекторы нужно прописывать именно в тег абзаца к которому мы хотим применить настройки.

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

А вот результат применения данных настроек.

Групповые селекторы.

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

Для практического примера давайте мы добавим в наш текст ещё несколько тегов, тегов заголовков. Я выделил один заголовок тегом заголовка а другой выделил жирным шрифтом. Давайте теперь применим к ним один общий параметр цвета. Для этого в файл со стилями необходимо прописать следующую строчку: .color1,#color2,h2,strong;

Вот как документ выглядел до применения набора стилей.

А теперь мы применим стили и наш текст станет полностью серебристого цвета.

Селекторы потомков.

Теперь давайте рассмотрим ситуацию когда нам нужно применить свойство не к целому абзацу а к какой-то определенной его части, выделенной тегом. Для этого в абзаце мы выделим словосочетание тегом strong. А в файл напишем строчку p strong; которая дает команду браузеру что нужно найти на странице в абзаце тег strong и выделить его нужным цветом. Вот как это выглядит на странице.

Псевдоселекторы ссылок.

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

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

Для того чтобы задать параметры для ссылки до активации нам нужно прописать к ссылке псевдоселектор link и в строчку нужно прописать прописать нужный параметр. Давайте напишем текст для того чтобы ссылка по умолчанию была зеленого цвета.
a:link;

Данная команда означает что если пользователь не нажимал на ссылку то ссылка должна быть зеленого цвета.

Противоположным по значению является псевдоселектор :visited который задает для ссылки параметры после того как по ней перешли. Код будет выглядеть так: a:visited; и теперь все ссылки по которым пользователь переходил будет красного цвета.

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

И последний селектор который мы рассмотрим будет задавать параметры для ссылки в тот момент когда на неё нажал пользователь и выглядит этот код следующим образом: a:active; и в момент активации ссылки ссылка будет выделятся синим цветом.

Надеюсь что статья про CSS селекторы вам поможет в редактировании собственного сайта а также это будет ещё маленький запас знаний который вам поможет в создании собственного дизайна.

Создать файл CSS

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

• MyLayout.ascx
• MyLayout.css
• MyLayout.doctype.xml

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

1. default. css (~/Portals/_default/default.css) — CSS по умолчанию для веб-сайта.
2. module.css (~/DesktopModules/mymodulename/module.css) — CSS для каждого типа модуля, отображаемого на странице.
3. skin.css (~/Portals/PortalID/Skins/SkinPackageName/skin.css) — главный CSS для темы должен называться skin.css.
4. MyThemeTemplate.css (~/Portals/_default/Skins/SkinPackageName/MyThemeTemplate.css) — CSS для определенного шаблона макета.
5. container.css (~/Portals/PortalID/Containers/ContainerPackageName/container.css) — основной CSS для всех контейнеров в вашей теме.
6. portal.css (~/Portals/PortalID/portal.css) — CSS, который может переопределять элементы в установленных темах. Администраторы веб-сайтов могут использовать это для переопределения любых стилей в теме или контейнерах.

Примечание. Эти таблицы стилей не требуются. Вы также можете хранить все свои стили в одной таблице стилей главной темы (skin.css). Однако, если вы объедините стили контейнера и стили темы в одном файле CSS, контейнер будет правильно отображаться только при использовании с вашей темой.

Ступени

1. Создайте основную таблицу стилей для своей темы (skin.css).
2. (Необязательно) Создайте отдельную таблицу стилей для каждого шаблона макета в вашей теме (MyThemeLayout.css).
3. (Рекомендуется) Создайте основную таблицу стилей для всех контейнеров в вашей теме (container.css).
4. (Необязательно) Создайте отдельную таблицу стилей для каждого типа контейнера в вашей теме (MyThemeLayout.css).

Пример

Шаблон макета

    <дел>