CSS: свържете се с уеб документа

07.03.2020

Изучаването на CSS е следващият след HTML и необходима стъпка в овладяването на уеб програмирането. Тази технология значително разширява възможностите за маркиране на страници в Интернет, а също така намалява времето за работа на дизайнера на проекта и намалява количеството на кода. Темата е лесна за разбиране, а включването на CSS шрифтове не създава трудности за учениците.

Каскадни таблици със стилове

CSS (Английски каскадни стилови таблици - Cascading Style Sheets) е език за маркиране на уеб страници, на който Haakon Wium Li започва работа през 1994 година.

css връзка, hakon vium lee

През 1996 г. работата му е призната от консорциума W3C на World Wide Web, като е издадена първата версия на CSS1. Оттогава езикът е претърпял промени и промени в посока на подобрение и подобряване.

Използването на CSS, свързването му с HTML кода допълва и разширява възможностите на последния:

  • да променяте текста на страницата веднага щом въображението на дизайнера бъде изготвено. В същото време функционалността е по-широка от тази сред мастодонти между текстови редактори като MS Word или LibreOffice;
  • ви позволява да прилагате форматиране към големи документи или значителен брой от тях в рамките на един и същ сайт, което кара уебмайсторите да правят по-малко усилия и време;
  • тъй като количеството на кода е намалено, скоростта на зареждане на страницата се увеличава, което е много важно за потребителите с бавна или ограничена връзка;
  • разполага с инструменти за крос-браузър оформление - много важен фактор при увеличаване на видовете устройства с възможност за достъп до интернет (джаджи).

Използваният в момента CSS4, работещ в тандем с HTML5, отговаря на всички нужди на модерното изграждане на сайтове. Много ИТ специалисти смятат, че CSS4 е достигнал върха на своето развитие и следните версии няма да бъдат пуснати - те не са необходими.

синтаксис

CSS връзката към HTML маркирането се извършва чрез чифт маркери , вътре в която е поставена инструкцията за поведение на елемент на уеб страница, която има следния синтаксис:

p {text-indent: 5%;} 

Чрез прилагането на този стил към етикета

, в целия документ, параграфите ще бъдат с отстъп 5% от началото на реда.

Конструкцията се нарича декларация за стил и трябва да бъде поставена в заглавната част на уеб документа, съдържаща техническа информация между етикетите. , Структурата на тази декларация за този стил

е това:

  1. p - идентификатор.
  2. text-indent е свойство стил.
  3. 5% - стойност на имота.

Това са специални термини, използвани в учебниците, които са често срещани сред програмистите. Те трябва да помнят!

свързване на външни css файлове

Работа с шрифт

Информацията под формата на текст е това, което 99% от посетителите на бъдещия сайт ще дойдат в търсене на необходимите данни. Следователно, четливостта на шрифта, неговата естетика и лекотата на визуалното възприятие играят важна роля за присъствието на ресурса. CSS връзката тук ще бъде действието, което е в състояние да отговори на изброените изисквания.

За технология за манипулиране на шрифтове има богат набор от инструменти. Най-ясната под формата на таблица е да се осигури друг начин за свързване на CSS шрифтове за етикет.

който подравнява текста:

IDENTIFIER СОБСТВЕНОСТ ВЪЗМОЖНА СТОЙНОСТ РЕЗУЛТАТ
р подравняване оставен текстът е натиснат наляво (по подразбиране)
център текстът е центриран на страницата
прав текстът е натиснат от дясната страна
оправдае текст запълва линии от двете страни (както в книги)

Пример за това как браузърът ще показва всяка декларация за стил:

свържете css шрифтове

За работа с текст се използват редица стилове. Пълен списък от тях, тяхната цел, техните свойства и стойности могат да бъдат намерени в справочниците на CSS.

Външни css файлове

CSS връзката може да се осъществява чрез външни файлове. В този случай, освен основния HTML документ, документ със стилове се създава отделно и се намира в същата директория като самия HTML документ. Техният брой може да бъде всеки. Алгоритъмът за свързване на външни CSS файлове се състои само от две стъпки:

  1. В текстов редактор, създайте документ със стилове, укажете разширение за него .css. С този маркер не е посочено.
  2. В HTML документа в заглавието на документа (между маркерите ) трябва да се обърнете към този файл, като използвате следната конструкция:
      

Вместо style.css, трябва да посочите адреса на файла. В този случай адресацията може да бъде както абсолютна, така и относителна. Предимствата са очевидни:

  • външни файлове могат да бъдат приложени към произволен брой уеб страници в сайта;
  • ако укажете абсолютното адресиране, след това на няколко сайта. Очевидно, с това, маркирането се пише веднъж и няма нужда да се предписва стил за всяка страница;
  • когато програмистът използва този метод, крайният потребител няма да може да вижда CSS кода. По този начин можете да защитите творчеството си от плагиатство.

Освен това, когато работи с кода за маркиране, дизайнерът на оформлението прави грешки. Те са по-лесни за намиране и поправяне в отделен файл с малък размер, отколкото в обикновено тромавия HTML код.

Използване на JavaScript технология

Когато форматирате текст на уеб страница, често е необходимо да зададете стил за конкретен фрагмент, който е различен от околния. Ако този стил се прилага многократно на уебсайта или в голям уеб документ, тогава е удобно да се осъществи връзката на CSS чрез JavaScript през конструкцията:

Отново, вместо style.css се записва относителният или абсолютен адрес на външния файл с разширение .css.

css връзка чрез javascript

Този метод ще бъде проучен по-подробно при изучаването на програмирането в JavaScript. Споменаването му тук е принудително бързане напред, но необходимо за работа с текстове на това ниво.