css跟ui什么关系

html-css07

css跟ui什么关系,第1张

其实没什么关系，css是web中的一种控制内容的表现形式，就是控制的html标签的位置，大小，颜色等，ui就是用户界面，就是画图，在web中ui的图画好后，经过切割，然后写css，就可以制作一个html的页面了，有的公司这个工作是一个人做的，叫美工，有的公司就分开，美工负责css，UI只负责画图

解决方法有很多，如果可以对html改动的话，就给你需要细化的页面元素加多一个class或者ID就行了，当然这种方法应该不是你想要的。那么接下来是不改变HTML的情况下，直接用css的方法来实现你想要的效果——

方法一 细化选择符

假如全局是这样来定义一个元素的样式的：.abc {background:#000}，同时这个class为abc的元素是隶属于某个元素的，比如下面这样的html代码结构

<div class="container">

<div class="abc"></div>

</div>

那么在细化css里面，只需要在.abc前面加多一个父元素的选择符就行了：

.container .abc {background:#fff}

这样.container .abc的优先级就大于了.abc，自然细化css里面的background设置也就不会被全局CSS覆盖了~~

方法二 提升样式的优先级

这种方法个人不太推荐，相对而言会简单粗暴一些。同样是上面的例子，在细化CSS里面，只要在样式后面加一个!important，例如这样：

.abc {background:#fff !improtant}

这个样式的优先级就会默认提升到顶级，全局样式就无法影响到它了。

方法三 改变两个样式的加载顺序

这种方法比较简单，就是只要把细化css加载在全局css之后就行了，这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话，就要稍微调整一下代码才行。

精致的 CSS UI 框架：

1、Bootstrap – 最流行的Web前端UI框架

2、jQuery UI - 基于jQuery的开源Javascript框架

3、jQuery UI Bootstrap

4、BootMetro - Metro风格的CSS框架

5、Flat UI - 扁平风格 UI 工具包

6、网易CSS框架 NEC

7、Alloy UI – 功能强大的CSS UI框架

8、Cardinal – 移动端的CSS UI框架

9、快速开发CSS的框架 CSScaffold

10、后台UI开发框架 MuseUI