Сайн байна уу, блог сайтын эрхэм уншигчид. Өнөөдөр би вэбсайттай ажиллахдаа HTML хэлний мэдлэг яагаад хэрэгтэй байж болох талаар ярихыг хүсч байна (энэ нь юу болохыг уншина уу), CSS-ийн каскадын загварын хүснэгтүүдтэй ажиллах үндсэн зарчмууд (та сэдвийн талаархи танилцуулга нийтлэлийг олох болно), түүнчлэн PHP дээр програм бүтээх үндсэн зарчим, зарчмуудыг ойлгох, MySQL мэдээллийн сантай ажиллах логикийг ойлгох.

өмчлөхгүйгээр вэбсайт хийх боломжийг танд олгонодээр дурдсан бүх мэргэн ухаан, гэхдээ нэгэн зэрэг, та ажиллаж байхдаа хамгийн боловсронгуй CMS (Joomla, WordPress, Drupal гэх мэт) ашиглан шийдэж чадахгүй асуулт, асуудлуудтай тулгарч магадгүй юм.

Вэбсайт дээр ажиллахдаа хэлний мэдлэг (тэмдэглэгээ, загвар, серверийн програмчлал) яагаад хэрэгтэй байж болох вэ?

Эсвэл та бусад олон тохиргооны дунд CMS-ийн админ самбарт ийм зүйлийг олохгүй (зарим тохиргооны зүйлийг байрлуулахдаа хөдөлгүүрийн зохиогчдын логик нь тодорхойгүй хэвээр байгаа бөгөөд магадгүй зохиогчийн зуршлын хүч энд тодорхой үүрэг гүйцэтгэдэг). эсвэл хөгжүүлэгчид агуулгын удирдлагын системийн админ самбарт ийм зүйлийг огт оруулахгүй. Админ самбараар дамжуулан бүх зүйлд зориулсан тохиргоог хийх боломжгүй байдаг - ихэвчлэн зөвхөн хамгийн шаардлагатай, байнга ашиглагддаг тохиргоонууд энд харагдана.

Энэ нь ихэвчлэн тохиолддог асуудлыг шийдвэрлэхэд хялбарХөдөлгүүрийн админ самбарт өгөгдсөн стандарт хэрэгслээр биш, харин мэдээллийн санд байгаа зүйлийг засах эсвэл FTP-ээр дамжуулан зарим хөдөлгүүрийн файлуудын агуулгыг тохируулах замаар.

Тийм ээ, энэ нь HTML тэмдэглэгээний хэлний наад зах нь үндсийг сурах, каскадын загварын хүснэгтүүд вэб хуудасны харагдах байдалд хэрхэн нөлөөлдөгийг ойлгох, мөн мэдээллийн сангийн бүтцийг ойлгох, түүнд хэрхэн өөрчлөлт оруулах талаар сурахад цаг зарцуулах шаардлагатай болно. Хамгийн хэцүү зүйл бол PHP дээр код бичих үндсэн зарчмуудыг ойлгохын тулд юуг, хаана ямар өвдөлтгүйгээр өөрчлөх, юунд хүрч болохгүйг ойлгох явдал юм.

Мэдээжийн хэрэг, би вэб хуудасны дизайнаас эхэлнэ (үнэндээ би энэ ажлыг аль хэдийн дуусгасан бөгөөд та үр дүнг нь харж болно). Би өмнөх нийтлэлүүдийн аль нэгэнд дурдсанчлан, саяхныг хүртэл бүх нөөц нь HTML форматтай хуудсуудаас бүрддэг байв. Түүнчлэн вэбсайтын агуулга (текст, зураг, хүснэгт) болон дизайныг (өнгө, дэвсгэр, догол мөр) зааж өгсөн болно.

Зөв зохион байгуулалтын орчин үеийн ойлголтод агуулгыг гипертекст тэмдэглэгээний хэлний шошго ашиглан гүйцэтгэх ёстой бөгөөд энэ агуулгын дизайныг гадаад загварын хуудасны файлуудыг ашиглан хийх ёстой. Энэхүү тусгаарлалт нь вэбсайтын хуудсыг шаардлагагүй үйлчилгээний кодоос чөлөөлөх боломжийг олгодог.

Баримт нь хайлтын системүүд маш ойрхон байдаг мэдээллийн бүрэлдэхүүн хэсгийн харьцааг харна уувэб хуудасны код (хөтөч дээр харуулсан текст) болон түүний үйлчилгээний бүрэлдэхүүн хэсэг (шошго, янз бүрийн скрипт гэх мэт). Тиймээс, мэдээллийн бүрэлдэхүүн хэсэг агуулаагүй, зөвхөн хуудасны дизайныг хариуцдаг бүх зүйлийг энэ хуудасны хил хязгаараас хэтрүүлснээр бид хайлтын системийн манай төсөлд хандах хандлагыг сайжруулдаг (ядаж онолын хувьд).

Дээрээс нь тусдаа файлд байрлуулсан CSS дүрмийн жагсаалт нь нөөцийн дизайныг нэгтгэх боломжийг танд олгоно. Шаардлагатай бол та бүх вэб хуудасны кодыг засварлахгүйгээр дизайн дахь ямар нэг зүйлийг үргэлж өөрчилж болно, учир нь Энэ тохиолдолд одоо байгаа зүйлсийг засах эсвэл бүх хуудсанд нийтлэг хэв маягийн хүснэгтэд шинэ загварын шинж чанарыг нэмэхэд хангалттай.

Загварын хуудас бий болсноор олон гипертекст тэмдэглэгээний хэл хаягууд болон тэдгээрийн шинж чанарууд бий болсон хуучирсан гэж үзэж эхэлсэнмөн хэрэглэхийг зөвлөдөггүй. Үүний оронд ижил үйлдлийг гүйцэтгэдэг CSS шинж чанаруудыг ашиглахыг зөвлөж байна. Энэ нь HTML сурах шаардлагагүй болсон гэсэн үг биш, зүгээр л вэбсайт үүсгэх, хадгалахад ашиглах боломжтой хаягууд болон тэдгээрийн шинж чанаруудын тоо багассан гэсэн үг юм. Би өөрөө байнга ашигладаг шошгуудын талаар танд хэлэхийг хичээх болно.

Аль редактор нь кодыг засах эсвэл өөрчлөх нь дээр вэ?

Үүнд төвөгтэй зүйл байхгүй, учир нь энэ нь үндсэндээ програмчлалын хэл биш, харин гипертекст тэмдэглэгээ, орос хэлний синтакстай төстэй зүйл юм. Та өөрийн туршлага дээрээ үндэслэн юу гэж яаралтай зөвлөх вэ? Тэмдэглэлийн дэвтэрт шошго бичиж үзээрэй, гэх мэт Notepad++(минийхийг унш), Dreamviewer шиг программ дээр биш. Яагаад?

Тийм ээ, учир нь энэ тохиолдолд та шошго, шинж чанаруудыг бичихдээ илүү сайн болж, санаж байх болно. Тиймээ, Dreamviewer зэрэг программ дээр байрлуулах нь илүү тохиромжтой, учир нь... та үүнийг шууд хөтөч дээр үзэх боломжтой бөгөөд унадаг жагсаалтаас тодорхой шошго бичих сонголтыг сонгож болно.

Гэхдээ үнэн хэрэгтээ та үндсэндээ хөдөлгүүрийн файлууддаа байгаа кодыг засах хэрэгтэй бөгөөд хэрэв та бүх шошго болон тэдгээрийн шинж чанаруудыг цээжээр бичихээ санаж байвал илүү тохиромжтой байх болно (азаар тийм ч олон биш). Яагаад нэг шошгыг засахын тулд төвөгтэй Dreamview программ дээр файл нээх хэрэгтэй вэ гэвэл эдгээр зорилгоор ердийн тэмдэглэлийн дэвтэр, эсвэл түүний дэвшилтэт аналог нь Notepad plus plus (холбоосыг дээр дурдсан байгаа) байхад хангалттай.

Хэдийгээр энэ бол миний хувийн бодол (IMHO) бөгөөд аль нь илүү тохиромжтой болохыг та өөрөө шийдэх болно. Жишээлбэл, би энэ асуудлыг бүхэлд нь судалж байсан Евгений Попов бол Dreamviewer-ийг баримталдаг хүн юм. Зарчмын хувьд нэг зүйл чухал - та оруулсан бүх өөрчлөлтийг хадгалах чадвартай, хэрэв хүсвэл кодыг засварлагчаар засварлаж болно. бүгдийг байгаагаар нь буцаа(ухрах).

Энэ тохиолдолд та хэчнээн будлиантай байсан ч бүх зүйлийг засах боломжтой болно. Мэдээжийн хэрэг, код бичиж, засварлаж буй хэлний синтаксийг тодруулах нь маш тохиромжтой. Notepad++ бол мэдээж миний сонголт! Би түүний чадавхийн талаар дээрх нийтлэлд ярьсан.

Тэмдэглэгээ болон түүний дизайны талаар нэг нэгээр нь ярих нь тийм ч зөв биш байх тул би тэдгээрийн хосолсон хэрэглээний талаар ярихыг хичээх болно. CSS шинж чанарууд нь нэг буюу хэд хэдэн тусдаа файлд бичигдсэн байдаг гэдгийг ойлгох хэрэгтэй бөгөөд үүнийг та өөрийн хөдөлгүүрт ашигласан сэдвээс амархан олох боломжтой.

Орчин үеийн CMS-ийн вэб хуудасны шошго нь өмнөх шигээ нэг буюу хэд хэдэн файлд бичигдээгүй, харин PHP-ээс үүсгэгддэг (тайлагддаг). Ийм байдлаар аль хэдийн үүсгэгдсэн Html код нь хөтөч рүү нэвтэрч, эргээд үүнийг бидэнд ойлгомжтой интернет хуудасны хэлбэр болгон тайлбарладаг. Залхуу, тийм үү?

Тийм ч учраас дурын CMS дээрх шошго засварлахХэрэв та гипертекст тэмдэглэгээний хэлийг бүрэн эзэмшсэн ч гэсэн тийм ч энгийн ажил биш юм. Эцсийн эцэст, та PHP файлууд дахь хаягуудыг засах хэрэгтэй болно, тиймээс та наад зах нь түүний үндсэн ойлголт, синтаксийг мэдэх хэрэгтэй болно.

Гэхдээ санаа зоволтгүй, дизайныг засахын тулд танд PHP-ийн их мэдлэг хэрэггүй болно. Шошгууд нь гадаргуу дээр байрладаг бөгөөд шаардлагатай бол тэдгээрийг таних, засах нь тийм ч хэцүү биш юм.

Та ямар хэрэгслийг ашиглаж болох вэ?

Асуудал ихэвчлэн өөр газар үүсдэг. Хүссэн шошго фрагмент үүссэн PHP өргөтгөлтэй файлыг хэрхэн олох вэ? Энд нэг асуулт байна. Тийм ээ, мэдээжийн хэрэг, хэрэв та эдгээр хөдөлгүүрүүдтэй ажиллаж байсан туршлагатай бол та үүнийг ойлгох болно гэж бодож байна. Гэхдээ хэрэв та эхлэгч бол хэдэн зуун PHP файлын аль нь юуг хариуцдагийг мэдэхгүй байгаа бол?

Үүнтэй адил гайхалтай хөтөчийн маш сайн залгаас, мөн дээр дурдсан Notepad++ нь танд туслах болно, энэ нь олон хүмүүст мэдэгддэггүй. Энэхүү багц програмууд нь уулыг хөдөлгөж, маш их цаг хэмнэхэд тусална.

Дараагийн нийтлэлүүд дээр би эдгээр програмуудыг ашиглан сайттай холбоотой асуудлуудыг хэрхэн үр дүнтэй шийдвэрлэх талаар дэлгэрэнгүй ярих болно. Тийм ээ, би FTP - FileZilla-ээр дамжуулан нэвтрэх боломжийг олгодог зайлшгүй програмын талаар бараг мартсан (энэ сэдвээр нийтлэл аль хэдийн гарсан). Мэдээжийн хэрэг, бид энэ тухай ярих болно.

За тэгээд зорилгоо тодорхойлоод, үүрэг даалгавар өгчихлөө, хэрэгжүүлэх л үлдлээ. Үүний тулд намайг чөлөө авахыг зөвшөөрнө үү.

Чамд амжилт хүсье! Удахгүй блог сайтын хуудсууд дээр уулзацгаая

Та сонирхож магадгүй

Google Font онлайн үйлчилгээнд вэбсайт болон компьютерт зориулсан оросын үзэсгэлэнтэй фонтууд - хаанаас татаж авах, хэрхэн суулгах Дасан зохицох (хариуцлагатай) дизайн - хөдөлгөөнт төхөөрөмж дээр үзэх сайтыг оновчтой болгох
Gif, Png эсвэл Jpg - вэбд зориулсан растер график форматууд, тэдгээрийн вэбсайт дээр ашиглах давуу болон сул талууд

CSS кодыг HTML баримт бичигт эсвэл ижил өргөтгөлтэй тусдаа файлд байрлуулж болно. Хэрэв CSS нь гадаад файлд байгаа бөгөөд ажиллахгүй бол хамгийн түрүүнд хийх зүйл бол HTML кодын холбоосыг шалгах явдал юм.

Холбоос (href) нь нэг холбоосын шошгон дээр бичигдсэн байх ёстой. HTML5 дээрх холбоосын агуулга дараах байдалтай байх ёстой: href=”style.css” rel=”stylesheet”. Холбоос шошго нь өөрөө хосолсон толгойн товчлууруудын хооронд байрладаг гэдгийг бүү мартаарай.

href утгын дараа баримт бичигт хавсаргах ёстой css файлын нэрийг зааж өгсөн болно (энэ нь загвар байх албагүй). Хэрэв загвартай файл өөр хавтсанд байгаа бол та налуу зураас (/) ашиглан түүнд хүрэх замыг зааж өгөх ёстой.

CSS Синтакс

Хэрэв холбоосын хувьд бүх зүйл хэвийн байгаа ч CSS ажиллахгүй байгаа бол та кодын синтаксийг шалгах хэрэгтэй.

Эхлээд сонгогчийг шалгана уу. Сонгогч нь таны html файлд бичсэн зүйлтэй тохирч байх ёстой. Өөрөөр хэлбэл, хэрэв html дээр class = “container” сонгогдсон бол сонгогчийн оронд “.container” гэж CSS дээр бичнэ. Гарчгийн өмнөх цэгийг анхаарч үзээрэй. Хугацаа нь зөвхөн хичээл эхлэхээс өмнө тавигддаг. Хэрэв та h1 гарчгийн хэв маягийг зааж өгсөн бол цэг тавих шаардлагагүй.

Загварыг зарласан блок өөрөө сонгогчийн нэрийн дараа буржгар хаалтанд бичигдэнэ. Үл хөдлөх хөрөнгийн нэр болон түүний утгын хооронд хоёр цэг тавьж, дараа нь цэг таслал тавина.

Хөтөч

Хэрэв таны CSS кодыг туршиж байгаа хөтөч аль хэдийн хуучирсан бол CSS3 хэлийг зөв харуулах боломжгүй болно. Тиймээс, код ажиллахгүй бол хөтчийнхөө хамгийн сүүлийн хувилбарыг шинэчилнэ үү.

Туршилтын хувьд өөр өөр хөтөч ашиглана уу: Opera, Google Chrome, Firefox. Энэ нь Microsoft-ын гол чиглэл биш учраас Internet Explorer дээр найдахыг зөвлөдөггүй бөгөөд энэ нь CSS3-тай "зөрчил" болгодог.

Код дибаг хийх хөтчүүдийн шинэ хувилбарууд нь хөтөч дээр шууд код засах боломжийг олгодог тусгай модулийг агуулдаг. Үүнийг хийхийн тулд цонхны контекст цэсэн дэх "Эх кодыг харуулах" дээр дарна уу.

Өв залгамжлал

CSS дээр ойлгоход хамгийн хэцүү зүйл бол өв залгамжлал юм. Энэ нь ихэвчлэн ажиллахгүй кодын үндэс болдог.

CSS нь үүрлэсэн хүүхэлдэйтэй ижил зарчмаар ажилладаг. Нэг савыг нөгөөд, гурав дахь савыг нь оруулдаг. Өв залгамжлалын бүх нарийн ширийн зүйлийг сурахын тулд та маш их цаг зарцуулах хэрэгтэй. Та үндсэн зүйлээс эхэлж болно.

Эхлээд css кодын яг хаана алдаа гарч байгааг логикоор тодорхойлохыг хичээ. Та үүнийг амархан ойлгох болно, учир нь ... Алдааны үр дүнд хөтөч дээр харагдах элементүүдийн нэг нь таны үзүүлсэн зургаас унах болно.

Ашиглаагүй хэв маягтай сав эсвэл бусад элементийг олохдоо тухайн элемент юунд "үүрдэж" байгааг сайтар ажиглаарай.

Магадгүй эх элемент нь хүүхэд элементийн өөр шинж чанарыг ажиллахаас сэргийлдэг шинж чанарыг агуулсан байж магадгүй. Та ямар ч CSS лавлах номноос өв залгамжлалын талаар илүү ихийг уншиж болно.

Энэ юу вэ CSS

CSS-ийг баримт бичгийн харагдах байдлыг дүрслэх албан ёсны хэл гэж нэрлэж болно. Бүрэн CSS шиг сонсогдож байна Каскадын загварын хуудас, Орос хүн Cascading Style Sheets, өөрөөр хэлбэл CSS-ийг ойлгодог. Мэдээжийн хэрэг, хэн ч CTS ашигладаггүй, гэхдээ CSS ашигладаг заншилтай. CSS хэлийг 1996 оны 12-р сарын 17-нд нэвтрүүлсэн.

Яагаад бидэнд CSS загварууд тусдаа файлд хэрэгтэй байна вэ?

HTML дээр хэв маяг бичихийн тулд дотор нь хэрэгтэй .. Дүрмээ шошгон дээр бичнэ үү

дотор нь дүрмийг бичсэн болно. Тэр бас өөрийгөө бүртгүүлдэг

- Хэрэв та хэв маягийг шууд зааж өгөхөөр шийдсэн бол дотоод агуулга , дараа нь та параметрийг ашиглах хэрэгтэй style="..."

CSS-ийн зөв дүрмүүд болон CSS-д хэрхэн тайлбар бичих

Энд мэдээжийн хэрэг та асар их онолыг бичиж болно, гэхдээ бидэнд лавлах ном байхгүй. Би бүх зүйлийг энгийн жишээгээр харуулах болно, гол зүйл бол сонгогч, шинж чанар, үнэ цэнэ байдаг гэдгийг санах хэрэгтэй. Сонгогч нь дүрэмд хамаарах зүйл, өмч нь бидний ашиглах дүрмийн төрөл, утга нь үнэ цэнэ юм. (хөрөнгө + үнэ цэнэ = дүрэм)

Бичлэг нь иймэрхүү харагдаж байна сонгогч(пром:утга;),Хэрэв та хэд хэдэн сонгогч хэрэглэх шаардлагатай бол тэдгээрийг ашиглан бичнэ үү таслал, хэрэв хэд хэдэн дүрэм ашигласан бол цэг таслал. Үргэлж эцэст нь цэг таслал.

CSS хэл дээрх аливаа текстийг тайлбарлахын тулд та текстийг ийм хашилтанд оруулах хэрэгтэй /* текст */ тэгээд л болоо :)

Амласан ёсоороо, CSS-ийн харааны жишээ :

p(
font-family: Вердана;
дэвсгэр:цагаан;
өнгө: улаан;
}

Энд байгаа сонгогч нь p, өөрөөр хэлбэл шошготой аливаа догол мөрөнд эдгээр дүрмийг баримтална. Та дээд талд юу ч бичсэн бай, догол мөр нь Вердана фонтоор улаан бичвэртэй цагаан өнгөтэй байна. Ерөнхий дэвсгэр нь шар өнгөтэй, фонт нь өөр байсан ч гэсэн.

• Заавар

Би өөрийн туршлага дээрээ үндэслэн алдаа, зөвлөгөө бичсэн. Хэрэв "муу зөвлөгөө" гэх мэт алдаа гарвал би бүтээлч шүүмжлэлийг сонсохдоо баяртай байх болно. Энэхүү нийтлэл нь HTML болон CSS-ийг сурахад эхлэгчдэд зориулагдсан боловч мэргэжилтнүүд энэ материалыг унших сонирхолтой байх болно.

1. W3C Баталгаажуулагч

Сайтын HTML болон CSS-г validator.w3.org үйлчилгээгээр шалгахыг зөвлөж байна. Энэ үйлчилгээ нь кодыг сканнердаж, алдааг харуулах болно, жишээлбэл:

• шошго хаагдаагүй;
• холбоосууд дахь санал болгож буй тэмдэгтүүд;
• Зөвлөмжгүй шошго ашиглаж байна;
• шаардлагатай шинж чанарыг заагаагүй;
• ба бусад.

2. UTF-8 форматаар зохион байгуулалт

Хуудсыг байрлуулахдаа файлын кодчилол тохируулагдсан эсэхийг шалгах хэрэгтэй UTF-8 (BOM байхгүй). Текст засварлагч бүр кодчилолыг өөр өөрөөр тохируулдаг.

UTF-8 форматтай файл нь стандарт бус тэмдэгтүүдийг (жишээлбэл, янз бүрийн хэлний тэмдэгтүүд, валютын тэмдэгтүүд болон бусад) ашиглах боломжийг олгодог.

Та мөн хөтчүүдэд хуудсыг UTF-8 кодчилолоор нээсэн гэдгийг хэлэх хэрэгтэй. Үүнийг доорх шошго ашиглан хийнэ.

3. Хэд хэдэн элемент ижил ID-тай

HTML кодын id атрибутын утгыг давтаж болохгүй.

4. Спрайтууд

Хэд хэдэн жижиг зургийг нэг файлд нэгтгэхийг зөвлөж байна (энэ файлыг спрайт гэж нэрлэдэг). Энэ нь сайт руу орох хүсэлтийн тоог бууруулж, хуудас ачаалах хурдыг сайжруулах болно.

Өнөө үед спрайтуудын оронд дүрс бүхий фонт ашиглах нь түгээмэл болсон. Тэдгээр. Үсгийн оронд арааны дүрс, инээмсэглэл болон бусад дүрсүүд харагдана. Жишээ нь Twitter Bootstrap-д хэрэглэгддэг глификонууд юм.

Спрайтуудад зориулсан фонтуудын давуу тал нь дүрсний хэмжээ болон жижиг хэмжээг өөрчлөхөд чанарыг хадгалах явдал юм. Гэхдээ сул тал нь дүрсэнд нэгээс олон өнгө ашиглах боломжгүй юм.

5. Маш олон сонгогчтой

Гураваас илүү сонгогч ашиглахыг зөвлөдөггүй, учир нь энэ нь сайтын гүйцэтгэлд нөлөөлдөг.

/* зөвлөдөггүй, том үүрлэх */ .хуудас .зүйл .гарчиг a () /* богиносгож болно */ .хуудас .зүйл а ()
Хөтөчүүд CSS-ийг баруунаас зүүн тийш уншдаг. Тэдгээр. дээрх кодонд эхлээд хуудсан дээрх бүх холбоосууд сонгогдох бөгөөд дараа нь .item элемент дотор байгаа холбоосууд сонгогдох болно.

6. HTML загварууд

HTML нь мэдээлэл (текст, зураг) харуулах зориулалттай. Агуулгын дизайн (хэмжээ, өнгө, фонтыг өөрчлөх) нь CSS-д тохиолддог.

Кодын алдаа

Кодын алдаа

7. Ангийн нэр буруу

Олон зохион бүтээгчид текстийг ногоон болгох шаардлагатай үед .green ангиллыг хавсаргана.

Мессежийн текст

Энэ буруу, учир нь... Загварыг өөрчлөх үед олон өнгө өөрчлөгдөж болно, жишээлбэл, мессежийн текст ногоон биш цэнхэр өнгөөр ​​​​харагдана. Дараа нь та .green ангилалтай бүх хаягуудыг хайж олоод .blue гэж солих хэрэгтэй болно.

Мессежийн текст

Мессежийн текст

8. Бутархай утгууд дахь пикселүүд

Зарим хөтчүүд нь "1.5px" гэх мэт бутархай утгаараа пикселийг зааж өгөх боломжийг олгодог. Гэхдээ энэ нь буруу, учир нь ... Пиксел бол хуваагдашгүй нэгж юм. "1.5px"-ийн оронд "1.5em"-ийг ашиглах нь дээр.

P ( /* буруу */ үсэг хоорондын зай: 1.5px; /* зөв */ үсэг хоорондын зай: .005em; )

9. ID-ийн оронд класс ашиглах

Учир нь id-ийн оронд ангиар сонгохыг зөвлөж байна id-тэй сонгогч нь ангиудынхаас илүү жинтэй тул тэдгээрийг хүчингүй болгоход хэцүү байх болно.

#modal a ( өнгө: цэнхэр; ) /* доорх өнгийг дарж болохгүй, учир нь #modal ангиудаас илүү жинтэй */ .modal-header a (өнгө: #333; ) /* энэ тохиолдолд та #modal */ #modal .modal-header a (өнгө: #333; ) нэмэх шаардлагатай болно.
Үүнийг бас хэрэглэхийг зөвлөдөггүй!чухал, учир нь түүний жин нь id шинж чанарынхаас өндөр бөгөөд үүнийг хүчингүй болгоход хэцүү байх болно.

10. Цэс

Цэсийг жагсаалт хэлбэрээр форматлах ёстой.

Нүүр хуудас мэдээ Компанийн тухай

• гэр
• Мэдээ
• Компанийн тухай

11. Зурганд alt тэмдэг алга

Alt шинж чанарыг шошгонд зааж өгөх ёстой (хоосон байж болно).

12. Шошго

Нэг хуудсанд шошго бүрт зөвхөн нэг гарчиг байх ёстой

. Үндсэндээ энэ шошго нь хуудасны гарчгийг агуулдаг.

13. Транскрипци

Бүх элементүүдийн нэрийг англи хэл дээр орчуулсан байх ёстой. Англи хэл дээр ямар нэг үг хэрхэн бичигддэгийг мэдэхгүй байсан ч орчуулах үнэ төлбөргүй олон үйлчилгээ байдаг. Элементүүдийн нэрсийг транскрипцээр бичихэд мэргэжлийн бус харагдана.

/* буруу */ .tovar () .stranica () .zapros () /* зөв */ .бүтээгдэхүүн () .хуудас () .query ()

14. Clearfix

Товчхондоо clearfix-ийн талаар бичихэд хэцүү ч миний бодлоор олон загвар зохион бүтээгчид алдаа гаргадаг гэдгийг би онцолж хэлье.

class.clearfix-ийг эцэг эхийн таг дээр зааж өгөх ёстой бөгөөд хажууд нь байрлуулах ёсгүй.

15. HTML - програмчлалын хэл

HTML хэлийг шинээр сурч байгаа зарим хүмүүс HTML хэлийг програмчлалын хэл гэж боддог. Үнэн хэрэгтээ HTML бол програмчлалын хэл биш бөгөөд үүнийг Microsoft Word-тэй харьцуулж болно. Жишээлбэл, текстийг тод болгохын тулд Word дээр товчлуур дээр дарж, HTML дээр код бичих хэрэгтэй. Тэдгээр. HTML бол зүгээр л текст, зураг, хүснэгт болон бусад элементүүдийг нэмдэг хэрэгсэл юм.

CSS (Cascading Style Sheets) нь вэб хуудсыг зочдын нүдийг татахад ашигладаг. Нэмж дурдахад CSS загварын хуудас нь вэб хуудасны дизайн хийх үйл явцыг ихээхэн хялбаршуулдаг. CSS нь мөн сайтыг бүхэлд нь засварлахын оронд нэг газар өөрчлөлт хийх боломжийг олгодог. Ингэснээр та сайтын бүх вэб хуудас руу орж засварлах шаардлагагүй болно.

CSS нь танд үнэ цэнэтэй цаг хугацаа, эрч хүчийг хэмнэдэг. Нэрнээс нь харахад каскадын загварын хүснэгтүүд нь "каскад" гэж нэрлэгддэг тэргүүлэх жагсаалтад тулгуурлан вэб хуудасны элементүүдийн тодорхой хэв маягийг тодорхойлдог. Үүнээс гадна, энэ нь таны сайтын вэб хуудасны янз бүрийн элементүүдийг удирдах боломжийг олгодог. Нэг CSS загварын хуудас нь бүхэл бүтэн вэбсайтын фонт, формат, текстийн хэмжээ, байршил, загвар, өнгийг хянах боломжтой. Хэдийгээр Cascading Style Sheets нь таны вэбсайтын танилцуулга, дүр төрхийг өөрчлөх боломжтой боловч тэдгээр нь вэбсайтын дизайнтай ямар ч холбоогүй юм.

CSS нь вэбмастерт олон талаар тусалж чадна. CSS-ийн ачаар таны вэбсайт илүү сэтгэл татам дизайнтай болно. Үүнийг хэлэхэд хайлтын системүүд хүртэл CSS-д суурилсан вэбсайтуудыг хайлтын индекст эрэмбэлэхэд илүүд үздэг.

Сайтын танилцуулгыг контентоос нь салгах.

CSS-ийн тусламжтайгаар та өөрийн сайтын гадаад үзэмжийг маш ихээр хянах боломжтой, учир нь энэ технологи нь өөр өөр загварын хүснэгтүүдийг сайтынхаа тексттэй холбох боломжийг олгодог. Үүний үр дүнд, хэрэв та вэб хуудасны аль нэг элементийн харагдах байдлыг өөрчлөх шаардлагатай бол зөвхөн нэг гадаад CSS загварын хуудасны файлыг засварлахад хангалттай бөгөөд энэ нь бүхэл бүтэн вэбсайтад тусгагдах болно. Энэ арга нь сайтын удирдлагын уян хатан үйл явцыг хангаад зогсохгүй цагийг ихээхэн хэмнэдэг.

Сайтыг ачаалах хурдыг нэмэгдүүлэх.

Cascading Style Sheets нь текст файлууд учраас хөнгөн бөгөөд бага зурвасын өргөнийг ашигладаг бөгөөд энэ нь эргээд таны сайтыг ачаалах хурдыг нэмэгдүүлдэг. Статистикийн мэдээгээр CSS дээр суурилсан гадаад загварын хуудас ашигладаг сайт нь энэ технологигүй ижил төстэй сайтаас ойролцоогоор долоо дахин хурдан ачаалагддаг. Текстийн баримтууд маш хурдан ачаалагддаг тул вэб хуудсууд бараг хэдхэн секундын дотор гарч ирэх бөгөөд энэ нь таны сайтад зочлоход нийт зочдын туршлагад эерэгээр нөлөөлнө.

CSS нь вэб хуудасны аль ч элементийн байрлалыг өөрчлөхөд хялбар болгодог. Жишээлбэл, цэсийг хаана ч байрлуулж болно: зүүн, баруун, дээд, доод. Үүний зэрэгцээ, элементүүдийн ийм байрлалын гол зорилго нь хайлтын системийн роботууд таны вэбсайтын үндсэн агуулгыг эхлээд мөлхөх явдал юм. Үүнд хүрэхийн тулд та HTML кодын үндсэн агуулгын ард цэс гэх мэт бүх туслах элементүүдийг байрлуулах хэрэгтэй.

Орчин үеийн хөтөчтэй CSS-ийн нийцтэй байдал.

Одоогоор олон төрлийн хөтчүүд байгаа тул вэбмастер бүх хөтөч дээр вэбсайтын ажиллагааг шалгахад хэцүү байдаг. Гэсэн хэдий ч, хэрэв та стандарт CSS-д суурилсан бүдүүвчийг дагаж мөрдвөл энэ асуудал амархан шийдэгдэх болно.

Дээрхээс харахад CSS технологи нь орчин үеийн, сэтгэл татам вэбсайтуудыг бий болгох хэрэгслээр хангахаас гадна хэд хэдэн асуудлыг шийдвэрлэхэд тусалдаг. Энэ нь өөрөө CSS-ийн өндөр ач холбогдлыг тодорхойлдог.

Интернет дэх хамгийн эртний үйлчилгээний нэг бол форум юм. Эдгээр харилцааны платформууд нь хамгийн түрүүнд гарч ирсэн бөгөөд түүнээс хойш бараг өөрчлөгдөөгүй хэвээр байна. Гэсэн хэдий ч тэд өндөр настай ч гэсэн үүргээ биелүүлж байна. Энд хүмүүс харилцаж, асуулт асууж, хариулт авдаг.