如何编辑css某种样式,CSS 样式修改 积累

背景色渐变

.gradient {

background:#BCE8F1;

background:-moz-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);

background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #BCE8F1), color-stop(100%, #3684F9));

background:-webkit-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);

background:-o-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);

background:-ms-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);

background:linear-gradient(to bottom, #BCE8F1 0%, #3684F9 100%);

filter:progid: DXImageTransform.Microsoft.gradient( startColorstr='#BCE8F1', endColorstr='#3684F9', GradientType=0);

}

:root .gradient {

filter:none;

}

2.设置按钮button 边框颜色

button{

border-style:solid;

border-width:1px;

border-color:#388BFF;

/*border:1px;*//*不要设置border*/

}

3.设置背景透明度

style="background-color:rgba(0, 0, 0, 0.6);

background-color:rgba(212,0,0,0.2);

RGB Red Green Bule 3色!及212, 0, 0 三色的值混合.最后一个参数.0.2 则是指的透明度!1为100% 不透明!

4.若干个按钮(元素)填充某个div

.btsDiv{

display:table;

width:100%;

table-layout:fixed;

//其他

}

.bts{

//其他

display:table-cell;

}

5.圆形轮廓

.img {

border-radius:60px;

width:80px;

height:80px;

}

6.按钮边角轮廓的设置

.btn{

border-radius:2px;

border-top-left-radius:2px;

border-top-right-radius:2px;

border-bottom-right-radius:2px;

border-bottom-left-radius:2px;

}

li元素点击时高亮背景色修改

.mui-table-view-cell.mui-active {

background-color: #FFFFFF;

}

7.css的特殊性

在为同一个元素设置多个属性时，浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

权值规则如下：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 。

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

如以下代码：

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

8.css的层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

9.重要性

有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

注意：!important要写在分号的前面

10.元素分类