Cascading Style Sheet (CSS) - бул веб -сайттарды коддоо системасы, ал дизайнерлерге топторго айрым элементтерди ыйгаруу менен бир эле учурда бир нече функцияларды башкарууга мүмкүндүк берет. Мисалы, веб -сайттын фону үчүн кодду колдонуп, дизайнерлер CSS файлына бир өзгөртүү менен веб -сайттын бардык баракчаларындагы фондун түсүн же сүрөтүн өзгөртө алышат. Бул жерде негизги вебсайт үчүн CSSти кантип түзүү керек.
Кадамдар
4 ичинен 1 -бөлүк: Inline CSS жазуу
Кадам 1. HTML тегдери жөнүндө негизги түшүнүгүңүз бар экенине ишениңиз
Сиз тегдер кантип иштээрин жана кандай экенин билишиңиз керек
src
жана
href
атрибуттар.
Кадам 2. Негизги CSS касиеттерин үйрөнүңүз
Сиз абдан көп касиеттери бар экенин таба аласыз. Бирок, алардын баарын үйрөнүүнүн кажети жок.
-
Кээ бир жакшы CSS касиеттерин билүү керек
түс
жана
шрифт-үй-бүлө
- .
3 -кадам. Ар бир тиешелүү мүлк үчүн баалуулуктар жөнүндө билип алыңыз
Бардык мүлк баалуулукка муктаж. Үчүн
түс
мисалы, менчикти койсоңуз болот
Кызыл
баалуулук.
4 -кадам
стиль
HTML атрибуту.
Сыяктуу элементтин ичинде колдонулат
href
же
src
. Аны колдонуу үчүн, барабар белгиден кийин тырмакчага CSS атрибутун, эки чекитти, андан кийин мүлктүн наркын коюңуз. Бул CSS эрежеси катары белгилүү.
Кадам 5. Inline CSS адатта профессионалдуу веб -иштеп чыгуучулар тарабынан вебсайттар үчүн колдонулбай турганын түшүнүңүз
Inline CSS HTML документине керексиз башаламандыкты кошо алат. Бирок, бул CSS кантип иштээри менен таанышуунун эң сонун жолу.
4 ичинен 2 -бөлүк: Негизги CSS жазуу
Кадам 1. Колдонууну каалаган программаны ишке киргизиңиз
Бул HTML жана CSS файлдарын түзүүгө мүмкүндүк бериши керек.
Эгерде сизде атайын программа орнотулбаса, анда Notepad же башка текст редакторун колдонсоңуз болот. Жөн эле файлыңызды CSS файлы жана текст катары сактаңыз
Кадам 2. Вебсайтыңыз үчүн HTML файлын ачыңыз
Сиз муну HTML редактору менен ачышыңыз керек, эгер сизде орнотулган болсо.
HTML редакторлору HTML жана CSSти бир убакта түзөтүүгө мүмкүндүк берет
Кадам 3. HTML башыңыздын ичинде тег түзүңүз
Бул CSSти өзүнчө файлга муктаж болбостон жазууга мүмкүнчүлүк берет.
Кадам 4. Стиль кошкуңуз келген элементтин бирин тандап, элементтин атын жазыңыз, андан кийин тармал кашаа ({})
Кодуңузду түшүнүктүү кылуу үчүн, ар дайым экинчи тармал кашааны өз катарына коюңуз.
Кадам 5. Кашаанын ортосунда CSS эрежелериңизди колдонуп жүргөндөй териңиз
стиль
атрибут.
Ар бир сап чекиттүү чекит (;) менен бүтүшү керек. Кодуңузду түшүнүктүү кылуу үчүн, ар бир эреже өзүнөн башталышы керек жана ар бир сап чегиниши керек.
Бул стилдөө беттеги тандалган типтеги бардык элементтерге таасир этерин белгилөө абдан маанилүү. Дагы конкреттүү стилдөө кийинки бөлүмдө каралат
4 ичинен 3 -бөлүк: More Advanced CSS
Кадам 1. HTML файлын эмес, CSS файлын түзүңүз жана
.css
узартуу.
HTML файлыңызды ачыңыз.
Кадам 2. HTML башыңызга тег түзүңүз
Бул HTML документиңизге өзүнчө CSS файлын байланыштырууга мүмкүндүк берет. Сиздин шилтеме тегиңизге үч атрибут керек:
rel
түрү
жана
href
-
rel
"мамиле" дегенди билдирет жана браузерге HTML документи менен кандай байланыш бар экенин айтат. Бул жерде анын мааниси болушу керек
"стилдер жадыбалы"
- .
-
түрү
маалымат каражаттарынын кайсы түрүнө байланыштырылганын айтат. Бул жерде анын мааниси болушу керек
"текст/css"
-
href
- Бул жерде ал элементте кандай колдонулса, ошондой колдонулат, бирок бул жерде ал CSS файлына шилтеме кылышы керек. Эгерде CSS файлы HTML файлы менен бир папкада жайгашкан болсо, анда тырмакчанын ичинде файлдын атын гана жазуу керек.
Кадам 3. Ошол эле стилди кошкуңуз келген түрдүү типтеги элементтерди тандаңыз
Кошуу
класс
бул элементтерге сыпаттоо жана аларды сиз тандаган класс атына барабар кылуу. Бул сиздин элементтериңизге бирдей стиль берет.
4 -кадам. Класс кандай стилге ээ болорун дайындаңыз
Класстын атын CSS файлыңыздын алдында чекит (.) Менен териңиз (б.а.
.класс
).
Кадам 5. Атайын стилдөө жана кошуу үчүн каалаган элементтерди тандаңыз
id
атрибут.
Идентификаторлор CSSте чекит эмес, фунт символу (#) аркылуу түзүлөт.
Идентификаторлор класстарга караганда конкреттүү, андыктан идентификатор класстын маанисинен айырмаланган атрибутка ээ болсо, ар кандай класс стилин жокко чыгарат
4 ичинен 4 -бөлүк: Көбүрөөк билүү
Кадам 1. w3 мектептерине барыңыз
Бул веб -иштеп чыгуу көндүмдөрүн үйрөтүүгө багытталган расмий сайт. W3 HTML жана CSS, ошондой эле башка веб тилдер үчүн жазылган көптөгөн шилтемелерге ээ.
Кадам 2. Атайын HTML жана CSSти үйрөнүүгө жана үйрөтүүгө багытталган башка сайттарды табыңыз
CSS tricks.com сыяктуу сайттар атайын CSSти жана веб -дизайн көндүмдөрүн үйрөтүүгө багытталган. Кадыр -барктуу булактарды табуу сизге окуу сапарыңызда жардам берет.
Кадам 3. Веб дизайнерлер жана иштеп чыгуучулар менен байланышыңыз
Алардын тажрыйбасы жана ноу-хау сизге баалуу билимдерди жана көндүмдөрдү үйрөтө алат.
Кадам 4. Сиз туш келген веб -сайттардын баштапкы кодун караңыз
Жакшы өнүккөн веб-сайттардын CSSин көрүү сизге веб-сайттардын бөлүктөрүн долбоорлоо жолдорун көрсөтөт. Аны практика катары көчүрүү жана код менен алпурушуу ар кандай CSS атрибуттарын колдонууну үйрөнүүгө жардам берет.
