CSS: Кесте жобалау. тіркеу мысалдар

CSS бар үстелдер жасау - қызықты және жауапты Сабақтың. Бұл бизнеске тәсіл барлық ықтимал стильдер білетін, сауатты қажет. Сонымен қатар, бұл олардың шығармашылық келушілерді өшіру қорқытып емес мақсатында сұлулық сезімін ие қажет.

кестелер дерлік бәрін өзгерте алады. Әдемі дизайн CSS кестелер дизайн шекараларын пайдалану, кесте өңін ұялы фонды, олардың және одан арасындағы алшақтықты қамтиды. ең негізгі қарастырайық.

Кесте шекара

CSS кесте стилі дизайн әрқашан шекарасы (кадр) бар ойын қамтиды. Барлық әдепкі кестелер контурлары жақтау емес. Яғни, ол 0 пиксель тең. Бірақ бұл меншік шекара арқылы түзетілуі мүмкін.

Сіз бүкіл кесте үшін сыртқы жақтаудың көрсетуге болады:

Кесте {шекаралық: 3px қатты қара; }

Осы мәнерін пайдаланады сайтта барлық кестелер осы жолда арқасында қара жақтау болып табылады. шекарасында ғана емес, үстелге ішіндегі шекара екенін ескеріңіз. әйтпесе көрсетілген жасушалық желілерін және кадрларды.

ші, TD {шекаралық: 3px қатты қара;}

қалыңдығы және түсі, сіз кез келген көрсетуге болады. Ұяшықтарды дәнекерлеу кезінде шекаралар екі есеге емес екенін есте сақтаңыз.

сөз қатты үздіксіз тіркеуді білдіреді. Сіз басқа мәндерді көрсетуге болады.

ол неғұрлым тартымды көрінеді және сайттың Негізгі мазмұнға назарын ескермесек емес, сондай-ақ, ол, ең жиі қолданылатын қатты жақтау болып табылады.

шекара меншік бортында, сондай-ақ көрсетілген болады. шекара ғана жоғарғы, төменгі, сол немесе оң жағынан үшін орнатуға болады. кейбір жағдайларда ол бірден бүкіл кесте үшін қоршалады бар жүзеге асырылуын нұсқасын емес, өйткені.

Кесте {шекара-топ: 1px қатты қызыл; }

Сондықтан Сіз тек кестенің жоғарғы жақтауын орната аласыз. оң, сол жақ немесе төменгі: Сол сияқты орнына ғана жоғарғы жазу кез келген басқа тұлғаларға.

Кесте тақырып

Кесте тақырып <айдарындағы жазу> тег арқылы көрсетіледі болады. Бұл тег баптау үшін қасиеттерін көп тіркеуге CSS болуы мүмкін. бұл элементтер қалаған маневр мүмкін, себебі CSS кесте дизайн жақсы.

Бұл атауы (мысалы, «1-кестеде» сияқты) кітаптарында стандарт ретінде сол жолмен көрсетіледі.

Сіз атауы және мүліктік айдарындағы жазу-жағында (жоғарғы немесе төменгі) орнын көрсетуге болады. солға немесе оңға туралау мүліктік мәтін-туралау арқылы анықталады.

өң үстелдер

кестенің Фонды кез келген түсі немесе үлгісі бола алады. Түс мүліктік өң-түсін орнатады. сөзінде пайдалану толық сәйкес қасиеттерін атаулары. Ол бірнеше рет сақтау жеңілдетеді.

түс атауы ретінде көрсетілген, және әр түрлі кодтар болады. Сонымен қатар, сіз мынаны көрсетуге болады:

• Мөлдір - Мөлдір.
• Мұра - түсті ата-ана элементі сияқты бірдей.
• Бастапқы - әдепкі.

ашықтық бар опция CSS файлындағы мәтінінде барлық кестелер бір түсте жасалған жағдайларда пайдалануға болады, бірақ бұл жағдайда қажеті жоқ.

Сонымен қатар, фондық сурет болуы мүмкін. стилі белгіленген фондық-сурет меншікке, бұл істеу үшін. жолы осы сияқты:

URL ( 'URL')

файлының жолы салыстырмалы немесе абсолюттік болуы мүмкін.

Күрделірек толтыру Градиент жасалуы мүмкін:

• сызықтық-градиент ();
• радиалды-градиент ();
• ) (Қайталанатын-сызықтық-градиент () және қайталанатын-радиалды-градиент - градиент қайталанады.

фон ұялы

жалпы, өң қатар, сіз бағандар немесе жолдар бойынша жолақ фон көрсете аласыз. желілерін көрнекі бөлу оңай ақпаратты оқып, өйткені мүлікті тіркеу үшін, өте жиі қолданылады.

кезектесіп қатар, және сіз нақты баған немесе жол санын көрсетуге болады. Осы сияқты, мысалы:

• TR: ші-бала (тіпті) {...} - чересстрочном көрсетіңіз;
• TR: ші-бала (1) {...} - нақты қатарынан қасиеттерін көрсету;
• TD: ші-бала (тіпті) {...} - бағандарды айнымалы көрсеткіш;
• TD: ші-бала (1) {...} - нақты бағанның қасиетінің көрсетілуі.

ретпен және сандар Сонымен қатар көрсетілуі мүмкін - бірінші (TD: бірінші-бала) немесе соңғы (TD: соңғы-бала).

жасушаларының арасындағы алшақтық

CSS жылы, үстел дизайн сіз ұяшықтары арасындағы бос жоюға мүмкіндік береді. Әдепкіде олар. Сіз шекаралары арасындағы қашықтық орнату жоқ кестеде жақтауын орнатылған Мысалы, егер, ол жерде бұл нәтиже болады.

ол өте жақсы емес көрінеді және ол оқып ыңғайлы емес, келісесіз. Пайдаланушылар өйткені осы көзінде кемитін болады. Осы олқылықтарды алыңыз үстел стильде ғана осындай жолды жазу арқылы болуы мүмкін:

шекара-коллапс: коллапс

Бірақ ол сондай-ақ қашықтықтан, керісінше, артып керек деп жүреді. Сонымен қатар, олқылықтарды мөлшері бағаналардың арасындағы және сызықтар арасындағы ретінде көрсетілуі мүмкін. мән (орнына тасалау) екенін көрсету үшін:

шекара-коллапс: жеке

Бірақ мұндай іс-әрекет, ол жасушалар бөліп қажет екенін көрсетеді. ол олардың үлесі болды, қосымша мүлікті көрсетілген:

шекара аралығы: 20px.

Сіз жолдар мен бағандар арасындағы түрлі қашықтықты көрсету керек болса, онда ол екі нәрсе көрсетеді:

шекара аралығы: 10px20px.

браузерлерде айырмашылық

CSS дизайн кестелер-шолғышта байланысты басқаша көрінуі мүмкін екенін есте сақтаңыз. Әсіресе нашар CSS инновациялар қолдау көрсетілмейді деген ескі нұсқаларында бар жағдай.

Жоғарыда сандық мәндерге жақтау қалыңдығы үлгісі болып табылады.

Бұл, мысалы, тұрақтылар үшін жақтауларын қалыңдығы.

шекара стильдер, сондай-ақ айтарлықтай ерекшеленеді.

Сондықтан, дамыту әрқашан түрлі браузерлерде нәтижесін көріп.

CSS дизайн үстелдер браузердің түрін тексеру ұсынылады. Атап айтқанда, үлкен проблема Internet Explorer ескі нұсқаларымен пайдаланушыларға болуы үшін пайдаланылады.

Өте озық әзірлеушілер, мүлдем басқа CSS файлдарын қосу үшін шолғыш байланысты болады. Ал біреу әрбір чек немесе кейбір ерекше стиль (класс) құрайды.

Ең проблемалар көлеңкеден туындайтын.

CSS: Кесте пішімі мысалдары

Тіркеу өте алуан түрлі болуы мүмкін. Ол барлық бүкіл сайт және оның дизайны байланысты. Барлық түстер аралас және Пестрое тиіс. Сондай-ақ, ол үлкен рөл мен дәмі Developer етеді. сұлулық Sense барлық әр түрлі болып табылады.

Біз түрлі кестелер кейбір мысалдар береді. Жоғарыда көрсеткіш өң түсі мен шекарасы бар көлбеу және ойын қолдануын көрсетеді.

Көптеген көз пайдаланушыларға қысқартпайтын болады әдемі ұқыпты дизайн қызықты мысал болады. Осы нұсқа іс жүзінде кез келген жағдайға тиісті болып табылады.

жиектері жонуға жасалуы мүмкін. Ол өте жақсы көрінеді.

қорытынды

Өздеріңіз көріп отырғандай, CSS кестелердің пайда көптеген құралдар бар. Әрбір параметр сондай-ақ құны опциялардың үлкен сома болып табылады. Сіз бірден оны барлық пайдалансаңыз, жауһарларын жасауға болады. Сіз жасай Әсіресе, егер адаптивті дизайн барлық браузерлер үшін.

дизайн бастысы - әсерлері бар переборщить емес. Барлығы қалыпты жасалуы тиіс. Алғашында, орналасу дереу барлық өз білімдерін тәжірибе және пайдалануға ұнайды. Кестенің нәтижесінде толығу қасиеттері болып табылады. осы қателерді болдырмау үшін көріңіз.

Сонымен қатар, кейбір параметрлерін бірімен кедергі келтіруі мүмкін. Мысалы, көрсетуге қажеті жоқ өң түсін көрсетілген түсін қабаттасатын болады жиынтығы фондық сурет, әлі де болса, ал кестенің.