CSS - 从样式块扩展样式表样式
问题描述:
我需要基于用户角色或组标识为某些元素实现动态CSS样式。CSS - 从样式块扩展样式表样式
我的想法是从我的数据库中获取所需的动态值(十六进制颜色,背景图像网址),将它们写入页面,然后使用jQuery将这些值的样式添加到要动态显示的元素。看似简单。有没有人这样做?
另一种方式是以某种方式覆盖外部样式表样式,并在样式块中定义样式。这会工作吗?你可以在样式块和外部表单之间共享CSS样式吗?共享样式可以级联吗?
答
您可以混合内部和外部样式。内部,外部和内联样式都是级联的,内联样式优先于内部样式,它们本身优先于外部样式。
如果您想根据用户权限动态更改样式,请不要将相关的类和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;
}
}
但是,可以将一部分CSS定义放在标题中的样式块中,而另一部分可以放在外部工作表中?样式块可以“扩展”和外部的css文件吗? – nerdperson
是的,它们将级联,块(或内部)样式优先于外部样式。 – symlink