2016-03-03 125 views
0

我需要基於用戶角色或組標識爲某些元素實現動態CSS樣式。CSS - 從樣式塊擴展樣式表樣式

我的想法是從我的數據庫中獲取所需的動態值(十六進制顏色,背景圖像網址),將它們寫入頁面,然後使用jQuery將這些值的樣式添加到要動態顯示的元素。看似簡單。有沒有人這樣做?

另一種方式是以某種方式覆蓋外部樣式表樣式,並在樣式塊中定義樣式。這會工作嗎?你可以在樣式塊和外部表單之間共享CSS樣式嗎?共享樣式可以級聯嗎?

回答

1

您可以混合內部和外部樣式。內部,外部和內聯樣式都是級聯的,內聯樣式優先於內部樣式,它們本身優先於外部樣式。

如果您想根據用戶權限動態更改樣式,請不要將相關的類和ID添加到body標籤中,例如,

<body id="admin" class="group-1">

然後使用CSS的角色和組出來,例如分離

#admin{ 
    background-color: rgb(255,155,105); 
} 

.group-1{ 
    font-family: sans-serif; 
} 

.group-2{ 
    font-family: Roboto; 
} 

你可以走一步,並使用一個CSS預處理器一樣都不能少款式幾組個人角色,例如

#admin { 
    background-color: rgb(255, 155, 105); 
    .group-1 { 
     font-family: sans-serif; 
    } 
    .group-2 { 
     font-family: Roboto; 
    } 
} 
+0

但是,可以將一部分CSS定義放在標題中的樣式塊中,而另一部分可以放在外部工作表中?樣式塊可以「擴展」和外部的css文件嗎? – nerdperson

+0

是的,它們將級聯,塊(或內部)樣式優先於外部樣式。 – symlink