Каскадты стильдер кестесі (CSS) - бұл дизайнерлерге белгілі бір элементтерді топтарға тағайындау арқылы бірден бірнеше мүмкіндіктерді басқаруға мүмкіндік беретін веб -сайттарды кодтауға арналған жүйе. Мысалы, веб -сайттың фонына арналған кодты қолдана отырып, дизайнерлер CSS файлына бір өзгеріспен веб -сайттың барлық беттеріндегі өң түсін немесе суретті өзгерте алады. Міне, қарапайым веб -сайт үшін CSS құру әдісі.
Қадамдар
4 бөлімнің 1 бөлігі: Inline CSS жазу
Қадам 1. HTML тегтері туралы негізгі түсінігіңіз бар екеніне көз жеткізіңіз
Сіз тегтердің қалай жұмыс істейтінін білуіңіз керек
src
және
href
атрибуттар.
Қадам 2. CSS -тің кейбір негізгі қасиеттерін біліңіз
Сіз көптеген мүліктер бар екенін білесіз. Алайда, олардың бәрін үйренудің қажеті жоқ.
-
Кейбір жақсы CSS қасиеттерін білу керек
түс
және
қаріптер тобы
- .
3 -қадам. Әр сәйкес қасиеттің мәндері туралы біліңіз
Барлық қасиеттерге мән қажет. Үшін
түс
мүлікті, мысалы, қоюға болады
қызыл
құндылық.
4 -қадам
стиль
HTML атрибуты.
Сияқты элементтің ішінде қолданылады
href
немесе
src
. Оны пайдалану үшін теңдік белгісінен кейін тырнақшаға CSS атрибутын, қос нүктені, содан кейін қасиеттің мәнін қойыңыз. Бұл CSS ережесі ретінде белгілі.
Қадам 5. Кірістірілген CSS әдетте кәсіби веб -әзірлеушілер веб -сайттар үшін қолданылмайтынын түсініңіз
Кірістірілген CSS HTML құжатына қажетсіз кедергілерді қоса алады. Дегенмен, бұл CSS қалай жұмыс істейтінімен танысудың тамаша әдісі.
4 -тің 2 -бөлігі: Негізгі CSS жазу
Қадам 1. Қолданғыңыз келетін бағдарламаны іске қосыңыз
Бұл сізге HTML және CSS файлдарын жасауға мүмкіндік береді.
Егер сізде арнайы бағдарлама орнатылмаса, Блокнотты немесе басқа мәтіндік редакторды қолдануға болады. Файлды мәтіндік файл ретінде де, CSS файлы ретінде де сақтаңыз
Қадам 2. Сіздің веб -сайтыңызға арналған HTML файлын ашыңыз
Егер сізде HTML редакторы болса, оны ашу керек.
HTML редакторлары HTML мен CSS -ті бір уақытта өңдеуге мүмкіндік береді
3 -қадам. HTML басының ішінде тег жасаңыз
Бұл сізге бөлек файлды қажет етпестен CSS жазуға мүмкіндік береді.
Қадам 4. Сәндеуді қосқыңыз келетін элементті таңдап, элементтің атын теріңіз, содан кейін бұйра жақшалар жиынтығын ({}) енгізіңіз
Кодыңызды түсінікті ету үшін әрқашан екінші бұйра жақшаны өз жолына қойыңыз.
Қадам 5. Жақша арасына CSS ережелерін қолданыңыз
стиль
атрибут.
Әр жол нүктелі үтірмен (;) аяқталуы керек. Кодыңызды түсінікті ету үшін әр ереже өз жолынан басталуы керек және әр жол шегініспен жазылуы керек.
Бұл сәндеу беттегі таңдалған түрдің барлық элементтеріне әсер ететінін ескеру өте маңызды. Нақты стильдеу келесі бөлімде қарастырылады
4 -ші бөлімнің 3 -ші бөлігі: Қосымша CSS
Қадам 1. HTML файлын емес, CSS файлын жасаңыз және оны
.css
кеңейту
HTML файлын ашыңыз.
Қадам 2. HTML басына тег жасаңыз
Бұл HTML құжатына бөлек CSS файлын байланыстыруға мүмкіндік береді. Сіздің сілтеме тегіңізге үш атрибут қажет:
рел
түрі
және
href
-
рел
«қатынас» дегенді білдіреді және браузерге HTML құжатына қандай байланыс бар екенін айтады. Мұнда оның мәні болуы керек
«стиль кестесі»
- .
-
түрі
ақпарат құралдарының қай түрімен байланысқанын айтады. Мұнда оның мәні болуы керек
«мәтін/CSS»
-
href
- мұнда ол элементте қалай қолданылатынына ұқсас қолданылады, бірақ мұнда ол CSS файлына сілтеме жасауы керек. Егер CSS файлы HTML файлымен бір қалтада болса, тырнақшаға тек файлдың атын жазу керек.
Қадам 3. Бірдей сәндеуді қосқыңыз келетін әр түрлі элементтерді таңдаңыз
Қосу
сынып
осы элементтерге атрибут қойыңыз және оларды өзіңіз таңдаған сынып атауына тең етіп орнатыңыз. Бұл сіздің элементтеріңізге бірдей сән береді.
4 -қадам. Класс қандай сәндеу алатынын тағайындаңыз
Сынып атауын CSS файлына алдында нүкте (.) Қойыңыз (яғни.
.сынып
).
Қадам 5. Арнайы сәндеуді қосқыңыз келетін бір элементті таңдаңыз және
идентификатор
атрибут.
Идентификаторлар CSS -те нүкте емес, фунт белгісі (#) арқылы жасалады.
Идентификаторлар сыныптардан гөрі нақты, сондықтан идентификаторда сыныптан басқа мәні бар төлсипаты болса, кез келген сыныптың сәндеуін ауыстырады
4/4 бөлігі: Көбірек білу
Қадам 1. w3 мектептеріне барыңыз
Бұл веб -сайтты дамыту дағдыларын үйретуге бағытталған ресми сайт. W3 -те HTML мен CSS -ке, сондай -ақ басқа веб -тілдерге арналған көптеген сілтемелер бар.
2 -қадам. HTML мен CSS -ті үйренуге және оқытуға арнайы бағытталған басқа сайттарды табыңыз
CSS tricks.com сияқты сайттар арнайы CSS пен веб -дизайн дағдыларын үйретуге бағытталған. Беделді дереккөздерді табу сіздің оқу сапарыңызға көмектеседі.
Қадам 3. Веб -дизайнерлермен және әзірлеушілермен байланысыңыз
Олардың тәжірибесі мен ноу-хау сізге құнды білім мен дағдыларды үйрете алады.
Қадам 4. Сіз кездестірген веб -сайттардың бастапқы кодын қараңыз
Жақсы дамыған веб-сайттардың CSS-ті қарау сізге веб-сайттардың бөліктерін жобалау жолдарын көрсете алады. Оны тәжірибе ретінде көшіру және кодпен жұмыс істеу сізге CSS -тің әр түрлі атрибуттарын қолдануды үйренуге көмектеседі.
