Коришћењем ЦСС-а за постављање ХТМЛ елемената

• Може 18, 2024

ЦСС правила дају вам могућност да ставите ХТМЛ елементе тачно тамо где их желите. Можете прилагодити начин реаговања на друге елементе који седе око њих или их чак у потпуности сакрити. Ево рашчлањивања својстава ЦСС смештаја.

Приказ: Ово својство дефинише како се елемент приказује. Подешавање приказа на „ноне“ скрива елемент у потпуности, док друге вредности могу променити начин реаговања на друга својства и елементе. На пример, дивс су постављени да се подразумевано приказују као "блок", што значи да делује као правоугаони објект, али можете да користите "дисплаи: инлине" да присилите див да делује као одломак. Или, можете учинити супротно и употребити "дисплаи: блоцк" да приморате параграф да делује као див.

Позиција: Дефинише како елемент реагује на елементе око њега. Елементи подразумевано користе „поситион: статик“, што значи да се приказују редом онако како се појављују у ХТМЛ коду. „Положај: релативно“ значи да се статичка локација елемента израчунава, а затим компензује оним што наведете у „горњим“ и „левим“ својствима. Остали елементи странице дјелују као да се релативни елемент још увијек налазио у статичком положају. Елементи „Положај: апсолутни“ занемарују своју статичку локацију, заснивајући свој положај искључиво на вредностима у горњем, левом, десном и доњем својству. Поред тога, други елементи ће игнорисати тај елемент (тако да ако нисте пажљиви, можете завршити са неким неуредним преклапањем). „Позиција: фиксно“ је слична „позицији: апсолутна“, осим што ће елемент задржати своје место чак и ако ваш посетилац помери страницу.

Видљивост: Одлучује да ли ће се елемент приказати на страници или не. Разлика између "приказа: нема" и "видљивости: скривено" је у томе што се у првом случају остали елементи странице понашају као да невидљиви објект не постоји; у другом, други елементи ће задржати место за скривени елемент. Очигледно је да је подразумевана поставка „видљива“.

Флоат: Подешава да ли елемент каскадно лево или десно од других елемената (или уопште не каскадно, што је подразумевано). Ово својство је изузетно корисно за правилно постављање релативних елемената. Морате поставити ширину за било који плутајући елемент или се он неће исправно приказати. Такође, ако користите флоат за један елемент, вероватно ћете желети да поставите својство и за све елементе око њега.

Јасно: Ово својство функционише у комбинацији са својством "флоат". Одлучује како ће елемент допустити другим елементима да лебде око њега - „јасно: лево“ значи да ниједан други елемент не може плутати с његове леве стране; „цлеар: ригхт“ блокира с десне стране и „цлеар: обоје“ значи да ниједан елемент не може плутати на било коју страну. Подразумевана поставка је „јасно: ниједна“ (што значи да други елементи могу плутати на обе стране).

Видео Упутства: History of nuclear power (Може 2024).