样式 font-style: oblique(偏斜体) italic(斜体) normal(正常)
行高 line-height: normal(正常) 单位:PX、PD、EM
粗细 font-weight: bold(粗体) lighter(细体) normal(正常)
色彩background-color: #FFFFFF
图片background-image: url()border-style: dotted(点线) dashed(虚线) solid(实线) double(双线) groove(凹槽) ridge(脊状) inset(边框) outset(边框)
类型list-style-type: disc(圆点) circle(圆圈) square(方块) decimal(数字) none(无)text-align:right/*文字右对齐*/
text-align:left/*文字左对齐*/
text-align:center/*文字居中对齐*/
text-align:justify/*文字分散对齐*/
vertical-align属性
vertical-align:top/*垂直向上对齐*/
vertical-align:bottom/*垂直向下对齐*/
vertical-align:middle/*垂直居中对齐*/
vertical-align:text-top/*文字垂直向上对齐*/
vertical-align:text-bottom/*文字垂直向下对齐*/这些都是比较常用的如果你要把样式做的很漂亮这些还是不够的自己去看看文档吧慢慢学习
一般用Dreamweaver,但要开实时视图,而且Photoshop处理文字和图片等素材时可以自动生成对应的CSS代码,粘过去就行,这招奇快。中文解释嘛,买本书查查就行,实在懒得买干脆W3School,这上面的教程虽然不适合学习,但适合作为速查手册用,全中文解释。关于CSS选择器,首先请看这里: CSS 选择器参考手册
通过以上,我们可以将CSS选择器分为以下几种:
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
示例:
说明:以下E表示元素,attr表示属性,val表示属性的值。
说明:以下E表示元素
示例:
示例:
示例:
示例:
E:not(s) ,匹配不符合当前选择器的任何元素
示例:
E:target ,匹配文档中特定"id"点击后的效果
示例:
这里我们简单讨论下后代元素选择器和子元素选择器的区别
示例
CSS优先级是指CSS样式在浏览器中被解析的 先后顺序 。
多重样式(Mutiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是多重样式的使用情况。
一般情况下,( 外部 样式)External style sheet <( 内部 样式)Internal style sheet <( 内联 样式)Inline style
例外 :如果外部样式放在内部样式的后面,则外部样式将会覆盖内部样式。
示例:
给不同的选择器分配不同的权值
解释:
示例
结果:标签内的数据显示为蓝色。
比较样式的优先级是,只需统计不同选择器的个数,然后与对应的权值相乘即可。根据结果便可得出优先级。
看到这里,有些同学是不是对!important有点迷惑呀 为什么有了它,就优先级最高呐 下面我们再来详细讲一讲!important~
!important 是CSS1就定义的语法,作用是提高指定样式的应用优先权。
语法格式: {cssRule !important} ,即写在定义的最后面,例如: box { color: red !important}
声明了 !important 的样式,具有最高的优先级,相当于写在最下面(最后定义)
IE 6.0 不完全 支持!important
IE支持重定义中的!important,例如:
你将会发现定义了样式 class="yuanxin" 时,在IE下,字体显示为红色(#e00)。
但不支持同一定义中的 !important 。例如:
此时在IE6下不支持,你将会发现定义了样式 class="yuanxin" 时,字体显示为黑色(#000)。
解释 :
important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0认为!important优先级较高,否则当含!important的样式属性被同一个{}里的样式覆盖时,IE 6.0认为!important较低!
再举一个例子:
因为IE 6.0一直都不完全支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别利用!important,我们可以针对IE和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important。
完。
总结内容参考以下:
w3school_CSS 选择器参考手册
阮一峰_CSS选择器笔记
css选择器优先级深入理解
CSS 的优先级机制[总结]
十分感谢你们的分享 n(*≧▽≦*)n
注:原文章首发于: CSS选择器、优先级以及!important知识总结 ,现迁移至此。
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>